Final touches

options.scss

@@ -9,7 +9,7 @@
     }
 
     fieldset {
-        padding: 0.5rem 0;
+        padding: 0.5rem 0 1rem;
         border: none;
         display: flex;
         flex-flow: column;
@@ -20,7 +20,7 @@
         }
 
         .input-container {
-            padding-bottom: .25rem;
+            padding-bottom: 0.25rem;
         }
 
         #minValueLength {

options.tsx

@@ -8,8 +8,8 @@ export default function Options({
     setCookiesOnly,
     cookiesOrOriginOnly,
     setCookiesOrOriginOnly,
-    readWarningDataDialog,
+    warningDataDialogAck,
-    setReadWarningDataDialog,
+    setWarningDataDialogAck,
     logoVisibility,
     setLogoVisibility,
 }: {
@@ -19,47 +19,25 @@ export default function Options({
     setCookiesOnly: (b: boolean) => void;
     cookiesOrOriginOnly: boolean;
     setCookiesOrOriginOnly: (b: boolean) => void;
-    readWarningDataDialog: string;
+    warningDataDialogAck: boolean;
-    setReadWarningDataDialog: (s: string) => void;
+    setWarningDataDialogAck: (b: boolean) => void;
-    logoVisibility: string;
+    logoVisibility: boolean;
-    setLogoVisibility: (s: string) => void;
+    setLogoVisibility: (b: boolean) => void;
 }) {
     return (
         <div className="options-container">
-            <span>Ustawienia interfejsu</span>
+            <span>Interfejs</span>
             <fieldset>
-                <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 komunikat o pozyskiwanych danych
-                    </label>
-                </div>
                 <div className="input-container">
                     <input
                         type="checkbox"
                         id="logoVisibility"
-                        checked={logoVisibility != '0'}
+                        checked={logoVisibility}
                         onChange={(e) => {
-                            setLogoVisibility(e.target.checked ? '1' : '0');
+                            setLogoVisibility(e.target.checked);
                             localStorage.setItem(
                                 'logoVisibility',
-                                e.target.checked ? '1' : '0'
+                                e.target.checked as unknown as string
                             );
                         }}
                     />
@@ -67,6 +45,26 @@ export default function Options({
                         Wyświetlaj logo <i>Internet. Czas działać!</i>
                     </label>
                 </div>
+                <div className="input-container">
+                    <input
+                        type="checkbox"
+                        id="warningDataDialogAck"
+                        checked={warningDataDialogAck}
+                        onChange={(e) => {
+                            setWarningDataDialogAck(e.target.checked);
+                            localStorage.setItem(
+                                'warningDataDialogAck',
+                                e.target.checked as unknown as string
+                            );
+                        }}
+                    />
+                    <label
+                        className="label-checkbox"
+                        htmlFor="warningDataDialogAck"
+                    >
+                        Wyświetlaj komunikat o pozyskiwanych danych
+                    </label>
+                </div>
             </fieldset>
             <span>Ustawienia zaawansowane</span>
             <fieldset>

sidebar/sidebar.scss

@@ -3,17 +3,20 @@
 .sidebar {
     .header {
         display: grid;
-        grid-template-columns: 6.67rem 1fr 1rem;
+        grid-template-columns: 6.67rem 1fr 1.25rem;
-        align-items: flex-start;
+        align-items: center;
         max-height: 3.5rem;
-        padding-top: 0.5rem;
+        min-height: 3.5rem;
-        padding-bottom: 0.5rem;
         border-bottom: 1px solid $light-grey;
         position: sticky;
         top: 0;
         background: #fff;
         z-index: 1;
 
+        &--without-logo {
+            grid-template-columns: 1fr 1.25rem;
+        }
+
         .webpage-metadata {
             word-break: break-all;
             display: flex;
@@ -24,7 +27,10 @@
             justify-content: center;
             padding-left: 1rem;
             color: #000;
-            // height: 1rem;
+
+            &--without-logo {
+                padding-left: 0;
+            }
 
             &--hyperlink {
                 font-weight: 400;

sidebar/sidebar.tsx

@@ -31,11 +31,19 @@ const Sidebar = () => {
         useState<boolean>(false);
     const [counter, setCounter] = useEmitter(getMemory());
     const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
-    const [readWarningDataDialog, setReadWarningDataDialog] = useState<
+    const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
-        string | null
+        localStorage.getItem('warningDataDialogAck') === null
-    >(localStorage.getItem('readWarningDataDialog'));
+            ? true
-    const [logoVisibility, setLogoVisibility] = useState<string | null>(
+            : localStorage.getItem('warningDataDialogAck') == 'true'
-        localStorage.getItem('setLogoVisibility')
+            ? true
+            : false
+    );
+    const [logoVisibility, setLogoVisibility] = useState<boolean>(
+        localStorage.getItem('logoVisibility') === null
+            ? true
+            : localStorage.getItem('logoVisibility') == 'true'
+            ? true
+            : false
     );
 
     useEffect(() => {
@@ -76,12 +84,23 @@ const Sidebar = () => {
           Wybierz aktywną kartę{" "}
         </button>
       </div> */}
-            <header className="header">
+            <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="webpage-metadata">
+                <div
+                    className={
+                        logoVisibility
+                            ? 'webpage-metadata'
+                            : 'webpage-metadata webpage-metadata--without-logo'
+                    }
+                >
                     {origin ? (
                         <Fragment>
                             <span>Analiza strony</span>
@@ -167,7 +186,7 @@ const Sidebar = () => {
             <section>
                 {stolenDataView ? (
                     <Fragment>
-                        {readWarningDataDialog != '1' ? (
+                        {warningDataDialogAck ? (
                             <section className="warning-container">
                                 <span>
                                     <strong>Uwaga!</strong> Niekoniecznie każda
@@ -178,10 +197,10 @@ const Sidebar = () => {
                                 </span>
                                 <button
                                     onClick={() => {
-                                        setReadWarningDataDialog('1');
+                                        setWarningDataDialogAck(false);
                                         localStorage.setItem(
-                                            'readWarningDataDialog',
+                                            'warningDataDialogAck',
-                                            '1'
+                                            false as unknown as string
                                         );
                                     }}
                                 >
@@ -206,8 +225,8 @@ const Sidebar = () => {
                         setCookiesOnly={setCookiesOnly}
                         cookiesOrOriginOnly={cookiesOrOriginOnly}
                         setCookiesOrOriginOnly={setCookiesOrOriginOnly}
-                        readWarningDataDialog={readWarningDataDialog}
+                        warningDataDialogAck={warningDataDialogAck}
-                        setReadWarningDataDialog={setReadWarningDataDialog}
+                        setWarningDataDialogAck={setWarningDataDialogAck}
                         logoVisibility={logoVisibility}
                         setLogoVisibility={setLogoVisibility}
                     />