Fix styling for mail and generating images, add copy button, add images

components/report-window/email-content.scss

@@ -29,7 +29,7 @@ h1 {
     }
 
     &__content {
-        height: 70vh;
+        height: 50vh;
         overflow-y: scroll;
         padding: 1rem 2rem;
         color: $black-color;

components/report-window/email-content.tsx

@@ -5,7 +5,7 @@ import { Explainers } from './explainers';
 import { ParsedAnswers } from './parse-answers';
 import { v } from './verbs';
 import './email-content.scss';
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 declare var PLUGIN_NAME: string;
 declare var PLUGIN_URL: string;
@@ -28,18 +28,26 @@ export default function EmailContent({
                 .reduce((a, b) => a.concat(b), [])
         )
     ).map((explainer_key) => Explainers[explainer_key]);
+    const [copied, setCopy] = useState<boolean>(false);
+
+    function copyTextToClipboard() {
+        // Should be changed in the future to Clipboard API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#browser_compatibility)
+        let r = document.createRange();
+        r.selectNode(document.querySelector('.mail-container__content'));
+        window.getSelection().addRange(r);
+        document.execCommand('copy');
+        window.getSelection().removeAllRanges();
+        setCopy(true);
+    }
+
     return (
         <Fragment>
             <div className="generator-container">
                 <h1>Treść maila</h1>
                 <div className="mail-container">
                     <div className="mail-container__header">
-                        <div className="mail-container__header--control">
+                        <div className="mail-container__header--control"></div>
-                            <button>Kopiuj</button>
-                        </div>
                     </div>
-
-                    {/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
                     <article className="mail-container__content">
                         <p>Dzień dobry,</p>
                         <p>
@@ -69,6 +77,11 @@ export default function EmailContent({
                         </p>
                     </article>
                 </div>
+                <div className="buttons-container">
+                    <button className="sv_next_btn" onClick={() => copyTextToClipboard()}>
+                        {copied ? 'Skopiowano!' : 'Kopiuj'}
+                    </button>
+                </div>
             </div>
         </Fragment>
     );

components/report-window/screenshot-generator.scss

@@ -11,10 +11,16 @@ h2 {
 }
 
 .images {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    width: 100%;
     grid-gap: 1rem;
-    flex-wrap: wrap;
+    margin: 2rem 0 1rem;
-    margin: 2rem 0;
+    max-height: 45vh;
+    overflow-y: scroll;
+    overflow-x: clip;
+    z-index: 1;
+    position: relative;
 }
 
 .generator-container {
@@ -39,18 +45,16 @@ h2 {
 }
 
 .browser {
-    height: 9.667rem;
+    height: 8.667rem;
-    width: 16rem;
     font-weight: 800 !important;
-    // box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
     color: $disabled-grey !important;
     border: 1px solid $disabled-grey;
     background-image: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
     animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
 
     &--filled {
-        background-size: contain;
+        background-size: 100%;
-        background-position-y: 18px;
+        background-position-y: 19px;
         animation: none;
 
         .browser__header {
@@ -83,6 +87,9 @@ h2 {
             font-weight: 400;
             padding-left: 0.25rem;
             color: #000;
+            overflow: visible;
+            word-break: break-all;
+            inline-size: 10rem;
         }
 
         &--controls {
@@ -92,6 +99,6 @@ h2 {
     }
 
     &__content {
-        height: 7.667rem;
+        height: 6.667rem;
     }
 }

components/report-window/screenshot-generator.tsx

@@ -59,6 +59,10 @@ export default function ScreenshotGenerator({
             await new Promise((resolve) => setTimeout(resolve, 1000));
             response = await (await pollTask(path)).json();
             setImages((response as screenshotTask)?.images);
+            document.querySelector('.images').scrollTo({
+                top: document.querySelector('.images').scrollHeight,
+                behavior: 'smooth',
+            });
         }
 
         if (response.status === taskState.FINISHED) {
@@ -117,6 +121,7 @@ export default function ScreenshotGenerator({
                                 setTaskId(urlArr[urlArr.length - 1]);
                                 const response = await subscribeTask(task.url);
                                 setImages(response.images);
+                                console.log('response.images', response.images);
                                 console.log('output', response);
                             }}
                         >
@@ -130,12 +135,10 @@ export default function ScreenshotGenerator({
                 <Fragment>
                     <h1>Przygotowujemy zrzuty ekranów</h1>
                     <div className="container">
-                        <h2>To może chwilkę zająć</h2>
+                        <h2>To może chwilkę zająć...</h2>
                         <p>
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
+                            Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę i przygotowuje
-                            laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
+                            zrzuty ekranów narzędzi deweloperskich.
-                            vel minus aliquid incidunt consequatur illo velit dolorem error
-                            exercitationem tempora?
                         </p>
 
                         <div className="images">
@@ -150,7 +153,7 @@ export default function ScreenshotGenerator({
                                     >
                                         <div className="browser__header">
                                             <div className="browser__header--address-bar">
-                                                {screenshot.url}
+                                                {screenshot.url.split('-').slice(-2).join('-')}
                                             </div>
                                             <div className="browser__header--controls">· · ·</div>
                                         </div>