From 42a8d3db4f09bd4f04e3bf3f68edd952a92ee4ac Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Fri, 25 Nov 2022 11:53:04 +0100
Subject: [PATCH] remove background on focus

---
 src/components/NavbarSettings.js | 83 ++++++++++++++++++++------------
 1 file changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/NavbarSettings.js b/src/components/NavbarSettings.js
index 0b150e1..3f19bc4 100644
--- a/src/components/NavbarSettings.js
+++ b/src/components/NavbarSettings.js
@@ -5,6 +5,19 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { setBoard } from '../actions/boardAction';
 import ReactCountryFlag from "react-country-flag";
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+
+const theme = createTheme({
+    overrides: {
+        MuiSelect: {
+            select: {
+                '&:focus': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+    },
+});
 
 class NavbarSettings extends Component {
     componentDidMount() {
@@ -17,43 +30,51 @@ class NavbarSettings extends Component {
         this.props.setLanguage(event.target.value);
     }
 
+
     render() {
+        console.log(this.props.classes);
         return (
             <div style={{ margin: "0 0 0 auto", display: "flex" }}>
                 <div style={{ margin: "0 30px 0 auto", display: "flex" }}>
-                    <Select
-                        value={this.props.selectedBoard}
-                        onChange={(e) => this.props.setBoard(e.target.value)}
-                        disableUnderline={true}
-                    >
-                        <MenuItem value="mcu">senseBox MCU</MenuItem>
-                        <MenuItem value="mini">senseBox MCU mini</MenuItem>
-                    </Select>
+                    <MuiThemeProvider theme={theme}>
+                        <Select
+                            value={this.props.selectedBoard}
+                            onChange={(e) => this.props.setBoard(e.target.value)}
+                            disableUnderline={true}
+                            style={{ backgroundColor: "transparent !important" }}
+
+                        >
+                            <MenuItem value="mcu">senseBox MCU</MenuItem>
+                            <MenuItem value="mini">senseBox MCU mini</MenuItem>
+                        </Select>
+                    </MuiThemeProvider>
                 </div>
                 <div style={{ margin: "0 0 0 auto", display: "flex" }}>
-                    <Select
-                        value={this.props.language}
-                        onChange={this.handleChange}
-                        disableUnderline={true}
-                        IconComponent={() => null}
-                    >
-                        <MenuItem value={'en_US'} >
-                            <ReactCountryFlag
-                                countryCode="US"
-                                svg
-                                cdnSuffix="svg"
-                                title="US"
-                            />
-                        </MenuItem>
-                        <MenuItem value={'de_DE'}>
-                            <ReactCountryFlag
-                                countryCode="DE"
-                                svg
-                                cdnSuffix="svg"
-                                title="DE"
-                            />
-                        </MenuItem>
-                    </Select>
+                    <MuiThemeProvider theme={theme}>
+                        <Select
+                            value={this.props.language}
+                            onChange={this.handleChange}
+                            disableUnderline={true}
+                            IconComponent={() => null}
+                        >
+                            <MenuItem value={'en_US'} >
+                                <ReactCountryFlag
+                                    countryCode="US"
+                                    svg
+                                    cdnSuffix="svg"
+                                    title="US"
+                                />
+                            </MenuItem>
+                            <MenuItem value={'de_DE'}>
+                                <ReactCountryFlag
+                                    countryCode="DE"
+                                    svg
+                                    cdnSuffix="svg"
+                                    title="DE"
+                                />
+                            </MenuItem>
+                        </Select>
+                    </MuiThemeProvider>
                 </div>
             </div >
         );