[1155] Adjust colors and add accent on the selected icon

Bug: #1155
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

frontend/src/theme.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021 Obeo.
+ * Copyright (c) 2021, 2022 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -13,6 +13,10 @@
 import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';
 
 const fallbackTheme = createTheme({
+  navigation: {
+    leftBackground: '#BE1A7880',
+    rightBackground: '#261E5880',
+  },
   typography: {
     h1: {
       fontSize: '4rem',

frontend/src/workbench/Site.tsx

@@ -47,10 +47,17 @@ const useSiteStyles = makeStyles((theme) => ({
     background: theme.navigation.rightBackground,
   },
   viewSelectorIcon: {
-    color: theme.palette.common.white,
+    color: theme.palette.text.disabled,
   },
-  viewSelectorIconSelected: {
-    color: theme.palette.secondary.main,
+  viewSelectorIconSelectedLeft: {
+    color: theme.palette.primary.main,
+    borderLeft: 'solid 2px',
+    borderRadius: 0,
+  },
+  viewSelectorIconSelectedRight: {
+    color: theme.palette.primary.main,
+    borderRight: 'solid 2px',
+    borderRadius: 0,
   },
   viewIcon: {
     padding: theme.spacing(1),
@@ -59,7 +66,6 @@ const useSiteStyles = makeStyles((theme) => ({
     flexGrow: 1,
     display: 'flex',
     flexDirection: 'column',
-    overflow: 'auto',
   },
   viewHeader: {
     display: 'flex',
@@ -87,7 +93,8 @@ export const Site = ({ editingContextId, selection, setSelection, readOnly, side
         const icon = contribution.props.icon;
         let iconClassName = classes.viewSelectorIcon;
         if (index === selectedViewIndex) {
-          iconClassName = classes.viewSelectorIconSelected;
+          iconClassName =
+            side === 'left' ? classes.viewSelectorIconSelectedLeft : classes.viewSelectorIconSelectedRight;
         }
         return (
           <Tooltip enterDelay={250} title={title} key={index} className={classes.viewIcon}>