style branch control

bldrs-ai · Nov 15, 2023 · a048370 · a048370
1 parent d4d8c49
commit a048370
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 55 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>
+
       }
     </>
   )