Add style for mail template
This commit is contained in:
parent
ba22788331
commit
83e8498459
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 tę stronę za pomocą wtyczki{' '}
|
podejrzeniu ruchu sieciowego generowanego przez tę 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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user