From 10ac3ee89aae5837e2f420896ab3b7784a3e8b5f Mon Sep 17 00:00:00 2001
From: madhav-relish <madhavsingh.relish@gmail.com>
Date: Tue, 27 Aug 2024 23:07:22 +0530
Subject: [PATCH] Fix #179

- Modal is now big and fully responsive
- Simplified the styling
- changed the design of the "To" autocomplete to the desired one
---
 .../app/(app)/compose/ComposeEmailForm.tsx    | 18 ++++++----
 apps/web/components/Modal.tsx                 | 35 +++++++++----------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/apps/web/app/(app)/compose/ComposeEmailForm.tsx b/apps/web/app/(app)/compose/ComposeEmailForm.tsx
index 8807fb201..8831b3d00 100644
--- a/apps/web/app/(app)/compose/ComposeEmailForm.tsx
+++ b/apps/web/app/(app)/compose/ComposeEmailForm.tsx
@@ -1,6 +1,11 @@
 "use client";
 
-import { Combobox, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react";
 import { CheckCircleIcon, TrashIcon, XIcon } from "lucide-react";
 import {
   EditorBubble,
@@ -166,12 +171,12 @@ export const ComposeEmailForm = (props: {
                 multiple
                 nullable={true}
               >
-                <div className="flex w-full flex-wrap items-center">
+                <div className="flex min-h-10 w-full flex-1 flex-wrap items-center gap-2 rounded-md border border-gray-300 px-2 py-2 shadow-sm focus-within:border-black focus-within:ring-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm">
                   {selectedEmailAddressses.map((emailAddress) => (
                     <Badge
                       key={emailAddress}
                       variant="outline"
-                      className="mr-1.5"
+                      className="h-8 rounded-md border-primary bg-primary text-white"
                     >
                       {extractNameFromEmail(emailAddress)}
 
@@ -185,10 +190,9 @@ export const ComposeEmailForm = (props: {
                   ))}
 
                   <div className="relative flex-1">
-                    <Combobox.Input
+                    <ComboboxInput
                       value={searchQuery}
-                      // styles copied and pasted from Input.tsx
-                      className="block w-full flex-1 rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm"
+                      className="w-full border-none py-0 focus:border-none focus:ring-0"
                       onChange={(event) => setSearchQuery(event.target.value)}
                       onKeyUp={(event) => {
                         if (event.key === "Enter") {
@@ -296,7 +300,7 @@ export const ComposeEmailForm = (props: {
             setValue("messageHtml", editor.getHTML());
           }}
           className={cn(
-            "relative min-h-32 w-full max-w-screen-lg bg-background sm:rounded-lg",
+            "relative min-h-32 w-full max-w-screen-lg rounded-xl border bg-background sm:rounded-lg",
             props.novelEditorClassName,
           )}
           editorProps={{
diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx
index cc3bc4641..80764465b 100644
--- a/apps/web/components/Modal.tsx
+++ b/apps/web/components/Modal.tsx
@@ -61,25 +61,24 @@ export function Modal(props: ModalProps) {
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
+              className={clsx(
+                "w-full transform rounded-2xl bg-white text-left align-middle shadow-xl transition-all",
+                {
+                  "p-6": props.padding === "sm",
+                  "p-10": !props.padding,
+                  "sm:w-full sm:max-w-xl":
+                    !props.fullWidth && (!props.size || props.size === "xl"),
+                  "sm:w-full sm:max-w-2xl":
+                    !props.fullWidth && props.size === "2xl",
+                  "sm:w-full sm:max-w-4xl":
+                    !props.fullWidth && props.size === "4xl",
+                  "sm:w-full sm:max-w-6xl":
+                    !props.fullWidth && props.size === "6xl",
+                  "sm:w-full sm:max-w-full": props.fullWidth,
+                },
+              )}
             >
-              <DialogPanel
-                className={clsx(
-                  "w-full transform rounded-2xl bg-white text-left align-middle shadow-xl transition-all",
-                  {
-                    "p-6": props.padding === "sm",
-                    "p-10": !props.padding,
-                    "sm:w-full sm:max-w-xl":
-                      !props.fullWidth && (!props.size || props.size === "xl"),
-                    "sm:w-full sm:max-w-2xl":
-                      !props.fullWidth && props.size === "2xl",
-                    "sm:w-full sm:max-w-4xl":
-                      !props.fullWidth && props.size === "4xl",
-                    "sm:w-full sm:max-w-6xl":
-                      !props.fullWidth && props.size === "6xl",
-                    "sm:w-full sm:max-w-full": props.fullWidth,
-                  },
-                )}
-              >
+              <DialogPanel>
                 {props.title && (
                   <DialogTitle as="h3" className="font-cal text-xl leading-6">
                     {props.title}