From 4020f70cf117a0e0413149faf1c4c6450b13cf62 Mon Sep 17 00:00:00 2001 From: Atalya Alon <20992625+atalyaalon@users.noreply.github.com> Date: Thu, 29 Feb 2024 17:44:15 +0200 Subject: [PATCH] Revert "Feat 1031 add theme for n12" --- src/App.tsx | 3 +- src/assets/n12Logo.png | Bin 1685 -> 1776 bytes .../atoms/MostSevereAccidentsMarker.tsx | 2 +- src/components/molecules/GenericBarChart.tsx | 10 +-- src/components/molecules/Header.tsx | 5 +- src/components/molecules/NewsFlashComp.tsx | 2 +- src/components/molecules/PieChartView.tsx | 9 +-- .../molecules/TextView/TextView.tsx | 2 +- src/components/molecules/card/AnyWayCard.tsx | 11 +-- src/components/molecules/card/CardHeader.tsx | 15 +--- src/components/organisms/SideBar.tsx | 2 +- src/pages/HomePage.tsx | 2 +- src/services/news.data.service.ts | 23 +++--- src/store/settings.store.ts | 19 ++--- src/style/_colors.ts | 76 ++++++------------ src/style/_fonts.ts | 11 --- src/style/default/_defaultColors.ts | 27 ------- src/style/default/defaultTheme.ts | 57 ------------- src/style/index.ts | 4 +- src/style/n12/_n12_colors.ts | 13 --- src/style/n12/n12Theme.ts | 46 ----------- src/style/theme.ts | 63 ++++++++++++--- 22 files changed, 112 insertions(+), 290 deletions(-) delete mode 100644 src/style/default/_defaultColors.ts delete mode 100644 src/style/default/defaultTheme.ts delete mode 100644 src/style/n12/_n12_colors.ts delete mode 100644 src/style/n12/n12Theme.ts diff --git a/src/App.tsx b/src/App.tsx index 67979abb..e387169c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,6 @@ 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'; @@ -71,4 +70,4 @@ const App: FC = () => { ); }; -export default observer(App); +export default App; diff --git a/src/assets/n12Logo.png b/src/assets/n12Logo.png index 59cc7cb7d50c0145c5617289f3ecde537573ca86..bde7e1aabd82691e632fa15204d14a55ff2e1432 100644 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 1685 zcmV;G25R|Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1}aHJK~#8N?VEXs zRaG3v-{jb$?F+4t6&fuRR8myXCP9{e6qsduMrbY-5+zZTWTY($w*6JwLMREgm?mae zBqda~lT?H#*PEBJSw4h(nnx>{E!`;F;&cz&_#yVI=*)1X50eJ^vMxg;oLdtgZ zCHcQkqvfIO@t8x-edd$I@5_?ZGakQZEhRig1o4n2~8L!SW|j z_M0@?33<=NtVX*f37xbe%dAVIolxdL%o=nI^8O3I!Rv6ieKqASK%S!}DDxiX#5C4W zJW4&x4B^U90aLBH3gpoZA!|j*vn0vgiRDfRhdUr`P(GjkIULVY_FAOfiMEF01q^57 zo6&8dSXIdTnFSk=2g6V7Lbj!Khb?OwCu>fly=EX!<4xGhkUfc-g2ZbTcmFzP5@r?} zOxXBh!V}Or=qxlIy@_ORG?zSArqM{2o;Y3{158YV^@Brntnc!73*sSo3;O};0{Mqv z9zs5Jf0K6{x`Oa4XkTsOVMj+19|P*UPV3>dF0^nE)>boQ^(7&(W6J-9m4f; zJJO+EUm32%L1-v4&tjbZA`bSoumBAT>4kIMhn_$y$@3A`0pA$HcKwkesyW_@`#KGl z;2>*{5bhC_b5uUFt*z~5tfTX49E)~G-peA&+wyg~y^gPo$;g4AJ%@}#LwG=L#9GF( z7okWIwY2y}$S&4O6kC_Au&#GK4*3JkZ*Fd$NA$-uwOdX{UR!;RjzoKf_#>R_N%R6? z2Z`bXIf^u=g8w8bxtw$UND;L-eiOPk4VEyI)|XwV=?`8;&e@gD{1&-rqa5%R_$^rR z-7amx_SHnM_YrEMH=pH09uw5NLfx? z=Q{?F4Z&8T(4#b>%2Jc#g-U)3Q+y(we?Jv`L>k?xjOG5k5AVqV;1^g2dOn=qvs1?I zI1e4%fU3S~Cpa;?a_1^ovI2%3h}M}{gvTFF3I~YSv~nk;FGzBvd79B_Ni4;|UscFA z3~fW6V+$IJjzZf*+NzK>QbbQ$yc;xgQMT2Or*d6D+2L?qTeQ=+J(Gl7?hf<=>2t7l z_3g|aW_ut~O3jWBJcF|D%l*;Ls$7?RFG+(rH-Y9OyL}gTWEHaqmv$o=dgOR2w3QZg z55a7!A4MzMp(AIm=akNOnAdj>e>Sp}`w*Ju%H8!SQU)ui11dASEvthk;qa%^Xp(0z z#%YyPxk7pKtsvjU9Pi1ttP3%2q?pHrmQ&EjNL-J9E`+;4+2xoK2GKO~I`eSqcXddc zNZPa5s!+})-UHHDL$Q`RDAZ?VsDO%tyJAQifm+Q_L>oE|_50wCVIQXwOpgAPqt-?v0{HhwyXl4%LSE^UZk(#$Jo<2WpnPnjqnt#Yw>Q* z*lYMDPCe@j-gl#^B6T^QO8*aY4JvlLj6uWGV87v>e6ljfeat}4*{37d@cpq5kXFl5 z@GecgE#6A^bER^dEUx4C3$*O97$vUT&uM9Cxe#0UfJ0`J&(}_|%I@>;%GB-nfGw@K z)mQCe>ILUHZJdF;XGiSzI898~oU?mP@5A(R45z%`_eBD|ay+emDHXbsV7ANe4_rJt z8tL4}x%O9Br*!TTo?k_7%lht*1bW-zb-vTTzHt0L$f;r%c(~5MT!n1e-=XQGIiPc_ z@oA0PNSVS4-!4zD9S?7#;+?U2aYfK`l@J`f0u?^@a(mXT;(FwAZrq}UzG(5b_K8&J zpV)d^zAf1;RJ-mhj^Ya=c5y^+&rpvJL;m4om#1VPhV$%F-J&e!9h|#1geyW>9p?&I zxec3noa6Tp?tn6W73-I~<#1(gJ-Q`{^&OvZFD2Ww+=riTxsBOqe8_K&Gnz;w5{X12 fkw~Ng$>shB8tGBcoKm^#00000NkvXXu0mjf-841z diff --git a/src/components/atoms/MostSevereAccidentsMarker.tsx b/src/components/atoms/MostSevereAccidentsMarker.tsx index d2812b90..df54defe 100644 --- a/src/components/atoms/MostSevereAccidentsMarker.tsx +++ b/src/components/atoms/MostSevereAccidentsMarker.tsx @@ -7,7 +7,7 @@ import { AnyWayButton } from './AnyWayButton'; import { Typography, MapIcon, TooltipMarker, TooltipArrow } from '.'; import { ClockPosition } from 'models/ClockPosition'; import { useTranslation } from 'react-i18next'; -import { silverSmokeColor, defaultBorderRadius } from 'style'; +import { defaultBorderRadius, silverSmokeColor } from 'style'; import { useLocale } from 'hooks/date.hooks' interface IProps { diff --git a/src/components/molecules/GenericBarChart.tsx b/src/components/molecules/GenericBarChart.tsx index 9089e7f5..47790f06 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, blackColor, ColorScheme, whiteColor} from 'style'; +import { roseColor, honeyColor, yellowColor, blackColor, 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,7 +51,6 @@ const CustomizedLabel = (props: CustomizedLabelProps) => { }; const BarChartContainer: FC = ({ data, textLabel, subtitle, children, isStacked }) => { - const theme = useTheme(); return ( <> @@ -62,7 +61,7 @@ const BarChartContainer: FC = ({ data, textLabel, subtitle, dataKey={BAR_CHART_X_LABEL} tickLine={false} axisLine={false} - style={{ fill: (theme.palette.primary as ColorScheme).fontColor }} + style={{ fill: blackColor }} /> {isStacked && } @@ -90,9 +89,6 @@ 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 abae928f..a5cd6c2d 100644 --- a/src/components/molecules/Header.tsx +++ b/src/components/molecules/Header.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; +import { 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,12 +10,11 @@ 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/NewsFlashComp.tsx b/src/components/molecules/NewsFlashComp.tsx index d788c64b..aaa3bdea 100644 --- a/src/components/molecules/NewsFlashComp.tsx +++ b/src/components/molecules/NewsFlashComp.tsx @@ -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/PieChartView.tsx b/src/components/molecules/PieChartView.tsx index ba8f0b27..2d457ad9 100644 --- a/src/components/molecules/PieChartView.tsx +++ b/src/components/molecules/PieChartView.tsx @@ -1,8 +1,7 @@ import React, { FC, useCallback } from 'react'; import { ResponsiveContainer, PieChart, Pie, Cell, PieLabelRenderProps } from 'recharts'; -import {ColorScheme, fontFamilyString, whiteColor} from 'style'; +import { fontFamilyString, pieChartColors, whiteColor } from 'style'; import { makeStyles } from '@material-ui/core'; -import {useTheme} from "@material-ui/core/styles"; const TEXT_RELATIVE_WIDTH = 0.8; @@ -22,6 +21,7 @@ interface IProps { labelProps?: ILabelProps; } +const COLORS = pieChartColors; const RADIAN = Math.PI / 180; const PIE_SHADOW_ID = 'pie-shadow'; const useStyles = makeStyles({ @@ -142,9 +142,6 @@ 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( @@ -179,7 +176,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 bbdacb85..b21e12fc 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 b84c31d6..9b32fa3c 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/src/components/molecules/card/AnyWayCard.tsx @@ -1,7 +1,6 @@ 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 { makeStyles } from '@material-ui/core/styles'; import widgetToImage from 'services/to-image.service'; // TEXT BOX COMPONENT ADD FEATURE import TextBox from 'components/organisms/TextBox' @@ -22,7 +21,6 @@ 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 { @@ -50,15 +48,11 @@ 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': { @@ -93,6 +87,7 @@ const AnyWayCard: FC = ({ const [element, setElement] = useState({}); const [isOpen, setOpen] = useState(false); const [widgateOpen,SetWidgetOpen] = useState('') + const handleCardEditorOpen = (name:string) => { SetWidgetOpen(name) setOpen(true) @@ -199,4 +194,4 @@ const AnyWayCard: FC = ({ ); }; -export default observer(AnyWayCard); +export default AnyWayCard; diff --git a/src/components/molecules/card/CardHeader.tsx b/src/components/molecules/card/CardHeader.tsx index 6b758035..0039dfe4 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 {ColorScheme, opacity80percent, silverSmokeColor} from 'style/'; +import { silverSmokeColor, opacity80percent } from 'style/'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles({ wrapper: { width: '100%', height: '100%', @@ -19,13 +19,6 @@ const useStyles = makeStyles((theme) => ({ position: 'relative', top: '40%', }, - titlesContainer: { - backgroundColor: (theme.palette.primary as ColorScheme).titleContainerColor, - paddingRight: '25px', - paddingLeft: '25px', - paddingBottom: '15px', - paddingTop: '5px', - }, logosContainer: { height: '100%', }, @@ -39,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ label: { maxWidth: 'min-content', }, -})); +}); interface IProps { variant: HeaderVariant; @@ -62,7 +55,7 @@ const CardHeader: FC = ({ variant, title, subtitle, road,orgIconPath }) { variant === HeaderVariant.Centered && - + {title} {subtitle} diff --git a/src/components/organisms/SideBar.tsx b/src/components/organisms/SideBar.tsx index 6a8d401d..0cf70696 100644 --- a/src/components/organisms/SideBar.tsx +++ b/src/components/organisms/SideBar.tsx @@ -62,7 +62,7 @@ const SideBar: FC = () => { {location && ( - + )} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index edb745af..1c151a3a 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/services/news.data.service.ts b/src/services/news.data.service.ts index 5c0bd2f7..4a985e28 100644 --- a/src/services/news.data.service.ts +++ b/src/services/news.data.service.ts @@ -59,24 +59,19 @@ function onErrorFetchNewsFlash() { } export function updateNews(newsId: number, newLocationQualification: any, - streetLocation: IStreetData | null, gpsLocation: IGpsData | null) { - const data : Record = {}; // object to hold request data - data['newsflash_location_qualification'] = newLocationQualification; - + streetLocation: IStreetData | null, gpsLocation: IGpsData | null) { + const data = []; + data.push(`newsflash_location_qualification=${newLocationQualification}`) if (gpsLocation) { - data['road_segment_name'] = gpsLocation.road_segment_name; - data['road1'] = gpsLocation.road1; + data.push(`road_segment_name=${gpsLocation.road_segment_name}`) + data.push(`road1=${gpsLocation.road1}`) } else if (streetLocation) { - data['yishuv_name'] = streetLocation.city.yishuv_name; - data['street1_hebrew'] = streetLocation.street.street_hebrew; + 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 - .patch(url, data, { - headers: { - 'Content-Type': 'application/json', - }, - }) + .patch(url) .then((res) => res.data) .catch(onErrorFetchNewsFlash) } diff --git a/src/store/settings.store.ts b/src/store/settings.store.ts index 5b4fea65..82bac7e4 100644 --- a/src/store/settings.store.ts +++ b/src/store/settings.store.ts @@ -1,15 +1,13 @@ -import {makeAutoObservable, runInAction} from 'mobx'; -import {createMuiTheme, Theme} from '@material-ui/core'; -import {defaultThemeOptions} from 'style'; -import {LANG} from 'const/languages.const'; +import { makeAutoObservable, runInAction } from 'mobx'; +import { Theme, createMuiTheme } 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 {ThemeData, ThemeNames, themeOptions} from "style/theme"; export default class SettingsStore { rootStore: RootStore; - private themeName : ThemeNames = ThemeNames.DEFAULT; - _theme : Theme = createMuiTheme(defaultThemeOptions); + private _theme: Theme = createMuiTheme(defaultThemeOptions); currentLanguageRouteString: string = ''; selectedLanguage: string = LANG.HE; @@ -19,13 +17,6 @@ export default class SettingsStore { } get theme(): 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; } diff --git a/src/style/_colors.ts b/src/style/_colors.ts index 6861f2dc..8c38198d 100644 --- a/src/style/_colors.ts +++ b/src/style/_colors.ts @@ -1,21 +1,35 @@ -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', @@ -25,45 +39,3 @@ 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 2ca0ef8d..2b0857fd 100644 --- a/src/style/_fonts.ts +++ b/src/style/_fonts.ts @@ -8,14 +8,3 @@ 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 deleted file mode 100644 index 7e17d1a9..00000000 --- a/src/style/default/_defaultColors.ts +++ /dev/null @@ -1,27 +0,0 @@ -//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'; - -//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 deleted file mode 100644 index 5bac2740..00000000 --- a/src/style/default/defaultTheme.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { ThemeOptions } from '@material-ui/core'; -import { darkGrey, defaultThemeColors, fontFamilyString } 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 37ea063a..780d8bbe 100644 --- a/src/style/index.ts +++ b/src/style/index.ts @@ -1,6 +1,4 @@ export * from './_fonts'; export * from './_colors'; -export * from './default/_defaultColors'; export * from './_sizes'; -export { defaultThemeOptions } from './default/defaultTheme'; -export { n12ThemeOptions } from './n12/n12Theme'; +export { defaultThemeOptions } from './theme'; diff --git a/src/style/n12/_n12_colors.ts b/src/style/n12/_n12_colors.ts deleted file mode 100644 index d568923f..00000000 --- a/src/style/n12/_n12_colors.ts +++ /dev/null @@ -1,13 +0,0 @@ -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 deleted file mode 100644 index b6d5418c..00000000 --- a/src/style/n12/n12Theme.ts +++ /dev/null @@ -1,46 +0,0 @@ -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 7c67a3a0..f82046c1 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -1,14 +1,55 @@ -import {defaultThemeOptions, n12ThemeOptions} from "style"; -import {createMuiTheme, Theme} from "@material-ui/core"; +import { ThemeOptions } from '@material-ui/core'; +import { fontFamilyString, darkGrey } from './'; -export enum ThemeNames { - DEFAULT= 'default', - N12 = 'n12', -} +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 : ThemeNames, theme : Theme} ; + }, +}; -export const themeOptions : ThemeData[] = [ - {key: ThemeNames.DEFAULT, theme: createMuiTheme(defaultThemeOptions)}, - {key: ThemeNames.N12, theme: createMuiTheme(n12ThemeOptions)}, - ] +export { defaultThemeOptions };