Add minor UI fixes

components/report-window/email-content.scss

@@ -29,10 +29,13 @@ h1 {
     }
 
     &__content {
-        height: 70vh;
+        max-height: 50vh;
         overflow-y: scroll;
         padding: 1rem 2rem;
         color: $black-color;
+        a {
+            color: $ultra-black-color;
+        }
     }
 
     h2 {
@@ -44,3 +47,12 @@ h1 {
         font-size: calc(14 / 16 * 1rem);
     }
 }
+
+.greeting-text {
+    font-size: 1rem;
+
+    a {
+        color: $ultra-black-color;
+        font-weight: 700;
+    }
+}

components/report-window/email-content.tsx

@@ -5,7 +5,7 @@ import { Explainers } from './explainers';
 import { ParsedAnswers } from './parse-answers';
 import { v } from './verbs';
 import './email-content.scss';
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 declare var PLUGIN_NAME: string;
 declare var PLUGIN_URL: string;
@@ -28,18 +28,26 @@ export default function EmailContent({
                 .reduce((a, b) => a.concat(b), [])
         )
     ).map((explainer_key) => Explainers[explainer_key]);
+    const [copied, setCopy] = useState<boolean>(false);
+
+    function copyTextToClipboard() {
+        // Should be changed in the future to Clipboard API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#browser_compatibility)
+        let r = document.createRange();
+        r.selectNode(document.querySelector('.mail-container__content'));
+        window.getSelection().addRange(r);
+        document.execCommand('copy');
+        window.getSelection().removeAllRanges();
+        setCopy(true);
+    }
+
     return (
         <Fragment>
             <div className="generator-container">
                 <h1>Treść maila</h1>
                 <div className="mail-container">
                     <div className="mail-container__header">
-                        <div className="mail-container__header--control">
-                            <button>Kopiuj</button>
+                        <div className="mail-container__header--control"></div>
                     </div>
-                    </div>
-
-                    {/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
                     <article className="mail-container__content">
                         <p>Dzień dobry,</p>
                         <p>
@@ -69,6 +77,23 @@ export default function EmailContent({
                         </p>
                     </article>
                 </div>
+                <div className="buttons-container">
+                    <button className="sv_next_btn" onClick={() => copyTextToClipboard()}>
+                        {copied ? 'Skopiowano!' : 'Kopiuj treść wiadomości'}
+                    </button>
+                </div>
+                {copied ? (
+                    <section className="greeting-text">
+                        <strong>Przed Tobą ostatni krok! 😊</strong>
+                        <p>
+                            <a href="mailto:?subject=Zapytanie o przetwarzanie moich danych osobowych przez Państwa stronę">
+                                Przejdź do swojego klienta pocztowego
+                            </a>
+                            , załącz zrzuty ekranów, wklej treść wiadomości i wyślij ją do
+                            administratorów witryny {visited_url.split('/').slice(0, 3).join('/')}.
+                        </p>
+                    </section>
+                ) : null}
             </div>
         </Fragment>
     );

components/report-window/generate-survey-questions.ts

@@ -220,14 +220,15 @@ export default function generateSurveyQuestions(hosts: string[]) {
                         type: 'html',
                         visibleIf:
                             '{is_incognito_different} != "no" and ({popup_type} = "none" or {popup_type} = "page") ',
-                        html: /* HTML */ `Jeżeli w trybie incognito widzisz więcej okienek z
-                            informacjami o przetwarzaniu danych osobowych, wykonaj analizę w
-                            normalnym trybie ponownie - ale najpierw usuń pliki cookies tej strony.
+                        html: /* HTML */ `Jeżeli w trybie incognito {widzisz} więcej okienek z
+                            informacjami o przetwarzaniu danych osobowych, {wykonaj} analizę w
+                            normalnym trybie ponownie - ale najpierw {usuń} pliki cookies tej
+                            strony.
                             <a
                                 href="https://support.mozilla.org/pl/kb/usuwanie-ciasteczek-i-danych-stron-firefox?redirectslug=usuwanie-ciasteczek&redirectlocale=pl"
                                 target="_blank"
                             >
-                                Zobacz, jak to zrobić
+                                {Zobacz}, jak to zrobić
                             </a>`,
                     },
                     {
@@ -285,7 +286,7 @@ export default function generateSurveyQuestions(hosts: string[]) {
                             },
                             {
                                 value: 'yes',
-                                text: 'Nie. Muszę wykonać więcej czynności aby odmówić wszystkich zgód, albo opcja niewyrażenia zgody jest mało widoczna.',
+                                text: 'Nie. {Muszę} wykonać więcej czynności aby odmówić wszystkich zgód, albo opcja niewyrażenia zgody jest mało widoczna.',
                             },
                         ],
                     },
@@ -339,7 +340,7 @@ export default function generateSurveyQuestions(hosts: string[]) {
                         name: 'administrator_identity_available_before_choice',
                         isRequired: true,
                         visibleIf: '{popup_type} = "some_choice"',
-                        title: 'Czy przed podjęciem wyboru dot. {Twoich} danych masz możliwość poznać tożsamość administratora strony?',
+                        title: 'Czy przed podjęciem wyboru dot. {Twoich} danych {masz} możliwość poznać tożsamość administratora strony?',
                         choices: [
                             {
                                 value: 'yes',
@@ -363,10 +364,10 @@ export default function generateSurveyQuestions(hosts: string[]) {
                         name: 'policy_readable',
                         isRequired: true,
                         choices: [
-                            { value: 'yes', text: 'dostępna i czytelna' },
+                            { value: 'yes', text: 'Dostępna i czytelna' },
                             {
                                 value: 'entirely_obscured_by_popup',
-                                text: 'dostępna, ale nieczytelna. Zasłania ją całkowicie lub prawie całkowicie popup o RODO lub nie można się do niej doklikać bez podjęcia wyboru w okienku',
+                                text: 'Dostępna, ale nieczytelna. Zasłania ją całkowicie lub prawie całkowicie popup o RODO lub nie można się do niej doklikać bez podjęcia wyboru w okienku',
                             },
                             {
                                 value: 'cant_find',

components/report-window/report-window.scss

@@ -18,7 +18,6 @@ body {
 nav {
     position: sticky;
     top: 0;
-    // background-color: #fff;
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
@@ -53,6 +52,7 @@ h1 {
     position: sticky;
     top: 0;
     z-index: 1;
+    user-select: none;
 
     .webpage-metadata {
         word-break: break-all;

components/report-window/screenshot-generator.scss

@@ -11,16 +11,26 @@ h2 {
 }
 
 .images {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    width: 100%;
     grid-gap: 1rem;
-    flex-wrap: wrap;
-    margin: 2rem 0;
+    margin: 2rem 0 1rem;
+    max-height: 45vh;
+    overflow-y: scroll;
+    overflow-x: clip;
+    z-index: 1;
+    position: relative;
 }
 
 .generator-container {
     max-width: 100ex;
     margin: 0 auto;
     font-size: calc(14 / 16 * 1rem);
+
+    a {
+        color: $ultra-black-color;
+    }
 }
 
 .buttons-container {
@@ -39,18 +49,16 @@ h2 {
 }
 
 .browser {
-    height: 9.667rem;
-    width: 16rem;
+    height: 8.667rem;
     font-weight: 800 !important;
-    // box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
     color: $disabled-grey !important;
     border: 1px solid $disabled-grey;
     background-image: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
     animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
 
     &--filled {
-        background-size: contain;
-        background-position-y: 18px;
+        background-size: 100%;
+        background-position-y: 19px;
         animation: none;
 
         .browser__header {
@@ -83,6 +91,9 @@ h2 {
             font-weight: 400;
             padding-left: 0.25rem;
             color: #000;
+            overflow: visible;
+            word-break: break-all;
+            inline-size: 10rem;
         }
 
         &--controls {
@@ -92,6 +103,6 @@ h2 {
     }
 
     &__content {
-        height: 7.667rem;
+        height: 6.667rem;
     }
 }

components/report-window/screenshot-generator.tsx

@@ -59,6 +59,10 @@ export default function ScreenshotGenerator({
             await new Promise((resolve) => setTimeout(resolve, 1000));
             response = await (await pollTask(path)).json();
             setImages((response as screenshotTask)?.images);
+            document.querySelector('.images').scrollTo({
+                top: document.querySelector('.images').scrollHeight,
+                behavior: 'smooth',
+            });
         }
 
         if (response.status === taskState.FINISHED) {
@@ -117,6 +121,7 @@ export default function ScreenshotGenerator({
                                 setTaskId(urlArr[urlArr.length - 1]);
                                 const response = await subscribeTask(task.url);
                                 setImages(response.images);
+                                console.log('response.images', response.images);
                                 console.log('output', response);
                             }}
                         >
@@ -128,15 +133,23 @@ export default function ScreenshotGenerator({
 
             {mode === 'in_progress' || mode === 'finished' ? (
                 <Fragment>
-                    <h1>Przygotowujemy zrzuty ekranów</h1>
+                    <h1>Przygotowanie zrzutów ekranów</h1>
                     <div className="container">
-                        <h2>To może chwilkę zająć</h2>
+                        {mode === 'in_progress' ? (
+                            <Fragment>
+                                <h2>To może chwilkę zająć...</h2>
                                 <p>
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
-                            laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
-                            vel minus aliquid incidunt consequatur illo velit dolorem error
-                            exercitationem tempora?
+                                    Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę
+                                    i przygotowuje zrzuty ekranów narzędzi deweloperskich.
                                 </p>
+                            </Fragment>
+                        ) : null}
+                        {mode === 'finished' ? (
+                            <Fragment>
+                                <h2>Gotowe!</h2>
+                                <p>Zrzuty ekranów narzędzi deweloperskich są gotowe do pobrania.</p>
+                            </Fragment>
+                        ) : null}
 
                         <div className="images">
                             {images.map((screenshot) => {
@@ -150,7 +163,7 @@ export default function ScreenshotGenerator({
                                     >
                                         <div className="browser__header">
                                             <div className="browser__header--address-bar">
-                                                {screenshot.url}
+                                                {screenshot.url.split('-').slice(-2).join('-')}
                                             </div>
                                             <div className="browser__header--controls">· · ·</div>
                                         </div>
@@ -172,9 +185,11 @@ export default function ScreenshotGenerator({
                     </div>
                     <div className="buttons-container">
                         {mode === 'finished' ? (
+                            <Fragment>
                                 <button className="sv_next_btn" onClick={() => downloadFiles()}>
-                                Pobierz zrzuty ekranów
+                                    Pobierz zrzuty ekranów i przejdź dalej
                                 </button>
+                            </Fragment>
                         ) : null}
                     </div>
                 </Fragment>

components/report-window/verbs.ts

@@ -1,37 +1,42 @@
 const words = {
-    zrobiłem: ['zrobiłem', 'zrobiłam', 'zrobiłom', 'zrobiliśmy'],
-    szukałem: ['szukałem', 'szukałam', 'szukałom', 'szukaliśmy'],
-    znalazłem: ['znalazłem', 'znalazłam', 'znalazłom', 'znaleźliśmy'],
+    ciebie: ['ciebie', 'ciebie', 'ciebie', 'was'],
+    dokonałeś: ['dokonałeś', 'dokonałaś', 'dokonałoś', 'dokonaliście'],
+    jesteś: ['jesteś', 'jesteś', 'jesteś', 'jesteście'],
+    kliknąłem: ['kliknąłem', 'kliknęłam', 'klinkęłom', 'kliknęliśmy'],
+    mam: ['mam', 'mam', 'mam', 'mamy'],
+    masz: ['masz', 'masz', 'masz', 'macie'],
+    mnie: ['mnie', 'mnie', 'mnie', 'nas'],
+    moich: ['moich', 'moich', 'moich', 'naszych'],
     moje: ['moje', 'moje', 'moje', 'nasze'],
     mojej: ['mojej', 'mojej', 'mojej', 'naszej'],
-    wyraziłem: ['wyraziłem', 'wyraziłam', 'wyraziłom', 'wyraziliśmy'],
-    kliknąłem: ['kliknąłem', 'kliknęłam', 'klinkęłom', 'kliknęliśmy'],
-    odwiedzałeś: ['odwiedzałeś', 'odwiedzałaś', 'odwiedzałoś', 'odwiedzaliście'],
-    wyraziłeś: ['wyraziłeś', 'wyraziłaś', 'wyraziłoś', 'wyraziliście'],
-    jesteś: ['jesteś', 'jesteś', 'jesteś', 'jesteście'],
-    twoich: ['twoich', 'twoich', 'twoich', 'waszych'],
-    tobie: ['tobie', 'tobie', 'tobie', 'wam'],
-    twojej: ['twojej', 'twojej', 'twojej', 'waszej'],
+    muszę: ['muszę', 'muszę', 'muszę', 'musimy'],
     odkliknąłeś: ['odkliknąłeś', 'odkliknęłaś', 'odklikęłoś', 'odkliknęliście'],
+    odmówiłem: ['odmówiłem', 'odmówiłam', 'odmówiłom', 'odmówiliśmy'],
+    odmówiłeś: ['odmówiłeś', 'odmówiłaś', 'odmówiłoś', 'odmówiliście'],
+    odwiedzałeś: ['odwiedzałeś', 'odwiedzałaś', 'odwiedzałoś', 'odwiedzaliście'],
+    odwiedziłem: ['odwiedziłem', 'odwiedziłam', 'odwiedziłom', 'odwiedziliśmy'],
+    odznaczyłem: ['odznaczyłem', 'odznaczyłam', 'odznaczyłom', 'odznaczyliśmy'],
     otwórz: ['otwórz', 'otwórz', 'otwórz', 'otwórzcie'],
-    widzisz: ['widzisz', 'widzisz', 'widzisz', 'widzicie'],
+    podjąłem: ['podjąłem', 'podjęłam', 'podjęłom', 'podjęliśmy'],
+    podjąłeś: ['podjąłeś', 'podjęłaś', 'podjęłoś', 'podjęliście'],
+    proszę: ['proszę', 'proszę', 'proszę', 'prosimy'],
+    szukałem: ['szukałem', 'szukałam', 'szukałom', 'szukaliśmy'],
+    tobie: ['tobie', 'tobie', 'tobie', 'wam'],
+    twoich: ['twoich', 'twoich', 'twoich', 'waszych'],
+    twojej: ['twojej', 'twojej', 'twojej', 'waszej'],
+    usuń: ['usuń', 'usuń', 'usuń', 'usuńcie'],
     widzę: ['widzę', 'widzę', 'widzę', 'widzimy'],
     widziałem: ['widziałem', 'widziałam', 'widziałom', 'widzieliśmy'],
-    odwiedziłem: ['odwiedziłem', 'odwiedziłam', 'odwiedziłom', 'odwiedziliśmy'],
-    mam: ['mam', 'mam', 'mam', 'mamy'],
-    podjąłeś: ['podjąłeś', 'podjęłaś', 'podjęłoś', 'podjęliście'],
+    widzisz: ['widzisz', 'widzisz', 'widzisz', 'widzicie'],
+    wykonaj: ['wykonaj', 'wykonaj', 'wykonaj', 'wykonajcie'],
+    wyraziłem: ['wyraziłem', 'wyraziłam', 'wyraziłom', 'wyraziliśmy'],
+    wyraziłeś: ['wyraziłeś', 'wyraziłaś', 'wyraziłoś', 'wyraziliście'],
     zamknąłem: ['zamknąłem', 'zamknęłom', 'zamknęłom', 'zamknęliśmy'],
+    zobacz: ['zobacz', 'zobacz', 'zobacz', 'zobaczcie'],
     zamknąłeś: ['zamknąłeś', 'zamknęłaś', 'zamknęłoś', 'zamknęliście'],
+    znalazłem: ['znalazłem', 'znalazłam', 'znalazłom', 'znaleźliśmy'],
+    zrobiłem: ['zrobiłem', 'zrobiłam', 'zrobiłom', 'zrobiliśmy'],
     zwracam: ['zwracam', 'zwracam', 'zwracam', 'zwracamy'],
-    moich: ['moich', 'moich', 'moich', 'naszych'],
-    ciebie: ['ciebie', 'ciebie', 'ciebie', 'was'],
-    mnie: ['mnie', 'mnie', 'mnie', 'nas'],
-    podjąłem: ['podjąłem', 'podjęłam', 'podjęłom', 'podjęliśmy'],
-    dokonałeś: ['dokonałeś', 'dokonałaś', 'dokonałoś', 'dokonaliście'],
-    odmówiłeś: ['odmówiłeś', 'odmówiłaś', 'odmówiłoś', 'odmówiliście'],
-    odznaczyłem: ['odznaczyłem', 'odznaczyłam', 'odznaczyłom', 'odznaczyliśmy'],
-    proszę: ['proszę', 'proszę', 'proszę', 'prosimy'],
-    odmówiłem: ['odmówiłem', 'odmówiłam', 'odmówiłom', 'odmówiliśmy'],
 } as { [key: string]: string[] };
 
 export default words;

components/sidebar/sidebar.scss

@@ -12,6 +12,7 @@
         top: 0;
         background: #ffffff;
         z-index: 1;
+        user-select: none;
 
         .webpage-metadata {
             word-break: break-all;

components/toolbar/toolbar.scss

@@ -3,6 +3,7 @@
 body {
     width: 400px;
     overflow-x: hidden;
+    user-select: none;
 }
 
 .toolbar {
@@ -19,6 +20,7 @@ body {
         top: 0;
         background: #ffffff;
         z-index: 1;
+        user-select: none;
 
         .webpage-metadata {
             word-break: break-all;