diff --git a/src/App.tsx b/src/App.tsx index e387169c..67979abb 100644 --- a/src/App.tsx +++ b/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 = () => { ); }; -export default App; +export default observer(App); diff --git a/src/assets/n12Logo.png b/src/assets/n12Logo.png index bde7e1aa..59cc7cb7 100644 Binary files a/src/assets/n12Logo.png and b/src/assets/n12Logo.png differ diff --git a/src/components/molecules/GenericBarChart.tsx b/src/components/molecules/GenericBarChart.tsx index 47790f06..9089e7f5 100644 --- a/src/components/molecules/GenericBarChart.tsx +++ b/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 = ({ data, textLabel, subtitle, children, isStacked }) => { + const theme = useTheme(); return ( <> @@ -61,7 +62,7 @@ const BarChartContainer: FC = ({ data, textLabel, subtitle, dataKey={BAR_CHART_X_LABEL} tickLine={false} axisLine={false} - style={{ fill: blackColor }} + style={{ fill: (theme.palette.primary as ColorScheme).fontColor }} /> {isStacked && } @@ -89,6 +90,9 @@ const SingleBarChart: FC = ({ data, isPercentage, textLabe }; const MultiBarChart: FC = ({ 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; diff --git a/src/components/molecules/Header.tsx b/src/components/molecules/Header.tsx index a5cd6c2d..abae928f 100644 --- a/src/components/molecules/Header.tsx +++ b/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: { diff --git a/src/components/molecules/PieChartView.tsx b/src/components/molecules/PieChartView.tsx index 2d457ad9..ba8f0b27 100644 --- a/src/components/molecules/PieChartView.tsx +++ b/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 = ({ 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 = ({ isAnimationActive={false} > {data.map((entry: any, index: any) => ( - + ))} diff --git a/src/components/molecules/TextView/TextView.tsx b/src/components/molecules/TextView/TextView.tsx index b21e12fc..bbdacb85 100644 --- a/src/components/molecules/TextView/TextView.tsx +++ b/src/components/molecules/TextView/TextView.tsx @@ -122,7 +122,7 @@ const TextView: FC = ({ {isSingleType ? ( ) : ( - + )} diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx index 9b32fa3c..b212b1cb 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/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': { diff --git a/src/components/molecules/card/CardHeader.tsx b/src/components/molecules/card/CardHeader.tsx index 0039dfe4..6b758035 100644 --- a/src/components/molecules/card/CardHeader.tsx +++ b/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 = ({ variant, title, subtitle, road,orgIconPath }) { variant === HeaderVariant.Centered && - + {title} {subtitle} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 1c151a3a..edb745af 100644 --- a/src/pages/HomePage.tsx +++ b/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'; diff --git a/src/store/settings.store.ts b/src/store/settings.store.ts index 82bac7e4..e00acc9e 100644 --- a/src/store/settings.store.ts +++ b/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; } diff --git a/src/store/user.store.ts b/src/store/user.store.ts index fbdd4b5a..f7f89374 100644 --- a/src/store/user.store.ts +++ b/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 | null = null; + organizationsList: Array | null = null; userInfo: IAnywayUserDetails | null = null; userApiError: boolean = false; rootStore: RootStore; diff --git a/src/style/_colors.ts b/src/style/_colors.ts index 8c38198d..6861f2dc 100644 --- a/src/style/_colors.ts +++ b/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, +} + diff --git a/src/style/_fonts.ts b/src/style/_fonts.ts index 2b0857fd..2ca0ef8d 100644 --- a/src/style/_fonts.ts +++ b/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(','); diff --git a/src/style/default/_defaultColors.ts b/src/style/default/_defaultColors.ts new file mode 100644 index 00000000..95a05e17 --- /dev/null +++ b/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]; + diff --git a/src/style/default/defaultTheme.ts b/src/style/default/defaultTheme.ts new file mode 100644 index 00000000..7981e6eb --- /dev/null +++ b/src/style/default/defaultTheme.ts @@ -0,0 +1,58 @@ +import { ThemeOptions } from '@material-ui/core'; +import { ColorScheme, defaultThemeColors, fontFamilyString } from 'style'; +import { darkGrey } from 'style' + +const defaultThemeOptions: ThemeOptions = { + palette: { + primary: defaultThemeColors + }, + overrides: { + MuiCardContent: { + root: { + '&:last-child': { + paddingBottom: 0, + }, + }, + }, + }, + typography: { + fontFamily: fontFamilyString, + // title variants (like: card headers) + subtitle1: { + fontSize: 29, + fontWeight: 500, + }, + subtitle2: { + fontSize: 22, + fontWeight: 400, + }, + // body variants (like: newsflash data, widget contents etc) + h1: { + fontSize: 20, + fontColor: darkGrey, + fontWeight: 400, + }, + h2: { + fontSize: 18, + fontWeight: 400, + }, + h3: { + fontSize: 16, + fontWeight: 400, + }, + h4: { + fontSize: 15, + fontWeight: 400, + }, + h5: { + fontSize: 14, + fontWeight: 400, + }, + h6: { + fontSize: 13, + }, + + }, +}; + +export { defaultThemeOptions }; diff --git a/src/style/index.ts b/src/style/index.ts index 780d8bbe..37ea063a 100644 --- a/src/style/index.ts +++ b/src/style/index.ts @@ -1,4 +1,6 @@ export * from './_fonts'; export * from './_colors'; +export * from './default/_defaultColors'; export * from './_sizes'; -export { defaultThemeOptions } from './theme'; +export { defaultThemeOptions } from './default/defaultTheme'; +export { n12ThemeOptions } from './n12/n12Theme'; diff --git a/src/style/n12/_n12_colors.ts b/src/style/n12/_n12_colors.ts new file mode 100644 index 00000000..d568923f --- /dev/null +++ b/src/style/n12/_n12_colors.ts @@ -0,0 +1,13 @@ +export const n12BackgroundColor = '#181424'; +export const n12DataContainerColor = '#1b1c2e'; +export const darkestRed = '#8e0923'; +export const mainN12Red = '#b50100'; +export const brightRed = '#f41121'; +export const softRed = '#ff273e'; +export const grayBeige = '#dcdac8'; +export const beige = '#e3cfac'; +export const darkBlue = '#0057c7'; +export const mediumBlue = '#027be2'; +export const lightBlue = '#61b2ff'; +export const n12PieChartColors = [beige, darkBlue, mediumBlue, lightBlue]; +export const n12BarColors = [darkestRed, softRed, grayBeige]; diff --git a/src/style/n12/n12Theme.ts b/src/style/n12/n12Theme.ts new file mode 100644 index 00000000..d72b8224 --- /dev/null +++ b/src/style/n12/n12Theme.ts @@ -0,0 +1,46 @@ +import { ThemeOptions } from '@material-ui/core'; +import { defaultThemeOptions } from 'style/default/defaultTheme' +import { n12FontFamilyString } from "style"; +import {n12ThemeColors, whiteColor} from "style"; + +const n12ThemeOptions: ThemeOptions = { ...defaultThemeOptions }; +n12ThemeOptions.palette = { + primary: n12ThemeColors +} +n12ThemeOptions.typography = { + ...n12ThemeOptions.typography, + fontFamily: n12FontFamilyString, + subtitle2: { + fontSize: 22, + color: whiteColor, + fontWeight: 400, + }, + h1: { + fontSize: 20, + color: whiteColor, + fontWeight: 400, + }, + h2: { + fontSize: 18, + fontWeight: 400, + }, + h3: { + fontSize: 16, + color: whiteColor, + fontWeight: 400, + }, + h4: { + fontSize: 15, + fontWeight: 400, + }, + h5: { + fontSize: 14, + fontWeight: 400, + }, + h6: { + fontSize: 13, + color: whiteColor, + }, +} + +export { n12ThemeOptions }; diff --git a/src/style/theme.ts b/src/style/theme.ts index f82046c1..e99f2fc8 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -1,55 +1,13 @@ -import { ThemeOptions } from '@material-ui/core'; -import { fontFamilyString, darkGrey } from './'; +import {n12ThemeOptions} from "./n12/n12Theme"; +import {defaultThemeOptions} from "./default/defaultTheme"; +import {createMuiTheme, Theme} from "@material-ui/core"; -const defaultThemeOptions: ThemeOptions = { - palette: {}, - overrides: { - MuiCardContent: { - root: { - '&:last-child': { - paddingBottom: 0, - }, - }, - }, - }, - typography: { - fontFamily: fontFamilyString, - // title variants (like: card headers) - subtitle1: { - fontSize: 29, - fontWeight: 500, - }, - subtitle2: { - fontSize: 22, - fontWeight: 400, - }, - // body variants (like: newsflash data, widget contents etc) - h1: { - fontSize: 20, - fontColor: darkGrey, - fontWeight: 400, - }, - h2: { - fontSize: 18, - fontWeight: 400, - }, - h3: { - fontSize: 16, - fontWeight: 400, - }, - h4: { - fontSize: 15, - fontWeight: 400, - }, - h5: { - fontSize: 14, - fontWeight: 400, - }, - h6: { - fontSize: 13, - }, +export enum ThemeNames { + DEFAULT = 'default', + N12 = 'n12', +} - }, -}; - -export { defaultThemeOptions }; +export const themeOptions : Record = { + [ThemeNames.DEFAULT]: createMuiTheme(defaultThemeOptions), + [ThemeNames.N12]: createMuiTheme(n12ThemeOptions), + }