Styling fixes

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;

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;

components/report-window/screenshot-generator.tsx

@@ -77,6 +77,8 @@ export default function ScreenshotGenerator({
             {mode === 'idle' ? (
                 <Fragment>
                     <h1>Przygotowanie zrzutów ekranów</h1>
+                    <div className="container">
+                        <h2>Notka informacyjna</h2>
                         <p>
                             Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
                             narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony
@@ -84,10 +86,12 @@ export default function ScreenshotGenerator({
                         </p>
                         <p>
                             Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '}
-                        <a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je za
-                        Ciebie.
+                            <a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je
+                            za Ciebie.
                         </p>
+                    </div>
 
+                    <div className="buttons-container">
                         <button
                             className="sv_prev_btn"
                             onClick={() => {
@@ -110,17 +114,20 @@ export default function ScreenshotGenerator({
                         >
                             Wygeneruj
                         </button>
+                    </div>
                 </Fragment>
             ) : null}
 
             {mode === 'in_progress' || mode === 'finished' ? (
                 <Fragment>
                     <h1>Przygotowujemy zrzuty ekranów</h1>
+                    <div className="container">
+                        <h2>To może chwilkę zająć</h2>
                         <p>
                             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?
+                            laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
+                            vel minus aliquid incidunt consequatur illo velit dolorem error
+                            exercitationem tempora?
                         </p>
 
                         <div className="images">
@@ -154,11 +161,14 @@ export default function ScreenshotGenerator({
                                 </div>
                             ) : null}
                         </div>
+                    </div>
+                    <div className="buttons-container">
                         {mode === 'finished' ? (
                             <button className="sv_next_btn" onClick={() => downloadFiles()}>
                                 Pobierz zrzuty ekranów
                             </button>
                         ) : null}
+                    </div>
                 </Fragment>
             ) : null}
         </div>