refactor(web): Update environment field border color for error state …

…in Helm Template
devopshobbies · Dec 4, 2024 · 97299e4 · 97299e4
1 parent c30f0ee
commit 97299e4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/web/src/pages/helm-template/components/pod-environment-fields.tsx b/web/src/pages/helm-template/components/pod-environment-fields.tsx
@@ -31,7 +31,15 @@ const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
       <div className="grid grid-cols-2 gap-4">
         {fields.map((field, envIdx) => (
           <div
-            className="mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0"
+            className={cn(
+              'mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0',
+              {
+                'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
+                  control.getFieldState(
+                    `pods.${podIndex}.environment.${envIdx}.name`,
+                  ).invalid,
+              },
+            )}
             key={field.id}
           >
             <FormInput

diff --git a/web/src/styles/select.styles.ts b/web/src/styles/select.styles.ts
@@ -2,6 +2,7 @@ import { GroupBase, StylesConfig } from 'react-select';
 
 export const selectStyle = (
   isDark?: boolean,
+  error?: boolean,
 ):
   | StylesConfig<
       {
@@ -18,7 +19,7 @@ export const selectStyle = (
   return {
     control: (styles) => ({
       ...styles,
-      border: '1px solid #6b7280',
+      border: error ? '1px solid #ef4444' : '1px solid #6b7280',
       borderRadius: '6px',
       background: isDark ? '#121212' : '#fff',
       color: isDark ? '#fff' : '#121212',