Tabs: fix selected tab color

Change-Id: Ice9c0486a51f1b8aee58240bac5348b7a3a034e4

jams-react-client/src/views/Blueprint/Blueprint.js

@@ -12,8 +12,6 @@ import EditBlueprintConfiguration from "./EditBlueprintConfiguration";
 import EditBlueprintUi from "./EditBlueprintUi";
 import { PolicyDataContextProvider } from "./PolicyDataContext";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
-
 import i18next from "i18next";
 
 function TabPanel(props) {
@@ -42,10 +40,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-const a11yProps = (index) => {
+const a11yProps = (value, index) => {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 };
 
@@ -58,23 +57,25 @@ export default function Blueprint({ blueprintName }) {
 
   return (
     <div>
-      <AppBar position="static" style={{ background: infoColor[0] }}>
+      <AppBar position="static" color="primary">
         <Tabs
           value={openedTab}
           onChange={handleChange}
-          aria-label="simple tabs example"
+          aria-label="blueprint tabs"
+          textColor="secondary"
+          indicatorColor="secondary"
         >
           <Tab
             label={i18next.t("permissions", "Permissions")}
-            {...a11yProps(0)}
+            {...a11yProps(openedTab, 0)}
           />
           <Tab
             label={i18next.t("configuration", "Configuration")}
-            {...a11yProps(1)}
+            {...a11yProps(openedTab, 1)}
           />
           <Tab
             label={i18next.t("customization", "Customization")}
-            {...a11yProps(2)}
+            {...a11yProps(openedTab, 2)}
           />
         </Tabs>
       </AppBar>

jams-react-client/src/views/Settings/Settings.js

@@ -10,7 +10,6 @@ import Tab from "@mui/material/Tab";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
 import MuiAlert from "@mui/material/Alert";
 
 import auth from "auth.js";
@@ -43,10 +42,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-function a11yProps(index) {
+function a11yProps(value, index) {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 }
 
@@ -77,16 +77,21 @@ export default function Settings() {
   } else {
     return (
       <div>
-        <AppBar position="static" style={{ background: infoColor[0] }}>
+        <AppBar position="static" color="primary">
           <Tabs
             value={value}
             onChange={handleChange}
-            aria-label="simple tabs example"
+            aria-label="settings tabs"
+            textColor="secondary"
+            indicatorColor="secondary"
           >
-            <Tab label={i18next.t("general", "General")} {...a11yProps(0)} />
+            <Tab
+              label={i18next.t("general", "General")}
+              {...a11yProps(value, 0)}
+            />
             <Tab
               label={i18next.t("subscription", "Subscription")}
-              {...a11yProps(1)}
+              {...a11yProps(value, 1)}
             />
           </Tabs>
         </AppBar>

jams-react-client/src/views/UserProfile/UserProfile.js

@@ -14,7 +14,6 @@ import EditCreateUserProfile from "./EditCreateUserProfile";
 
 import Contacts from "views/Contacts/Contacts";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
 import DisplayUserProfile from "./DisplayUserProfile";
 
 import i18next from "i18next";
@@ -45,10 +44,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-function a11yProps(index) {
+function a11yProps(value, index) {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 }
 
@@ -70,15 +70,26 @@ export default function UserProfile(props) {
 
   return (
     <div>
-      <AppBar position="static" style={{ background: infoColor[0] }}>
+      <AppBar position="static" color="primary">
         <Tabs
           value={value}
           onChange={handleChange}
-          aria-label="simple tabs example"
+          aria-label="user profile tabs"
+          textColor="secondary"
+          indicatorColor="secondary"
         >
-          <Tab label={i18next.t("profile", "Profile")} {...a11yProps(0)} />
-          <Tab label={i18next.t("devices", "Devices")} {...a11yProps(1)} />
-          <Tab label={i18next.t("contacts", "Contacts")} {...a11yProps(2)} />
+          <Tab
+            label={i18next.t("profile", "Profile")}
+            {...a11yProps(value, 0)}
+          />
+          <Tab
+            label={i18next.t("devices", "Devices")}
+            {...a11yProps(value, 1)}
+          />
+          <Tab
+            label={i18next.t("contacts", "Contacts")}
+            {...a11yProps(value, 2)}
+          />
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>