Add OpenSans
This commit is contained in:
Arkadiusz Wieczorek
parent
39a7e34cb4
commit
d8b6e05efb
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
.counters{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.25rem;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
svg path {
|
||||
fill: #000;
|
||||
}
|
||||
.counter{
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.big-counter {
|
||||
font-size: 6rem;
|
||||
font-size: 900;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
color: $disabled-grey;
|
||||
svg path {
|
||||
fill: $disabled-grey;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
</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="warning-container">
|
||||
<span>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section className="actions">
|
||||
<a href="">Pokaż szczegóły</a>
|
||||
<button>Generuj raport</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue