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,46 +30,45 @@ export default function EmailContent({
).map((explainer_key) => Explainers[explainer_key]); ).map((explainer_key) => Explainers[explainer_key]);
return ( return (
<Fragment> <Fragment>
<h1>Treść maila</h1> <div className="generator-container">
<p> <h1>Treść maila</h1>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure dolore, pariatur ab <div className="mail-container">
eius expedita maxime alias esse quis possimus rem aliquid dicta laudantium rerum <div className="mail-container__header">
libero enim cumque. Aperiam, enim aliquid. <div className="mail-container__header--control">
</p> <button>Kopiuj</button>
<div className="mail-container"> </div>
<div className="mail-container__header">
<div className="mail-container__header--control">
<button>Kopiuj</button>
</div> </div>
</div>
{/* <pre>{JSON.stringify(answers, null, 3)}</pre> */} {/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
<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
</p> stronie.
{problems.map((problem) => problem.getEmailContent())} </p>
{explainers.map((explainer) => explainer(answers.zaimek))} {problems.map((problem) => problem.getEmailContent())}
<h2>Państwa rola jako współadministratora danych osobowych</h2> {explainers.map((explainer) => explainer(answers.zaimek))}
<p> <h2>Państwa rola jako współadministratora danych osobowych</h2>
{_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '} <p>
<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"> {_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
treści wyroku TSUE w sprawie C-40/17 <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>{' '} treści wyroku TSUE w sprawie C-40/17
poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się Państwo </a>{' '}
współadministratorem moich danych osobowych, dlatego ciąży na Państwu poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się
obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13 Rozporządzenia Państwo współadministratorem moich danych osobowych, dlatego ciąży na
2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27 kwietnia 2016 r. w Państwu obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13
sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych Rozporządzenia 2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27
i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z
95/46/WE (ogólne rozporządzenie o ochronie danych, dalej: RODO). przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich
</p> danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o
</article> ochronie danych, dalej: RODO).
</p>
</article>
</div>
</div> </div>
</Fragment> </Fragment>
); );