diff --git a/components/report-window/report-window.scss b/components/report-window/report-window.scss index 17ce061..a4853a7 100644 --- a/components/report-window/report-window.scss +++ b/components/report-window/report-window.scss @@ -11,7 +11,7 @@ html { body { background-color: #f9f9fa; - margin: 3rem 3rem; + padding: 0rem 0.75rem; } nav { @@ -36,7 +36,7 @@ li, h1, h2, h3 { - max-width: 70ex; + max-width: 100ex; } h1 { @@ -77,6 +77,9 @@ h1 { font-family: 'OpenSans' !important; background-color: transparent; .sv_p_root { + max-width: 100ex; + margin: 0 auto; + & > .sv_row:nth-child(2n) { background-color: #fff; } @@ -172,7 +175,7 @@ h1 { .sv_nav { display: flex; margin: 2rem 0; - justify-content: flex-end; + justify-content: center; } .sv_prev_btn, @@ -183,6 +186,7 @@ h1 { line-height: 0.875rem !important; height: 2.5rem; cursor: pointer; + min-width: 100px; } .sv_next_btn { background-color: #000 !important; diff --git a/components/report-window/screenshot-generator.scss b/components/report-window/screenshot-generator.scss index c78317d..08bb5c1 100644 --- a/components/report-window/screenshot-generator.scss +++ b/components/report-window/screenshot-generator.scss @@ -2,6 +2,12 @@ h1 { font-size: 1.1rem; + margin-bottom: calc(24 / 16 * 1rem); +} + +h2 { + font-weight: 600; + font-size: 0.875rem; } .images { @@ -11,6 +17,27 @@ h1 { margin: 2rem 0; } +.generator-container { + max-width: 100ex; + margin: 0 auto; + font-size: calc(14 / 16 * 1rem); +} + +.buttons-container { + display: flex; + justify-content: center; + margin: 2rem 0; + padding: 1em 0; +} + +.container { + padding: 0.75rem 1.5rem; + margin-bottom: 1rem; + border-radius: 3px; + box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; + background-color: #fff; +} + .browser { height: 9.667rem; width: 16rem; diff --git a/components/report-window/screenshot-generator.tsx b/components/report-window/screenshot-generator.tsx index f225446..5154091 100644 --- a/components/report-window/screenshot-generator.tsx +++ b/components/report-window/screenshot-generator.tsx @@ -77,88 +77,98 @@ export default function ScreenshotGenerator({ {mode === 'idle' ? (

Przygotowanie zrzutów ekranów

-

- Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów - narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony - Danych Osobowych. -

-

- Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '} - naszej instrukcji lub wtyczka Rentgen może wygenerować je za - Ciebie. -

+
+

Notka informacyjna

+

+ Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów + narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony + Danych Osobowych. +

+

+ Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '} + naszej instrukcji lub wtyczka Rentgen może wygenerować je + za Ciebie. +

+
- - +
+ + +
) : null} {mode === 'in_progress' || mode === 'finished' ? (

Przygotowujemy zrzuty ekranów

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint - laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam vel - minus aliquid incidunt consequatur illo velit dolorem error exercitationem - tempora? -

+
+

To może chwilkę zająć

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint + laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam + vel minus aliquid incidunt consequatur illo velit dolorem error + exercitationem tempora? +

-
- {images.map((filename: string) => { - return ( -
-
-
- {filename} +
+ {images.map((filename: string) => { + return ( +
+
+
+ {filename} +
+
· · ·
+
+
+ ); + })} + + {mode === 'in_progress' ? ( +
+
+
· · ·
- ); - })} - - {mode === 'in_progress' ? ( -
-
-
-
· · ·
-
-
-
+ ) : null} +
+
+
+ {mode === 'finished' ? ( + ) : null}
- {mode === 'finished' ? ( - - ) : null} ) : null}