Spacing for Config and Secret

Signed-off-by: Trung Nguyen <[email protected]>

Author: trungutt

src/extension/ui/src/components/tile/ConfigEditor.tsx

@@ -2,10 +2,8 @@ import { v1 } from '@docker/extension-api-client-types';
 import CheckOutlined from '@mui/icons-material/CheckOutlined';
 import CloseOutlined from '@mui/icons-material/CloseOutlined';
 import {
-  Alert,
   CircularProgress,
   IconButton,
-  OutlinedInput,
   Stack,
   TextField,
   Typography,
@@ -82,7 +80,7 @@ const ConfigEditor = ({
   }
 
   return (
-    <Stack>
+    <Stack spacing={1}>
       <Typography variant="subtitle2">Config</Typography>
       <Stack direction="column" spacing={2}>
         {Object.keys(flattenedConfig).map((key: string) => {
@@ -91,9 +89,9 @@ const ConfigEditor = ({
 
           return (
             <Stack key={key} direction="row" spacing={2}>
-              <OutlinedInput
+              <TextField
                 size="small"
-                placeholder={key}
+                label={key}
                 value={localConfig[key] || ''}
                 onChange={(e) =>
                   setLocalConfig({ ...localConfig, [key]: e.target.value })

src/extension/ui/src/components/tile/Modal.tsx

@@ -21,6 +21,7 @@ import {
   Switch,
   Tab,
   Tabs,
+  TextField,
   Tooltip,
   Typography,
   useTheme,
@@ -279,7 +280,7 @@ const ConfigurationModal = ({
                 <Stack direction="column" spacing={2}>
                   <ConfigEditor catalogItem={catalogItem} client={client} />
 
-                  <Stack>
+                  <Stack spacing={1}>
                     <Typography variant="subtitle2">Secrets</Typography>
                     {catalogItem.secrets && catalogItem.secrets?.length > 0 ? (
                       catalogItem.secrets.map((secret) => {
@@ -296,10 +297,10 @@ const ConfigurationModal = ({
                             spacing={2}
                             alignItems="center"
                           >
-                            <OutlinedInput
+                            <TextField
                               size="small"
                               key={secret.name}
-                              placeholder={secret.name}
+                              label={secret.name}
                               value={localSecrets[secret.name]}
                               fullWidth
                               onChange={(e) => {