[Feat-1031] Add theme for n12 (#1037)

* Change the way patch request work

* Add n12 org logo (#1031)

* Add theme for N12

* Add theme for N12

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/default/_defaultColors';
+import { smokeWhiteColor } from 'style';
 
 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/default/_defaultColors';
+import { oceanBlueColor, skyBlueColor } from 'style';
 
 const useStyles = makeStyles({
   link: {

src/components/atoms/MostSevereAccidentsMarker.tsx

@@ -7,8 +7,7 @@ import { AnyWayButton } from './AnyWayButton';
 import { Typography, MapIcon, TooltipMarker, TooltipArrow } from '.';
 import { ClockPosition } from 'models/ClockPosition';
 import { useTranslation } from 'react-i18next';
-import { defaultBorderRadius } from 'style';
-import { silverSmokeColor } from 'style/default/_defaultColors';
+import { silverSmokeColor, defaultBorderRadius } from 'style';
 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/default/_defaultColors";
+import {oceanBlueColor, roseColor, silverGrayColor} from "style";
 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/default/_defaultColors';
+import { roseColor } from 'style';
 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/default/_defaultColors';
+import { shadowColor, blueVioletColor } from 'style';
 
 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/default/_defaultColors';
+import { roseColor, honeyColor } from 'style';
 
 interface IProps {
   data: Array<object>;

src/components/molecules/GenericBarChart.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar, Tooltip, Legend } from 'recharts';
-import {blackColor, ColorScheme, whiteColor} from 'style';
-import { roseColor } from 'style/default/_defaultColors';
+import {roseColor, blackColor, ColorScheme, whiteColor} from 'style';
 import tinycolor from 'tinycolor2';
 import {useTheme} from "@material-ui/core/styles";
 

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/default/_defaultColors';
+import { oceanBlueColor, secondaryBgColor } from 'style';
 
 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/default/_defaultColors';
+import { oceanBlueColor, skyBlueColor } from 'style';
 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/default/_defaultColors';
+import { cherryJamColor, oceanBlueColor, silverSmokeColor } from 'style';
 import { useStore } from 'store/storeConfig';
 import RootStore from 'store/root.store';
 import { dateFormat } from 'utils/time.utils';

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/default/_defaultColors';
+import { silverSmokeColor, oceanBlueColor } from 'style';
 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/default/_defaultColors';
+import { silverSmokeColor } from 'style';
 
 const useStyles = makeStyles({
   root: {

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/default/_defaultColors';
+import { roseColor, honeyColor, yellowColor } from 'style';
 
 interface IProps {
   data: Array<object>;

src/components/molecules/Table/TableView.tsx

@@ -2,8 +2,7 @@ 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 { blackColor } from 'style';
-import { silverGrayColor } from 'style/default/_defaultColors'
+import { silverGrayColor, blackColor } from 'style';
 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/default/_defaultColors';
+import { brightGreyColor } from 'style';
 import Box from '@material-ui/core/Box';
 import classNames from 'classnames';
 import TextViewList from './TextViewList';

src/components/molecules/TextView/TextViewRecord.tsx

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

src/components/molecules/TextView/TextViewRecordLargeNumbers.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
-import { roadIconColors } from 'style';
-import { silverSmokeColor } from 'style/default/_defaultColors';
+import { roadIconColors, silverSmokeColor } from 'style';
 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/default/_defaultColors';
+import { oceanBlueColor, skyBlueColor } from 'style';
 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,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import {ColorScheme} from 'style/_colors'
+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';
@@ -94,7 +94,7 @@ const AnyWayCard: FC<IProps> = ({
   const [isOpen, setOpen] = useState(false);
   const [widgateOpen,SetWidgetOpen] = useState('')
 
-  const handleCardEditorOpen = (name:string) =>{ 
+  const handleCardEditorOpen = (name:string) =>{
     SetWidgetOpen(name)
     setOpen(true)
   };
@@ -117,7 +117,7 @@ const AnyWayCard: FC<IProps> = ({
 
     case 'TextBox':
       Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
-      break 
+      break
     case 'CardEditor':
       Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
   }

src/components/molecules/card/CardHeader.tsx

@@ -5,8 +5,7 @@ import RoadNumberImage from './RoadNumberImage';
 import LamasImage from 'assets/cbs.png';
 import AnywayImage from 'assets/anyway.png';
 import { Typography, Logo } from 'components/atoms';
-import {ColorScheme, opacity80percent} from 'style/';
-import {silverSmokeColor} from "style/default/_defaultColors";
+import {ColorScheme, opacity80percent, silverSmokeColor} from 'style/';
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {

src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx

@@ -3,7 +3,7 @@ import { Typography } from 'components/atoms';
 import PieChartView, { renderCollisionCustomizedLabel } from '../PieChartView';
 import { IWidgetHeadOnCollisionsComparisonData } from 'models/WidgetData';
 import { Box, makeStyles } from '@material-ui/core';
-import { cherryJamColor, silverSpoonColor } from 'style/default/_defaultColors';
+import { cherryJamColor, silverSpoonColor } from 'style';
 import { useTranslation } from 'react-i18next';
 import RootStore from 'store/root.store';
 import { useStore } from 'store/storeConfig';

src/components/organisms/CardEditorDialog.tsx

@@ -7,7 +7,7 @@ import AnyWayCard, { CardSizeOptions } from 'components/molecules/card/AnyWayCar
 import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/atoms';
 import widgetToImage from 'services/to-image.service';
 import { useTranslation } from 'react-i18next';
-import { blueVioletColor } from 'style/default/_defaultColors';
+import { blueVioletColor } from 'style';
 
 import {initEditorBarOptions, barsWidgetsLabels, barsWidgetsTitle, NUM_OF_BARS} from 'utils/barChart.utils';
 

src/components/organisms/Footer.tsx

@@ -4,7 +4,7 @@ import logoNatun from 'assets/NATUN-LOGO-FINAL-COLOR.png';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
 import { Typography } from 'components/atoms';
-import { silverSmokeColor, oceanBlueColor, skyBlueColor } from 'style/default/_defaultColors';
+import { silverSmokeColor, oceanBlueColor, skyBlueColor } from 'style';
 import ThankYouDialog from './ThankYouDialog';
 import AboutDialog from './AboutDialog';
 import { version } from '../../../package.json'; // eslint-disable-line

src/components/organisms/LocationApproveWindow.tsx

@@ -3,7 +3,7 @@ import DialogWithHeader from '../molecules/DialogWithHeader';
 import {Box, makeStyles } from '@material-ui/core';
 import { Button, Typography } from 'components/atoms';
 import { useTranslation } from 'react-i18next';
-import { silverSmokeColor } from 'style/default/_defaultColors';
+import { silverSmokeColor } from 'style';
 import { INewsFlash } from "models/NewFlash";
 import { useStore } from "store/storeConfig";
 import {IPoint} from "models/Point";

src/components/organisms/SideBar.tsx

@@ -3,7 +3,7 @@ import { Box, makeStyles } from '@material-ui/core';
 import News from './News';
 import NewsFlashFilterPanel from 'components/molecules/NewsFlashFilterPanel';
 import OverlayLoader from '../molecules/OverlayLoader';
-import { silverSmokeColor } from 'style/default/_defaultColors';
+import { silverSmokeColor } from 'style';
 import { Typography, ErrorBoundary } from 'components/atoms';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store/storeConfig';
@@ -62,7 +62,7 @@ const SideBar: FC<IProps> = () => {
         {location && (
           <ErrorBoundary>
             <SideBarMap items={[location]} />
-          </ErrorBoundary>  
+          </ErrorBoundary>
         )}
       </Box>
     </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/default/_defaultColors';
+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,15 +1,15 @@
-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 {defaultThemeOptions} from 'style';
+import {LANG} from 'const/languages.const';
 import i18next from 'services/i18n.service';
 import RootStore from './root.store';
-import {themeOptions} from "../style/theme";
+import {ThemeData, ThemeNames, themeOptions} from "style/theme";
 
 export default class SettingsStore {
   rootStore: RootStore;
-  private themeName = 'default';
-  _theme: Theme = createMuiTheme(defaultThemeOptions);
+  private themeName : ThemeNames = ThemeNames.DEFAULT;
+  _theme : Theme = createMuiTheme(defaultThemeOptions);
   currentLanguageRouteString: string = '';
   selectedLanguage: string = LANG.HE;
 
@@ -19,15 +19,14 @@ export default class SettingsStore {
   }
 
   get theme(): Theme {
-    return this._theme;
-  }
-
-  changeTheme(newThemeName: string) {
-    const newThemeOption = themeOptions.find((p) => p.key === newThemeName);
-    if (newThemeOption) {
-      this.themeName = newThemeName;
-      this._theme = createMuiTheme(newThemeOption.theme);
+    let new_theme : Theme | undefined = undefined;
+    const organizationName = this.rootStore.userStore.orgNamesList ? this.rootStore.userStore.orgNamesList[0] : '';
+    if (organizationName) {
+      const new_theme_data :  ThemeData | undefined = themeOptions.find((p) => p.key === this.themeName);
+      new_theme = new_theme_data?.theme;
     }
+    this._theme = new_theme ? new_theme : this._theme;
+    return this._theme;
   }
 
   changeLanguage(lngCode: string): void {

src/style/_colors.ts

@@ -1,5 +1,3 @@
-// import { PaletteColorOptions } from "@material-ui/core";
-
 import {barColors, blueVioletColor, pieChartColors, silverGrayColor} from "./default/_defaultColors";
 import {
   grayBeige,

src/style/default/defaultTheme.ts

@@ -1,6 +1,5 @@
 import { ThemeOptions } from '@material-ui/core';
-import { ColorScheme, defaultThemeColors, fontFamilyString } from 'style';
-import { darkGrey } from 'style/default/_defaultColors'
+import { darkGrey, defaultThemeColors, fontFamilyString } from 'style';
 
 const defaultThemeOptions: ThemeOptions = {
   palette: {

src/style/index.ts

@@ -1,5 +1,6 @@
 export * from './_fonts';
 export * from './_colors';
+export * from './default/_defaultColors';
 export * from './_sizes';
 export { defaultThemeOptions } from './default/defaultTheme';
 export { n12ThemeOptions } from './n12/n12Theme';

src/style/theme.ts

@@ -1,11 +1,14 @@
-import {n12ThemeOptions} from "./n12/n12Theme";
-import {defaultThemeOptions} from "./default/defaultTheme";
-import { ThemeOptions } from "@material-ui/core";
+import {defaultThemeOptions, n12ThemeOptions} from "style";
+import {createMuiTheme, Theme} from "@material-ui/core";
 
-export type ThemeData =  {key : string, theme : ThemeOptions} ;
+export enum ThemeNames {
+  DEFAULT= 'default',
+  N12 = 'n12',
+}
+
+export type ThemeData =  {key : ThemeNames, theme : Theme} ;
 
 export const themeOptions : ThemeData[] = [
-    // {key: 'or_yarok', path: orYarokTheme},
-    {key: 'default', theme: defaultThemeOptions},
-    {key: 'n12', theme: n12ThemeOptions},
+    {key: ThemeNames.DEFAULT, theme: createMuiTheme(defaultThemeOptions)},
+    {key: ThemeNames.N12, theme: createMuiTheme(n12ThemeOptions)},
   ]