Merge branch 'dev' into feat-1031-add-theme-for-n12

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 { defaultBorderRadius, silverSmokeColor } from 'style';
+import { silverSmokeColor, defaultBorderRadius } from 'style';
 import { useLocale } from 'hooks/date.hooks'
 
 interface IProps {

src/components/molecules/Header.tsx

@@ -14,6 +14,7 @@ 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';
 
 
@@ -47,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}`);
@@ -98,6 +106,12 @@ const Header: FC = () => {
     <AppBar>
       <Logo src={logo} alt={'Anyway'} height={30} onClick={reloadHomePage} />
       <Box className={classes.userSection}>
+        <Button.Standard onClick={() => changeTheme('n12')}>
+          <Logo src={n12Logo} alt={'n12'} height={25} />
+        </Button.Standard>
+        <Button.Standard onClick={() => changeTheme('default')}>
+          <Logo src={anywayLogo} alt={'anyway'} height={25} />
+        </Button.Standard>
         <Button.Standard onClick={() => setOpen(true)}>{t('header.Search')}</Button.Standard>
         {FEATURE_FLAGS.language && <LanguageMenu />}
         {authElement}

src/components/molecules/NewsFlashComp.tsx

@@ -57,7 +57,7 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
   const verificationIcon = getVerificationIcon(news.newsflash_location_qualification);
   const criticalIcon = news.critical && <CriticalIcon className={classes.icon} />;
   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);

src/components/molecules/card/AnyWayCard.tsx

@@ -1,7 +1,7 @@
 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,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 {
@@ -93,7 +94,7 @@ const AnyWayCard: FC<IProps> = ({
   const [isOpen, setOpen] = useState(false);
   const [widgateOpen,SetWidgetOpen] = useState('')
 
-  const handleCardEditorOpen = (name:string) =>{ 
+  const handleCardEditorOpen = (name:string) =>{
     SetWidgetOpen(name)
     setOpen(true)
   };
@@ -116,7 +117,7 @@ const AnyWayCard: FC<IProps> = ({
 
     case 'TextBox':
       Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
-      break 
+      break
     case 'CardEditor':
       Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
   }
@@ -198,4 +199,4 @@ const AnyWayCard: FC<IProps> = ({
     </>
   );
 };
-export default AnyWayCard;
+export default observer(AnyWayCard);

src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx

@@ -69,8 +69,8 @@ const HeadOnCollisionsComparisonWidget: FC<IProps> = ({ data, segmetText, usePer
   const roadNumberSegment: string = ` ${t('onUrban.route')} ${widgetsStore.newsFlashWidgetsMetaRoadNumber}`;
   const descSegment: string = roadNumberSegment == null ? '' : segmetText.substr(roadNumberSegment.length);
   return (
-    <Box height={'100%'} display="flex" flexDirection="column" mr={'80px'}>
-      <Box className={classes.primaryContent}>
+    <Box height={'100%'} display="flex" flexDirection="column" mr={'25px'}>
+      <Box className={classes.primaryContent} mt={'28px'}>
         <Box className={classes.primaryDesc}>
           <Box className={classes.textHighlight}>
             <Typography.Body2>{roadNumberSegment == null ? null : roadNumberSegment}</Typography.Body2>

src/components/organisms/SideBar.tsx

@@ -62,7 +62,7 @@ const SideBar: FC<IProps> = () => {
         {location && (
           <ErrorBoundary>
             <SideBarMap items={[location]} />
-          </ErrorBoundary>  
+          </ErrorBoundary>
         )}
       </Box>
     </Box>

src/services/news.data.service.ts

@@ -59,19 +59,24 @@ function onErrorFetchNewsFlash() {
 }
 
 export function updateNews(newsId: number, newLocationQualification: any,
-                    streetLocation: IStreetData | null, gpsLocation: IGpsData | null) {
-  const data = [];
-  data.push(`newsflash_location_qualification=${newLocationQualification}`)
+                           streetLocation: IStreetData | null, gpsLocation: IGpsData | null) {
+  const data : Record<string, string | undefined> = {}; // object to hold request data
+  data['newsflash_location_qualification'] = newLocationQualification;
+
   if (gpsLocation) {
-    data.push(`road_segment_name=${gpsLocation.road_segment_name}`)
-    data.push(`road1=${gpsLocation.road1}`)
+    data['road_segment_name'] = gpsLocation.road_segment_name;
+    data['road1'] = gpsLocation.road1;
   } else if (streetLocation) {
-    data.push(`yishuv_name=${streetLocation.city.yishuv_name}`)
-    data.push(`street1_hebrew=${streetLocation.street.street_hebrew}`)
+    data['yishuv_name'] = streetLocation.city.yishuv_name;
+    data['street1_hebrew'] = streetLocation.street.street_hebrew;
   }
-  const url = `${NEWS_FLASH_API}/${newsId}?${data.join('&')}`;
+  const url = `${NEWS_FLASH_API}/${newsId}`;
   axios
-    .patch(url)
+    .patch(url, data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
     .then((res) => res.data)
     .catch(onErrorFetchNewsFlash)
 }

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,

src/style/default/defaultTheme.ts

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

src/style/n12/n12Theme.ts

@@ -1,7 +1,7 @@
 import { ThemeOptions } from '@material-ui/core';
 import { defaultThemeOptions } from 'style/default/defaultTheme'
-import { n12FontFamilyString } from "style";
-import {n12ThemeColors, whiteColor} from "style";
+import { n12FontFamilyString } from "../_fonts";
+import {n12ThemeColors, whiteColor} from "../_colors";
 
 const n12ThemeOptions: ThemeOptions = { ...defaultThemeOptions };
 n12ThemeOptions.palette = {

src/style/theme.ts

@@ -1,5 +1,4 @@
-import {n12ThemeOptions} from "./n12/n12Theme";
-import {defaultThemeOptions} from "./default/defaultTheme";
+import {defaultThemeOptions, n12ThemeOptions} from "style";
 import {createMuiTheme, Theme} from "@material-ui/core";
 
 export enum ThemeNames {