[2658] Add dedicated colors for the navigation bar in the theme

Bug: #2658 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Dec 8, 2023 · 07b364b · 07b364b
1 parent 2e8ab3b
commit 07b364b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 8 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -16,7 +16,16 @@
 All implementations of this interface must implement these new methods:
 * `List<NodeDescription> getNodeDescriptions();` to retrieve all `NodeDescriptions` created by providers.
 * `List<EdgeDescription> getEdgeDescriptions();` to retrieve all `EdgeDescriptions` created by providers.
-
+- https://github.com/eclipse-sirius/sirius-web/issues/2658[#2658] [sirius-web] Add dedicated colors for navigation bar in the Sirius Web theme.
+The theme provided by the user must now provide navigation bar colors:
+```ts
+...
+navigationBar: {
+  border: 'yellow',
+  background: 'blue',
+},
+...
+```
 
 === Dependency update
 
@@ -33,6 +42,7 @@ All implementations of this interface must implement these new methods:
 * `List<NodeDescription> getNodeDescriptions();` to retrieve all `NodeDescriptions` created by providers.
 * `List<EdgeDescription> getEdgeDescriptions();` to retrieve all `EdgeDescriptions` created by providers.
 - https://github.com/eclipse-sirius/sirius-web/issues/2733[#2733] Leverage the page object model to improve out integration tests
+- https://github.com/eclipse-sirius/sirius-web/issues/2658[#2658] [sirius-web] Add dedicated colors for navigation bar in the Sirius Web theme
 
 
 == v2023.12.0

diff --git a/packages/core/frontend/sirius-components-core/src/materialui.ts b/packages/core/frontend/sirius-components-core/src/materialui.ts
@@ -18,6 +18,10 @@ declare module '@material-ui/core/styles' {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
 }
 
@@ -27,11 +31,19 @@ declare module '@material-ui/core/styles/createPalette' {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
   export interface PaletteOptions {
     navigation: {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
 }
diff --git a/packages/core/frontend/sirius-components-core/src/theme.ts b/packages/core/frontend/sirius-components-core/src/theme.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 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
@@ -18,6 +18,10 @@ const fallbackTheme = createTheme({
       leftBackground: 'white',
       rightBackground: 'white',
     },
+    navigationBar: {
+      border: 'black',
+      background: 'black',
+    },
   },
   typography: {
     h1: {

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/materialui.ts b/packages/sirius-web/frontend/sirius-web-application/src/materialui.ts
@@ -18,6 +18,10 @@ declare module '@material-ui/core/styles' {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
 }
 
@@ -27,11 +31,19 @@ declare module '@material-ui/core/styles/createPalette' {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
   export interface PaletteOptions {
     navigation: {
       leftBackground: React.CSSProperties['color'];
       rightBackground: React.CSSProperties['color'];
     };
+    navigationBar: {
+      border: React.CSSProperties['color'];
+      background: React.CSSProperties['color'];
+    };
   }
 }
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx
@@ -29,12 +29,13 @@ const useNavigationBarStyles = makeStyles((theme) => ({
   },
   appBarHeader: {
     height: '4px',
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.navigationBar.border,
   },
   toolbar: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    backgroundColor: theme.palette.navigationBar.background,
   },
   left: {
     display: 'flex',

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/theme/siriusWebTheme.ts b/packages/sirius-web/frontend/sirius-web-application/src/theme/siriusWebTheme.ts
@@ -43,16 +43,15 @@ export const baseTheme: Theme = createTheme({
       leftBackground: '#BE1A7880',
       rightBackground: '#261E5880',
     },
+    navigationBar: {
+      border: '#BE1A78',
+      background: '#261E58',
+    },
     action: {
       hover: '#BE1A7826',
       selected: '#BE1A7842',
     },
   },
-  props: {
-    MuiAppBar: {
-      color: 'secondary',
-    },
-  },
   overrides: {
     MuiSnackbarContent: {
       root: {