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'; @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 { .mail-container {
box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
background-color: #fff; background-color: #fff;
max-width: 40rem;
margin-top: 0.5rem; margin-top: 0.5rem;
max-width: 100ex;
margin: 0 auto;
font-size: calc(14 / 16 * 1rem);
&__header { &__header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -22,10 +36,11 @@
} }
h2 { h2 {
font-size: 1.125rem; font-weight: 700;
font-size: 1rem;
} }
p { p {
font-size: 1rem; font-size: calc(14 / 16 * 1rem);
} }
} }

View File

@ -30,12 +30,8 @@ export default function EmailContent({
).map((explainer_key) => Explainers[explainer_key]); ).map((explainer_key) => Explainers[explainer_key]);
return ( return (
<Fragment> <Fragment>
<div className="generator-container">
<h1>Treść maila</h1> <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">
<div className="mail-container__header"> <div className="mail-container__header">
<div className="mail-container__header--control"> <div className="mail-container__header--control">
@ -47,11 +43,12 @@ export default function EmailContent({
<article className="mail-container__content"> <article className="mail-container__content">
<p>Dzień dobry,</p> <p>Dzień dobry,</p>
<p> <p>
w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po
ruchu sieciowego generowanego przez stronę za pomocą wtyczki{' '} podejrzeniu ruchu sieciowego generowanego przez stronę za pomocą
<a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox {_('mam')}{' '} wtyczki <a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox{' '}
pytania dotyczące przetwarzania {_('moich')} danych osobowych, na które nie{' '} {_('mam')} pytania dotyczące przetwarzania {_('moich')} danych
{_('znalazłem')} odpowiedzi nigdzie na Państwa stronie. osobowych, na które nie {_('znalazłem')} odpowiedzi nigdzie na Państwa
stronie.
</p> </p>
{problems.map((problem) => problem.getEmailContent())} {problems.map((problem) => problem.getEmailContent())}
{explainers.map((explainer) => explainer(answers.zaimek))} {explainers.map((explainer) => explainer(answers.zaimek))}
@ -61,16 +58,18 @@ export default function EmailContent({
<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"> <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 treści wyroku TSUE w sprawie C-40/17
</a>{' '} </a>{' '}
poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się Państwo poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się
współadministratorem moich danych osobowych, dlatego ciąży na Państwu Państwo współadministratorem moich danych osobowych, dlatego ciąży na
obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13 Rozporządzenia Państwu obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13
2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27 kwietnia 2016 r. w Rozporządzenia 2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27
sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z
i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich
95/46/WE (ogólne rozporządzenie o ochronie danych, dalej: RODO). danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o
ochronie danych, dalej: RODO).
</p> </p>
</article> </article>
</div> </div>
</div>
</Fragment> </Fragment>
); );
} }