Add OpenSans

This commit is contained in:
Arkadiusz Wieczorek 2022-04-13 13:57:31 +02:00
parent 39a7e34cb4
commit d8b6e05efb
10 changed files with 89 additions and 141 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,11 +1,11 @@
@import '../../styles/colors.scss';
.toolbar {
padding: 0 .5rem;
padding: 0 0.75rem;
.header {
display: grid;
grid-template-columns: 6.67rem 1fr 1.25rem;
grid-template-columns: 2.75rem 1fr 1.25rem;
align-items: center;
max-height: 3.5rem;
min-height: 3.5rem;
@ -15,10 +15,6 @@
background: #ffffff;
z-index: 1;
&--without-logo {
grid-template-columns: 1fr 1.25rem;
}
.webpage-metadata {
word-break: break-all;
display: flex;
@ -30,10 +26,6 @@
padding-left: 1rem;
color: #000;
&--without-logo {
padding-left: 0;
}
&--hyperlink {
font-weight: 400;
color: $ultra-black-color;
@ -50,42 +42,19 @@
}
}
nav {
padding: 0.25rem 0;
border-bottom: 1px solid $light-grey;
button {
border: none;
cursor: pointer;
color: $ultra-black-color;
padding: 0.25rem 0rem;
.summary {
display: flex;
flex-wrap: nowrap;
line-height: 1.25rem;
background: #fff;
width: 100%;
.counters{
display: flex;
.counter{
font-size: 1rem;
font-weight: 900;
}
}
.big-counter {
font-size: 6rem;
font-size: 900;
&:hover {
color: #000;
text-decoration: underline;
svg path {
fill: #000;
}
}
&:disabled {
cursor: not-allowed;
color: $disabled-grey;
svg path {
fill: $disabled-grey;
}
}
span {
padding-left: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
}
}
}

View File

@ -72,12 +72,8 @@ const Toolbar = () => {
return (
<div className="toolbar">
<header className={logoVisibility ? 'header' : 'header header--without-logo'}>
<img
src="../assets/logo-internet-czas-dzialac.svg"
height={40}
style={!logoVisibility ? { display: 'none' } : null}
></img>
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<div
className={
logoVisibility
@ -105,97 +101,39 @@ const Toolbar = () => {
)}
</header>
{stolenDataView ? (
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
<img src="/assets/icons/settings.svg" width="20" height="20" />
<span>Ustawienia</span>
</button>
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
getMemory().emit('change', false, origin, 'clicked trash');
setMarksOccurrence(false);
}}
>
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
<span>Wyczyść historię wtyczki</span>
</button>
<button
onClick={() => {
getMemory().removeCookiesFor(origin);
getMemory().emit('change', false, origin, 'clicked clear cookies');
setMarksOccurrence(false);
}}
>
<img src="/assets/icons/cookie.svg" width="20" height="20" />
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 20H4C2.89543 20 2 19.1046 2 18V5.913C2.04661 4.84255 2.92853 3.99899 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
fill="#2E3A59"
/>
</svg>
<section className="summary">
<div>
<div className="counters">
<div className="counter counter--browser-history">12</div>
<div className="counter counter--cookies">21</div>
</div>
<div className="big-counter">33</div>
</div>
<p>Liczba wykrytych domen podmiotów trzecich</p>
</section>
<span>Utwórz wiadomość dla administratora witryny</span>
</button>
</nav>
) : null}
<section className="details">
<p>
Strona wp.pl wysłała informacje o części Twojej historii przeglądania do
facebook.com, adnsx.com (i 43 innych).
</p>
<p>
Dokonała też zapisu i odczytu plików Cookie dla domen doubleclick.google.net,
3dsio.com (i 59 innych).
</p>
</section>
<section>
{stolenDataView ? (
<>
{warningDataDialogAck ? (
<section className="warning-container">
<span>
<strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
informacja jest daną osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie reprezentować podmiotów
trzecich.
<strong>Takie przetwarzanie danych może być niezgodne z prawem.</strong> Kliknij
w przycisk <i>Generuj raport</i>, aby pomóc ustalić, czy ta strona nie narusza
RODO.
</span>
<button
onClick={() => {
setWarningDataDialogAck(false);
localStorage.setItem(
'warningDataDialogAck',
false as unknown as string
);
}}
>
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
<div>stolen data</div>
</>
) : null}
<section className="actions">
<a href="">Pokaż szczegóły</a>
<button>Generuj raport</button>
</section>
</div>
);

View File

@ -46,3 +46,45 @@
font-weight: 300 700;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-Light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-Semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-Bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../assets/fonts/open-sans/OpenSans-ExtraBold-webfont.woff') format('woff');
font-weight: 800;
font-style: normal;
}

View File

@ -18,8 +18,7 @@ body {
html {
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: 'OpenSans';
}
button {