From 27b17a13c2ad87935af08e22d29ba1fa9b28ee96 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 18:39:00 -0300
Subject: [PATCH] Refactor styles and class names in multiple components,
 update color variables, and adjust button and control styles.

- Simplify class names in the SingleAlert component and update color variables.
- Update class names and color variables in the Dialog component.
- Update color variables in the constants file.
- Update color variables and class names in the index.css file.
- Update class names and color variables in the PageComponent file.
- Add a color variable for shared blur styles.
- Update Tailwind CSS configuration to include new color variables.

Note: These changes improve code readability and maintain color consistency throughout the application.
---
 .../components/singleAlertComponent/index.tsx | 22 ++++++------
 src/frontend/src/components/ui/dialog.tsx     |  2 +-
 src/frontend/src/constants.tsx                |  2 +-
 src/frontend/src/index.css                    | 36 +++++++++++++------
 .../components/PageComponent/index.tsx        |  3 +-
 src/frontend/tailwind.config.js               |  3 ++
 6 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 78e28f6d6..fa8bbd6fb 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -62,34 +62,34 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
+                className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
+          className="flex rounded-md bg-info-background p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-medium-dark-blue"
+              className="h-5 w-5 text-info-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-medium-dark-blue">
+            <p className="text-sm text-info-background">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-background hover:text-ring"
                 >
                   Details
                 </Link>
@@ -108,17 +108,17 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
+                className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
         </div>
       ) : (
         <div
-          className="flex bg-green-50  p-3 mb-2 mx-2 rounded-md"
+          className="flex bg-success-background p-3 mb-2 mx-2 rounded-md"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
@@ -142,10 +142,10 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
+                className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 305155412..4df519490 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-blur-shared backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index cab9dfe45..9d4184da6 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -148,7 +148,7 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  "focus:tw-ring-none focus:ring-ring bg-background focus:outline-none";
+  "focus:tw-ring-none focus-visible:outline-none  focus:ring-ring bg-background focus:outline-none";
 
 
 
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dccb1a243..a60f957df 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -34,39 +34,45 @@
   --build-trigger: 	#dc735b;
   --chat-trigger: #5c8be1;
 
-  --error-background: #fef2f2;
-  --error-foreground: #991b1b;
-
   --status-red: #ef4444;
   --status-yellow: #eab308;
   --status-green: #4ade80;
 
+  --error-background: #fef2f2;
+  --error-foreground: #991b1b;
+
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
 
+  --info-background: #f0f4fd;
+  --info-foreground: #141653;
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
   --medium-dark-blue:#1d4ed8;
+
+  /* Colors that are shared in dark and light mode */
+  --blur-shared: #151923de;
 }
 
 .dark {
-  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+  --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
   --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
 
-  --muted: 223 40% 11%; /* hsl(223 47% 11%) */
+  --muted: 223 27% 11%; /* hsl(223 27% 11%) */
   --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
 
   --popover: 224 71% 4%; /* hsl(224 71% 4%) */
   --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
-  --card: 224 71% 7%; /* hsl(224 71% 4%) */
+  --card: 224 25% 15.5%; /* hsl(224 71% 4%) */
   --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
 
   --border: 216 24% 17%; /* hsl(216 34% 17%) */
   --input: 216 24% 17%; /* hsl(216 34% 17%) */
 
-  --primary: 210 40% 80%; /* hsl(210 40% 98%) */
-  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+  --primary: 210 20% 80%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
 
   --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
@@ -86,18 +92,26 @@
   --build-trigger: 	#dc735b;
   --chat-trigger: #5c8be1;
 
-  --error-foreground: #c2b7b7;
-  --error-background: #671212;
-
   --status-red: #ef4444;
   --status-yellow: #eab308;
   --status-green: #4ade80;
 
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
+
+  --error-foreground: #c2b7b7;
+  --error-background: #3e1818;
+
+  --info-foreground: #b7b8c2;
+  --info-background: #18243e;
+
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
   --medium-dark-blue:#1d4ed8;
+
+  /* Colors that are shared in dark and light mode */
+  --blur-shared: #151923d2;
 }}
 
 @layer base {
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index ae9fba948..3c9381a9e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -402,7 +402,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   maxZoom={8}
                 >
                   <Background className="" />
-                  <Controls className="[&>button]:text-black"></Controls>
+                  <Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
+                   fill-foreground bg-muted"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index e60b7e594..53fb08fd8 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
         'btn-shadow': "var(--round-btn-shadow)",
         'build-trigger': "var(--build-trigger)",
         'chat-trigger': "var(--chat-trigger)",
+        'blur-shared': "var(--blur-shared)",
         'dark-blue': "var(--dark-blue)",
         'dark-gray': "var(--dark-gray)",
         'dark-red': "var(--dark-red)",
@@ -36,6 +37,8 @@ module.exports = {
         'high-dark-gray': "var(--high-dark-gray)",
         'high-indigo': "var(--high-indigo)",
         'high-light-gray': "var(--high-light-gray)",
+        'info-background': "var(--info-background)",
+        'info-foreground': "var(--info-foreground)",
         'light-blue': "var(--light-blue)",
         'light-gray': "var(--light-gray)",
         'light-slate': "var(--light-slate)",