From a6bdfe6f00199ca1af6d447e88b4543b79719f82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 11 Oct 2023 12:39:43 +0200
Subject: [PATCH] fix: improve styling and make screenshot button look right.
 Also address review comments

---
 .../feedback-widget/FeedbackWidget.tsx        | 312 ++++++++++--------
 dashboard/components/modal/Modal.stories.tsx  |  17 +-
 dashboard/package-lock.json                   | 120 +++++++
 3 files changed, 306 insertions(+), 143 deletions(-)

diff --git a/dashboard/components/feedback-widget/FeedbackWidget.tsx b/dashboard/components/feedback-widget/FeedbackWidget.tsx
index 9230377b4..703451376 100644
--- a/dashboard/components/feedback-widget/FeedbackWidget.tsx
+++ b/dashboard/components/feedback-widget/FeedbackWidget.tsx
@@ -192,56 +192,13 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                 value={description}
                 required
               />
-              <div className="mt-4 w-full flex-1">
-                <a
-                  className="mb-1 block w-32 cursor-pointer text-xs text-primary"
-                  onClick={() => takeScreenshot()}
-                >
-                  Take a screenshot
-                </a>
-                <FileUploader
-                  disabled={
-                    fileAttachement !== null ||
-                    isSendingFeedback ||
-                    isTakingScreenCapture
-                  }
-                  handleChange={uploadFile}
-                  name="attachement"
-                  types={FILE_TYPES}
-                  fileOrFiles={fileAttachement}
-                  hoverTitle="drop here"
-                  maxSize={MAX_FILE_SIZE_MB}
-                  onTypeError={(err: string) =>
-                    setToast({
-                      hasError: true,
-                      title: 'File upload failed',
-                      message: err
-                    })
-                  }
-                  onSizeError={(err: string) =>
-                    setToast({
-                      hasError: true,
-                      title: 'File upload failed',
-                      message: err
-                    })
-                  }
-                  dropMessageStyle={{
-                    width: '508px',
-                    height: '96px',
-                    position: 'absolute',
-                    background: '#F4F9F9',
-                    top: 20,
-                    left: 2,
-                    display: 'flex',
-                    flexGrow: 2,
-                    opacity: 1,
-                    zIndex: 20,
-                    color: '#008484',
-                    fontSize: 14
-                  }}
-                >
+              <div className="mt-4 h-full w-full">
+                <div className="flex basis-1/2 items-stretch justify-stretch gap-2">
                   {fileAttachement === null && (
-                    <div className="h-full w-full cursor-pointer rounded border-2 border-dashed border-black-170 px-6 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100">
+                    <div
+                      onClick={() => takeScreenshot()}
+                      className="w-[50%] grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
+                    >
                       <svg
                         className="mb-2 inline-block"
                         width="25"
@@ -251,133 +208,226 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M9.5 17V11L7.5 13"
+                          d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
                           stroke="#0C1717"
                           stroke-width="1.5"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                         />
                         <path
-                          d="M9.5 11L11.5 13"
+                          d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
                           stroke="#0C1717"
                           stroke-width="1.5"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                         />
                         <path
-                          d="M22.5 10V15C22.5 20 20.5 22 15.5 22H9.5C4.5 22 2.5 20 2.5 15V9C2.5 4 4.5 2 9.5 2H14.5"
+                          d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
                           stroke="#0C1717"
                           stroke-width="1.5"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                         />
                         <path
-                          d="M22.5 10H18.5C15.5 10 14.5 9 14.5 6V2L22.5 10Z"
+                          d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
                           stroke="#0C1717"
                           stroke-width="1.5"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                         />
                       </svg>
-                      {isTakingScreenCapture ? (
-                        <p>Taking screencapture...</p>
-                      ) : (
-                        <p>
-                          Drag and drop or{' '}
-                          <span className="cursor-pointer text-primary">
-                            choose a file
-                          </span>
-                        </p>
-                      )}
+
+                      <p>
+                        {isTakingScreenCapture
+                          ? 'Taking screencapture...'
+                          : 'Capture current screen'}
+                      </p>
                     </div>
                   )}
-                  {fileAttachement !== null && (
-                    <div className="relative h-full w-full flex-1 rounded border-2 border-[#B6EAEA] px-6 py-5 text-center text-xs transition">
-                      <div className="flex h-full w-full items-center justify-items-center gap-2">
+                  <FileUploader
+                    classes={
+                      fileAttachement === null
+                        ? `grow cursor-pointer rounded border-2 border-dashed border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100 w-[50%]`
+                        : ` flex-1 rounded border-2 border-[#B6EAEA] px-6 py-5 text-center text-xs transition w-full`
+                    }
+                    disabled={
+                      fileAttachement !== null ||
+                      isSendingFeedback ||
+                      isTakingScreenCapture
+                    }
+                    handleChange={uploadFile}
+                    name="attachement"
+                    types={FILE_TYPES}
+                    fileOrFiles={fileAttachement}
+                    hoverTitle="drop here"
+                    maxSize={MAX_FILE_SIZE_MB}
+                    onTypeError={(err: string) =>
+                      setToast({
+                        hasError: true,
+                        title: 'File upload failed',
+                        message: err
+                      })
+                    }
+                    onSizeError={(err: string) =>
+                      setToast({
+                        hasError: true,
+                        title: 'File upload failed',
+                        message: err
+                      })
+                    }
+                    dropMessageStyle={{
+                      width: '100%',
+                      height: '100%',
+                      position: 'absolute',
+                      background: '#F4F9F9',
+                      top: 0,
+                      right: 2,
+                      display: 'flex',
+                      flexGrow: 2,
+                      opacity: 1,
+                      zIndex: 20,
+                      color: '#008484',
+                      fontSize: 14,
+                      border: 'none'
+                    }}
+                  >
+                    {fileAttachement === null && (
+                      <div className="">
                         <svg
-                          width="40"
-                          height="40"
-                          viewBox="0 0 40 40"
+                          className="mb-2 inline-block"
+                          width="25"
+                          height="24"
+                          viewBox="0 0 25 24"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M35 11.6666V28.3333C35 33.3333 32.5 36.6666 26.6667 36.6666H13.3333C7.5 36.6666 5 33.3333 5 28.3333V11.6666C5 6.66659 7.5 3.33325 13.3333 3.33325H26.6667C32.5 3.33325 35 6.66659 35 11.6666Z"
+                            d="M9.5 17V11L7.5 13"
                             stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeMiterlimit="10"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           />
                           <path
-                            d="M24.167 7.5V10.8333C24.167 12.6667 25.667 14.1667 27.5003 14.1667H30.8337"
+                            d="M9.5 11L11.5 13"
                             stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeMiterlimit="10"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           />
                           <path
-                            d="M13.333 21.6667H19.9997"
+                            d="M22.5 10V15C22.5 20 20.5 22 15.5 22H9.5C4.5 22 2.5 20 2.5 15V9C2.5 4 4.5 2 9.5 2H14.5"
                             stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeMiterlimit="10"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           />
                           <path
-                            d="M13.333 28.3333H26.6663"
+                            d="M22.5 10H18.5C15.5 10 14.5 9 14.5 6V2L22.5 10Z"
                             stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeMiterlimit="10"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           />
                         </svg>
-                        <div className="flex-1 text-left">
-                          <p>{fileAttachement.name}</p>
-                          <p className="text-black-400">
-                            {(fileAttachement.size / (1024 * 1024)).toFixed(2)}
-                            MB
-                          </p>
-                        </div>
+                        <p>
+                          Drag and drop or{' '}
+                          <span className="cursor-pointer text-primary">
+                            choose a file
+                          </span>
+                        </p>
                       </div>
-                      <a
-                        onClick={e => {
-                          e.preventDefault();
-                          if (!isSendingFeedback && !isTakingScreenCapture)
-                            setFileAttachement(null);
-                          return false;
-                        }}
-                        className="absolute right-4 top-4 block h-4 w-4 cursor-pointer"
-                        aria-disabled={
-                          isTakingScreenCapture || isSendingFeedback
-                        }
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="17"
-                          viewBox="0 0 16 17"
-                          fill="none"
+                    )}
+                    {fileAttachement !== null && (
+                      <div className="relative h-full w-full">
+                        <div className="flex h-full w-full items-center justify-items-center gap-2">
+                          <svg
+                            width="40"
+                            height="40"
+                            viewBox="0 0 40 40"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M35 11.6666V28.3333C35 33.3333 32.5 36.6666 26.6667 36.6666H13.3333C7.5 36.6666 5 33.3333 5 28.3333V11.6666C5 6.66659 7.5 3.33325 13.3333 3.33325H26.6667C32.5 3.33325 35 6.66659 35 11.6666Z"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeMiterlimit="10"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M24.167 7.5V10.8333C24.167 12.6667 25.667 14.1667 27.5003 14.1667H30.8337"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeMiterlimit="10"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M13.333 21.6667H19.9997"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeMiterlimit="10"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M13.333 28.3333H26.6663"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeMiterlimit="10"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                          <div className="flex-1 text-left">
+                            <p>{fileAttachement.name}</p>
+                            <p className="text-black-400">
+                              {(fileAttachement.size / (1024 * 1024)).toFixed(
+                                2
+                              )}
+                              MB
+                            </p>
+                          </div>
+                        </div>
+                        <a
+                          onClick={e => {
+                            e.preventDefault();
+                            if (!isSendingFeedback && !isTakingScreenCapture)
+                              setFileAttachement(null);
+                            return false;
+                          }}
+                          className="absolute right-4 top-4 block h-4 w-4 cursor-pointer"
+                          aria-disabled={
+                            isTakingScreenCapture || isSendingFeedback
+                          }
                         >
-                          <path
-                            d="M4.66602 12.079L11.3327 5.41235"
-                            stroke="#0C1717"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M11.3327 12.079L4.66602 5.41235"
-                            stroke="#0C1717"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </a>
-                    </div>
-                  )}
-                </FileUploader>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="17"
+                            viewBox="0 0 16 17"
+                            fill="none"
+                          >
+                            <path
+                              d="M4.66602 12.079L11.3327 5.41235"
+                              stroke="#0C1717"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M11.3327 12.079L4.66602 5.41235"
+                              stroke="#0C1717"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    )}
+                  </FileUploader>
+                </div>
               </div>
               <div className="mt-4 flex justify-between">
                 <p className="text-xs text-black-400">
diff --git a/dashboard/components/modal/Modal.stories.tsx b/dashboard/components/modal/Modal.stories.tsx
index c73067148..7a09751d5 100644
--- a/dashboard/components/modal/Modal.stories.tsx
+++ b/dashboard/components/modal/Modal.stories.tsx
@@ -1,16 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useArgs, useState, useEffect } from '@storybook/preview-api';
 
 import Modal, { ModalProps } from './Modal';
 
 function ModalWrapper({
   children,
-  isOpen
-}: Pick<ModalProps, 'children' | 'isOpen'>) {
-  const [_, updateArgs] = useArgs();
+  isOpen,
+  closeModal
+}: Pick<ModalProps, 'children' | 'isOpen'> & { closeModal: () => void }) {
   return (
-    <Modal isOpen={isOpen} closeModal={() => updateArgs({ isOpen: !isOpen })}>
+    <Modal isOpen={isOpen} closeModal={() => closeModal()}>
       {children}
     </Modal>
   );
@@ -20,12 +18,7 @@ const meta: Meta<typeof Modal> = {
   title: 'Komiser/Modal',
   component: ModalWrapper,
   decorators: [
-    Story => (
-      <div style={{ margin: '3em' }}>
-        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
-        {Story()}
-      </div>
-    )
+    Story => <div style={{ margin: '3em', height: '200px' }}>{Story()}</div>
   ],
   tags: ['autodocs'],
   argTypes: {
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index b065157d0..ce948cb7f 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -23985,6 +23985,126 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz",
+      "integrity": "sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz",
+      "integrity": "sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz",
+      "integrity": "sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz",
+      "integrity": "sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz",
+      "integrity": "sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz",
+      "integrity": "sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz",
+      "integrity": "sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz",
+      "integrity": "sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }