📝 (frontend): update placeholder text color to improve visibility and…

… consistency across components
langflow-ai · Oct 25, 2024 · 90a37a0 · 90a37a0
1 parent 07c3651
commit 90a37a0
Show file tree

Hide file tree

Showing 18 changed files with 36 additions and 30 deletions.
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -153,8 +153,8 @@ export default function NodeOutputField({
                   className={cn(
                     "h-4 w-4",
                     disabledOutput
-                      ? "text-placeholder opacity-60"
-                      : "text-placeholder hover:text-foreground",
+                      ? "text-placeholder-foreground opacity-60"
+                      : "text-placeholder-foreground hover:text-foreground",
                   )}
                   strokeWidth={1.5}
                   name={data.node?.outputs![index].hidden ? "EyeOff" : "Eye"}
@@ -208,7 +208,7 @@ export default function NodeOutputField({
                     {
                       <IconComponent
                         className={cn(
-                          "h-5 w-5 rounded-md text-placeholder",
+                          "text-placeholder-foreground h-5 w-5 rounded-md",
                           displayOutputPreview && !unknownOutput
                             ? "hover:text-foreground"
                             : "cursor-not-allowed text-muted-foreground opacity-60",

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -208,7 +208,9 @@ export default function NodeStatus({
                   <IconComponent
                     name="Play"
                     className={`play-button-icon ${
-                      isHovered ? "text-foreground" : "text-placeholder"
+                      isHovered
+                        ? "text-foreground"
+                        : "text-placeholder-foreground"
                     }`}
                   />
                 </div>

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -426,7 +426,7 @@ export default function GenericNode({
                       <ForwardedIconComponent
                         name={showHiddenOutputs ? "EyeOff" : "Eye"}
                         strokeWidth={1.5}
-                        className="h-4 w-4 text-placeholder group-hover:text-foreground"
+                        className="text-placeholder-foreground h-4 w-4 group-hover:text-foreground"
                       />
                     </Button>
                   </div>

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -101,8 +101,10 @@ export default function Dropdown({
         <ForwardedIconComponent
           name="ChevronsUpDown"
           className={cn(
-            "ml-2 h-4 w-4 shrink-0 text-placeholder",
-            disabled ? "hover:text-placeholder" : "hover:text-foreground",
+            "text-placeholder-foreground ml-2 h-4 w-4 shrink-0",
+            disabled
+              ? "hover:text-placeholder-foreground"
+              : "hover:text-foreground",
           )}
         />
       </Button>

diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -66,7 +66,7 @@ const CustomInputPopover = ({
         <div
           data-testid={`anchor-${id}`}
           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-foreground 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-muted text-muted",
@@ -119,11 +119,12 @@ const CustomInputPopover = ({
               disabled={disabled}
               required={required}
               className={cn(
-                "popover-input",
+                "popover-input truncate pr-4",
                 editNode && "px-3",
                 editNode && disabled && "h-fit w-fit",
                 disabled &&
                   "disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",
+                password && "pr-10",
               )}
               placeholder={
                 selectedOptions?.length > 0 || selectedOption ? "" : placeholder

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
@@ -170,7 +170,7 @@ export default function InputComponent({
             className={cn(
               onChange && setSelectedOption && selectedOption !== ""
                 ? "text-accent-emerald-foreground"
-                : "text-muted-foreground",
+                : "text-placeholder-foreground",
               !disabled && "hover:text-foreground",
             )}
           >
@@ -209,12 +209,12 @@ export default function InputComponent({
           {pwdVisible ? (
             <ForwardedIconComponent
               name="Eye"
-              className="relative top-[1px] h-5 w-5 text-muted-foreground hover:text-foreground"
+              className="text-placeholder-foreground relative top-[1px] h-5 w-5 hover:text-foreground"
             />
           ) : (
             <ForwardedIconComponent
               name="EyeOff"
-              className="relative top-[1px] h-5 w-5 text-muted-foreground hover:text-foreground"
+              className="text-placeholder-foreground relative top-[1px] h-5 w-5 hover:text-foreground"
             />
           )}
         </button>

diff --git a/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx
@@ -98,7 +98,7 @@ export default function CodeAreaComponent({
           editNode
             ? externalLinkIconClasses.editNodeTop
             : externalLinkIconClasses.normalTop,
-          disabled ? "text-placeholder" : "text-foreground",
+          disabled ? "text-placeholder-foreground" : "text-foreground",
         )}
       />
     </>

diff --git a/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx
@@ -63,7 +63,7 @@ export default function FloatComponent({
   };
 
   const iconClassName =
-    "text-placeholder h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
+    "text-placeholder-foreground 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-muted group-increment";

diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx
@@ -100,7 +100,7 @@ export default function InputFileComponent({
                 type="text"
                 className={cn(
                   "primary-input h-9 w-full cursor-pointer rounded-r-none text-sm focus:border-border focus:outline-none focus:ring-0",
-                  !value && "text-placeholder",
+                  !value && "text-placeholder-foreground",
                   editNode && "h-6",
                 )}
                 value={value || "Upload a file..."}

diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx
@@ -49,7 +49,7 @@ export default function InputListComponent({
   };
 
   const getButtonClassName = () =>
-    classNames(disabled ? "text-hard-zinc" : "text-placeholder");
+    classNames(disabled ? "text-hard-zinc" : "text-placeholder-foreground");
 
   const getTestId = (type, index) =>
     `input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
@@ -96,7 +96,7 @@ export default function InputListComponent({
               <IconComponent
                 name={index === 0 ? "Plus" : "Trash2"}
                 className={cn(
-                  "h-4 w-6 text-placeholder",
+                  "text-placeholder-foreground 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
@@ -70,7 +70,7 @@ export default function IntComponent({
   };
 
   const iconClassName =
-    "text-placeholder h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
+    "text-placeholder-foreground 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-muted group-increment";

diff --git a/...rontend/src/components/parameterRenderComponent/components/keypairListComponent/index.tsx b/...rontend/src/components/parameterRenderComponent/components/keypairListComponent/index.tsx
@@ -110,7 +110,7 @@ const KeypairListComponent = ({
         <IconComponent
           name={iconName}
           className={cn(
-            "h-4 w-6 text-placeholder",
+            "text-placeholder-foreground h-4 w-6",
             !disabled && "hover:cursor-pointer hover:text-foreground",
             isFirstItem
               ? "group-hover:text-foreground"

diff --git a/src/frontend/src/components/parameterRenderComponent/components/promptComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/promptComponent/index.tsx
@@ -102,7 +102,7 @@ export default function PromptAreaComponent({
           editNode
             ? externalLinkIconClasses.editNodeTop
             : externalLinkIconClasses.normalTop,
-          disabled ? "text-placeholder" : "text-foreground",
+          disabled ? "text-placeholder-foreground" : "text-foreground",
         )}
       />
     </>

diff --git a/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx
@@ -114,7 +114,7 @@ export default function TextAreaComponent({
             ? externalLinkIconClasses.editNodeTop
             : externalLinkIconClasses.iconTop,
           disabled
-            ? "bg-muted text-placeholder"
+            ? "text-placeholder-foreground bg-muted"
             : "bg-background text-foreground",
         )}
       />
@@ -159,7 +159,7 @@ export default function TextAreaComponent({
               editNode ? "top-[5px]" : "top-[13px]",
               disabled
                 ? "text-placeholder"
-                : "text-muted-foreground hover:text-foreground",
+                : "text-placeholder-foreground hover:text-foreground",
               "right-10",
             )}
           />

diff --git a/src/frontend/src/components/sliderComponent/index.tsx b/src/frontend/src/components/sliderComponent/index.tsx
@@ -226,7 +226,7 @@ export default function SliderComponent({
       <div className="text mt-2 grid grid-cols-2 gap-x-2 text-sm">
         <div className="flex items-center">
           <IconComponent
-            className="mr-1 h-4 w-4 text-placeholder"
+            className="text-placeholder-foreground mr-1 h-4 w-4"
             name={minLabelIcon}
             aria-hidden="true"
           />
@@ -239,7 +239,7 @@ export default function SliderComponent({
             {maxLabel}
           </span>
           <IconComponent
-            className="ml-1 h-4 w-4 text-placeholder"
+            className="text-placeholder-foreground ml-1 h-4 w-4"
             name={maxLabelIcon}
             aria-hidden="true"
           />

diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
@@ -28,13 +28,13 @@ function RefreshButton({
     className,
     disabled ? "cursor-not-allowed" : "",
     !editNode ? "py-2.5 px-3" : "px-2 py-1",
-    "group text-placeholder p-1 h-6 w-6",
+    "group text-placeholder-foreground p-1 h-6 w-6",
   );
 
   // icon class name should take into account the disabled state and the loading state
   const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
   const iconClassName = cn(
-    "h-4 w-4 animate-wiggle group-hover:text-primary text-placeholder",
+    "h-4 w-4 animate-wiggle group-hover:text-primary text-placeholder-foreground",
     disabledIconTextClass,
   );
 

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
@@ -177,7 +177,7 @@
     @apply flex gap-2;
   }
   .primary-input {
-    @apply placeholder:text-placeholder form-input block w-full truncate rounded-md border-border bg-background px-3 text-left text-sm shadow-sm hover:border-muted-foreground focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
+    @apply placeholder:text-placeholder-foreground form-input block w-full truncate rounded-md border-border bg-background px-3 text-left text-sm shadow-sm hover:border-muted-foreground focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
   }
 
   .skeleton-card {
@@ -194,7 +194,7 @@
 
   /* The same as primary-input but no-truncate */
   .textarea-primary {
-    @apply placeholder:text-placeholder form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
+    @apply placeholder:text-placeholder-foreground form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
   }
 
   .input-edit-node {
@@ -1218,7 +1218,7 @@
   }
 
   .disabled-state {
-    @apply text-hard-zinc pointer-events-none bg-secondary;
+    @apply pointer-events-none bg-secondary text-hard-zinc;
   }
 
   .background-fade-input {
@@ -1251,6 +1251,6 @@
   }
 
   .beta-badge {
-    @apply bg-accent-pink text-accent-pink-foreground flex h-6 w-11 items-center justify-center rounded-lg p-2 text-center text-xs font-medium;
+    @apply flex h-6 w-11 items-center justify-center rounded-lg bg-accent-pink p-2 text-center text-xs font-medium text-accent-pink-foreground;
   }
 }
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
@@ -129,6 +129,7 @@ const config = {
         placeholder: "hsl(var(--placeholder))",
         "hard-zinc": "hsl(var(--hard-zinc))",
         "smooth-red": "hsl(var(--smooth-red))",
+        "placeholder-foreground": "hsl(var(--placeholder-foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",