Skip to content

Commit

Permalink
Add theme options for n12
Browse files Browse the repository at this point in the history
  • Loading branch information
shaked-hayek committed Mar 2, 2024
1 parent ec7dd7c commit c676415
Show file tree
Hide file tree
Showing 19 changed files with 274 additions and 99 deletions.
3 changes: 2 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -70,4 +71,4 @@ const App: FC = () => {
</StoreContext.Provider>
);
};
export default App;
export default observer(App);
Binary file modified src/assets/n12Logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions src/components/molecules/GenericBarChart.tsx
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -51,6 +51,7 @@ const CustomizedLabel = (props: CustomizedLabelProps) => {
};

const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
const theme = useTheme();
return (
<>
<ResponsiveContainer>
Expand All @@ -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} />}
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions src/components/molecules/Header.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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: {
Expand Down
9 changes: 6 additions & 3 deletions src/components/molecules/PieChartView.tsx
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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({
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/TextView/TextView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
5 changes: 5 additions & 0 deletions src/components/molecules/card/AnyWayCard.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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': {
Expand Down
15 changes: 11 additions & 4 deletions src/components/molecules/card/CardHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand All @@ -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%',
},
Expand All @@ -32,7 +39,7 @@ const useStyles = makeStyles({
label: {
maxWidth: 'min-content',
},
});
}));

interface IProps {
variant: HeaderVariant;
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
19 changes: 14 additions & 5 deletions src/store/settings.store.ts
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/store/user.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
76 changes: 52 additions & 24 deletions src/style/_colors.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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,
}

11 changes: 11 additions & 0 deletions src/style/_fonts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(',');
29 changes: 29 additions & 0 deletions src/style/default/_defaultColors.ts
Original file line number Diff line number Diff line change
@@ -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];

Loading

0 comments on commit c676415

Please sign in to comment.