Update

assets/icons/close_big.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z" fill="#2E3A59"/>
+</svg>

manifest.json

@@ -3,10 +3,10 @@
   "name": "Problematyczne requesty",
   "version": "1.0",
 
-  "description": "Adds a red border to all webpages matching mozilla.org.",
+  "description": "",
 
   "sidebar_action": {
-    "default_title": "ICD Skaner",
+    "default_title": "ICD",
     "default_panel": "sidebar/sidebar.html",
     "default_icon": "sidebar_icon.png"
   },

options.scss

@@ -0,0 +1,30 @@
+@import './sidebar/colors.scss';
+
+.options-container {
+    padding-top: 0.5rem;
+    span {
+        color: $mid-grey;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    fieldset {
+        padding: 0.5rem 0;
+        border: none;
+        display: flex;
+        flex-flow: column;
+
+        .label-checkbox {
+            cursor: pointer;
+            margin-left: 0.5rem;
+        }
+
+        .input-container{
+            padding-bottom: .25rem;
+        }
+
+        #minValueLength {
+            width: 3rem;
+        }
+    }
+}

options.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React from 'react';
+import './options.scss';
 
 export default function Options({
     minValueLength,
@@ -7,6 +8,8 @@ export default function Options({
     setCookiesOnly,
     cookiesOrOriginOnly,
     setCookiesOrOriginOnly,
+    readWarningDataDialog,
+    setReadWarningDataDialog,
 }: {
     minValueLength: number;
     setMinValueLength: (n: number) => void;
@@ -14,37 +17,80 @@ export default function Options({
     setCookiesOnly: (b: boolean) => void;
     cookiesOrOriginOnly: boolean;
     setCookiesOrOriginOnly: (b: boolean) => void;
+    readWarningDataDialog: string;
+    setReadWarningDataDialog: (s: string) => void;
 }) {
     return (
+        <div className="options-container">
+            <span>Ustawienia interfejsu</span>
             <fieldset>
-      <h3>Zaawansowane ustawienia 💛</h3>
+                <div className="input-container">
+                    <input
+                        type="checkbox"
+                        id="readWarningDataDialog"
+                        checked={readWarningDataDialog != '1'}
+                        onChange={(e) => {
+                            setReadWarningDataDialog(
+                                e.target.checked ? '0' : '1'
+                            );
+                            localStorage.setItem(
+                                'readWarningDataDialog',
+                                e.target.checked ? '0' : '1'
+                            );
+                        }}
+                    />
+                    <label
+                        className="label-checkbox"
+                        htmlFor="readWarningDataDialog"
+                    >
+                        Wyświetlaj informację o pozyskiwanych danych
+                    </label>
+                </div>
+            </fieldset>
+            <span>Ustawienia zaawansowane</span>
+            <fieldset>
+                <div className="input-container">
                     <label htmlFor="minValueLength">
-        Pokazuj tylko wartości o długości co najmniej{" "}
+                        Pokazuj tylko wartości o długości co najmniej{' '}
                     </label>
                     <input
                         type="number"
                         id="minValueLength"
                         value={minValueLength}
-        onChange={(e) => setMinValueLength(parseInt(e.target.value))}
+                        onChange={(e) =>
+                            setMinValueLength(parseInt(e.target.value))
+                        }
                     />
-      <br />
+                </div>
+                <div className="input-container">
                     <input
                         type="checkbox"
                         id="cookiesOnly"
                         checked={cookiesOnly}
                         onChange={(e) => setCookiesOnly(e.target.checked)}
                     />
-      <label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
+                    <label className="label-checkbox" htmlFor="cookiesOnly">
-      <br />
+                        Pokazuj tylko dane z cookiesów
+                    </label>
+                </div>
+                <div className="input-container">
                     <input
                         type="checkbox"
                         id="cookiesOrOriginOnly"
                         checked={cookiesOrOriginOnly}
-        onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
+                        onChange={(e) =>
+                            setCookiesOrOriginOnly(e.target.checked)
+                        }
                     />
-      <label htmlFor="cookiesOrOriginOnly">
+                    <label
-        Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
+                        className="label-checkbox"
+                        htmlFor="cookiesOrOriginOnly"
+                    >
+                        Pokazuj tylko dane z cookiesów lub z częścią historii
+                        przeglądania
                     </label>
+                </div>
             </fieldset>
+        </div>
     );
 }

sidebar/colors.scss

@@ -3,3 +3,5 @@ $disabled-grey: #8a949f;
 $light-grey: #d1d1d1;
 $blue: #0048D9;
 $icd-yellow: #ffee2c;
+$pale-yellow: #fff8e5;
+$contrast-yellow: #ffb900;

sidebar/sidebar.scss

@@ -79,4 +79,30 @@
             }
         }
     }
+
+    .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: $mid-grey;
+            line-height: 1.25rem;
+            background: transparent;
+            padding: 0.5rem 0.5rem;
+            display: flex;
+            align-self: flex-start;
+        }
+    }
 }

sidebar/sidebar.tsx

@@ -9,6 +9,7 @@ import SettingsIcon from '../assets/icons/settings.svg';
 import TrashIcon from '../assets/icons/trash_full.svg';
 import MailIcon from '../assets/icons/mail.svg';
 import ShortLeftIcon from '../assets/icons/short_left.svg';
+import CloseBigIcon from '../assets/icons/close_big.svg';
 
 async function getCurrentTab() {
     const [tab] = await browser.tabs.query({
@@ -30,6 +31,9 @@ const Sidebar = () => {
         useState<boolean>(false);
     const [counter, setCounter] = useEmitter(getMemory());
     const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
+    const [readWarningDataDialog, setReadWarningDataDialog] = useState<
+        string | null
+    >(localStorage.getItem('readWarningDataDialog'));
 
     useEffect(() => {
         const listener = async (data: any) => {
@@ -91,12 +95,9 @@ const Sidebar = () => {
                 )}
             </header>
 
-            <nav>
             {stolenDataView ? (
-                    <Fragment>
+                <nav>
-                        <button
+                    <button onClick={() => setStolenDataView(!stolenDataView)}>
-                            onClick={() => setStolenDataView(!stolenDataView)}
-                        >
                         {/* {stolenDataView ? 'Options' : 'Data'}
                          */}
                         <SettingsIcon width={20} height={20} />
@@ -151,12 +152,34 @@ const Sidebar = () => {
                             Utwórz wiadomość dla administratora tej witryny
                         </span>
                     </button>
-                    </Fragment>
-                ) : null}
                 </nav>
+            ) : null}
 
             <section>
                 {stolenDataView ? (
+                    <Fragment>
+                        {readWarningDataDialog != '1' ? (
+                            <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={() => {
+                                        setReadWarningDataDialog('1');
+                                        localStorage.setItem(
+                                            'readWarningDataDialog',
+                                            '1'
+                                        );
+                                    }}
+                                >
+                                    <CloseBigIcon width={16} height={16} />
+                                </button>
+                            </section>
+                        ) : null}
                         <StolenData
                             origin={origin}
                             refreshToken={counter}
@@ -165,6 +188,7 @@ const Sidebar = () => {
                             cookiesOnly={cookiesOnly}
                             cookiesOrOriginOnly={cookiesOrOriginOnly}
                         />
+                    </Fragment>
                 ) : (
                     <Options
                         minValueLength={minValueLength}
@@ -173,6 +197,8 @@ const Sidebar = () => {
                         setCookiesOnly={setCookiesOnly}
                         cookiesOrOriginOnly={cookiesOrOriginOnly}
                         setCookiesOrOriginOnly={setCookiesOrOriginOnly}
+                        readWarningDataDialog={readWarningDataDialog}
+                        setReadWarningDataDialog={setReadWarningDataDialog}
                     />
                 )}
             </section>

sidebar/stolen-data.tsx

@@ -83,7 +83,7 @@ export function StolenData({
                     Zaznacz automatycznie
                 </button> */}
 
-            <span>Domeny, które pozyskały informacje</span>
+            <span>Domeny oraz przesłane informacje</span>
 
             {clusters.map((cluster) => {
                 return (