feat: style add new app connection

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

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { Link } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import Dialog from '@mui/material/Dialog';
-import TextField from '@mui/material/TextField';
 import SearchIcon from '@mui/icons-material/Search';
 import InputAdornment from '@mui/material/InputAdornment';
 import List from '@mui/material/List';
@@ -12,6 +13,9 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormControl from '@mui/material/FormControl';
 
 import * as URLS from 'config/urls';
 import AppIcon from 'components/AppIcon';
@@ -25,30 +29,46 @@ type AddNewAppConnectionProps = {
 
 export default function AddNewAppConnection(props: AddNewAppConnectionProps){
   const { onClose } = props;
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = useState<string | null>(null);
   const { data } = useQuery(GET_APPS, { variables: {name: appName } });
 
   return (
     <Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle>{formatMessage('apps.addNewAppConnection')}</DialogTitle>
+      <DialogTitle>
+        {formatMessage('apps.addNewAppConnection')}
+      </DialogTitle>
 
       <DialogContent>
-        <TextField
+        <FormControl
+          variant="outlined"
           fullWidth
-          variant="filled"
+          sx={{ mt: 2 }}
-          label={formatMessage('apps.searchApp')}
+          size={matchSmallScreens ? 'small' : 'medium'}
-          onChange={(event) => setAppName(event.target.value)}
+        >
-          InputProps={{
+          <InputLabel
-            startAdornment: (
+            htmlFor="search-app"
-              <InputAdornment position="start">
+          >
-                <SearchIcon />
+            {formatMessage('apps.searchApp')}
-              </InputAdornment>
+          </InputLabel>
-            ),
-          }}
-        />
 
-        <List>
+          <OutlinedInput
+            id="search-app"
+            type="text"
+            fullWidth
+            onChange={(event) => setAppName(event.target.value)}
+            endAdornment={
+              <InputAdornment position="end">
+                <SearchIcon sx={{ color: (theme) => theme.palette.primary.main }} />
+              </InputAdornment>
+            }
+            label={formatMessage('apps.searchApp')}
+          />
+        </FormControl>
+
+        <List sx={{ pt: 2 }}>
           {data?.getApps?.map((app: App) => (
             <ListItem disablePadding key={app.name}>
               <ListItemButton component={Link} to={URLS.APP_ADD_CONNECTION(app.name.toLowerCase())}>

packages/web/src/styles/theme.ts

@@ -176,6 +176,13 @@ const extendedTheme = createTheme({
         elevation: 2,
       },
     },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          background: 'rgba(0, 8, 20, 0.64)'
+        }
+      }
+    },
     MuiButton: {
       styleOverrides: {
         root: {
@@ -221,6 +228,21 @@ const extendedTheme = createTheme({
         },
       },
     },
+    MuiDialog: {
+      styleOverrides: {
+        paperWidthSm: {
+          margin: referenceTheme.spacing(4, 3),
+          width: `calc(100% - ${referenceTheme.spacing(6)})`,
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          paddingTop: referenceTheme.spacing(3),
+        }
+      }
+    },
     MuiToolbar: {
       styleOverrides: {
         root: {