From 290f4f0f8c36c197a19f03bdda63c39de894d35a Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Sun, 15 Sep 2024 01:29:31 -0700
Subject: [PATCH] add some minor ux updates (#2441)

---
 .../prompt-library/modals/AddPromptModal.tsx  | 22 +------
 web/src/app/globals.css                       | 58 +++++++++++++++-
 web/src/components/Modal.tsx                  | 66 ++++++++++---------
 web/src/components/modals/ModalWrapper.tsx    | 28 ++++----
 web/tailwind-themes/tailwind.config.js        | 54 +++++++--------
 5 files changed, 134 insertions(+), 94 deletions(-)

diff --git a/web/src/app/admin/prompt-library/modals/AddPromptModal.tsx b/web/src/app/admin/prompt-library/modals/AddPromptModal.tsx
index 8f826098bc4..0d385f48479 100644
--- a/web/src/app/admin/prompt-library/modals/AddPromptModal.tsx
+++ b/web/src/app/admin/prompt-library/modals/AddPromptModal.tsx
@@ -14,26 +14,6 @@ const AddPromptSchema = Yup.object().shape({
 });
 
 const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
-  const defaultPrompts = [
-    {
-      title: "Email help",
-      prompt: "Write a professional email addressing the following points:",
-    },
-    {
-      title: "Code explanation",
-      prompt: "Explain the following code snippet in simple terms:",
-    },
-    {
-      title: "Product description",
-      prompt: "Write a compelling product description for the following item:",
-    },
-    {
-      title: "Troubleshooting steps",
-      prompt:
-        "Provide step-by-step troubleshooting instructions for the following issue:",
-    },
-  ];
-
   return (
     <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
       <Formik
@@ -53,7 +33,7 @@ const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
       >
         {({ isSubmitting, setFieldValue }) => (
           <Form>
-            <h2 className="text-2xl gap-x-2 text-emphasis font-bold mb-3 flex items-center">
+            <h2 className="w-full text-2xl gap-x-2 text-emphasis font-bold mb-3 flex items-center">
               <BookstackIcon size={20} />
               Add prompt
             </h2>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 9c4e5a453be..49142d065f6 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -58,7 +58,7 @@
     /* Very light grayish blue */
     --background-strong: #eaecef;
     /* Light grayish blue */
-    --border: #e5e5e5;
+    --border: #e5e7eb;
     /* gray-200 - Light gray */
     --border-light: #f5f5f5;
     /* gray-100 - Very light gray */
@@ -129,6 +129,62 @@
     /* Medium gray for dark scrollbar thumb */
     --scrollbar-dark-thumb-hover: #c7cdd2;
     /* Light medium gray for dark scrollbar thumb on hover */
+
+    /* Adding missing colors from tailwind-themes/tailwind.config.js */
+    --tremor-brand-faint: #eff6ff;
+    /* blue-50 */
+    --tremor-brand-muted: #bfdbfe;
+    /* blue-200 */
+    --tremor-brand-subtle: #60a5fa;
+    /* blue-400 */
+    --tremor-brand-emphasis: #1d4ed8;
+    /* blue-700 */
+    --tremor-brand-inverted: #ffffff;
+    /* white */
+    --tremor-background-muted: #f9fafb;
+    /* gray-50 */
+    --tremor-background-subtle: #f3f4f6;
+    /* gray-100 */
+    --tremor-background-emphasis: #374151;
+    /* gray-700 */
+    --tremor-content-subtle: #9ca3af;
+    /* gray-400 */
+    --tremor-content-default: #4b5563;
+    /* gray-600 */
+    --tremor-content-emphasis: #374151;
+    /* gray-700 */
+    --tremor-content-strong: #111827;
+    /* gray-900 */
+    --tremor-content-inverted: #ffffff;
+    /* white */
+    --dark-tremor-brand-faint: #0b1229;
+    /* custom */
+    --dark-tremor-brand-muted: #172554;
+    /* blue-950 */
+    --dark-tremor-brand-subtle: #1e40af;
+    /* blue-800 */
+    --dark-tremor-brand-emphasis: #60a5fa;
+    /* blue-400 */
+    --dark-tremor-brand-inverted: #030712;
+    /* gray-950 */
+    --dark-tremor-background-muted: #131a2b;
+    /* custom */
+    --dark-tremor-background-subtle: #1f2937;
+    /* gray-800 */
+    --dark-tremor-background-default: #111827;
+    /* gray-900 */
+    --dark-tremor-background-emphasis: #d1d5db;
+    /* gray-300 */
+    --dark-tremor-content-subtle: #6b7280;
+    /* gray-500 */
+    --dark-tremor-content-default: #d1d5db;
+    /* gray-300 */
+    --dark-tremor-content-emphasis: #f3f4f6;
+    /* gray-100 */
+    --dark-tremor-content-strong: #f9fafb;
+    /* gray-50 */
+    --dark-tremor-content-inverted: #000000;
+    /* black */
   }
 }
 
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index f3985276520..4c687078dea 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Divider } from "@tremor/react";
 import { FiX } from "react-icons/fi";
-import { IconProps } from "./icons/icons";
+import { IconProps, XIcon } from "./icons/icons";
 import { useRef } from "react";
 import { isEventWithinRef } from "@/lib/contains";
 
@@ -18,7 +18,6 @@ interface ModalProps {
 }
 
 export function Modal({
-  icon,
   children,
   title,
   onOutsideClick,
@@ -27,6 +26,7 @@ export function Modal({
   titleSize,
   hideDividerForTitle,
   noPadding,
+  icon,
 }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -40,46 +40,50 @@ export function Modal({
       onOutsideClick();
     }
   };
+
   return (
-    <div>
+    <div
+      onMouseDown={handleMouseDown}
+      className={`fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm 
+        flex items-center justify-center z-50 transition-opacity duration-300 ease-in-out`}
+    >
       <div
-        className={`
-        fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm
-        flex items-center justify-center z-50
-      `}
-        onMouseDown={handleMouseDown}
+        ref={modalRef}
+        onClick={(e) => {
+          if (onOutsideClick) {
+            e.stopPropagation();
+          }
+        }}
+        className={`bg-background text-emphasis rounded shadow-2xl 
+          transform transition-all duration-300 ease-in-out
+          ${width ?? "w-11/12 max-w-5xl"}
+          ${noPadding ? "" : "p-10"}
+          ${className || ""}`}
       >
-        <div
-          ref={modalRef}
-          className={`
-          bg-background rounded shadow-lg
-          relative ${width ?? "w-1/2"} text-sm 
-          ${noPadding ? "" : "p-8"}
-          ${className}
-        `}
-          onClick={(event) => event.stopPropagation()}
-        >
+        {onOutsideClick && (
+          <div className="absolute top-2 right-2">
+            <button
+              onClick={onOutsideClick}
+              className="cursor-pointer text-text-500 hover:text-text-700 transition-colors duration-200 p-2"
+              aria-label="Close modal"
+            >
+              <XIcon className="w-5 h-5" />
+            </button>
+          </div>
+        )}
+
+        <div className="flex w-full flex-col justify-stretch">
           {title && (
             <>
               <div className="flex mb-4">
                 <h2
-                  className={
-                    "my-auto flex content-start gap-x-4 font-bold " +
-                    (titleSize || "text-2xl")
-                  }
+                  className={`my-auto flex content-start gap-x-4 font-bold ${
+                    titleSize || "text-2xl"
+                  }`}
                 >
                   {title}
                   {icon && icon({ size: 30 })}
                 </h2>
-
-                {onOutsideClick && (
-                  <div
-                    onClick={onOutsideClick}
-                    className="my-auto ml-auto p-2 hover:bg-hover rounded cursor-pointer"
-                  >
-                    <FiX size={20} />
-                  </div>
-                )}
               </div>
               {!hideDividerForTitle && <Divider />}
             </>
diff --git a/web/src/components/modals/ModalWrapper.tsx b/web/src/components/modals/ModalWrapper.tsx
index e264410863d..f69ff0e2b6e 100644
--- a/web/src/components/modals/ModalWrapper.tsx
+++ b/web/src/components/modals/ModalWrapper.tsx
@@ -26,15 +26,12 @@ export const ModalWrapper = ({
       onClose();
     }
   };
-
   return (
     <div
       onMouseDown={handleMouseDown}
-      className={
-        "fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm " +
-        "flex items-center justify-center z-50 " +
-        (bgClassName || "")
-      }
+      className={`fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm 
+        flex items-center justify-center z-50 transition-opacity duration-300 ease-in-out
+        ${bgClassName || ""}`}
     >
       <div
         ref={modalRef}
@@ -43,20 +40,23 @@ export const ModalWrapper = ({
             e.stopPropagation();
           }
         }}
-        className={
-          "bg-background text-emphasis p-8 rounded shadow-xl w-3/4 max-w-3xl shadow " +
-          (modalClassName || "")
-        }
+        className={`bg-background text-emphasis p-10 rounded shadow-2xl 
+          w-11/12 max-w-3xl transform transition-all duration-300 ease-in-out
+          relative ${modalClassName || ""}`}
       >
         {onClose && (
-          <div className="w-full cursor-pointer flex justify-end">
-            <button onClick={onClose}>
-              <XIcon />
+          <div className="absolute top-2 right-2">
+            <button
+              onClick={onClose}
+              className="cursor-pointer text-text-500 hover:text-text-700 transition-colors duration-200 p-2"
+              aria-label="Close modal"
+            >
+              <XIcon className="w-5 h-5" />
             </button>
           </div>
         )}
 
-        {children}
+        <div className="flex w-full flex-col justify-stretch">{children}</div>
       </div>
     </div>
   );
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index a061a6d532d..a42967a12e9 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -173,18 +173,18 @@ module.exports = {
         // light mode
         tremor: {
           brand: {
-            faint: "#eff6ff", // blue-50
-            muted: "#bfdbfe", // blue-200
-            subtle: "#60a5fa", // blue-400
+            faint: "var(--tremor-brand-faint)",
+            muted: "var(--tremor-brand-muted)",
+            subtle: "var(--tremor-brand-subtle)",
             DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#1d4ed8", // blue-700
-            inverted: "#ffffff", // white
+            emphasis: "var(--tremor-brand-emphasis)",
+            inverted: "var(--tremor-brand-inverted)",
           },
           background: {
-            muted: "#f9fafb", // gray-50
-            subtle: "#f3f4f6", // gray-100
+            muted: "var(--tremor-background-muted)",
+            subtle: "var(--tremor-background-subtle)",
             DEFAULT: "#ffffff", // white
-            emphasis: "#374151", // gray-700
+            emphasis: "var(--tremor-background-emphasis)",
           },
           border: {
             DEFAULT: "#e5e7eb", // gray-200
@@ -193,28 +193,28 @@ module.exports = {
             DEFAULT: "#e5e7eb", // gray-200
           },
           content: {
-            subtle: "#9ca3af", // gray-400
-            DEFAULT: "#4b5563", // gray-600
-            emphasis: "#374151", // gray-700
-            strong: "#111827", // gray-900
-            inverted: "#ffffff", // white
+            subtle: "var(--tremor-content-subtle)",
+            DEFAULT: "var(--tremor-content-default)",
+            emphasis: "var(--tremor-content-emphasis)",
+            strong: "var(--tremor-content-strong)",
+            inverted: "var(--tremor-content-inverted)",
           },
         },
         // dark mode
         "dark-tremor": {
           brand: {
-            faint: "#0B1229", // custom
-            muted: "#172554", // blue-950
-            subtle: "#1e40af", // blue-800
+            faint: "var(--dark-tremor-brand-faint)",
+            muted: "var(--dark-tremor-brand-muted)",
+            subtle: "var(--dark-tremor-brand-subtle)",
             DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#60a5fa", // blue-400
-            inverted: "#030712", // gray-950
+            emphasis: "var(--dark-tremor-brand-emphasis)",
+            inverted: "var(--dark-tremor-brand-inverted)",
           },
           background: {
-            muted: "#131A2B", // custom
-            subtle: "#1f2937", // gray-800
-            DEFAULT: "#111827", // gray-900
-            emphasis: "#d1d5db", // gray-300
+            muted: "var(--dark-tremor-background-muted)",
+            subtle: "var(--dark-tremor-background-subtle)",
+            DEFAULT: "var(--dark-tremor-background-default)",
+            emphasis: "var(--dark-tremor-background-emphasis)",
           },
           border: {
             DEFAULT: "#1f2937", // gray-800
@@ -223,11 +223,11 @@ module.exports = {
             DEFAULT: "#1f2937", // gray-800
           },
           content: {
-            subtle: "#6b7280", // gray-500
-            DEFAULT: "#d1d5db", // gray-300
-            emphasis: "#f3f4f6", // gray-100
-            strong: "#f9fafb", // gray-50
-            inverted: "#000000", // black
+            subtle: "var(--dark-tremor-content-subtle)",
+            DEFAULT: "var(--dark-tremor-content-default)",
+            emphasis: "var(--dark-tremor-content-emphasis)",
+            strong: "var(--dark-tremor-content-strong)",
+            inverted: "var(--dark-tremor-content-inverted)",
           },
         },
       },