Cleanup files, split sidebar and toolbar

2022-04-13 11:44:59 +02:00 · 2022-04-13 11:44:59 +02:00 · 39a7e34cb4
parent eed5aba0ec
commit 39a7e34cb4
42 changed files with 6121 additions and 195 deletions
--- a/README.md
+++ b/README.md
@ -15,6 +15,3 @@ Note: At the moment, we support Polish language because this extension generates
 3. `npm run build`
 4. The build code is located in the `lib/` directory

-![screenshot](./screenshot.png)
-![screenshot](./screenshot2.png)
-![screenshot](./screenshot3.png)
--- a/components/report-window/deduce-problems.tsx
+++ b/components/report-window/deduce-problems.tsx
@ -1,4 +1,4 @@
-import { RequestCluster } from '../request-cluster';
+import { RequestCluster } from '../../request-cluster';
 import { ParsedAnswers } from './parse-answers';
 import NoInformationAtAllProblem from './problems/no-information-at-all';
 import { Problem } from './problems/problem';
--- a/components/report-window/email-content.tsx
+++ b/components/report-window/email-content.tsx
@ -1,5 +1,5 @@
-import { RequestCluster } from '../request-cluster';
-import { getDate } from '../util';
+import { RequestCluster } from '../../request-cluster';
+import { getDate } from '../../util';
 import deduceProblems from './deduce-problems';
 import { Explainers } from './explainers';
 import { ParsedAnswers } from './parse-answers';
--- a/components/report-window/explainers.tsx
+++ b/components/report-window/explainers.tsx
--- a/components/report-window/generate-survey-questions.ts
+++ b/components/report-window/generate-survey-questions.ts
--- a/components/report-window/generate-survey.ts
+++ b/components/report-window/generate-survey.ts
--- a/components/report-window/har-converter.tsx
+++ b/components/report-window/har-converter.tsx
@ -1,7 +1,7 @@
 import React from 'react';
-import { HAREntry } from '../extended-request';
-import { StolenDataEntry } from '../stolen-data-entry';
-import { getshorthost, unique } from '../util';
+import { HAREntry } from '../../extended-request';
+import { StolenDataEntry } from '../../stolen-data-entry';
+import { getshorthost, unique } from '../../util';

 function handleNewFile(
    element: HTMLInputElement,
--- a/components/report-window/parse-answers.ts
+++ b/components/report-window/parse-answers.ts
--- a/components/report-window/problems/no-information-at-all.tsx
+++ b/components/report-window/problems/no-information-at-all.tsx
--- a/components/report-window/problems/problem.tsx
+++ b/components/report-window/problems/problem.tsx
@ -1,4 +1,4 @@
-import { RequestCluster } from '../../request-cluster';
+import { RequestCluster } from '../../../request-cluster';
 import { ExplainerKey } from '../explainers';
 import { ParsedAnswers } from '../parse-answers';

--- a/components/report-window/problems/unlawful-cookies.tsx
+++ b/components/report-window/problems/unlawful-cookies.tsx
@ -1,5 +1,5 @@
-import { RequestCluster } from '../../request-cluster';
-import { wordlist } from '../../util';
+import { RequestCluster } from '../../../request-cluster';
+import { wordlist } from '../../../util';
 import { ExplainerKey } from '../explainers';
 import { ParsedAnswers } from '../parse-answers';
 import { v } from '../verbs';
--- a/components/report-window/problems/unlawful-data.tsx
+++ b/components/report-window/problems/unlawful-data.tsx
@ -1,4 +1,4 @@
-import { RequestCluster } from '../../request-cluster';
+import { RequestCluster } from '../../../request-cluster';
 import { ExplainerKey } from '../explainers';
 import { ParsedAnswers, ParsedHostAnswers } from '../parse-answers';
 import { v } from '../verbs';
--- a/components/report-window/questions.tsx
+++ b/components/report-window/questions.tsx
--- a/components/report-window/raw-answers.ts
+++ b/components/report-window/raw-answers.ts
--- a/components/report-window/report-window.html
+++ b/components/report-window/report-window.html
@ -3,7 +3,7 @@
    <head>
        <meta charset="utf-8" />
        <title>Treść maila do zgłoszenia</title>
-        <link rel="stylesheet" href="/lib/report-window/report-window.css" />
+        <link rel="stylesheet" href="/lib/components/report-window/report-window.css" />
        <link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
        <link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
    </head>
@ -12,6 +12,6 @@
        <div id="app"></div>
        <script src="/node_modules/react/umd/react.development.js"></script>
        <script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
-        <script src="/lib/report-window/report-window.js"></script>
+        <script src="/lib/components/report-window/report-window.js"></script>
    </body>
 </html>
--- a/components/report-window/report-window.scss
+++ b/components/report-window/report-window.scss
@ -1,5 +1,5 @@
-@import '../sidebar/fonts.scss';
-@import '../sidebar/colors.scss';
+@import './../../styles/colors.scss';
+// @import './../../styles/fonts';

 html {
   font-size: 1rem;
--- a/components/report-window/report-window.tsx
+++ b/components/report-window/report-window.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { getMemory } from '../memory';
-import { useEmitter } from '../util';
+import { getMemory } from '../../memory';
+import { useEmitter } from '../../util';

 import './report-window.scss';
 import Questions from './questions';
--- a/components/report-window/use-survey.ts
+++ b/components/report-window/use-survey.ts
--- a/components/report-window/verbs.ts
+++ b/components/report-window/verbs.ts
--- a/components/sidebar/sidebar.html
+++ b/components/sidebar/sidebar.html
@ -12,15 +12,15 @@
    <div id="app"></div>
    <link
        rel="stylesheet"
-        href="/lib/sidebar/global.css"
+        href="/lib/styles/global.css"
    >
    <link
        rel="stylesheet"
-        href="/lib/sidebar/sidebar.css"
+        href="/lib/components/sidebar/sidebar.css"
    >
 	<script src="/node_modules/react/umd/react.production.min.js"></script>
 	<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
-    <script src="/lib/sidebar/sidebar.js"></script>
+    <script src="/lib/components/sidebar/sidebar.js"></script>

 </body>

--- a/components/sidebar/sidebar.scss
+++ b/components/sidebar/sidebar.scss
@ -1,4 +1,4 @@
-@import './colors.scss';
+@import '../../styles/colors.scss';

 .sidebar {
    .header {
@ -10,7 +10,7 @@
        border-bottom: 1px solid $light-grey;
        position: sticky;
        top: 0;
-        background: #fff;
+        background: #ffffff;
        z-index: 1;

        &--without-logo {
--- a/components/sidebar/sidebar.tsx
+++ b/components/sidebar/sidebar.tsx
@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Options from '../options';
+import Options from '../../options';
 import { StolenData } from './stolen-data';
-import { getshorthost, useEmitter } from '../util';
-import { getMemory } from '../memory';
+import { getshorthost, useEmitter } from '../../util';
+import { getMemory } from '../../memory';
 browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });

 async function getCurrentTab() {
@ -14,14 +14,8 @@ async function getCurrentTab() {
    return tab;
 }

-function setDomainsNumber(counter: number) {
-    browser.browserAction.setBadgeText({ text: counter.toString() });
-    browser.browserAction.setTitle({
-        title: `Rentgen - ${counter !== 1 ? counter + ' podmiotów' : counter + ' podmiot'} `,
-    });
-}

-import './global.scss';
+import './../../styles/global.scss';
 import './sidebar.scss';

 const Sidebar = () => {
@ -61,6 +55,7 @@ const Sidebar = () => {
            }
            setOrigin(url.origin);
        };
+        
        browser.tabs.onUpdated.addListener(listener);
        listener();
        return () => {
@ -74,7 +69,6 @@ const Sidebar = () => {
                return setMarksOccurrence(true);
            }
        }
-        setDomainsNumber(Object.values(getMemory().getClustersForOrigin(origin)).length);

        return setMarksOccurrence(false);
    }, [eventCounts['*'], origin]);
--- a/components/sidebar/stolen-data-cluster.scss
+++ b/components/sidebar/stolen-data-cluster.scss
@ -1,4 +1,4 @@
-@import './colors.scss';
+@import '../../styles/colors.scss';

 .stolen-data-cluster-container {
    .domains-container {
--- a/components/sidebar/stolen-data-cluster.tsx
+++ b/components/sidebar/stolen-data-cluster.tsx
@ -1,8 +1,8 @@
 import React from 'react';
-import { getMemory } from '../memory';
-import { StolenDataEntry } from '../stolen-data-entry';
+import { getMemory } from '../../memory';
+import { StolenDataEntry } from '../../stolen-data-entry';

-import { maskString, useEmitter } from '../util';
+import { maskString, useEmitter } from '../../util';

 import './stolen-data-cluster.scss';

--- a/components/sidebar/stolen-data.scss
+++ b/components/sidebar/stolen-data.scss
@ -1,4 +1,4 @@
-@import './colors.scss';
+@import '../../styles/colors.scss';

 .stolen-data-container {
    padding-top: .5rem;
--- a/components/sidebar/stolen-data.tsx
+++ b/components/sidebar/stolen-data.tsx
@ -1,5 +1,5 @@
-import { getMemory } from '../memory';
-import { RequestCluster } from '../request-cluster';
+import { getMemory } from '../../memory';
+import { RequestCluster } from '../../request-cluster';

 import StolenDataCluster from './stolen-data-cluster';

--- a/components/sidebar/tab-dropdown.tsx
+++ b/components/sidebar/tab-dropdown.tsx
--- a/components/toolbar/toolbar.html
+++ b/components/toolbar/toolbar.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <style>
+
+    </style>
+</head>
+
+<body>
+    <div id="toolbar"></div>
+    <link
+        rel="stylesheet"
+        href="/lib/styles/global.css"
+    >
+    <link
+        rel="stylesheet"
+        href="/lib/components/toolbar/toolbar.css"
+    >
+	<script src="/node_modules/react/umd/react.production.min.js"></script>
+	<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
+    <script src="/lib/components/toolbar/toolbar.js"></script>
+
+</body>
+
+</html>
--- a/components/toolbar/toolbar.scss
+++ b/components/toolbar/toolbar.scss
@ -0,0 +1,117 @@
+@import '../../styles/colors.scss';
+
+.toolbar {
+    padding: 0 .5rem;
+
+    .header {
+        display: grid;
+        grid-template-columns: 6.67rem 1fr 1.25rem;
+        align-items: center;
+        max-height: 3.5rem;
+        min-height: 3.5rem;
+        border-bottom: 1px solid $light-grey;
+        position: sticky;
+        top: 0;
+        background: #ffffff;
+        z-index: 1;
+
+        &--without-logo {
+            grid-template-columns: 1fr 1.25rem;
+        }
+
+        .webpage-metadata {
+            word-break: break-all;
+            display: flex;
+            flex-flow: column;
+            flex-wrap: nowrap;
+            font-size: 0.875rem;
+            font-weight: 600;
+            justify-content: center;
+            padding-left: 1rem;
+            color: #000;
+
+            &--without-logo {
+                padding-left: 0;
+            }
+
+            &--hyperlink {
+                font-weight: 400;
+                color: $ultra-black-color;
+                max-height: 2rem;
+                overflow: hidden;
+            }
+        }
+
+        button {
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            padding: 0;
+        }
+    }
+
+    nav {
+        padding: 0.25rem 0;
+        border-bottom: 1px solid $light-grey;
+
+        button {
+            border: none;
+            cursor: pointer;
+            color: $ultra-black-color;
+            padding: 0.25rem 0rem;
+            display: flex;
+            flex-wrap: nowrap;
+            line-height: 1.25rem;
+            background: #fff;
+            width: 100%;
+
+            &:hover {
+                color: #000;
+                text-decoration: underline;
+                svg path {
+                    fill: #000;
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: $disabled-grey;
+                svg path {
+                    fill: $disabled-grey;
+                }
+            }
+
+            span {
+                padding-left: 0.5rem;
+                font-size: 0.875rem;
+                font-weight: 500;
+            }
+        }
+    }
+
+    .warning-container {
+        background-color: $pale-yellow;
+        border-left: 4px solid $contrast-yellow;
+        margin-top: 0.5rem;
+        font-size: 0.875rem;
+        display: grid;
+        grid-template-columns: calc(100% - 2rem) 2rem;
+        align-items: flex-start;
+
+        span {
+            padding: 1rem;
+        }
+
+        button {
+            justify-content: flex-end;
+            border: none;
+            cursor: pointer;
+            color: $ultra-black-color;
+            line-height: 1.25rem;
+            background: transparent;
+            padding: 0.5rem 0.5rem;
+            display: flex;
+            align-self: flex-start;
+        }
+    }
+}
--- a/components/toolbar/toolbar.tsx
+++ b/components/toolbar/toolbar.tsx
@ -0,0 +1,204 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useEmitter } from '../../util';
+import { getMemory } from '../../memory';
+browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
+
+async function getCurrentTab() {
+    const [tab] = await browser.tabs.query({
+        active: true,
+        windowId: browser.windows.WINDOW_ID_CURRENT,
+    });
+    return tab;
+}
+
+import './../../styles/global.scss';
+import './toolbar.scss';
+
+const Toolbar = () => {
+    const [origin, setOrigin] = React.useState<string | null>(null);
+    const [minValueLength, setMinValueLength] = React.useState<number | null>(
+        localStorage.getItem('minValueLength') === null
+            ? 7
+            : (localStorage.getItem('minValueLength') as unknown as number)
+    );
+    const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
+    const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
+    const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
+    const [eventCounts, setEventCounts] = useEmitter(getMemory());
+    const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
+    const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
+        localStorage.getItem('warningDataDialogAck') === null
+            ? true
+            : localStorage.getItem('warningDataDialogAck') == 'true'
+            ? true
+            : false
+    );
+    const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
+        localStorage.getItem('logoVisibility') === null
+            ? false
+            : localStorage.getItem('logoVisibility') == 'true'
+            ? true
+            : false
+    );
+
+    React.useEffect(() => {
+        const listener = async () => {
+            console.log('tab change!');
+            const tab = await getCurrentTab();
+            const url = new URL(tab.url);
+            if (url.origin.startsWith('moz-extension')) {
+                return;
+            }
+            setOrigin(url.origin);
+        };
+
+        browser.tabs.onUpdated.addListener(listener);
+        listener();
+        return () => {
+            browser.tabs.onUpdated.removeListener(listener);
+        };
+    });
+
+    React.useEffect(() => {
+        for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
+            if (cluster.hasMarks()) {
+                return setMarksOccurrence(true);
+            }
+        }
+
+        return setMarksOccurrence(false);
+    }, [eventCounts['*'], origin]);
+
+    return (
+        <div className="toolbar">
+            <header className={logoVisibility ? 'header' : 'header header--without-logo'}>
+                <img
+                    src="../assets/logo-internet-czas-dzialac.svg"
+                    height={40}
+                    style={!logoVisibility ? { display: 'none' } : null}
+                ></img>
+                <div
+                    className={
+                        logoVisibility
+                            ? 'webpage-metadata'
+                            : 'webpage-metadata webpage-metadata--without-logo'
+                    }
+                >
+                    {origin ? (
+                        <>
+                            <span>Analiza strony</span>
+                            <span className="webpage-metadata--hyperlink">{origin}</span>
+                        </>
+                    ) : (
+                        <span>Przejdź do wybranej strony internetowej</span>
+                    )}
+                </div>
+                {stolenDataView ? (
+                    <a href="https://internet-czas-dzialac.pl">
+                        <img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
+                    </a>
+                ) : (
+                    <button onClick={() => setStolenDataView(true)}>
+                        <img src="/assets/icons/short_left.svg" width="20" height="20" />
+                    </button>
+                )}
+            </header>
+
+            {stolenDataView ? (
+                <nav>
+                    <button onClick={() => setStolenDataView(!stolenDataView)}>
+                        <img src="/assets/icons/settings.svg" width="20" height="20" />
+                        <span>Ustawienia</span>
+                    </button>
+                    <button
+                        onClick={() => {
+                            getMemory().removeRequestsFor(origin);
+                            getMemory().emit('change', false, origin, 'clicked trash');
+                            setMarksOccurrence(false);
+                        }}
+                    >
+                        <img src="/assets/icons/trash_full.svg" width="20" height="20" />
+                        <span>Wyczyść historię wtyczki</span>
+                    </button>
+                    <button
+                        onClick={() => {
+                            getMemory().removeCookiesFor(origin);
+                            getMemory().emit('change', false, origin, 'clicked clear cookies');
+                            setMarksOccurrence(false);
+                        }}
+                    >
+                        <img src="/assets/icons/cookie.svg" width="20" height="20" />
+                        <span>Wyczyść ciasteczka</span>
+                    </button>
+                    <button
+                        disabled={!marksOccurrence}
+                        title={
+                            marksOccurrence
+                                ? 'Kliknij, aby wygenerować wiadomość'
+                                : 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
+                        }
+                        onClick={() => {
+                            const params = [
+                                'height=' + screen.height,
+                                'width=' + screen.width,
+                                'fullscreen=yes',
+                            ].join(',');
+                            window.open(
+                                `/report-window/report-window.html?origin=${origin}`,
+                                'new_window',
+                                params
+                            );
+                        }}
+                    >
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M20 20H4C2.89543 20 2 19.1046 2 18V5.913C2.04661 4.84255 2.92853 3.99899 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
+                                fill="#2E3A59"
+                            />
+                        </svg>
+
+                        <span>Utwórz wiadomość dla administratora witryny</span>
+                    </button>
+                </nav>
+            ) : null}
+
+            <section>
+                {stolenDataView ? (
+                    <>
+                        {warningDataDialogAck ? (
+                            <section className="warning-container">
+                                <span>
+                                    <strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
+                                    informacja jest daną osobową. Niektóre z podanych domen mogą
+                                    należeć do właściciela strony i nie reprezentować podmiotów
+                                    trzecich.
+                                </span>
+                                <button
+                                    onClick={() => {
+                                        setWarningDataDialogAck(false);
+                                        localStorage.setItem(
+                                            'warningDataDialogAck',
+                                            false as unknown as string
+                                        );
+                                    }}
+                                >
+                                    <img src="/assets/icons/close_big.svg" width="16" height="16" />
+                                </button>
+                            </section>
+                        ) : null}
+                        <div>stolen data</div>
+                    </>
+                ) : null}
+            </section>
+        </div>
+    );
+};
+
+ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));
--- a/esbuild.config.js
+++ b/esbuild.config.js
@ -44,9 +44,10 @@ let skipReactImports = {
 esbuild
    .build({
        entryPoints: [
-            'sidebar/sidebar.tsx',
+            'components/toolbar/toolbar.tsx',
+            'components/sidebar/sidebar.tsx',
            'test.ts',
-            'report-window/report-window.tsx',
+            'components/report-window/report-window.tsx',
            'background.ts',
        ],
        bundle: true,
--- a/manifest.json
+++ b/manifest.json
@ -19,7 +19,7 @@
    "browser_action": {
        "default_icon": "assets/icon-addon.svg",
        "default_title": "Rentgen",
-        "default_popup": "sidebar/sidebar.html"
+        "default_popup": "components/toolbar/toolbar.html"
    },
    "icons": {
        "16": "assets/icon-addon.svg",
--- a/memory.ts
+++ b/memory.ts
@ -3,6 +3,14 @@ import { getshorthost, makeThrottle } from './util';
 import { EventEmitter } from 'events';
 import { RequestCluster } from './request-cluster';

+function setDomainsNumber(counter: number, tabId: number) {
+    browser.browserAction.setBadgeText({ text: counter.toString(), tabId });
+    browser.browserAction.setTitle({
+        title: `Rentgen - liczba wykrytych podmiotów: ${counter}`,
+        tabId,
+    });
+}
+
 export default class Memory extends EventEmitter {
    origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
    private throttle = makeThrottle(100);
@ -21,6 +29,12 @@ export default class Memory extends EventEmitter {
        }
        this.origin_to_history[request.origin][shorthost].add(request);
        this.emit('change', false, shorthost, 'registered request(shorthost emit)');
+
+        console.log(this.getClustersForOrigin(request.origin));
+        setDomainsNumber(
+            Object.values(this.getClustersForOrigin(request.origin)).length,
+            request.tabId
+        );
    }

    constructor() {
--- a/options.scss
+++ b/options.scss
@ -1,4 +1,4 @@
-@import './sidebar/colors.scss';
+@import './styles/colors.scss';

 .options-container {
    padding-top: 0.5rem;
--- a/package-lock.json
+++ b/package-lock.json
--- a/screenshot.png
+++ b/screenshot.png
--- a/screenshot2.png
+++ b/screenshot2.png
--- a/screenshot3.png
+++ b/screenshot3.png
--- a/sidebar/fonts.scss
+++ b/sidebar/fonts.scss
@ -1,49 +0,0 @@
-@font-face {
-    font-family: 'Fira Code';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code VF';
-    src: url('./../assets/fonts/fira-code/woff2/FiraCode-VF.woff2')
-            format('woff2-variations'),
-        url('./../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
-    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
-    font-weight: 300 700;
-    font-style: normal;
-}
--- a/sidebar/colors.scss
+++ b/sidebar/colors.scss
--- a/styles/fonts.scss
+++ b/styles/fonts.scss
@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'Fira Code';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
+        url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
+        url('../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
+        url('../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
+        url('../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
+        url('../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code VF';
+    src: url('../assets/fonts/fira-code/woff2/FiraCode-VF.woff2') format('woff2-variations'),
+        url('../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
+    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+    font-weight: 300 700;
+    font-style: normal;
+}
--- a/sidebar/global.scss
+++ b/sidebar/global.scss
@ -11,7 +11,9 @@
 }

 body {
-    min-width: 24rem;
+    width: 400px;
+    height: 600px;
+    overflow-x: hidden;
 }

 html {