From 83e8498459efe617a1ca8790130f09faac290ad5 Mon Sep 17 00:00:00 2001
From: Arkadiusz Wieczorek <kontakt@arkadiusz-wieczorek.pl>
Date: Sun, 22 May 2022 18:22:29 +0200
Subject: [PATCH] Add style for mail template

---
 components/report-window/email-content.scss | 21 +++++-
 components/report-window/email-content.tsx  | 75 ++++++++++-----------
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/components/report-window/email-content.scss b/components/report-window/email-content.scss
index a375007..51ebb1c 100644
--- a/components/report-window/email-content.scss
+++ b/components/report-window/email-content.scss
@@ -1,11 +1,25 @@
 @import './../../styles/colors.scss';
 
+h1 {
+    font-size: 1.1rem;
+    margin-bottom: calc(24 / 16 * 1rem);
+}
+
+.generator-container {
+    max-width: 100ex;
+    margin: 0 auto;
+    font-size: calc(14 / 16 * 1rem);
+}
+
 .mail-container {
     box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
     background-color: #fff;
-    max-width: 40rem;
     margin-top: 0.5rem;
 
+    max-width: 100ex;
+    margin: 0 auto;
+    font-size: calc(14 / 16 * 1rem);
+
     &__header {
         display: flex;
         justify-content: flex-end;
@@ -22,10 +36,11 @@
     }
 
     h2 {
-        font-size: 1.125rem;
+        font-weight: 700;
+        font-size: 1rem;
     }
 
     p {
-        font-size: 1rem;
+        font-size: calc(14 / 16 * 1rem);
     }
 }
diff --git a/components/report-window/email-content.tsx b/components/report-window/email-content.tsx
index a3879f4..69f5f28 100644
--- a/components/report-window/email-content.tsx
+++ b/components/report-window/email-content.tsx
@@ -30,46 +30,45 @@ export default function EmailContent({
     ).map((explainer_key) => Explainers[explainer_key]);
     return (
         <Fragment>
-            <h1>Treść maila</h1>
-            <p>
-                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure dolore, pariatur ab
-                eius expedita maxime alias esse quis possimus rem aliquid dicta laudantium rerum
-                libero enim cumque. Aperiam, enim aliquid.
-            </p>
-            <div className="mail-container">
-                <div className="mail-container__header">
-                    <div className="mail-container__header--control">
-                        <button>Kopiuj</button>
+            <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>
                     </div>
-                </div>
 
-                {/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
-                <article className="mail-container__content">
-                    <p>Dzień dobry,</p>
-                    <p>
-                        w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu
-                        ruchu sieciowego generowanego przez tę stronę za pomocą wtyczki{' '}
-                        <a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox {_('mam')}{' '}
-                        pytania dotyczące przetwarzania {_('moich')} danych osobowych, na które nie{' '}
-                        {_('znalazłem')} odpowiedzi nigdzie na Państwa stronie.
-                    </p>
-                    {problems.map((problem) => problem.getEmailContent())}
-                    {explainers.map((explainer) => explainer(answers.zaimek))}
-                    <h2>Państwa rola jako współadministratora danych osobowych</h2>
-                    <p>
-                        {_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
-                        <a href="https://curia.europa.eu/juris/document/document.jsf?text=&docid=216555&pageIndex=0&doclang=PL&mode=lst&dir=&occ=first&part=1&cid=1254905">
-                            treści wyroku TSUE w sprawie C-40/17
-                        </a>{' '}
-                        poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się Państwo
-                        współadministratorem moich danych osobowych, dlatego ciąży na Państwu
-                        obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13 Rozporządzenia
-                        2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27 kwietnia 2016 r. w
-                        sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych
-                        i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy
-                        95/46/WE (ogólne rozporządzenie o ochronie danych, dalej: „RODO”).
-                    </p>
-                </article>
+                    {/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
+                    <article className="mail-container__content">
+                        <p>Dzień dobry,</p>
+                        <p>
+                            w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po
+                            podejrzeniu ruchu sieciowego generowanego przez tę stronę za pomocą
+                            wtyczki <a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox{' '}
+                            {_('mam')} pytania dotyczące przetwarzania {_('moich')} danych
+                            osobowych, na które nie {_('znalazłem')} odpowiedzi nigdzie na Państwa
+                            stronie.
+                        </p>
+                        {problems.map((problem) => problem.getEmailContent())}
+                        {explainers.map((explainer) => explainer(answers.zaimek))}
+                        <h2>Państwa rola jako współadministratora danych osobowych</h2>
+                        <p>
+                            {_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
+                            <a href="https://curia.europa.eu/juris/document/document.jsf?text=&docid=216555&pageIndex=0&doclang=PL&mode=lst&dir=&occ=first&part=1&cid=1254905">
+                                treści wyroku TSUE w sprawie C-40/17
+                            </a>{' '}
+                            poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się
+                            Państwo współadministratorem moich danych osobowych, dlatego ciąży na
+                            Państwu obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13
+                            Rozporządzenia 2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27
+                            kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z
+                            przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich
+                            danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o
+                            ochronie danych, dalej: „RODO”).
+                        </p>
+                    </article>
+                </div>
             </div>
         </Fragment>
     );