[Feat-1031] Add different color themes (for N12) (#1034)

* Add n12 org logo (#1031)

* Add Color Themes - N12 theme

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/atoms/AppBar.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import MatAppBar from '@material-ui/core/AppBar';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { smokeWhiteColor } from 'style';
+import { smokeWhiteColor } from 'style/default/_defaultColors';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/atoms/Link.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Link as RouterLink, LinkProps } from 'react-router-dom';
-import { oceanBlueColor, skyBlueColor } from 'style';
+import { oceanBlueColor, skyBlueColor } from 'style/default/_defaultColors';
 
 const useStyles = makeStyles({
   link: {

src/components/atoms/MostSevereAccidentsMarker.tsx

@@ -7,7 +7,8 @@ import { AnyWayButton } from './AnyWayButton';
 import { Typography, MapIcon, TooltipMarker, TooltipArrow } from '.';
 import { ClockPosition } from 'models/ClockPosition';
 import { useTranslation } from 'react-i18next';
-import { defaultBorderRadius, silverSmokeColor } from 'style';
+import { defaultBorderRadius } from 'style';
+import { silverSmokeColor } from 'style/default/_defaultColors';
 import { useLocale } from 'hooks/date.hooks'
 
 interface IProps {

src/components/molecules/ApproveLocationRadioButtons.tsx

@@ -2,7 +2,7 @@ import {FormControl, FormControlLabel, makeStyles, Radio, RadioGroup} from "@mat
 import React, {FC} from "react";
 import {useTranslation} from "react-i18next";
 import {ReactComponent as CheckCircleIcon} from "assets/check_blue_24dp.svg";
-import {oceanBlueColor, roseColor, silverGrayColor} from "style";
+import {oceanBlueColor, roseColor, silverGrayColor} from "style/default/_defaultColors";
 import {ReactComponent as CancelCircleIcon} from "assets/cancel_red_24dp.svg";
 
 

src/components/molecules/BarChartView.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar } from 'recharts';
-import { roseColor } from 'style';
+import { roseColor } from 'style/default/_defaultColors';
 import { Typography } from 'components/atoms';
 interface IProps {
   data: Array<object>;

src/components/molecules/DialogWithHeader.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Dialog, Typography } from 'components/atoms';
 import { Box, makeStyles, createStyles, Theme, IconButton, DialogTitle, DialogContent } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
-import { shadowColor, blueVioletColor } from 'style';
+import { shadowColor, blueVioletColor } from 'style/default/_defaultColors';
 
 interface IProps {
   title: string;

src/components/molecules/DoubleBarChartView.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar } from 'recharts';
-import { roseColor, honeyColor } from 'style';
+import { roseColor, honeyColor } from 'style/default/_defaultColors';
 
 interface IProps {
   data: Array<object>;

src/components/molecules/GenericBarChart.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar, Tooltip, Legend } from 'recharts';
-import { roseColor, honeyColor, yellowColor, blackColor, whiteColor } from 'style';
+import {blackColor, ColorScheme, whiteColor} from 'style';
+import { roseColor } from 'style/default/_defaultColors';
 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 +52,7 @@ const CustomizedLabel = (props: CustomizedLabelProps) => {
 };
 
 const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
+  const theme = useTheme();
   return (
     <>
       <ResponsiveContainer>
@@ -61,7 +63,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 +91,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,13 @@ 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 n12Logo from 'assets/n12Logo.png';
+import anywayLogo from 'assets/anyway.png';
+
 
 const useStyles = makeStyles({
   userSection: {
@@ -46,6 +48,13 @@ const Header: FC = () => {
     [store],
   );
 
+  const changeTheme = useCallback(
+    (themeName : string) => {
+      store.settingsStore.changeTheme(themeName);
+    },
+    [store.settingsStore],
+  );
+
   const onLocationSearch = () => {
     if (roadSegmentLocation) {
       navigate(`${settingsStore.currentLanguageRouteString}/location/${roadSegmentLocation?.road_segment_id}`);
@@ -97,6 +106,12 @@ const Header: FC = () => {
     <AppBar>
       <Logo src={logo} alt={'Anyway'} height={30} onClick={reloadHomePage} />
       <Box className={classes.userSection}>
+        <Button.Standard onClick={() => changeTheme('n12')}>
+          <Logo src={n12Logo} alt={'n12'} height={25} />
+        </Button.Standard>
+        <Button.Standard onClick={() => changeTheme('default')}>
+          <Logo src={anywayLogo} alt={'anyway'} height={25} />
+        </Button.Standard>
         <Button.Standard onClick={() => setOpen(true)}>{t('header.Search')}</Button.Standard>
         {FEATURE_FLAGS.language && <LanguageMenu />}
         {authElement}

src/components/molecules/LocationSearchIndicator.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import Box from '@material-ui/core/Box';
 import { Typography } from 'components/atoms';
-import { oceanBlueColor, secondaryBgColor } from 'style';
+import { oceanBlueColor, secondaryBgColor } from 'style/default/_defaultColors';
 
 const useStyles = makeStyles({
   root: {

src/components/molecules/LogInLinkGoogle.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
-import { oceanBlueColor, skyBlueColor } from 'style';
+import { oceanBlueColor, skyBlueColor } from 'style/default/_defaultColors';
 import React from 'react';
 import { AUTH_LOGIN_GOOGLE_URL } from 'const/generalConst';
 import { openSignInWindow } from 'services/signInWindow';

src/components/molecules/NewsFlashComp.tsx

@@ -1,7 +1,7 @@
 import React, {FC, useState} from 'react';
 import { Link, Typography, Button } from 'components/atoms';
 import { Box, makeStyles } from '@material-ui/core';
-import { cherryJamColor, oceanBlueColor, silverSmokeColor } from 'style';
+import { cherryJamColor, oceanBlueColor, silverSmokeColor } from 'style/default/_defaultColors';
 import { useStore } from 'store/storeConfig';
 import RootStore from 'store/root.store';
 import { dateFormat } from 'utils/time.utils';
@@ -57,7 +57,7 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
   const verificationIcon = getVerificationIcon(news.newsflash_location_qualification);
   const criticalIcon = news.critical && <CriticalIcon className={classes.icon} />;
   const {newsId} = useParams()
-  const newsID = newsId ? parseInt(newsId) : '' 
+  const newsID = newsId ? parseInt(newsId) : ''
   const className = news.id === newsID ? classes.activeNewsFlash : '';
   const date = news.date == null ? '' : dateFormat(new Date(news.date.replace(/-/g, '/')), locale);
   const handleLocationEditorOpen = () => setOpen(true);

src/components/molecules/NewsFlashFilterPanel.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import classnames from 'classnames';
 import { Box, makeStyles } from '@material-ui/core';
-import { silverSmokeColor, oceanBlueColor } from 'style';
+import { silverSmokeColor, oceanBlueColor } from 'style/default/_defaultColors';
 import ynetLogo from 'assets/ynet-website-logo.svg';
 import wallaLogo from 'assets/walla-logo.svg';
 import madaLogo from 'assets/mada-logo.svg';

src/components/molecules/OverlayLoader.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import Loader from 'components/atoms/Loader';
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core';
-import { silverSmokeColor } from 'style';
+import { silverSmokeColor } from 'style/default/_defaultColors';
 
 const useStyles = makeStyles({
   root: {

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/StackedBarChartView.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, XAxis, Bar, Legend } from 'recharts';
-import { roseColor, honeyColor, yellowColor } from 'style';
+import { roseColor, honeyColor, yellowColor } from 'style/default/_defaultColors';
 
 interface IProps {
   data: Array<object>;

src/components/molecules/Table/TableView.tsx

@@ -2,7 +2,8 @@ import React, { FC } from 'react';
 import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
 import { Typography } from 'components/atoms';
 import { Table, TableBody, TableCell, TableHead, TableRow, Theme } from '@material-ui/core';
-import { silverGrayColor, blackColor } from 'style';
+import { blackColor } from 'style';
+import { silverGrayColor } from 'style/default/_defaultColors'
 import { ITableData } from './formatTableData.service';
 
 interface IProps {

src/components/molecules/TextView/TextView.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { IWidgetCountBySeverityTextDataBase } from 'models/WidgetData';
 import { makeStyles } from '@material-ui/core';
-import { brightGreyColor } from 'style';
+import { brightGreyColor } from 'style/default/_defaultColors';
 import Box from '@material-ui/core/Box';
 import classNames from 'classnames';
 import TextViewList from './TextViewList';
@@ -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/TextView/TextViewRecord.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
-import { roadIconColors, silverSmokeColor } from 'style';
+import { roadIconColors } from 'style';
+import { silverSmokeColor } from 'style/default/_defaultColors';
 import SeverityImage from './SeverityImage';
 import { makeStyles } from '@material-ui/core/styles';
 import { Typography } from 'components/atoms';

src/components/molecules/TextView/TextViewRecordLargeNumbers.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
-import { roadIconColors, silverSmokeColor } from 'style';
+import { roadIconColors } from 'style';
+import { silverSmokeColor } from 'style/default/_defaultColors';
 import SeverityImage from './SeverityImage';
 import { makeStyles } from '@material-ui/core/styles';
 import { Typography , CustomTypography} from 'components/atoms';

src/components/molecules/UserProfileHeader.tsx

@@ -4,7 +4,7 @@ import UserInfoForm, { IFormInput } from './UserUpdateForm';
 import AdminManagementForm from './adminManagement/AdminManagementForm';
 import { useTranslation } from 'react-i18next';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { oceanBlueColor, skyBlueColor } from 'style';
+import { oceanBlueColor, skyBlueColor } from 'style/default/_defaultColors';
 import Box from '@material-ui/core/Box';
 import { Avatar } from '@material-ui/core';
 import { IAnywayUserDetails } from 'services/user.service';

src/components/molecules/card/AnyWayCard.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
+import {ColorScheme} from 'style/_colors'
 import { Card, CardContent, Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
 import widgetToImage from 'services/to-image.service';
 // TEXT BOX COMPONENT ADD FEATURE
 import  TextBox from 'components/organisms/TextBox'
@@ -21,6 +22,7 @@ import CardEditor from 'components/organisms/CardEditorDialog';
 import { transparent } from 'style';
 import { IDateComments } from 'models/WidgetData';
 import { OrgLogoData } from 'const/cards.const';
+import {observer} from "mobx-react-lite";
 
 const DEFAULTE_SIZE = 1;
 export interface CardSizeOptions {
@@ -48,11 +50,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': {
@@ -193,4 +199,4 @@ const AnyWayCard: FC<IProps> = ({
     </>
   );
 };
-export default AnyWayCard;
+export default observer(AnyWayCard);

src/components/molecules/card/CardHeader.tsx

@@ -5,9 +5,10 @@ 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} from 'style/';
+import {silverSmokeColor} from "style/default/_defaultColors";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   wrapper: {
     width: '100%',
     height: '100%',
@@ -19,6 +20,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 +40,7 @@ const useStyles = makeStyles({
   label: {
     maxWidth: 'min-content',
   },
-});
+}));
 
 interface IProps {
   variant: HeaderVariant;
@@ -55,7 +63,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>