[1155] Use different colors for the left and right bars's backgrounds

Bug: #1155 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Apr 14, 2022 · 0154373 · 0154373
1 parent ba9fc5e
commit 0154373
Showing 1 changed file with 29 additions and 6 deletions.
diff --git a/frontend/src/workbench/Site.tsx b/frontend/src/workbench/Site.tsx
@@ -18,6 +18,15 @@ import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 import { SiteProps } from './Site.types';
 
+declare module '@material-ui/core/styles' {
+  interface Theme {
+    navigation: {
+      leftBackground: React.CSSProperties['color'];
+      rightBackground: React.CSSProperties['color'];
+    };
+  }
+}
+
 const useSiteStyles = makeStyles((theme) => ({
   leftSite: {
     display: 'grid',
@@ -31,10 +40,21 @@ const useSiteStyles = makeStyles((theme) => ({
     justifyItems: 'stretch',
     alignItems: 'stretch',
   },
-  viewSelector: {
+  viewSelectorLeft: {
     display: 'flex',
     flexDirection: 'column',
-    background: 'var(--blue-lagoon-lighten-60)',
+    background: theme.navigation.leftBackground,
+  },
+  viewSelectorRight: {
+    display: 'flex',
+    flexDirection: 'column',
+    background: theme.navigation.rightBackground,
+  },
+  viewSelectorIcon: {
+    color: theme.palette.common.white,
+  },
+  viewSelectorIconSelected: {
+    color: theme.palette.secondary.main,
   },
   viewIcon: {
     padding: theme.spacing(1),
@@ -55,22 +75,25 @@ const useSiteStyles = makeStyles((theme) => ({
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
   },
-  viewContent: {},
 }));
 
 export const Site = ({ editingContextId, selection, setSelection, readOnly, side, contributions }: SiteProps) => {
   const classes = useSiteStyles();
   const [selectedViewIndex, setSelectedViewIndex] = useState<number | null>(0);
 
   const viewSelector = (
-    <div className={classes.viewSelector}>
+    <div className={side === 'left' ? classes.viewSelectorLeft : classes.viewSelectorRight}>
       {contributions.map((contribution, index) => {
         const title = contribution.props.title;
         const icon = contribution.props.icon;
+        let iconClassName = classes.viewSelectorIcon;
+        if (index === selectedViewIndex) {
+          iconClassName = classes.viewSelectorIconSelected;
+        }
         return (
           <Tooltip enterDelay={250} title={title} key={index} className={classes.viewIcon}>
             <IconButton
-              color={index === selectedViewIndex ? 'primary' : 'secondary'}
+              className={iconClassName}
               aria-label={title}
               data-testid={`viewselector-${title}`}
               onClick={() => setSelectedViewIndex(index)}
@@ -92,7 +115,7 @@ export const Site = ({ editingContextId, selection, setSelection, readOnly, side
           {icon}
           <Typography>{title}</Typography>
         </div>
-        <div className={classes.viewContent} data-testid={`view-${title}`}>
+        <div data-testid={`view-${title}`}>
           <Component
             editingContextId={editingContextId}
             selection={selection}