feat: tweak add new app connection dialog

packages/web/src/components/AddNewAppConnection/index.tsx

@@ -45,7 +45,6 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps){
         <FormControl
           variant="outlined"
           fullWidth
-          sx={{ mt: 2 }}
           size={matchSmallScreens ? 'small' : 'medium'}
         >
           <InputLabel
@@ -72,10 +71,11 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps){
           {data?.getApps?.map((app: App) => (
             <ListItem disablePadding key={app.name}>
               <ListItemButton component={Link} to={URLS.APP_ADD_CONNECTION(app.name.toLowerCase())}>
-                <ListItemIcon>
+                <ListItemIcon sx={{ minWidth: 74 }}>
-                  <AppIcon color={app.primaryColor} url={app.iconUrl} name={app.name} />
+                  <AppIcon color="transparent" url={app.iconUrl} name={app.name} />
                 </ListItemIcon>
-                <ListItemText primary={app.name} />
+
+                <ListItemText primary={app.name} primaryTypographyProps={{ sx: { color: (theme) => theme.palette.text.primary }  }} />
               </ListItemButton>
             </ListItem>
           ))}

packages/web/src/components/AppIcon/index.tsx

@@ -13,14 +13,13 @@ const inlineImgStyle: React.CSSProperties = {
 };
 
 export default function AppIcon(props: AppIconProps & AvatarProps) {
-  const { name, url, sx = {}, ...restProps } = props;
+  const { name, url, color, sx = {}, ...restProps } = props;
-  const color = url ? 'white' : props.color
 
   return (
     <Avatar
       component="span"
       variant="square"
-      sx={{ bgcolor: `#${color}`, display: 'inline-flex', width: 50, height: 50, ...sx }}
+      sx={{ bgcolor: color, display: 'inline-flex', width: 50, height: 50, ...sx }}
       imgProps={{ style: inlineImgStyle }}
       src={url}
       alt={name}

packages/web/src/components/InputCreator/index.tsx

@@ -35,6 +35,7 @@ export default function InputCreator(props: InputCreatorProps) {
       readOnly={readOnly}
       onChange={onChange}
       name={name}
+      size="small"
       label={label}
       fullWidth
       helperText={description}

packages/web/src/components/TextField/index.tsx

@@ -22,7 +22,7 @@ const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>) => {
       onClick={() => copyInputValue(ref.current as HTMLInputElement)}
       edge="end"
     >
-      <ContentCopyIcon />
+      <ContentCopyIcon color="primary" />
     </IconButton>
   </InputAdornment>
 );

packages/web/src/locales/en.json

@@ -19,12 +19,16 @@
   "apps.addConnection": "Add connection",
   "apps.addNewAppConnection": "Add a new app connection",
   "apps.searchApp": "Search for app",
+  "addAppConnection.submit": "Submit",
   "connection.flowCount": "{count} flows",
   "connection.viewFlows": "View flows",
   "connection.testConnection": "Test connection",
+  "connection.testSuccessful": "Test successful",
+  "connection.testFailed": "Test failed",
+  "connection.testing": "Testing...",
   "connection.reconnect": "Reconnect",
   "connection.delete": "Delete",
   "connection.deletedMessage": "The connection has been deleted.",
-  "connection.addedAt": "Added {datetime}"
+  "connection.addedAt": "added {datetime}"
 
 }

packages/web/src/styles/theme.ts

@@ -239,6 +239,15 @@ const extendedTheme = createTheme({
         }
       }
     },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          '&&': {
+            paddingTop: referenceTheme.spacing(2),
+          }
+        },
+      }
+    },
     MuiDialogTitle: {
       styleOverrides: {
         root: {