Add theme options for n12

src/App.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { useTheme } from '@material-ui/core/styles';
 import PopUpRedirect from './components/atoms/PopUpRedirect';
 import WidgetsTemplate from './components/organisms/WidgetsTemplate';
+import {observer} from "mobx-react-lite";
 // main components height - must add up to 100
 
 const headerHeight = '5vh';
@@ -70,4 +71,4 @@ const App: FC = () => {
     </StoreContext.Provider>
   );
 };
-export default App;
+export default observer(App);

src/components/molecules/GenericBarChart.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar, Tooltip, Legend } from 'recharts';
-import { roseColor, honeyColor, yellowColor, blackColor, whiteColor } from 'style';
+import {roseColor, blackColor, ColorScheme, whiteColor} from 'style';
 import tinycolor from 'tinycolor2';
+import {useTheme} from "@material-ui/core/styles";
 
-const colors = [roseColor, honeyColor, yellowColor];
 const Y_AXIS_OFFSET = 20;
 const MIN_BAR_HEIGHT = 20;
 
@@ -51,6 +51,7 @@ const CustomizedLabel = (props: CustomizedLabelProps) => {
 };
 
 const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
+  const theme = useTheme();
   return (
     <>
       <ResponsiveContainer>
@@ -61,7 +62,7 @@ const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle,
             dataKey={BAR_CHART_X_LABEL}
             tickLine={false}
             axisLine={false}
-            style={{ fill: blackColor }}
+            style={{ fill: (theme.palette.primary as ColorScheme).fontColor }}
           />
           <Tooltip />
           {isStacked && <Legend verticalAlign="bottom" align="right" iconType="circle" height={5} />}
@@ -89,6 +90,9 @@ const SingleBarChart: FC<ISingleBarChartProps> = ({ data, isPercentage, textLabe
 };
 
 const MultiBarChart: FC<IMultiBarChartProps> = ({ data, isPercentage, isStacked, textLabel, subtitle, editorBarOptions }) => {
+  const theme = useTheme();
+  const colors = (theme.palette.primary as ColorScheme).barChartColors;
+
   const yLabels = data ? Object.keys(data[0]) : [];
   yLabels.splice(0, 1);
   const maxBarsNum = yLabels.length;

src/components/molecules/Header.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
@@ -10,11 +10,12 @@ import RootStore from 'store/root.store';
 import UserProfileHeader from './UserProfileHeader';
 import LanguageMenu from 'components/organisms/LanguageMenu';
 import { FEATURE_FLAGS } from 'utils/env.utils';
-import anywayLogo from 'assets/anyway.png';
 import { SignInIcon } from 'components/atoms/SignInIcon';
 import MapDialog from 'components/molecules/MapDialog';
 import { IPoint } from 'models/Point';
 import { useNavigate } from 'react-router-dom';
+import anywayLogo from 'assets/anyway.png';
+
 
 const useStyles = makeStyles({
   userSection: {

src/components/molecules/PieChartView.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useCallback } from 'react';
 import { ResponsiveContainer, PieChart, Pie, Cell, PieLabelRenderProps } from 'recharts';
-import { fontFamilyString, pieChartColors, whiteColor } from 'style';
+import {ColorScheme, fontFamilyString, whiteColor} from 'style';
 import { makeStyles } from '@material-ui/core';
+import {useTheme} from "@material-ui/core/styles";
 
 const TEXT_RELATIVE_WIDTH = 0.8;
 
@@ -21,7 +22,6 @@ interface IProps {
   labelProps?: ILabelProps;
 }
 
-const COLORS = pieChartColors;
 const RADIAN = Math.PI / 180;
 const PIE_SHADOW_ID = 'pie-shadow';
 const useStyles = makeStyles({
@@ -142,6 +142,9 @@ export const PieChartView: FC<IProps> = ({
   usePercent,
   labelProps = { customizedLabel: renderCustomizedLabel },
 }) => {
+  const theme = useTheme();
+  const colors = (theme.palette.primary as ColorScheme).pieChartColors;
+
   const renderLabel = useCallback(
     (props: PieLabelRenderProps) =>
       labelProps.customizedLabel(
@@ -176,7 +179,7 @@ export const PieChartView: FC<IProps> = ({
           isAnimationActive={false}
         >
           {data.map((entry: any, index: any) => (
-            <Cell key={index} fill={COLORS[index % COLORS.length]} />
+            <Cell key={index} fill={colors[index % colors.length]} />
           ))}
         </Pie>
       </PieChart>

src/components/molecules/TextView/TextView.tsx

@@ -122,7 +122,7 @@ const TextView: FC<IProps> = ({
       {isSingleType ? (
         <SeverityImage severity={getSingleType(countBySeverity)!} />
       ) : (
-        <Box color="text.secondary" className={classes.list}>
+        <Box className={classes.list}>
           <TextViewList data={countBySeverity} labels={labels} largeNumbers={largeNumbers}/>
         </Box>
       )}

src/components/molecules/card/AnyWayCard.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState } from 'react';
+import {ColorScheme} from 'style'
 import { Card, CardContent, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import widgetToImage from 'services/to-image.service';
@@ -48,11 +49,15 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative', // for meta tags
     boxSizing: 'border-box',
     zIndex: 0,
+    backgroundColor: (theme.palette.primary as ColorScheme).backgroundColor,
+    color: (theme.palette.primary as ColorScheme).fontColor,
   },
   content: {
     height: '100%',
     boxSizing: 'border-box',
     padding: 0,
+    backgroundColor: (theme.palette.primary as ColorScheme).containerColor,
+    borderRadius: '16px',
   },
   button: {
     '&:hover': {

src/components/molecules/card/CardHeader.tsx

@@ -5,9 +5,9 @@ import RoadNumberImage from './RoadNumberImage';
 import LamasImage from 'assets/cbs.png';
 import AnywayImage from 'assets/anyway.png';
 import { Typography, Logo } from 'components/atoms';
-import { silverSmokeColor, opacity80percent } from 'style/';
+import {ColorScheme, opacity80percent, silverSmokeColor} from 'style/';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   wrapper: {
     width: '100%',
     height: '100%',
@@ -19,6 +19,13 @@ const useStyles = makeStyles({
     position: 'relative',
     top: '40%',
   },
+  titlesContainer: {
+    backgroundColor: (theme.palette.primary as ColorScheme).titleContainerColor,
+    paddingRight: '25px',
+    paddingLeft: '25px',
+    paddingBottom: '15px',
+    paddingTop: '5px',
+  },
   logosContainer: {
     height: '100%',
   },
@@ -32,7 +39,7 @@ const useStyles = makeStyles({
   label: {
     maxWidth: 'min-content',
   },
-});
+}));
 
 interface IProps {
   variant: HeaderVariant;
@@ -55,7 +62,7 @@ const CardHeader: FC<IProps> = ({ variant, title, subtitle, road,orgIconPath })
           <Box display="flex" justifyContent="center" px={2} className={classes.textWrapper}>
             <Box display="flex" flexDirection="column">
               { variant === HeaderVariant.Centered &&
-                <Box textAlign="center">
+                <Box textAlign="center" className={classes.titlesContainer} >
                   <Typography.Title2 bold>{title}</Typography.Title2>
                   <Typography.Body2>{subtitle}</Typography.Body2>
                 </Box>

src/pages/HomePage.tsx

@@ -2,7 +2,7 @@ import { useEffect, FC } from 'react';
 import { Box } from '@material-ui/core';
 import SideBar from 'components/organisms/SideBar';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { silverSmokeColor } from '../style';
+import { silverSmokeColor } from 'style';
 import FilterBar from 'components/organisms/FilterBar';
 import OverlayLoader from 'components/molecules/OverlayLoader';
 import { observer } from 'mobx-react-lite';

src/store/settings.store.ts

@@ -1,13 +1,14 @@
-import { makeAutoObservable, runInAction } from 'mobx';
-import { Theme, createMuiTheme } from '@material-ui/core';
-import { defaultThemeOptions } from 'style';
-import { LANG } from 'const/languages.const';
+import {makeAutoObservable, runInAction} from 'mobx';
+import {createMuiTheme, Theme} from '@material-ui/core';
+import {LANG} from 'const/languages.const';
 import i18next from 'services/i18n.service';
 import RootStore from './root.store';
+import {ThemeNames, themeOptions} from "style/theme";
 
 export default class SettingsStore {
   rootStore: RootStore;
-  private _theme: Theme = createMuiTheme(defaultThemeOptions);
+  currentThemeName : ThemeNames = ThemeNames.DEFAULT
+  _theme : Theme = createMuiTheme(themeOptions[this.currentThemeName]);
   currentLanguageRouteString: string = '';
   selectedLanguage: string = LANG.HE;
 
@@ -17,6 +18,14 @@ export default class SettingsStore {
   }
 
   get theme(): Theme {
+    const organizationName = this.rootStore.userStore.orgNamesList ? this.rootStore.userStore.orgNamesList[0] : '';
+    if (organizationName !== this.currentThemeName) {
+      this.currentThemeName = organizationName as ThemeNames;
+      const new_theme_data :  Theme | undefined = themeOptions[this.currentThemeName];
+      if (new_theme_data) {
+        this._theme = new_theme_data;
+      }
+    }
     return this._theme;
   }
 

src/store/user.store.ts

@@ -18,7 +18,7 @@ export default class UserStore {
   isUserAuthenticated: boolean = false;
   isAdmin: boolean = false;
   usersInfoList: [IUserInfo] | null = null;
-  organizationsList: Array<String> | null = null;
+  organizationsList: Array<string> | null = null;
   userInfo: IAnywayUserDetails | null = null;
   userApiError: boolean = false;
   rootStore: RootStore;

src/style/_colors.ts

@@ -1,35 +1,21 @@
+import {barColors, blueVioletColor, pieChartColors, silverGrayColor} from "./default/_defaultColors";
+import {
+  grayBeige,
+  mainN12Red,
+  n12BackgroundColor,
+  n12BarColors,
+  n12DataContainerColor,
+  n12PieChartColors
+} from "./n12/_n12_colors";
+
 export const blackColor = '#000';
 export const whiteColor = '#ffffff';
 export const transparentColor = 'transparent';
-//blue base collection
-export const blueVioletColor = '#3f51b5';
-export const skyBlueColor = '#00aaff';
-export const oceanBlueColor = '#0088cc';
-export const secondaryBgColor = '#E3F6FF';
-//white-Gray base collection
-export const shadowColor = '#4c4c4c';
-export const brightGreyColor = '#5a5b5e';
-export const smokeWhiteColor = '#f5f5f5';
-//silver-Gray base collection
-export const silverSmokeColor = '#D3D3D3';
-export const silverGrayColor = '#A2A2A2';
-export const silverSpoonColor = '#647171';
-//red base collection
-export const roseColor = '#c43a31';
-export const cherryJamColor = '#8a1212';
-export const honeyColor = '#F2BB0A';
-//Stacked chart
-export const yellowColor = '#ffdd22';
-// Grey
-export const darkGrey = '#818386';
 
 // Opacity
 export const opacity80percent = '8c';
 export const transparent = 'transparent';
 
-//pie
-export const pieChartColors = ['#AE0721', '#818386', '#d90000', '#890505', '#6a6a6a'];
-
 //road number icon && font
 export const roadIconColors = {
   red: '#ae0721',
@@ -39,3 +25,45 @@ export const roadIconColors = {
 };
 
 export const tooltipMarkerBorderColorArrow = 'transparent #000000 transparent #000000';
+
+
+declare module "@material-ui/core";
+interface PaletteColorOptions {
+  light?: string;
+  main: string;
+  dark?: string;
+  contrastText?: string;
+}
+
+export interface ColorScheme extends PaletteColorOptions {
+  fontColor: string;
+  backgroundColor: string;
+  containerColor: string;
+  titleContainerColor: string;
+  pieChartColors: string[];
+  barChartColors: string[];
+  roadNumberBackground?: string;
+}
+
+export const defaultThemeColors : ColorScheme = {
+  main: blueVioletColor,
+  fontColor: blackColor,
+  backgroundColor: whiteColor,
+  containerColor: whiteColor,
+  titleContainerColor: whiteColor,
+  pieChartColors: pieChartColors,
+  barChartColors: barColors,
+  roadNumberBackground: silverGrayColor,
+}
+
+export const n12ThemeColors : ColorScheme = {
+  main: mainN12Red,
+  fontColor: whiteColor,
+  backgroundColor: n12BackgroundColor,
+  containerColor: n12DataContainerColor,
+  titleContainerColor: mainN12Red,
+  pieChartColors: n12PieChartColors,
+  barChartColors: n12BarColors,
+  roadNumberBackground: grayBeige,
+}
+

src/style/_fonts.ts

@@ -8,3 +8,14 @@ export const fontFamilyString = [
   'Arial',
   'sans-serif',
 ].join(',');
+
+export const n12FontFamilyString = [
+  'Rubik',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Arial',
+  'sans-serif',
+].join(',');

src/style/default/_defaultColors.ts

@@ -0,0 +1,29 @@
+//blue base collection
+import {darkestRed, grayBeige, softRed} from "../n12/_n12_colors";
+
+export const blueVioletColor = '#3f51b5';
+export const skyBlueColor = '#00aaff';
+export const oceanBlueColor = '#0088cc';
+export const secondaryBgColor = '#E3F6FF';
+//white-Gray base collection
+export const shadowColor = '#4c4c4c';
+export const brightGreyColor = '#5a5b5e';
+export const smokeWhiteColor = '#f5f5f5';
+//silver-Gray base collection
+export const silverSmokeColor = '#D3D3D3';
+export const silverGrayColor = '#A2A2A2';
+export const silverSpoonColor = '#647171';
+//red base collection
+export const roseColor = '#c43a31';
+export const cherryJamColor = '#8a1212';
+export const honeyColor = '#F2BB0A';
+//Stacked chart
+export const yellowColor = '#ffdd22';
+// Grey
+export const darkGrey = '#818386';
+
+//pie
+export const pieChartColors = ['#AE0721', '#818386', '#d90000', '#890505', '#6a6a6a'];
+
+export const barColors = [roseColor, honeyColor, yellowColor];
+