📝 (frontend): Update CSS classes to use 'bg-muted' instead of 'bg-sec…

…ondary' for better consistency and readability.
langflow-ai · Oct 24, 2024 · 9c88ee0 · 9c88ee0
1 parent 8c172dc
commit 9c88ee0
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 17 deletions.
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -65,10 +65,10 @@ const CustomInputPopover = ({
       <PopoverAnchor>
         <div
           className={cn(
-            "primary-input border-1 flex h-full min-h-[43px] flex-wrap items-center px-3 placeholder:text-placeholder",
+            "primary-input border-1 placeholder:text-placeholder flex h-full min-h-[43px] flex-wrap items-center px-3",
             editNode && "min-h-7 p-0",
             editNode && disabled && "min-h-5 border-muted p-0",
-            disabled && "bg-secondary text-muted",
+            disabled && "bg-muted text-muted",
           )}
           onClick={() => {
             if (!nodeStyle && !disabled) {
@@ -85,7 +85,7 @@ const CustomInputPopover = ({
               >
                 <div className="truncate">{option}</div>
                 <X
-                  className="h-3 w-3 cursor-pointer hover:text-destructive"
+                  className="h-3 w-3 cursor-pointer bg-transparent hover:text-destructive"
                   onClick={(e) => handleRemoveOption(option, e)}
                 />
               </Badge>
@@ -96,12 +96,12 @@ const CustomInputPopover = ({
               className={cn(
                 "flex items-center gap-1 truncate bg-muted",
                 nodeStyle &&
-                  "rounded-[3px] bg-emerald-100 px-1 font-jetbrains text-emerald-700 hover:bg-emerald-200",
+                  "font-jetbrains rounded-[3px] bg-emerald-100 px-1 text-emerald-700 hover:bg-emerald-200",
               )}
             >
               <div className="max-w-36 truncate">{selectedOption}</div>
               <X
-                className="h-3 w-3 cursor-pointer hover:text-destructive"
+                className="h-3 w-3 cursor-pointer bg-transparent hover:text-destructive"
                 onClick={(e) => handleRemoveOption(selectedOption, e)}
               />
             </Badge>

diff --git a/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx
@@ -66,9 +66,9 @@ export default function FloatComponent({
     "text-placeholder h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
   const stepperClassName = "w-5 rounded-r-sm border-l-[1px]";
   const incrementStepperClassName =
-    "border-b-[1px] hover:rounded-tr-[5px] hover:bg-secondary group-increment";
+    "border-b-[1px] hover:rounded-tr-[5px] hover:bg-muted group-increment";
   const decrementStepperClassName =
-    "hover:rounded-br-[5px] hover:bg-secondary group-decrement";
+    "hover:rounded-br-[5px] hover:bg-muted group-decrement";
   const inputRef = useRef(null);
 
   return (

diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx
@@ -83,7 +83,7 @@ export default function InputListComponent({
                 ? "pointer-events-none bg-background hover:bg-background"
                 : "",
               index === 0
-                ? "bg-background hover:bg-secondary"
+                ? "bg-background hover:bg-muted"
                 : "hover:bg-smooth-red",
             )}
           >
@@ -96,7 +96,7 @@ export default function InputListComponent({
               <IconComponent
                 name={index === 0 ? "Plus" : "Trash2"}
                 className={cn(
-                  "h-4 w-6 text-placeholder",
+                  "text-placeholder h-4 w-6",
                   !disabled && "hover:cursor-pointer hover:text-foreground",
                   index === 0
                     ? "group-hover:text-foreground"

diff --git a/src/frontend/src/components/parameterRenderComponent/components/intComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/intComponent/index.tsx
@@ -73,9 +73,9 @@ export default function IntComponent({
     "text-placeholder h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
   const stepperClassName = " w-5 rounded-r-sm border-l-[1px]";
   const incrementStepperClassName =
-    " border-b-[1px] hover:rounded-tr-[5px] hover:bg-secondary group-increment";
+    " border-b-[1px] hover:rounded-tr-[5px] hover:bg-muted group-increment";
   const decrementStepperClassName =
-    " hover:rounded-br-[5px] hover:bg-secondary group-decrement";
+    " hover:rounded-br-[5px] hover:bg-muted group-decrement";
   const inputRef = useRef(null);
 
   return (

diff --git a/...rontend/src/components/parameterRenderComponent/components/keypairListComponent/index.tsx b/...rontend/src/components/parameterRenderComponent/components/keypairListComponent/index.tsx
@@ -104,15 +104,13 @@ const KeypairListComponent = ({
           disabled
             ? "pointer-events-none bg-background hover:bg-background"
             : "",
-          isFirstItem
-            ? "bg-background hover:bg-secondary"
-            : "hover:bg-smooth-red",
+          isFirstItem ? "bg-background hover:bg-muted" : "hover:bg-smooth-red",
         )}
       >
         <IconComponent
           name={iconName}
           className={cn(
-            "h-4 w-6 text-placeholder",
+            "text-placeholder h-4 w-6",
             !disabled && "hover:cursor-pointer hover:text-foreground",
             isFirstItem
               ? "group-hover:text-foreground"

diff --git a/src/frontend/src/components/pdfViewer/index.tsx b/src/frontend/src/components/pdfViewer/index.tsx
@@ -110,7 +110,7 @@ export default function PdfViewer({ pdf }: { pdf: string }): JSX.Element {
           "absolute z-50 pb-5 " + (showControl && numPages > 0 ? "" : " hidden")
         }
       >
-        <div className="flex w-min items-center justify-center gap-0.5 rounded-xl bg-secondary px-2 align-middle">
+        <div className="flex w-min items-center justify-center gap-0.5 rounded-xl bg-muted px-2 align-middle">
           <button
             type="button"
             disabled={pageNumber <= 1}

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
@@ -1194,7 +1194,7 @@
   }
 
   .button-run-bg {
-    @apply flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 hover:bg-secondary hover:p-1;
+    @apply flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 hover:bg-muted hover:p-1;
   }
 
   .play-button-icon {