theme button css

Author: brianjshan

app/src/components/bottom/CodePreview.tsx

@@ -11,6 +11,7 @@ import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
 import NativeSelect from '@material-ui/core/NativeSelect';
 import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
 
 const useStyles = makeStyles(theme => ({
   formControl: {
@@ -52,20 +53,21 @@ const CodePreview = () => {
       }}
     >
       <FormControl fullWidth={true} className={classes.formControl}>
-        {/* <InputLabel variant="filled" style={{ color: 'white' }}>
-          Change Theme
-        </InputLabel> */}
-        <NativeSelect
-          style={{ color: 'white' }}
-          value={theme}
-          onChange={changeTheme}
-        >
-          <option value={'monokai'}>Monokai</option>
-          <option value={'github'}>Github</option>
-          <option value={'solarized_dark'}>Solarized Dark</option>
-          <option value={'terminal'}>Terminal</option>
-          <option value={'solarized_light'}>Solarized Light</option>
-        </NativeSelect>
+        <div className="flex-container">
+          <div className="flex1">Change Theme:</div>
+          <NativeSelect
+            className="flex2"
+            style={{ color: 'white' }}
+            value={theme}
+            onChange={changeTheme}
+          >
+            <option value={'monokai'}>Monokai</option>
+            <option value={'github'}>Github</option>
+            <option value={'solarized_dark'}>Solarized Dark</option>
+            <option value={'terminal'}>Terminal</option>
+            <option value={'solarized_light'}>Solarized Light</option>
+          </NativeSelect>
+        </div>
       </FormControl>
       <AceEditor
         mode="javascript"

app/src/public/styles/style.css

@@ -273,6 +273,24 @@ RIGHT COLUMN
   overflow: auto;
 }
 
+.flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex1 {
+  padding: 10px 20px 10px 5px;
+  color: #01d46d;
+}
+
+.flex2 {
+  padding-right: 10px;
+  padding-left: 10px;
+  border: rgb(68, 68, 68) solid 1px;
+  border-radius: 5px;
+  background-color: 252526;
+}
+
 /* Material-UI */
 
 /* Sortable tree sorting */