From 81c18ee37c338576b9007dc85d9f99139d3d23c5 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Thu, 16 Dec 2021 23:27:09 +0100
Subject: [PATCH] feat: tweak add new app connection dialog

---
 .../web/src/components/AddNewAppConnection/index.tsx     | 8 ++++----
 packages/web/src/components/AppIcon/index.tsx            | 5 ++---
 packages/web/src/components/InputCreator/index.tsx       | 1 +
 packages/web/src/components/TextField/index.tsx          | 2 +-
 packages/web/src/locales/en.json                         | 6 +++++-
 packages/web/src/styles/theme.ts                         | 9 +++++++++
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/AddNewAppConnection/index.tsx b/packages/web/src/components/AddNewAppConnection/index.tsx
index db6a5350..eb0705e8 100644
--- a/packages/web/src/components/AddNewAppConnection/index.tsx
+++ b/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>
-                  <AppIcon color={app.primaryColor} url={app.iconUrl} name={app.name} />
+                <ListItemIcon sx={{ minWidth: 74 }}>
+                  <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>
           ))}
diff --git a/packages/web/src/components/AppIcon/index.tsx b/packages/web/src/components/AppIcon/index.tsx
index a9ba9137..df5eb884 100644
--- a/packages/web/src/components/AppIcon/index.tsx
+++ b/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 color = url ? 'white' : props.color
+  const { name, url, color, sx = {}, ...restProps } = props;
 
   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}
diff --git a/packages/web/src/components/InputCreator/index.tsx b/packages/web/src/components/InputCreator/index.tsx
index 1b1f8cfc..c3fbd62a 100644
--- a/packages/web/src/components/InputCreator/index.tsx
+++ b/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}
diff --git a/packages/web/src/components/TextField/index.tsx b/packages/web/src/components/TextField/index.tsx
index ea3216b8..ace76a3a 100644
--- a/packages/web/src/components/TextField/index.tsx
+++ b/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>
 );
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 7001e536..979513ab 100644
--- a/packages/web/src/locales/en.json
+++ b/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}"
 
 }
\ No newline at end of file
diff --git a/packages/web/src/styles/theme.ts b/packages/web/src/styles/theme.ts
index e62d6301..be2a51c1 100644
--- a/packages/web/src/styles/theme.ts
+++ b/packages/web/src/styles/theme.ts
@@ -239,6 +239,15 @@ const extendedTheme = createTheme({
         }
       }
     },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          '&&': {
+            paddingTop: referenceTheme.spacing(2),
+          }
+        },
+      }
+    },
     MuiDialogTitle: {
       styleOverrides: {
         root: {