Add OpenSans

components/toolbar/toolbar.scss

@@ -1,11 +1,11 @@
 @import '../../styles/colors.scss';
 
 .toolbar {
-    padding: 0 .5rem;
+    padding: 0 0.75rem;
 
     .header {
         display: grid;
-        grid-template-columns: 6.67rem 1fr 1.25rem;
+        grid-template-columns: 2.75rem 1fr 1.25rem;
         align-items: center;
         max-height: 3.5rem;
         min-height: 3.5rem;
@@ -15,10 +15,6 @@
         background: #ffffff;
         z-index: 1;
 
-        &--without-logo {
-            grid-template-columns: 1fr 1.25rem;
-        }
-
         .webpage-metadata {
             word-break: break-all;
             display: flex;
@@ -30,10 +26,6 @@
             padding-left: 1rem;
             color: #000;
 
-            &--without-logo {
-                padding-left: 0;
-            }
-
             &--hyperlink {
                 font-weight: 400;
                 color: $ultra-black-color;
@@ -50,42 +42,19 @@
         }
     }
 
-    nav {
+    .summary {
-        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;
+        .counters{
-            line-height: 1.25rem;
+            display: flex;
-            background: #fff;
+            .counter{
-            width: 100%;
+                font-size: 1rem;
+                font-weight: 900;
+            }
+        }
+        .big-counter {
+            font-size: 6rem;
+            font-size: 900;
 
-            &: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;
-            }
         }
     }
 

components/toolbar/toolbar.tsx

@@ -72,12 +72,8 @@ const Toolbar = () => {
 
     return (
         <div className="toolbar">
-            <header className={logoVisibility ? 'header' : 'header header--without-logo'}>
+            <header className="header">
-                <img
+                <img src="../../assets/icon-addon.svg" height={32}></img>
-                    src="../assets/logo-internet-czas-dzialac.svg"
-                    height={40}
-                    style={!logoVisibility ? { display: 'none' } : null}
-                ></img>
                 <div
                     className={
                         logoVisibility
@@ -105,97 +101,39 @@ const Toolbar = () => {
                 )}
             </header>
 
-            {stolenDataView ? (
+            <section className="summary">
-                <nav>
+                <div>
-                    <button onClick={() => setStolenDataView(!stolenDataView)}>
+                    <div className="counters">
-                        <img src="/assets/icons/settings.svg" width="20" height="20" />
+                        <div className="counter counter--browser-history">12</div>
-                        <span>Ustawienia</span>
+                        <div className="counter counter--cookies">21</div>
-                    </button>
+                    </div>
-                    <button
+                    <div className="big-counter">33</div>
-                        onClick={() => {
+                </div>
-                            getMemory().removeRequestsFor(origin);
+                <p>Liczba wykrytych domen podmiotów trzecich</p>
-                            getMemory().emit('change', false, origin, 'clicked trash');
+            </section>
-                            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>
+            <section className="details">
-                    </button>
+                <p>
-                </nav>
+                    Strona wp.pl wysłała informacje o części Twojej historii przeglądania do
-            ) : null}
+                    facebook.com, adnsx.com (i 43 innych).
+                </p>
+                <p>
+                    Dokonała też zapisu i odczytu plików Cookie dla domen doubleclick.google.net,
+                    3dsio.com (i 59 innych).
+                </p>
+            </section>
 
-            <section>
-                {stolenDataView ? (
-                    <>
-                        {warningDataDialogAck ? (
             <section className="warning-container">
                 <span>
-                                    <strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
+                    <strong>Takie przetwarzanie danych może być niezgodne z prawem.</strong> Kliknij
-                                    informacja jest daną osobową. Niektóre z podanych domen mogą
+                    w przycisk <i>Generuj raport</i>, aby pomóc ustalić, czy ta strona nie narusza
-                                    należeć do właściciela strony i nie reprezentować podmiotów
+                    RODO.
-                                    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>
+            <section className="actions">
-                    </>
+                <a href="">Pokaż szczegóły</a>
-                ) : null}
+                <button>Generuj raport</button>
             </section>
         </div>
     );

styles/fonts.scss

@@ -46,3 +46,45 @@
     font-weight: 300 700;
     font-style: normal;
 }
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-Light-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-Italic-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-Semibold-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-Bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans';
+    src: url('../assets/fonts/open-sans/OpenSans-ExtraBold-webfont.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+}

styles/global.scss

@@ -18,8 +18,7 @@ body {
 
 html {
     font-size: 1rem;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    font-family: 'OpenSans';
-        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 button {