From aafaf4aa7d92006af30b104ac2f46c685decccc7 Mon Sep 17 00:00:00 2001 From: Atalya Alon <20992625+atalyaalon@users.noreply.github.com> Date: Wed, 17 Jan 2024 22:32:15 +0200 Subject: [PATCH 1/2] merge dev into master (#1028) * [Feat-885] Add selection for stack bar graphs (#935) * Added stacked bar widgets a checkbox option * Add option to choose colors when changing displayed bars * Changed any to proper type, make number of bar generic and add function createBarWidget * Fix bug of changed values when closing card editor * PR review changes * Remove redundent imports * add conditional label, refactor utils (#938) Co-authored-by: Daniel Shely <> * Update .env.staging (#947) * Add critical indication (#948) * Added image * Added critical icon based on field value * Added critical option to the filter panel * Added enum value * Had to increase width * Added local critical filter * Added field to model * add alt attrinbte on image tag (#951) * Update .env.staging (#952) * Make critical filter non local (#958) * sufficient condition * Use object for fetch args * Send params in object format * Make fields optional * don't use "any" type hint * Update News.tsx (#961) * Update news-flash-store.ts (#962) * Update News.tsx * Update thank-you-names.csv * transaction dialog box (#966) Co-authored-by: EyalIlan * [Feat-925] Add location approval feature (#969) * initial feature commit with icon and new field * Added icon choice and display * Move critical icon * Add location change button * Make critical icon transperent * replace critical.gif with svg * Window open pressing button, seperated newsFlash comp to new file * Added user info * Status icon and buttons * Added map choice (need to finish with saving data) * Saving location and qualificaion data * Added manual option for location qualification and added user change * Fix responsibilty issue between the two files * Split Search city to 2 files * Spacing and page look * Changed initialLocation to be a function, and improved onClose location window * Split radio buttons to seperate file * updated put function for news flash --------- Co-authored-by: Daniel Shely <> * Feature add transcrption 4 widgets 957 (#968) * transaction dialog box * show transaction icon only widgets that has transaction * add copy image to transaction box * add widget vision_10_30_90 (#972) * Feature widget vision zero 10 50 90 (#975) * add widget vision_10_30_90 * change widget 10_30_90 to 10_50_90 * change the location of the start command in package.json (#977) * change the location of the start command in package.json change the location of the start command after receive this error: /usr/local/bin/node: bad option: --openssl-legacy-provider * add npx browserslist@latest --update-db before start the docker * add logo (#979) * add natun square logo (#982) * add widget lower bar (#981) * update logo (#980) * Update Footer.tsx (#986) * add data-for-change (#988) * Delete src/assets/hasadna.png (#989) * Bug click twice to change news backround (#984) * add widget lower bar * fix news menu bar bug you need to click twice to make the news backround active * Add dev-to-prod auth server change (#950) * Spliting title and subtitle, making title bold (#995) * Change design in bar widgets (#996) * Remove margin from bottom of bar charts (#1001) * Add check for user authentication in NewsFlash (#990) (#1003) * Fix subtitle param in CardEditor (#1005) (#1006) * Remove padding from bottom of stack bars (#1008) (#1009) * Open new widgets to production (#1012) (#1013) * Remove accident_count_by_driver_type from prod (#1016) * Update cards.const.ts * Add title and subtitle to heatmap widget (#1015) * fix the text in info button (make bigger) (#1020) (#1024) Co-authored-by: Barak Yakter * fix the text in info button (make bigger) (#1020) (#1026) Co-authored-by: Barak Yakter * Fix location qualification api use (#1022) (#1023) * Update generalConst.ts (#1027) --------- Co-authored-by: shaked-hayek <85109951+shaked-hayek@users.noreply.github.com> Co-authored-by: danielsh28 Co-authored-by: carmelp16 <46032304+carmelp16@users.noreply.github.com> Co-authored-by: EyalIlan <55767736+EyalIlan@users.noreply.github.com> Co-authored-by: EyalIlan Co-authored-by: Shai2022 <106345640+Shai2022@users.noreply.github.com> Co-authored-by: BarVolunteering <58947331+BarVolunteering@users.noreply.github.com> Co-authored-by: byakter <109795934+byakter@users.noreply.github.com> Co-authored-by: Barak Yakter --- src/components/molecules/card/AnyWayCard.tsx | 2 +- src/const/generalConst.ts | 3 +-- src/services/news.data.service.ts | 10 +++++----- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx index 8a1d5292..3659059c 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/src/components/molecules/card/AnyWayCard.tsx @@ -126,7 +126,7 @@ const AnyWayCard: FC = ({ {information && ( - + diff --git a/src/const/generalConst.ts b/src/const/generalConst.ts index 8c4d7df7..59ad513d 100644 --- a/src/const/generalConst.ts +++ b/src/const/generalConst.ts @@ -25,8 +25,7 @@ export const REMOVE_USER_FROM_ORG_URL = `${authServerUrl}/user/remove_user_from_ AUTH_LOGIN_GOOGLE_URL.searchParams.append('redirect_url', `${window.location.origin}${REDIRECT_ROUTE!}`); //function return api key depends on the env it running on -// export const mapApiKey = process.env.REACT_APP_GOOGLE_MAP_KEY ? process.env.REACT_APP_GOOGLE_MAP_KEY : ''; -export const mapApiKey = 'AIzaSyCfluirCgaQ769osh7560kST3Yo0eQIqg8'; +export const mapApiKey = process.env.REACT_APP_GOOGLE_MAP_KEY ? process.env.REACT_APP_GOOGLE_MAP_KEY : ''; export const showDemoCards = process.env.REACT_APP_SHOW_DEMO_CARDS === 'true'; diff --git a/src/services/news.data.service.ts b/src/services/news.data.service.ts index 12613a93..4a985e28 100644 --- a/src/services/news.data.service.ts +++ b/src/services/news.data.service.ts @@ -64,14 +64,14 @@ export function updateNews(newsId: number, newLocationQualification: any, data.push(`newsflash_location_qualification=${newLocationQualification}`) if (gpsLocation) { data.push(`road_segment_name=${gpsLocation.road_segment_name}`) - // data.push(`road1=${gpsLocation.road1}`) TODO: uncomment when option added + data.push(`road1=${gpsLocation.road1}`) } else if (streetLocation) { - data.push(`yishuv_name=${streetLocation.street}`) - data.push(`street1_hebrew=${streetLocation.city}`) + data.push(`yishuv_name=${streetLocation.city.yishuv_name}`) + data.push(`street1_hebrew=${streetLocation.street.street_hebrew}`) } - const url = `${NEWS_FLASH_API}?${newsId}`; + const url = `${NEWS_FLASH_API}/${newsId}?${data.join('&')}`; axios - .put(url) + .patch(url) .then((res) => res.data) .catch(onErrorFetchNewsFlash) } From a861f131061d1ff5eb8109500d13dd648d8d2d0a Mon Sep 17 00:00:00 2001 From: Atalya Alon <20992625+atalyaalon@users.noreply.github.com> Date: Wed, 21 Feb 2024 21:12:23 +0200 Subject: [PATCH 2/2] merge dev into master (#1033) * [Feat-885] Add selection for stack bar graphs (#935) * Added stacked bar widgets a checkbox option * Add option to choose colors when changing displayed bars * Changed any to proper type, make number of bar generic and add function createBarWidget * Fix bug of changed values when closing card editor * PR review changes * Remove redundent imports * add conditional label, refactor utils (#938) Co-authored-by: Daniel Shely <> * Update .env.staging (#947) * Add critical indication (#948) * Added image * Added critical icon based on field value * Added critical option to the filter panel * Added enum value * Had to increase width * Added local critical filter * Added field to model * add alt attrinbte on image tag (#951) * Update .env.staging (#952) * Make critical filter non local (#958) * sufficient condition * Use object for fetch args * Send params in object format * Make fields optional * don't use "any" type hint * Update News.tsx (#961) * Update news-flash-store.ts (#962) * Update News.tsx * Update thank-you-names.csv * transaction dialog box (#966) Co-authored-by: EyalIlan * [Feat-925] Add location approval feature (#969) * initial feature commit with icon and new field * Added icon choice and display * Move critical icon * Add location change button * Make critical icon transperent * replace critical.gif with svg * Window open pressing button, seperated newsFlash comp to new file * Added user info * Status icon and buttons * Added map choice (need to finish with saving data) * Saving location and qualificaion data * Added manual option for location qualification and added user change * Fix responsibilty issue between the two files * Split Search city to 2 files * Spacing and page look * Changed initialLocation to be a function, and improved onClose location window * Split radio buttons to seperate file * updated put function for news flash --------- Co-authored-by: Daniel Shely <> * Feature add transcrption 4 widgets 957 (#968) * transaction dialog box * show transaction icon only widgets that has transaction * add copy image to transaction box * add widget vision_10_30_90 (#972) * Feature widget vision zero 10 50 90 (#975) * add widget vision_10_30_90 * change widget 10_30_90 to 10_50_90 * change the location of the start command in package.json (#977) * change the location of the start command in package.json change the location of the start command after receive this error: /usr/local/bin/node: bad option: --openssl-legacy-provider * add npx browserslist@latest --update-db before start the docker * add logo (#979) * add natun square logo (#982) * add widget lower bar (#981) * update logo (#980) * Update Footer.tsx (#986) * add data-for-change (#988) * Delete src/assets/hasadna.png (#989) * Bug click twice to change news backround (#984) * add widget lower bar * fix news menu bar bug you need to click twice to make the news backround active * Add dev-to-prod auth server change (#950) * Spliting title and subtitle, making title bold (#995) * Change design in bar widgets (#996) * Remove margin from bottom of bar charts (#1001) * Add check for user authentication in NewsFlash (#990) (#1003) * Fix subtitle param in CardEditor (#1005) (#1006) * Remove padding from bottom of stack bars (#1008) (#1009) * Open new widgets to production (#1012) (#1013) * Remove accident_count_by_driver_type from prod (#1016) * Update cards.const.ts * Add title and subtitle to heatmap widget (#1015) * fix the text in info button (make bigger) (#1020) (#1024) Co-authored-by: Barak Yakter * fix the text in info button (make bigger) (#1020) (#1026) Co-authored-by: Barak Yakter * Fix location qualification api use (#1022) (#1023) * Update generalConst.ts (#1027) * Add n12 org logo (#1031) (#1032) * Adjust titles for 2 widgets (#1036) Co-authored-by: Barak Yakter * [Feat-1031] Add different color themes (for N12) (#1034) * Add n12 org logo (#1031) * Add Color Themes - N12 theme --------- Co-authored-by: shaked-hayek <85109951+shaked-hayek@users.noreply.github.com> Co-authored-by: danielsh28 Co-authored-by: carmelp16 <46032304+carmelp16@users.noreply.github.com> Co-authored-by: EyalIlan <55767736+EyalIlan@users.noreply.github.com> Co-authored-by: EyalIlan Co-authored-by: Shai2022 <106345640+Shai2022@users.noreply.github.com> Co-authored-by: BarVolunteering <58947331+BarVolunteering@users.noreply.github.com> Co-authored-by: byakter <109795934+byakter@users.noreply.github.com> Co-authored-by: Barak Yakter --- src/App.tsx | 3 +- src/assets/n12Logo.png | Bin 0 -> 1776 bytes src/components/atoms/AppBar.tsx | 2 +- src/components/atoms/Link.tsx | 2 +- .../atoms/MostSevereAccidentsMarker.tsx | 3 +- .../molecules/ApproveLocationRadioButtons.tsx | 2 +- src/components/molecules/BarChartView.tsx | 2 +- src/components/molecules/DialogWithHeader.tsx | 2 +- .../molecules/DoubleBarChartView.tsx | 2 +- src/components/molecules/GenericBarChart.tsx | 11 ++- src/components/molecules/Header.tsx | 19 ++++- .../molecules/LocationSearchIndicator.tsx | 2 +- src/components/molecules/LogInLinkGoogle.tsx | 2 +- src/components/molecules/NewsFlashComp.tsx | 4 +- .../molecules/NewsFlashFilterPanel.tsx | 2 +- src/components/molecules/OverlayLoader.tsx | 2 +- src/components/molecules/PieChartView.tsx | 9 +- .../molecules/StackedBarChartView.tsx | 2 +- src/components/molecules/Table/TableView.tsx | 3 +- .../molecules/TextView/TextView.tsx | 4 +- .../molecules/TextView/TextViewRecord.tsx | 3 +- .../TextView/TextViewRecordLargeNumbers.tsx | 3 +- .../molecules/UserProfileHeader.tsx | 2 +- src/components/molecules/card/AnyWayCard.tsx | 10 ++- src/components/molecules/card/CardHeader.tsx | 16 +++- .../HeadOnCollisionsComparisonWidget.tsx | 6 +- src/components/organisms/CardEditorDialog.tsx | 2 +- src/components/organisms/Footer.tsx | 2 +- .../organisms/LocationApproveWindow.tsx | 2 +- src/components/organisms/SideBar.tsx | 2 +- src/const/cards.const.ts | 6 +- src/pages/HomePage.tsx | 2 +- src/services/widgets.style.service.ts | 6 +- src/store/settings.store.ts | 12 ++- src/style/_colors.ts | 78 ++++++++++++------ src/style/_fonts.ts | 11 +++ src/style/default/_defaultColors.ts | 29 +++++++ src/style/default/defaultTheme.ts | 58 +++++++++++++ src/style/index.ts | 3 +- src/style/n12/_n12_colors.ts | 13 +++ src/style/n12/n12Theme.ts | 46 +++++++++++ src/style/theme.ts | 62 ++------------ 42 files changed, 325 insertions(+), 127 deletions(-) create mode 100644 src/assets/n12Logo.png create mode 100644 src/style/default/_defaultColors.ts create mode 100644 src/style/default/defaultTheme.ts create mode 100644 src/style/n12/_n12_colors.ts create mode 100644 src/style/n12/n12Theme.ts 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 new file mode 100644 index 0000000000000000000000000000000000000000..bde7e1aabd82691e632fa15204d14a55ff2e1432 GIT binary patch literal 1776 zcmbuAjX%?g1INGH>Beb>?Btu9b(@hO6Hkl3(9- zGLL0RzSBI*5PMO)6q{$Wd00*y5^=5NA?JU%*X#57y#ImE>+?xF=|{k5n`i?7fFXLh zpW5b|Z6|4}Z>RBO32_?;`YD1NAP}3*0f0J8bpMHzkiR$<|@ez_9c^!4P z(Z-s8z+Sp%^yiD+x3xlDP7Z|5msq6r(E^Iu@CUb)TW21*H?vONV@qABHdk!aOQLv2 zu@A5|M#Z2OwjY@;6*se_jQsYwNQ$E^MSNAf>K!NU&aE3}$+_`Mbt5vyO*|3$Z`yfI z9p~Cg8Y&aLvE+5jG&v+ ztZCSurLd__0Xk*KvcM$;SZQxH=)a0ZV>W!-=&J;}i9k6Tqk5D{mv&HE1%ca*O@5sQ)L8 zUhDSkTYAVF&9I$W_qiD$8!vpoe|K52bFsxS^$BU{rN}e17S@*LP9Ib}6B#X=C}KoH zQJ)9{ek4Oy^j&;|oc9k04ms#IMAR3MzzD%6%f8A|h*Qn6=8H6gJm|n!!E_s*pPZL+ zDfzDyIaIDTvBQbD%4jTuLmcD@b<1cvR$ZmYwhHuoT%H)Zq)|9O2E((OJYVTjKVBZ9 zfbbVI#HcUoV+blL?#z(B$V#+7)Rc_8LCvm;LYU0p)$Ff*oFBR`sm{{v!~b(}G44T^ z;H~KUn1ZLo77(08PKK|@XvG!&h!I5m*&#`!z)(^F^C-p@200f`v?0Ir@;0hr$1qQv zT}|HC9UUDL1l!jRf8Ix=KC2o#4|ewA6`DQ&S7Jl0dW`iIZi*N9r5L%XPX192xsHZ8 zjYW=~utmSi|6h<8U4h{^6;5~b_4UO9y8gVbXgSl6W=2EONb8$Ni7h$Pc}F;h0Rr%Y z{B35bym}xU%Qp~Q^ll?0`z!ZNo&?7;RyHfS;l9iGT+0lX{sZ41;Bm{j%jC`xZ<(Y@ zNheck4WC~0c7v$pFyVMc1pDSvVJg$*?zHt{{jshDs8kkX?Fwd+h6->!Et3$?Y)aawP!L~{B5=H^aSwoR< zMJ2c)J8+0RGQ8^Gfot?>BQA`_Kd!ZIZ-gBU8ggg0lJaMK^0)iAAZMNloOnIAxK6G0 zO7NAQxYDUosm6)oM_VJLV}NxDu~zckXC{d29x!cMGvLk?5T)OC)rqvji*89u&do~+ z;B%b>LQ|FtVnN=OLrK2iAFlyky9{l0ANI2X_P(hZ_oxZ_O-#}+t>k=@Hnvx;n-iqt zkT&xH<|Y)wA%_Xpa6iDkg@Z_7FbQluapi#R@jdL#*23659NVJa?%M}P{m07=><|O2 zBkjub<_2`^1nNdDpV~>vgq+5lg_Y?uJ(Tfp76a62dh1CqUs}Ua#>>0t>(!4#G}0E5 pXC-f(4bqD+j=+B%dWb!+1rT!e3G9lEzqc<8AbR+@3*16~{}+60TTcK0 literal 0 HcmV?d00001 diff --git a/src/components/atoms/AppBar.tsx b/src/components/atoms/AppBar.tsx index 3714d4e6..99166e38 100644 --- a/src/components/atoms/AppBar.tsx +++ b/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({ diff --git a/src/components/atoms/Link.tsx b/src/components/atoms/Link.tsx index 8e3bb212..671a816c 100644 --- a/src/components/atoms/Link.tsx +++ b/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: { diff --git a/src/components/atoms/MostSevereAccidentsMarker.tsx b/src/components/atoms/MostSevereAccidentsMarker.tsx index df54defe..e50e3fdd 100644 --- a/src/components/atoms/MostSevereAccidentsMarker.tsx +++ b/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 { diff --git a/src/components/molecules/ApproveLocationRadioButtons.tsx b/src/components/molecules/ApproveLocationRadioButtons.tsx index 91d1ba81..e18cd68b 100644 --- a/src/components/molecules/ApproveLocationRadioButtons.tsx +++ b/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"; diff --git a/src/components/molecules/BarChartView.tsx b/src/components/molecules/BarChartView.tsx index 0f81bcc4..954f3b29 100644 --- a/src/components/molecules/BarChartView.tsx +++ b/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; diff --git a/src/components/molecules/DialogWithHeader.tsx b/src/components/molecules/DialogWithHeader.tsx index 4812f748..11122052 100644 --- a/src/components/molecules/DialogWithHeader.tsx +++ b/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; diff --git a/src/components/molecules/DoubleBarChartView.tsx b/src/components/molecules/DoubleBarChartView.tsx index 5c4697ea..9c15dfab 100644 --- a/src/components/molecules/DoubleBarChartView.tsx +++ b/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; diff --git a/src/components/molecules/GenericBarChart.tsx b/src/components/molecules/GenericBarChart.tsx index 47790f06..2724ba51 100644 --- a/src/components/molecules/GenericBarChart.tsx +++ b/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 = ({ data, textLabel, subtitle, children, isStacked }) => { + const theme = useTheme(); return ( <> @@ -61,7 +63,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 +91,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..5f83cbb3 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,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 = () => { + changeTheme('n12')}> + + + changeTheme('default')}> + + setOpen(true)}>{t('header.Search')} {FEATURE_FLAGS.language && } {authElement} diff --git a/src/components/molecules/LocationSearchIndicator.tsx b/src/components/molecules/LocationSearchIndicator.tsx index 541d3dd5..1309fa83 100644 --- a/src/components/molecules/LocationSearchIndicator.tsx +++ b/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: { diff --git a/src/components/molecules/LogInLinkGoogle.tsx b/src/components/molecules/LogInLinkGoogle.tsx index 9f1d89b8..86ddef53 100644 --- a/src/components/molecules/LogInLinkGoogle.tsx +++ b/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'; diff --git a/src/components/molecules/NewsFlashComp.tsx b/src/components/molecules/NewsFlashComp.tsx index aaa3bdea..0c9e7a18 100644 --- a/src/components/molecules/NewsFlashComp.tsx +++ b/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 = ({ news }) => { const verificationIcon = getVerificationIcon(news.newsflash_location_qualification); const criticalIcon = news.critical && ; 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); diff --git a/src/components/molecules/NewsFlashFilterPanel.tsx b/src/components/molecules/NewsFlashFilterPanel.tsx index c27c6c75..7271e279 100644 --- a/src/components/molecules/NewsFlashFilterPanel.tsx +++ b/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'; diff --git a/src/components/molecules/OverlayLoader.tsx b/src/components/molecules/OverlayLoader.tsx index b5a26eb3..59fa912a 100644 --- a/src/components/molecules/OverlayLoader.tsx +++ b/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: { 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/StackedBarChartView.tsx b/src/components/molecules/StackedBarChartView.tsx index 6f796172..b1eb2a39 100644 --- a/src/components/molecules/StackedBarChartView.tsx +++ b/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; diff --git a/src/components/molecules/Table/TableView.tsx b/src/components/molecules/Table/TableView.tsx index bf743c63..ed7e88fd 100644 --- a/src/components/molecules/Table/TableView.tsx +++ b/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 { diff --git a/src/components/molecules/TextView/TextView.tsx b/src/components/molecules/TextView/TextView.tsx index b21e12fc..78f9be2f 100644 --- a/src/components/molecules/TextView/TextView.tsx +++ b/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 = ({ {isSingleType ? ( ) : ( - + )} diff --git a/src/components/molecules/TextView/TextViewRecord.tsx b/src/components/molecules/TextView/TextViewRecord.tsx index f7c740ff..0d762aea 100644 --- a/src/components/molecules/TextView/TextViewRecord.tsx +++ b/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'; diff --git a/src/components/molecules/TextView/TextViewRecordLargeNumbers.tsx b/src/components/molecules/TextView/TextViewRecordLargeNumbers.tsx index 7772f825..d738409c 100644 --- a/src/components/molecules/TextView/TextViewRecordLargeNumbers.tsx +++ b/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'; diff --git a/src/components/molecules/UserProfileHeader.tsx b/src/components/molecules/UserProfileHeader.tsx index 877c7acf..778ce1b1 100644 --- a/src/components/molecules/UserProfileHeader.tsx +++ b/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'; diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx index 3659059c..7a18bdca 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/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 = ({ ); }; -export default AnyWayCard; +export default observer(AnyWayCard); diff --git a/src/components/molecules/card/CardHeader.tsx b/src/components/molecules/card/CardHeader.tsx index 0039dfe4..cdb21b17 100644 --- a/src/components/molecules/card/CardHeader.tsx +++ b/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 = ({ variant, title, subtitle, road,orgIconPath }) { variant === HeaderVariant.Centered && - + {title} {subtitle} diff --git a/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx b/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx index f42519f0..493ad709 100644 --- a/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx +++ b/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'; +import { cherryJamColor, silverSpoonColor } from 'style/default/_defaultColors'; import { useTranslation } from 'react-i18next'; import RootStore from 'store/root.store'; import { useStore } from 'store/storeConfig'; @@ -69,8 +69,8 @@ const HeadOnCollisionsComparisonWidget: FC = ({ data, segmetText, usePer const roadNumberSegment: string = ` ${t('onUrban.route')} ${widgetsStore.newsFlashWidgetsMetaRoadNumber}`; const descSegment: string = roadNumberSegment == null ? '' : segmetText.substr(roadNumberSegment.length); return ( - - + + {roadNumberSegment == null ? null : roadNumberSegment} diff --git a/src/components/organisms/CardEditorDialog.tsx b/src/components/organisms/CardEditorDialog.tsx index af1c3c66..5545bcdf 100644 --- a/src/components/organisms/CardEditorDialog.tsx +++ b/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'; +import { blueVioletColor } from 'style/default/_defaultColors'; import {initEditorBarOptions, barsWidgetsLabels, barsWidgetsTitle, NUM_OF_BARS} from 'utils/barChart.utils'; diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx index e422feef..cd089e62 100644 --- a/src/components/organisms/Footer.tsx +++ b/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'; +import { silverSmokeColor, oceanBlueColor, skyBlueColor } from 'style/default/_defaultColors'; import ThankYouDialog from './ThankYouDialog'; import AboutDialog from './AboutDialog'; import { version } from '../../../package.json'; // eslint-disable-line diff --git a/src/components/organisms/LocationApproveWindow.tsx b/src/components/organisms/LocationApproveWindow.tsx index a211b46f..1ce7b01e 100644 --- a/src/components/organisms/LocationApproveWindow.tsx +++ b/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'; +import { silverSmokeColor } from 'style/default/_defaultColors'; import { INewsFlash } from "models/NewFlash"; import { useStore } from "store/storeConfig"; import {IPoint} from "models/Point"; diff --git a/src/components/organisms/SideBar.tsx b/src/components/organisms/SideBar.tsx index 0cf70696..66723a1f 100644 --- a/src/components/organisms/SideBar.tsx +++ b/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'; +import { silverSmokeColor } from 'style/default/_defaultColors'; import { Typography, ErrorBoundary } from 'components/atoms'; import { observer } from 'mobx-react-lite'; import { useStore } from 'store/storeConfig'; diff --git a/src/const/cards.const.ts b/src/const/cards.const.ts index 96d9760d..2b9325b4 100644 --- a/src/const/cards.const.ts +++ b/src/const/cards.const.ts @@ -1,5 +1,6 @@ import { WidgetName } from 'models/WidgetName'; import orYarokLogo from 'assets/greenlight.png'; +import n12Logo from 'assets/n12Logo.png'; // cards in this list will be available for operation environments (all non-staging environments) export const operationalCards: WidgetName[] = [ @@ -18,7 +19,8 @@ export const operationalCards: WidgetName[] = [ export type OrgLogoData = {key : string, path:string} ; -export const logosSourceMap : [OrgLogoData] = [ - {key:'or_yarok',path:orYarokLogo} +export const logosSourceMap : OrgLogoData[] = [ + {key: 'or_yarok', path: orYarokLogo}, + {key: 'n12', path: n12Logo}, ] diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 1c151a3a..06d18073 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/default/_defaultColors'; import FilterBar from 'components/organisms/FilterBar'; import OverlayLoader from 'components/molecules/OverlayLoader'; import { observer } from 'mobx-react-lite'; diff --git a/src/services/widgets.style.service.ts b/src/services/widgets.style.service.ts index 0ec33d35..319db8a1 100644 --- a/src/services/widgets.style.service.ts +++ b/src/services/widgets.style.service.ts @@ -40,13 +40,13 @@ const widgetVariants: { [index: string]: CardVariant } = { [WidgetName.accident_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange }, [WidgetName.injured_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange }, [WidgetName.accident_count_by_day_night]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange }, - [WidgetName.head_on_collisions_comparison]: { header: HeaderVariant.Label, footer: FooterVariant.LogoWithRange }, + [WidgetName.head_on_collisions_comparison]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange }, [WidgetName.head_on_collisions_comparison_percentage]: { - header: HeaderVariant.Label, + header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange, }, [WidgetName.vision_zero_2_plus_1]: { header: HeaderVariant.None, footer: FooterVariant.LogoWithRange }, - [WidgetName.vision_zero_10_50_90]:{header: HeaderVariant.None, footer: FooterVariant.LogoWithRange}, + [WidgetName.vision_zero_10_50_90]: { header: HeaderVariant.None, footer: FooterVariant.LogoWithRange }, [WidgetName.top_road_segments_accidents_per_km]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange, diff --git a/src/store/settings.store.ts b/src/store/settings.store.ts index 82bac7e4..499041a0 100644 --- a/src/store/settings.store.ts +++ b/src/store/settings.store.ts @@ -4,10 +4,12 @@ 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"; export default class SettingsStore { rootStore: RootStore; - private _theme: Theme = createMuiTheme(defaultThemeOptions); + private themeName = 'default'; + _theme: Theme = createMuiTheme(defaultThemeOptions); currentLanguageRouteString: string = ''; selectedLanguage: string = LANG.HE; @@ -20,6 +22,14 @@ export default class SettingsStore { return this._theme; } + changeTheme(newThemeName: string) { + const newThemeOption = themeOptions.find((p) => p.key === newThemeName); + if (newThemeOption) { + this.themeName = newThemeName; + this._theme = createMuiTheme(newThemeOption.theme); + } + } + changeLanguage(lngCode: string): void { i18next.changeLanguage(lngCode).then(() => { runInAction(() => { diff --git a/src/style/_colors.ts b/src/style/_colors.ts index 8c38198d..d72fc9ec 100644 --- a/src/style/_colors.ts +++ b/src/style/_colors.ts @@ -1,35 +1,23 @@ +// import { PaletteColorOptions } from "@material-ui/core"; + +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 +27,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..6cdb42e1 --- /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/default/_defaultColors' + +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..6329254a 100644 --- a/src/style/index.ts +++ b/src/style/index.ts @@ -1,4 +1,5 @@ export * from './_fonts'; export * from './_colors'; 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..b6d5418c --- /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 "../_fonts"; +import {n12ThemeColors, whiteColor} from "../_colors"; + +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..701ec0f5 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -1,55 +1,11 @@ -import { ThemeOptions } from '@material-ui/core'; -import { fontFamilyString, darkGrey } from './'; +import {n12ThemeOptions} from "./n12/n12Theme"; +import {defaultThemeOptions} from "./default/defaultTheme"; +import { ThemeOptions } 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 type ThemeData = {key : string, theme : ThemeOptions} ; - }, -}; - -export { defaultThemeOptions }; +export const themeOptions : ThemeData[] = [ + // {key: 'or_yarok', path: orYarokTheme}, + {key: 'default', theme: defaultThemeOptions}, + {key: 'n12', theme: n12ThemeOptions}, + ]