From c0dbafe49ff9103c8e0b49a7289a8d6b680fcf7e Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 16:49:24 -0300
Subject: [PATCH] refactor(components): Update CSS classes in
 codeAreaComponent, floatComponent, intComponent, and dialog

- Update CSS classes in codeAreaComponent, floatComponent, intComponent, and dialog components to improve styling and maintain consistency.
- Replace specific color values with Tailwind CSS utility classes.
- Refactor input styles and focus styles for better user experience.
- Remove unused CSS classes from index.css.
---
 src/frontend/src/components/codeAreaComponent/index.tsx | 2 +-
 src/frontend/src/components/floatComponent/index.tsx    | 2 +-
 src/frontend/src/components/intComponent/index.tsx      | 2 +-
 src/frontend/src/components/ui/dialog.tsx               | 2 +-
 src/frontend/src/constants.tsx                          | 3 ++-
 src/frontend/src/index.css                              | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index d634373fc..1c998a20d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,7 +46,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm bg-transparent sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm text-sm bg-transparent sm:text-sm" +
                 INPUT_STYLE
               : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
                 INPUT_STYLE +
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 65b5166f2..343c83d89 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,7 +56,7 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE
             : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
               INPUT_STYLE +
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index ba743a0d4..462fa0466 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,7 +70,7 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE
             : "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE +
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 050db3aaa..305155412 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-primary/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-secondary/80 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 013fb053d..cab9dfe45 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -148,7 +148,8 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  " focus:ring-1 focus:ring-offset-1 focus:ring-offset-muted-foreground focus:ring-ring focus:outline-none";
+  "focus:tw-ring-none focus:ring-ring bg-background focus:outline-none";
+
 
 
 /**
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index bce434de6..dccb1a243 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 
-/* ! Confirm that all colors here are found in tailwind config */
+/* TODO: Confirm that all colors here are found in tailwind config */
 
 @layer base {