Password and input themses

frontend/src/components/tools/automate/AutomationCreation.tsx

@@ -148,20 +148,19 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
   return (
     <div>
         <Text size="sm" mb="md" p="md"  style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
-        {t("automate.creation.description", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
+            {t("automate.creation.description", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
         </Text>
       <Divider mb="md" />
 
       <Stack gap="md">
         {/* Automation Name and Icon */}
-        <Group gap="xs" align="flex-start">
+        <Group gap="xs" align="flex-end">
           <Stack gap="xs" style={{ flex: 1 }}>
-            <Text size="sm" fw={500} mb="xs" style={{ color: "var(--mantine-color-text)" }}>
-              {t('automate.creation.name.label', 'Automation Name')} *
-            </Text>
             <TextInput
               placeholder={t('automate.creation.name.placeholder', 'My Automation')}
               value={automationName}
+              withAsterisk
+              label={t('automate.creation.name.label', 'Automation Name')}
               onChange={(e) => setAutomationName(e.currentTarget.value)}
               size="sm"
             />

frontend/src/components/tools/automate/IconSelector.tsx

@@ -22,11 +22,10 @@ export default function IconSelector({ value = "SettingsIcon", onChange, size =
   };
 
   const iconSize = size === "sm" ? 16 : size === "md" ? 18 : 20;
-  const actionIconSize = size === "sm" ? "sm" : size === "md" ? "md" : "lg";
 
   return (
-    <Stack gap="xs">
+    <Stack gap="1px">
-      <Text size="sm" fw={500} mb="xs" style={{ color: "var(--mantine-color-text)" }}>
+      <Text size="sm" fw={600} style={{ color: "var(--mantine-color-primary)" }}>
         {t("automate.creation.icon.label", "Icon")}
       </Text>
 

frontend/src/theme/mantineTheme.ts

@@ -109,7 +109,26 @@ export const mantineTheme = createTheme({
     },
 
     TextInput: {
-      styles: {
+      styles: (theme: any) => ({
+        input: {
+          backgroundColor: 'var(--bg-surface)',
+          borderColor: 'var(--border-default)',
+          color: 'var(--text-primary)',
+          outline: 'white',
+          '&:focus': {
+            borderColor: 'var(--color-primary-500)',
+            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          },
+        },
+        label: {
+          color: 'var(--text-secondary)',
+          fontWeight: 'var(--font-weight-medium)',
+        },
+      }),
+    },
+
+     PasswordInput: {
+      styles: (theme: any) => ({
         input: {
           backgroundColor: 'var(--bg-surface)',
           borderColor: 'var(--border-default)',
@@ -123,7 +142,7 @@ export const mantineTheme = createTheme({
           color: 'var(--text-secondary)',
           fontWeight: 'var(--font-weight-medium)',
         },
-      },
+      }),
     },
 
     Select: {