From d135df827a2d98812ee68dc969e479167be97126 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Fri, 21 Apr 2023 21:51:20 +1000
Subject: [PATCH] fix: improve general styling

Improve the general styling of the app by removing floats and replacing it `flex`. Additionally, improve the constrast of certain parts of the app and add some transitions to hover changes.
---
 apps/web/components/editor/pdf-signer.tsx     |  3 +-
 .../components/editor/signature-dialog.tsx    | 62 ++++++++++---------
 apps/web/pages/dashboard.tsx                  | 21 ++++---
 apps/web/pages/documents.tsx                  | 28 ++++-----
 apps/web/tailwind.config.js                   | 45 +++++++++++++-
 packages/features/uploadDocument.ts           |  9 ++-
 packages/ui/components/button/Button.tsx      |  8 +--
 7 files changed, 113 insertions(+), 63 deletions(-)

diff --git a/apps/web/components/editor/pdf-signer.tsx b/apps/web/components/editor/pdf-signer.tsx
index 797745a4c..a4a4cd2c6 100644
--- a/apps/web/components/editor/pdf-signer.tsx
+++ b/apps/web/components/editor/pdf-signer.tsx
@@ -80,12 +80,11 @@ export default function PDFSigner(props: any) {
                 : props.document.User.email}{" "}
               would like you to sign this document.
             </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm md:mt-0 md:ml-6 text-right md:text-inherit">
               <Button
                 disabled={!signingDone}
                 color="secondary"
                 icon={CheckBadgeIcon}
-                className="float-right"
                 onClick={() => {
                   signDocument(props.document, localSignatures, `${router.query.token}`).then(
                     () => {
diff --git a/apps/web/components/editor/signature-dialog.tsx b/apps/web/components/editor/signature-dialog.tsx
index 6b986c111..3869eecef 100644
--- a/apps/web/components/editor/signature-dialog.tsx
+++ b/apps/web/components/editor/signature-dialog.tsx
@@ -89,7 +89,7 @@ export default function SignatureDialog(props: any) {
                     </div>
                     {isCurrentTab("Type") ? (
                       <div>
-                        <div className="my-8 mb-3 border-b border-gray-300">
+                        <div className="my-7 mb-3 border-b border-gray-300">
                           <input
                             value={typedSignature}
                             onChange={(e) => {
@@ -102,7 +102,7 @@ export default function SignatureDialog(props: any) {
                             placeholder="Kindly type your name"
                           />
                         </div>
-                        <div className="float-right">
+                        <div className="flex flex-row-reverse items-center gap-x-3">
                           <Button
                             color="secondary"
                             onClick={() => {
@@ -145,34 +145,40 @@ export default function SignatureDialog(props: any) {
                             }}
                           />
                         )}
-                        <IconButton
-                          className="float-left block"
-                          icon={TrashIcon}
-                          onClick={() => {
-                            signCanvasRef?.clear();
-                            setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}></IconButton>
-                        <div className="float-right mt-10">
-                          <Button
-                            color="secondary"
+                        
+                        <div className="flex items-center justify-between">
+                          <IconButton
+                            className="block"
+                            icon={TrashIcon}
                             onClick={() => {
-                              props.onClose();
-                              props.setOpen(false);
-                              setCurrent(tabs[0]);
-                            }}>
-                            Cancel
-                          </Button>
-                          <Button
-                            className="ml-3"
-                            onClick={() => {
-                              props.onClose({
-                                type: "draw",
-                                signatureImage: signCanvasRef.toDataURL("image/png"),
-                              });
+                              signCanvasRef?.clear();
+                              setSignatureEmpty(signCanvasRef?.isEmpty());
                             }}
-                            disabled={signatureEmpty}>
-                            Sign
-                          </Button>
+                          />
+
+                          <div className="flex flex-row-reverse items-center gap-x-3">
+                            <Button
+                              color="secondary"
+                              onClick={() => {
+                                props.onClose();
+                                props.setOpen(false);
+                                setCurrent(tabs[0]);
+                              }}>
+                              Cancel
+                            </Button>
+
+                            <Button
+                              className="ml-3"
+                              onClick={() => {
+                                props.onClose({
+                                  type: "draw",
+                                  signatureImage: signCanvasRef.toDataURL("image/png"),
+                                });
+                              }}
+                              disabled={signatureEmpty}>
+                              Sign
+                            </Button>
+                          </div>
                         </div>
                       </div>
                     ) : (
diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx
index 324560f5a..5d3d93d94 100644
--- a/apps/web/pages/dashboard.tsx
+++ b/apps/web/pages/dashboard.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ChangeEvent, ReactElement } from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { uploadDocument } from "@documenso/features";
@@ -62,26 +62,27 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
         <dl className="mt-8 grid gap-5 md:grid-cols-3 ">
           {stats.map((item) => (
             <Link href={item.link} key={item.name}>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow sm:py-5 md:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 ">
+              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow hover:shadow-lg duration-300 sm:py-5 md:p-6">
+                <dt className="truncate text-sm font-medium text-gray-700 ">
                   <item.icon
-                    className="text-neon mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
+                    className="text-neon-600 mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
                     aria-hidden="true"></item.icon>
                   {item.name}
                 </dt>
-                <dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
+                <dd className="mt-3 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
                   {getStat(item.name, props)}
                 </dd>
               </div>
             </Link>
           ))}
         </dl>
+
         <div className="mt-12">
           <input
             id="fileUploadHelper"
             type="file"
             accept="application/pdf"
-            onChange={(event: any) => {
+            onChange={(event: ChangeEvent) => {
               uploadDocument(event);
             }}
             hidden
@@ -91,9 +92,10 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
           onClick={() => {
             document?.getElementById("fileUploadHelper")?.click();
           }}
-          className="hover:border-neon relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          className="group hover:border-neon-600 duration-200 relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          
           <svg
-            className="mx-auto h-12 w-12 text-gray-400"
+            className="mx-auto h-12 w-12 text-gray-400 group-hover:text-gray-700 duration-200"
             stroke="currentColor"
             fill="none"
             viewBox="0 00 20 25"
@@ -104,7 +106,8 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
               d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
             />
           </svg>
-          <span id="add_document" className="text-neon mt-2 block text-sm font-medium">
+
+          <span id="add_document" className="text-gray-500 group-hover:text-neon-700 mt-2 block text-sm font-medium duration-200">
             Add a new PDF document.
           </span>
         </div>
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index dbd8f7d80..af6752d47 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -142,26 +142,26 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </Button>
           </div>
         </div>
-        <div className="mt-3 mb-12">
-          <div className="float-right ml-3 mt-7 block w-fit">
+        <div className="mt-3 mb-12 flex flex-row-reverse items-center gap-x-4">
+          <div className="pt-5 block w-fit">
             {filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
           </div>
           <SelectBox
-            className="float-right block w-1/4"
+            className="block w-1/4"
             label="Created"
             options={createdFilter}
             value={selectedCreatedFilter}
             onChange={setSelectedCreatedFilter}
           />
           <SelectBox
-            className="float-right ml-3 block w-1/4"
+            className="block w-1/4"
             label="Status"
             options={statusFilters}
             value={selectedStatusFilter}
             onChange={handleStatusFilterChange}
           />
         </div>
-        <div className="mt-20 max-w-[1100px]" hidden={!loading}>
+        <div className="mt-8 max-w-[1100px]" hidden={!loading}>
           <div className="ph-item">
             <div className="ph-col-12">
               <div className="ph-picture"></div>
@@ -178,7 +178,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </div>
           </div>
         </div>
-        <div className="mt-28 flex flex-col" hidden={!documents.length || loading}>
+        <div className="mt-8 flex flex-col" hidden={!documents.length || loading}>
           <div
             className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"
             hidden={!documents.length || loading}>
@@ -221,13 +221,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {document.title || "#" + document.id}
                         </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <td className="whitespace-nowrap inline-flex py-3 gap-x-2 gap-y-1 flex-wrap max-w-[250px] text-sm text-gray-500">
                           {document.Recipient.map((item: any) => (
                             <div key={item.id}>
                               {item.sendStatus === "NOT_SENT" ? (
                                 <span
                                   id="sent_icon"
-                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                                   {item.name ? item.name + " <" + item.email + ">" : item.email}
                                 </span>
                               ) : (
@@ -237,8 +237,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <EnvelopeIcon className="mr-1 inline h-5"></EnvelopeIcon>
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <EnvelopeIcon className="mr-1 inline h-4"></EnvelopeIcon>
                                     {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
@@ -250,9 +250,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="read_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <CheckIcon className="-mr-2 inline h-5"></CheckIcon>
-                                    <CheckIcon className="mr-1 inline h-5"></CheckIcon>
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <CheckIcon className="-mr-2 inline h-4"></CheckIcon>
+                                    <CheckIcon className="mr-1 inline h-4"></CheckIcon>
                                     {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
@@ -261,7 +261,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               )}
                               {item.signingStatus === "SIGNED" ? (
                                 <span id="signed_icon">
-                                  <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  <span className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                                     <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>{" "}
                                     {item.email}
                                   </span>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index a6a344329..89d211331 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -16,9 +16,48 @@ module.exports = {
         qwigley: ["Qwigley", "serif"],
       },
       colors: {
-        neon: "#37f095",
-        "neon-dark": "#2CC077",
-        brown: "#353434",
+        neon: {
+          DEFAULT: "#37F095",
+          50: "#E2FDF0",
+          100: "#CFFBE5",
+          200: "#A9F9D1",
+          300: "#83F6BD",
+          400: "#5DF3A9",
+          500: "#37F095",
+          600: "#11DE79",
+          700: "#0DAA5D",
+          800: "#097640",
+          900: "#054224",
+          950: "#032816",
+        },
+        "neon-dark": {
+          DEFAULT: "#2CC077",
+          50: "#B5EED2",
+          100: "#A5EAC8",
+          200: "#84E3B4",
+          300: "#62DBA0",
+          400: "#41D48B",
+          500: "#2CC077",
+          600: "#22925B",
+          700: "#17653E",
+          800: "#0D3722",
+          900: "#020906",
+          950: "#000000",
+        },
+        brown: {
+          DEFAULT: "#353434",
+          50: "#918F8F",
+          100: "#878585",
+          200: "#737171",
+          300: "#5E5C5C",
+          400: "#4A4848",
+          500: "#353434",
+          600: "#191818",
+          700: "#000000",
+          800: "#000000",
+          900: "#000000",
+          950: "#000000",
+        },
       },
       borderRadius: {
         "4xl": "2rem",
diff --git a/packages/features/uploadDocument.ts b/packages/features/uploadDocument.ts
index ef57d795f..9a652672e 100644
--- a/packages/features/uploadDocument.ts
+++ b/packages/features/uploadDocument.ts
@@ -1,9 +1,10 @@
 import router from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "../lib/constants";
 import toast from "react-hot-toast";
+import { ChangeEvent } from "react";
 
-export const uploadDocument = async (event: any) => {
-  if (event.target.files && event.target.files[0]) {
+export const uploadDocument = async (event: ChangeEvent) => {
+  if (event.target instanceof HTMLInputElement && event.target?.files && event.target.files[0]) {
     const body = new FormData();
     const document = event.target.files[0];
     const fileName: string = event.target.files[0].name;
@@ -12,8 +13,10 @@ export const uploadDocument = async (event: any) => {
       toast.error("Non-PDF documents are not supported yet.");
       return;
     }
+
     body.append("document", document || "");
-    const response: any = await toast
+
+    await toast
       .promise(
         fetch("/api/documents", {
           method: "POST",
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index fae2fd716..29bcf9183 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -6,8 +6,8 @@ export function Button(props: any) {
   const isLink = typeof props.href !== "undefined" && !props.disabled;
   const { color = "primary", icon, disabled, onClick } = props;
   const baseStyles =
-    "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
-  const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
+    "inline-flex gap-x-2 items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
+  const primaryStyles = "text-gray-900 bg-neon hover:bg-neon-dark";
   const secondaryStyles = "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
 
   return isLink ? (
@@ -21,7 +21,7 @@ export function Button(props: any) {
       )}
       hidden={props.hidden}>
       {props.icon ? (
-        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
+        <props.icon className="inline-block h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -40,7 +40,7 @@ export function Button(props: any) {
       disabled={props.disabled || props.loading}
       hidden={props.hidden}>
       {props.icon ? (
-        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
+        <props.icon className="inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}