From 18e661453f65eee1bfd0e0c98efb6d4009612f77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Mon, 17 Jul 2023 17:05:30 -0400
Subject: [PATCH] Tabs: fix selected tab color
Change-Id: Ice9c0486a51f1b8aee58240bac5348b7a3a034e4
---
.../src/views/Blueprint/Blueprint.js | 17 +++++++------
.../src/views/Settings/Settings.js | 17 ++++++++-----
.../src/views/UserProfile/UserProfile.js | 25 +++++++++++++------
3 files changed, 38 insertions(+), 21 deletions(-)
diff --git a/jams-react-client/src/views/Blueprint/Blueprint.js b/jams-react-client/src/views/Blueprint/Blueprint.js
index 19d90457..441a2f43 100644
--- a/jams-react-client/src/views/Blueprint/Blueprint.js
+++ b/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>
diff --git a/jams-react-client/src/views/Settings/Settings.js b/jams-react-client/src/views/Settings/Settings.js
index 5df963c0..b762eaf0 100644
--- a/jams-react-client/src/views/Settings/Settings.js
+++ b/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>
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index ae552028..454ad459 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/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}>
--
GitLab