icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Add OpenSans

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/open-sans/OpenSans-Bold-webfont.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/open-sans/OpenSans-ExtraBold-webfont.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/open-sans/OpenSans-Italic-webfont.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/open-sans/OpenSans-Light-webfont.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/open-sans/OpenSans-Regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/open-sans/OpenSans-Semibold-webfont.woff Normal file
View File

Binary file not shown.

57
components/toolbar/toolbar.scss
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;
}
}
}

120
components/toolbar/toolbar.tsx
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>
);

42
styles/fonts.scss
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;
}

3
styles/global.scss
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 {