Add style for mail template

This commit is contained in:
Arkadiusz Wieczorek 2022-05-22 18:22:29 +02:00
parent ba22788331
commit 83e8498459
2 changed files with 55 additions and 41 deletions

View File

@ -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);
}
}

View File

@ -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 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 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>
);