fix9_simplify text input and select styles (#862)

* simplify styles for search * style branch control
bldrs-ai · Nov 15, 2023 · cde6bc1 · cde6bc1
1 parent fda39cd
commit cde6bc1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 135 deletions.
diff --git a/src/Components/ApplicationError.jsx b/src/Components/ApplicationError.jsx
@@ -14,15 +14,15 @@ const ApplicationError = () => {
         borderRadius: '10px',
       }}
     >
-      <Typography variant={'body1'} sx={{color: 'primary.light', fontWeight: 600, pb: 2}}>
+      <Typography variant={'body1'} sx={{fontWeight: 600, pb: 2}}>
         Oh no!
       </Typography>
 
-      <Typography variant={'body1'} sx={{color: 'success.dark', fontWeight: 1000, pb: 2}}>
+      <Typography variant={'body1'}>
         We&apos;re not quite sure what went wrong.
       </Typography>
 
-      <Typography sx={{pb: 2, lineHeight: 1.75}}>
+      <Typography sx={{pb: 2}}>
         Not to worry.<br/>
         You can <a href="/">click here to start a new session</a>.
       </Typography>

diff --git a/src/Components/BranchesControl.jsx b/src/Components/BranchesControl.jsx
@@ -1,10 +1,10 @@
 import React, {useEffect, useState} from 'react'
 import {useNavigate} from 'react-router-dom'
-import TextField from '@mui/material/TextField'
 import MenuItem from '@mui/material/MenuItem'
-import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
-import useTheme from '@mui/styles/useTheme'
+import InputLabel from '@mui/material/InputLabel'
+import FormControl from '@mui/material/FormControl'
+import Select from '@mui/material/Select'
 import debug from '../utils/debug'
 import {getBranches} from '../utils/GitHub'
 import useStore from '../store/useStore'
@@ -25,7 +25,6 @@ export default function Branches() {
   const [selected, setSelected] = useState(0)
   const modelPath = useStore((state) => state.modelPath)
   const accessToken = useStore((state) => state.accessToken)
-  const theme = useTheme()
 
 
   useEffect(() => {
@@ -73,53 +72,16 @@ export default function Branches() {
   return (
     <>
       {branches.length > 1 && modelPath.repo !== undefined &&
-        <Paper elevation={0} variant='control'
-          sx={{
-            marginTop: '14px',
-            opacity: .9,
-            width: '100%',
-          }}
-        >
-          <TextField
-            sx={{
-              'width': '100%',
-              '& .MuiOutlinedInput-input': {
-                color: theme.palette.primary.contrastText,
-              },
-              '& .MuiInputLabel-root': {
-                color: theme.palette.primary.contrastText,
-              },
-              '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.primary.main,
-              },
-              '&:hover .MuiOutlinedInput-input': {
-                color: theme.palette.primary.contrastText,
-              },
-              // TODO(oleg): connect to props
-              '&:hover .MuiInputLabel-root': {
-                color: theme.palette.primary.contrastText,
-              },
-              '&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.primary.main,
-              },
-              // TODO(oleg): connect to props
-              '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input': {
-                color: theme.palette.primary.contrastText,
-              },
-              // TODO(oleg): connect to props
-              '& .MuiInputLabel-root.Mui-focused': {
-                color: theme.palette.primary.contrastText,
-              },
-              '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.primary.main,
-              },
-            }}
-            onChange={(e) => handleSelect(e)}
-            variant='outlined'
-            label={<Typography>GIT BRANCHES</Typography>}
+        <FormControl sx={{minWidth: '100%', marginTop: '14px'}} size="small">
+          <InputLabel id="demo-select-small-label">
+            <Typography variant='overline'>Branches</Typography>
+          </InputLabel>
+          <Select
+            labelId="demo-select-small-label"
+            id="demo-select-small"
             value={selected}
-            select
-            role="button"
+            label={<Typography variant='overline'>Branches</Typography>}
+            onChange={handleSelect}
           >
             {branches.map((branch, i) => {
               return (
@@ -132,8 +94,9 @@ export default function Branches() {
               )
             })
             }
-          </TextField>
-        </Paper>
+          </Select>
+        </FormControl>
+
       }
     </>
   )

diff --git a/src/Components/SearchBar.jsx b/src/Components/SearchBar.jsx
@@ -1,16 +1,11 @@
 import React, {useRef, useEffect, useState} from 'react'
 import {useLocation, useNavigate, useSearchParams} from 'react-router-dom'
-import Paper from '@mui/material/Paper'
 import Autocomplete from '@mui/material/Autocomplete'
-import InputAdornment from '@mui/material/InputAdornment'
-import IconButton from '@mui/material/IconButton'
 import TextField from '@mui/material/TextField'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
 import debug from '../utils/debug'
 import {navWithSearchParamRemoved} from '../utils/navigate'
 import {handleBeforeUnload} from '../utils/event'
-import HighlightOffIcon from '@mui/icons-material/HighlightOff'
-import useTheme from '@mui/styles/useTheme'
 
 
 /**
@@ -26,7 +21,6 @@ export default function SearchBar({fileOpen}) {
   const [inputText, setInputText] = useState('')
   const [error, setError] = useState('')
   const searchInputRef = useRef(null)
-  const theme = useTheme()
 
 
   useEffect(() => {
@@ -86,79 +80,27 @@ export default function SearchBar({fileOpen}) {
   // container (CadView).
   return (
     <form onSubmit={onSubmit}>
-      <Paper elevation={1} variant='control' sx={{opacity: '.9'}}>
-        <Autocomplete
-          fullWidth
-          freeSolo
-          options={['together', 'dach', 'fen', 'wand']}
-          value={inputText}
-          onChange={(_, newValue) => setInputText(newValue || '')}
-          onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
-          inputValue={inputText}
-          PaperComponent={({children}) => (
-            <Paper
-              sx={{
-                'backgroundColor': theme.palette.scene.background,
-                '.MuiAutocomplete-option': {
-                  backgroundColor: theme.palette.scene.background,
-                },
-              }}
-            >
-              {children}
-            </Paper>
-          )}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              inputRef={searchInputRef}
-              size="small"
-              error={!!error.length}
-              placeholder='Search'
-              variant="outlined"
-              sx={{
-                'width': '100%',
-                'border': 'none',
-                '& fieldset': {
-                  border: 'none',
-                },
-                '&:hover fieldset': {
-                  border: 'none',
-                },
-                '&.Mui-focused fieldset': {
-                  border: 'none',
-                },
-                '& .MuiOutlinedInput-root': {
-                  border: 'none',
-                  height: '50px',
-                },
-              }}
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: inputText.length > 0 ? (
-                  <InputAdornment position="end">
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        setInputText('')
-                        setError('')
-                        navWithSearchParamRemoved(navigate, location.pathname, QUERY_PARAM)
-                      }}
-                      style={{padding: 0, opacity: 0.8}}
-                    >
-                      <HighlightOffIcon
-                        className="icon-share"
-                        sx={{opacity: 0.8}}
-                        ize="inherit"
-                        color="secondary"
-                      />
-                    </IconButton>
-                  </InputAdornment>
-                ) : null,
-              }}
-            />
-          )}
-        />
-      </Paper>
+      <Autocomplete
+        freeSolo
+        options={['Dach', 'Decke', 'Fen', 'Wand', 'Leuchte', 'Pos', 'Te']}
+        value={inputText}
+        onChange={(_, newValue) => setInputText(newValue || '')}
+        onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
+        inputValue={inputText}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            inputRef={searchInputRef}
+            size="small"
+            error={!!error.length}
+            placeholder='Search'
+            variant="outlined"
+            sx={{
+              width: '100%',
+            }}
+          />
+        )}
+      />
     </form>
   )
 }

diff --git a/src/theme/Components.js b/src/theme/Components.js
@@ -189,6 +189,15 @@ export function getComponentOverrides(palette, typography) {
         },
       },
     },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.primary.background,
+          borderRadius: '10px',
+          opacity: .9,
+        },
+      },
+    },
     MuiSwitch: {
       root: {
         width: 42,
@@ -219,6 +228,12 @@ export function getComponentOverrides(palette, typography) {
         transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       },
     },
-
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          background: palette.primary.background,
+        },
+      },
+    },
   }
 }