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

@@ -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 +

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 +

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 +

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}

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";
+
 
 
 /**

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 {