More change on main dialog

packages/webapp/src/components/layout/header/index.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
 import { Button } from '@material-ui/core';
 
-const logo = require('../../../images/header-logo.png')
+const logo = require('../../../images/logo-small.svg')
 
 interface HeaderProps {
   type: 'only-signup' | 'only-signin' | 'none';

packages/webapp/src/components/layout/header/styled.ts

@@ -69,11 +69,7 @@ grid-template-columns: 150px 1fr 130px 160px 50px;
 export const Logo  = styled.span`
 grid-column-start: 1;
 margin-left: 50px;
-margin-top: 5px;
-
-.header-logo img {
-    height: 50px;
-}
+margin-top: 0px;
 
 .header-logo a {
     padding: 0px;

packages/webapp/src/components/maps-page/index.tsx

@@ -4,17 +4,16 @@ import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
-import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { ListItemTextStyled, useStyles } from './style';
-import { AccountCircle, AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, PublishTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
+import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, Help, LabelTwoTone, PublicTwoTone,  ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
 import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
-import { Button, ListItemSecondaryAction, Tooltip } from '@material-ui/core';
+import { Button, ListItemSecondaryAction, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { MapsList } from './maps-list';
+import { FormattedMessage } from 'react-intl';
+const logo = require('../../images/logo-small.svg')
 
 type FilterType = 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned'
 
@@ -28,67 +27,48 @@ interface LabelFinter extends Filter {
 
 const MapsPage = (props: any) => {
     const classes = useStyles();
-    const [open, setOpen] = React.useState(true);
-
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-
     useEffect(() => {
         document.title = 'Maps | WiseMapping';
     }, []);
 
-
     return (
         <div className={classes.root}>
             <AppBar
                 position="fixed"
                 className={clsx(classes.appBar, {
                     [classes.appBarShift]: open,
-                })}>
+                })}
+                variant='outlined'
+                elevation={0}
+            >
                 <Toolbar variant="regular">
-                    <IconButton color="inherit" onClick={handleDrawerOpen} edge="start"
-                        className={clsx(classes.menuButton, {
-                            [classes.hide]: open,
-                        })}>
-                        <MenuIcon />
-                    </IconButton>
-
                     <Tooltip title="Create a New Map">
                         <Button color="primary" size="medium" variant="contained" type="button"
-                            disableElevation={true} startIcon={<AddTwoTone />} className={classes.newMapButton}>
+                            disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
                             New Map
                         </Button>
                     </Tooltip>
 
-                    <Tooltip title="Import from other mindmap tools">
+                    <Tooltip title="Import from external tools">
                         <Button color="primary" size="medium" variant="outlined" type="button"
-                            disableElevation={true} startIcon={<PublishTwoTone />} className={classes.importButton}>
+                            disableElevation={true} startIcon={<CloudUploadTwoTone />} className={classes.importButton}>
                             Import
-                    </Button>
+                        </Button>
                     </Tooltip>
 
+                    <Tooltip title="Use labels to organize your maps">
+                        <Button color="primary" size="medium" variant="outlined" type="button"
+                            disableElevation={true} startIcon={<LabelTwoTone />} className={classes.importButton}>
+                            Label
+                        </Button>
+                    </Tooltip>
 
                     <div className={classes.rightButtonGroup}>
-                        <IconButton
-                            aria-label="account of current user"
-                            aria-controls="menu-appbar"
-                            aria-haspopup="true"
-                        // onClick={handleMenu}
-                        >
-                            <AccountCircle fontSize="large" />
-                        </IconButton>
+                        <HelpToobarButton />
+                        <ProfileToobarButton />
                     </div>
-
-
-
                 </Toolbar>
             </AppBar>
-
             <Drawer
                 variant="permanent"
                 className={clsx(classes.drawer, {
@@ -101,12 +81,10 @@ const MapsPage = (props: any) => {
                         [classes.drawerClose]: !open,
                     }),
                 }}>
-                <div className={classes.toolbar}>
-                    <IconButton onClick={handleDrawerClose}>
-                        {<ChevronLeftIcon />}
-                    </IconButton>
+
+                <div style={{textAlign: 'center',margin:"20px 0px"}}>
+                    <img src={logo} alt="logo"/>
                 </div>
-                <Divider />
 
                 <List component="nav">
 
@@ -167,4 +145,86 @@ const MapsPage = (props: any) => {
     );
 }
 
+const ProfileToobarButton = () => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <span>
+            <IconButton
+                aria-haspopup="true"
+                onClick={handleMenu}>
+                <AccountCircle fontSize="large" />
+            </IconButton >
+            <Menu id="appbar-profile"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                getContentAnchorEl={null}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+            >
+                <MenuItem onClick={handleClose}>Account</MenuItem>
+                <MenuItem onClick={handleClose}>Sign Out</MenuItem>
+            </Menu>
+        </span>);
+}
+
+const HelpToobarButton = () => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <span>
+            <IconButton
+                aria-haspopup="true"
+                onClick={handleMenu}>
+                <Help />
+            </IconButton>
+            <Menu id="appbar-profile"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                getContentAnchorEl={null}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}>
+                <MenuItem onClick={handleClose}>
+                    <a href="https://www.wisemapping.com/termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /></a>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a>
+                </MenuItem>
+            </Menu>
+        </span>);
+}
 export default MapsPage;

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useStyles } from './styled';
 
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -11,13 +10,11 @@ import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import DeleteIcon from '@material-ui/icons/Delete';
-import FilterListIcon from '@material-ui/icons/FilterList';
 import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { CSSProperties } from 'react';
@@ -26,9 +23,9 @@ import { activeInstance } from '../../../reducers/serviceSlice';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { ErrorInfo, MapInfo, Service } from '../../../services/Service';
 import ActionChooser, { ActionType } from '../action-chooser';
-import ActionDispatcher, { handleOnMutationSuccess } from '../action-dispatcher';
-import { Link } from '@material-ui/core';
-
+import ActionDispatcher from '../action-dispatcher';
+import { InputBase, Link } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
 
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@@ -135,55 +132,6 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-const useToolbarStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(1),
-    },
-    title: {
-      flex: '1 1 100%',
-    },
-  }),
-);
-
-interface EnhancedTableToolbarProps {
-  numSelected: number;
-}
-
-const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
-  const classes = useToolbarStyles();
-  const { numSelected } = props;
-
-  return (
-    <Toolbar>
-      {numSelected > 0 ? (
-        <Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
-          {numSelected} selected
-        </Typography>
-      ) : (
-          <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
-            All
-          </Typography>
-        )}
-      {numSelected > 0 ? (
-        <Tooltip title="Delete">
-          <IconButton aria-label="delete">
-            <DeleteIcon />
-          </IconButton>
-        </Tooltip>
-      ) : (
-          <Tooltip title="Filter list">
-            <IconButton aria-label="filter list">
-              <FilterListIcon />
-            </IconButton>
-          </Tooltip>
-        )}
-    </Toolbar>
-  );
-};
-
-
 type ActionPanelState = {
   el: HTMLElement | undefined,
   mapId: number
@@ -304,13 +252,52 @@ export const MapsList = () => {
   };
 
   const isSelected = (id: number) => selected.indexOf(id) !== -1;
-
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, mapsInfo.length - page * rowsPerPage);
 
   return (
     <div className={classes.root}>
       <Paper className={classes.paper} elevation={0}>
-        <EnhancedTableToolbar numSelected={selected.length} />
+        <Toolbar className={classes.toolbar} variant="dense">
+
+
+          <div className={classes.toolbarActions}>
+            {selected.length > 0 ? (
+
+              <Tooltip title="Delete">
+                <IconButton aria-label="delete">
+                  <DeleteIcon />
+                </IconButton>
+              </Tooltip>
+            ) : null}
+          </div>
+
+          <div className={classes.toolbarListActions}>
+            <TablePagination
+              style={{ float: 'right', border: "0", paddingBottom: "5px" }}
+              rowsPerPageOptions={[50]}
+              count={mapsInfo.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              onChangePage={handleChangePage}
+              onChangeRowsPerPage={handleChangeRowsPerPage}
+              component="div"
+            />
+            <div className={classes.search}>
+              <div className={classes.searchIcon}>
+                <SearchIcon />
+              </div>
+              <InputBase
+                placeholder="Search…"
+                classes={{
+                  root: classes.searchInputRoot,
+                  input: classes.searchInputInput,
+                }}
+                inputProps={{ 'aria-label': 'search' }}
+              />
+            </div>
+          </div>
+
+        </Toolbar>
 
         <TableContainer>
           <Table
@@ -345,9 +332,9 @@ export const MapsList = () => {
                       tabIndex={-1}
                       key={row.id}
                       selected={isItemSelected}
+                      style={{ border: "0" }}
                     >
-
-                      <TableCell padding="checkbox">
+                      <TableCell padding="checkbox" style={{ border: "0" }}>
                         <Checkbox
                           checked={isItemSelected}
                           inputProps={{ 'aria-labelledby': String(labelId) }}
@@ -362,13 +349,14 @@ export const MapsList = () => {
                         </Tooltip>
                       </TableCell>
 
-                      <Tooltip title="Open for edition" placement="bottom-start">
-                        <TableCell>
+                      <TableCell>
+                        <Tooltip title="Open for edition" placement="bottom-start">
+
                           <Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
                             {row.name}
                           </Link>
-                        </TableCell>
-                      </Tooltip>
+                        </Tooltip>
+                      </TableCell>
 
                       <TableCell>{row.labels}</TableCell>
                       <TableCell>{row.creator}</TableCell>
@@ -385,23 +373,10 @@ export const MapsList = () => {
                     </TableRow>
                   );
                 })}
-              {emptyRows > 0 && (
-                <TableRow style={{ height: 33 * emptyRows }}>
-                  <TableCell colSpan={6} />
-                </TableRow>
-              )}
             </TableBody>
           </Table>
         </TableContainer>
-        <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          component="div"
-          count={mapsInfo.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onChangePage={handleChangePage}
-          onChangeRowsPerPage={handleChangeRowsPerPage}
-        />
+
       </Paper>
 
       {/* Action Dialog */}

packages/webapp/src/components/maps-page/maps-list/styled.ts

@@ -1,5 +1,4 @@
-import { MenuItem, TableCell } from '@material-ui/core';
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles';
+import { createStyles, fade, makeStyles, Theme } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -12,7 +11,6 @@ export const useStyles = makeStyles((theme: Theme) =>
     },
     table: {
       minWidth: 750,
-      border: 0,
       '& tr:nth-child(even)': {
         background: 'white'
       },
@@ -24,7 +22,11 @@ export const useStyles = makeStyles((theme: Theme) =>
     headerCell: {
       background: 'white',
       fontWeight: 'bold',
-      color: 'rgba(0, 0, 0, 0.44)'
+      color: 'rgba(0, 0, 0, 0.44)',
+      border: 0
+    },
+    bodyCell: {
+      border: 0
     },
     visuallyHidden: {
       border: 0,
@@ -37,14 +39,59 @@ export const useStyles = makeStyles((theme: Theme) =>
       top: 20,
       width: 1,
     },
-  }),
+    toolbar: {
+      display: 'flex',
+      borderBottom: '1px solid #cccccc',
+      padding: '0',
+      marging: '0'
+    },
+    toolbarActions: {
+      flexGrow: 1
+    },
+    toolbarListActions: {
+      flexGrow: 1
+    },
+    search: {
+      borderRadius: 9,
+      backgroundColor: fade(theme.palette.common.white, 0.15),
+      '&:hover': {
+        backgroundColor: fade(theme.palette.common.white, 0.25),
+      },
+      marginLeft: 0,
+      width: '100%',
+      [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(1),
+        width: 'auto',
+      },
+      float: 'right'
+    },
+    searchIcon: {
+      padding: '5px 0 0 8px',
+      height: '100%',
+      position: 'absolute',
+      pointerEvents: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    searchInputRoot: {
+      color: 'inherit',
+    }, toolbalLeft: {
+      float: 'right'
+    },
+    searchInputInput: {
+      // padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      border: '1px solid #ffa800',
+      borderRadius: 4,
+      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+      transition: theme.transitions.create('width'),
+      width: '100%',
+      [theme.breakpoints.up('sm')]: {
+        width: '12ch',
+        '&:focus': {
+          width: '20ch',
+        },
+      },
+    }
+  })
 );
-
-// export const StyledTableCell = withStyles({
-//   root: {
-//     color: 'black',
-//     padding: '0px',
-//     cursor: 'pointer',
-//     border: '0'
-//   }
-// })(TableCell);

packages/webapp/src/components/maps-page/style.ts

@@ -25,9 +25,6 @@ export const useStyles = makeStyles((theme: Theme) =>
                 duration: theme.transitions.duration.enteringScreen,
             }),
         },
-        menuButton: {
-            marginRight: 36,
-        },
         newMapButton: {
             marginRight: 10,
         },
@@ -68,9 +65,7 @@ export const useStyles = makeStyles((theme: Theme) =>
         },
         toolbar: {
             display: 'flex',
-            alignItems: 'center',
             justifyContent: 'flex-end',
-            padding: theme.spacing(0, 1),
             // necessary for content to be below app bar
             ...theme.mixins.toolbar,
         },

packages/webapp/src/images/logo-icon.svg

@@ -1,14 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="38" height="27" fill="none" viewBox="0 0 38 27">
-    <path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M19 26c-1.5-4-3.5-3.5-9-7h17.5c-4.786 3.127-7.5 3-8.5 7z"/>
-    <path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M32.34 11.956c0 2.447-1.45 4.745-3.97 6.465-2.514 1.718-6.03 2.804-9.95 2.804-3.92 0-7.436-1.086-9.951-2.804-2.519-1.72-3.97-4.018-3.97-6.465 0-2.446 1.451-4.745 3.97-6.465 2.515-1.717 6.03-2.804 9.95-2.804 3.921 0 7.437 1.087 9.952 2.804 2.518 1.72 3.97 4.019 3.97 6.465z"/>
-    <mask id="i08j30ef6a" fill="#fff">
-        <path d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z"/>
-    </mask>
-    <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z" mask="url(#i08j30ef6a)"/>
-    <mask id="1f1ltfoetb" fill="#fff">
-        <path d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z"/>
-    </mask>
-    <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z" mask="url(#1f1ltfoetb)"/>
-    <path stroke="#000" stroke-width="1.5" d="M16 9.125c2-1.5 4-1.5 6 0"/>
-    <path fill="#FFCB00" d="M19.186 24.75C17.686 20.75 9 19 10.5 18s16-1.5 17-.5-6.857 2.826-8.314 7.25z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="11.222 9.992 47.08 32.567" width="47.08" height="32.567" xmlns="http://www.w3.org/2000/svg">
+  <mask id="i08j30ef6a" fill="#fff">
+    <path d="M 32.334 17.911 C 32.334 20.705 31.301 23.382 29.458 25.357 C 27.617 27.332 25.121 28.441 22.517 28.441 C 19.913 28.441 17.417 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z"/>
+  </mask>
+  <mask id="1f1ltfoetb" fill="#fff">
+    <path d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.771 28.441 C 44.167 28.441 41.67 27.332 39.83 25.357 C 37.988 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z"/>
+  </mask>
+  <path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M 34.644 41.603 C 32.912 36.337 30.603 36.996 24.25 32.388 L 44.462 32.388 C 38.933 36.505 35.8 36.337 34.644 41.603 Z" style=""/>
+  <path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M 50.051 23.119 C 50.051 26.338 48.377 29.364 45.467 31.627 C 42.563 33.888 38.503 35.318 33.975 35.318 C 29.446 35.318 25.385 33.888 22.482 31.627 C 19.572 29.364 17.896 26.338 17.896 23.119 C 17.896 19.898 19.572 16.874 22.482 14.61 C 25.385 12.349 29.445 10.918 33.972 10.918 C 38.503 10.918 42.563 12.349 45.467 14.61 C 48.375 16.874 50.053 19.898 50.053 23.119 Z" style=""/>
+  <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 32.334 17.911 C 32.334 20.705 31.3 23.382 29.459 25.357 C 27.618 27.332 25.12 28.441 22.517 28.441 C 19.914 28.441 17.418 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z" mask="url(#i08j30ef6a)" style=""/>
+  <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.772 28.441 C 44.168 28.441 41.671 27.332 39.831 25.357 C 37.989 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z" mask="url(#1f1ltfoetb)" style=""/>
+  <path stroke="#000" stroke-width="1.5" d="M 31.179 19.393 C 33.489 17.417 35.8 17.417 38.109 19.393" style=""/>
+  <path fill="#FFCB00" d="M 34.859 39.957 C 33.128 34.692 23.095 32.388 24.827 31.073 C 26.559 29.757 43.307 29.1 44.462 30.415 C 45.618 31.731 36.541 34.134 34.859 39.957 Z" style=""/>
 </svg>

packages/webapp/src/theme/index.ts

@@ -15,9 +15,9 @@ const theme = createMuiTheme({
         MuiCssBaseline: {
             '@global': {
                 body: {
-                  backgroundColor: 'white',
+                    backgroundColor: 'white',
                 },
-              },
+            },
         },
         MuiOutlinedInput: {
             root: {