working on additional mui components

Author: KyEBell

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -152,9 +152,9 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     minWidth: 80,
     fontSize: '.75rem',
     fontWeight: 200,
-    border: '1px solid grey',
-    borderRadius: 4,
-    color: 'grey',
+    // border: '1px solid grey',
+    // borderRadius: 4,
+    // color: 'grey',
     height: 30,
   });
 
@@ -262,7 +262,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
           <StyledFormControl
             id='selectSeries'
             variant='outlined'
-            sx={{ backgroundColor: 'secondary.main' }}
+            sx={{ backgroundColor: theme.palette.primary.main }}
           >
             <StyledSelect
               style={{ color: 'white' }}

src/app/components/theme.ts

@@ -4,9 +4,13 @@ const theme = createTheme({
     primary: {
       main: '#556cd4',
     },
+    secondary: {
+      main: '#32a852',
+    },
   },
   components: {
     // Name of the component
+
     MuiButton: {
       styleOverrides: {
         // Name of the slot
@@ -18,6 +22,13 @@ const theme = createTheme({
         },
       },
     },
+    // MuiSelect: {
+    //   styleOverrides: {
+    //     root: {
+    //       main: '#556cd4',
+    //     },
+    //   },
+    // },
   },
 });
 

src/app/styles/layout/_buttonsContainer.scss

@@ -1,72 +1,71 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-	font-family: 'Roboto', sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 .buttons-container {
-	margin: 0 1% 0 1%;
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	grid-gap: 1%;
-	padding: 1% 0 1% 0;
+  margin: 0 1% 0 1%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1%;
+  padding: 1% 0 1% 0;
 }
 
 .introjs-tooltip {
   color: black;
   background-color: white;
   min-width: 20rem;
 }
-.introjs-tooltiptext ul{
-	padding-left: 2px;
+.introjs-tooltiptext ul {
+  padding-left: 2px;
 }
 
 // .introjs-helperLayer{
 //   // border: 2px solid yellow
 // }
 
 .tools-container {
-	display: flex;
-	justify-content: space-between;
-	border: .5px solid grey;
-	background-color: #35383e;
-	padding: 3px;
-	margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  border: 0.5px solid grey;
+  background-color: #35383e;
+  padding: 3px;
+  margin-bottom: 1rem;
 }
 
 #seriesname {
-	background-color: #333;
-	color: white;
+  background-color: #333;
+  color: white;
 }
 
 @media (max-width: 500px) {
-	.buttons-container {
-		grid-template-columns: repeat(2, 1fr);
-	}
+  .buttons-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .introjs-nextbutton {
-	background-color: none;
-	color: #3256f1;
-	border: 1px solid;
-	outline: none;
+  background-color: none;
+  color: #3256f1;
+  border: 1px solid;
+  outline: none;
 }
 
-.introjs-prevbutton{
-	background-color: none;
-	color: #3256f1;
-	border: 1px solid;
-	outline: none;
+.introjs-prevbutton {
+  background-color: none;
+  color: #3256f1;
+  border: 1px solid;
+  outline: none;
 }
 
-
 .introjs-skipbutton {
-	color: #d72828;
-	border: 1px solid;
-	margin-top: 2px;
-    font-size: 16px;
-	outline: none;
+  color: #d72828;
+  border: 1px solid;
+  margin-top: 2px;
+  font-size: 16px;
+  outline: none;
 }
 
 .introjs-button {
-	background: none; 
-	outline: none;
-}
+  background: none;
+  outline: none;
+}