Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…ographics into dev
  • Loading branch information
shaked-hayek committed Feb 21, 2024
2 parents d5a7b11 + b563f88 commit 22cfdb6
Show file tree
Hide file tree
Showing 42 changed files with 325 additions and 127 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 added 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.
2 changes: 1 addition & 1 deletion src/components/atoms/AppBar.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/Link.tsx
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
3 changes: 2 additions & 1 deletion src/components/atoms/MostSevereAccidentsMarker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/ApproveLocationRadioButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";


Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/BarChartView.tsx
Original file line number Diff line number Diff line change
@@ -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<object>;
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/DialogWithHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/DoubleBarChartView.tsx
Original file line number Diff line number Diff line change
@@ -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<object>;
Expand Down
11 changes: 8 additions & 3 deletions src/components/molecules/GenericBarChart.tsx
Original file line number Diff line number Diff line change
@@ -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;

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

const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
const theme = useTheme();
return (
<>
<ResponsiveContainer>
Expand All @@ -61,7 +63,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 +91,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
19 changes: 17 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,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: {
Expand Down Expand Up @@ -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}`);
Expand Down Expand Up @@ -97,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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/LocationSearchIndicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/LogInLinkGoogle.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/NewsFlashComp.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/NewsFlashFilterPanel.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/OverlayLoader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
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/StackedBarChartView.tsx
Original file line number Diff line number Diff line change
@@ -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<object>;
Expand Down
3 changes: 2 additions & 1 deletion src/components/molecules/Table/TableView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/TextView/TextView.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down 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
3 changes: 2 additions & 1 deletion src/components/molecules/TextView/TextViewRecord.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/UserProfileHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
10 changes: 8 additions & 2 deletions src/components/molecules/card/AnyWayCard.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 {
Expand Down Expand Up @@ -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': {
Expand Down Expand Up @@ -193,4 +199,4 @@ const AnyWayCard: FC<IProps> = ({
</>
);
};
export default AnyWayCard;
export default observer(AnyWayCard);
16 changes: 12 additions & 4 deletions src/components/molecules/card/CardHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand All @@ -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%',
},
Expand All @@ -32,7 +40,7 @@ const useStyles = makeStyles({
label: {
maxWidth: 'min-content',
},
});
}));

interface IProps {
variant: HeaderVariant;
Expand All @@ -55,7 +63,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
Loading

0 comments on commit 22cfdb6

Please sign in to comment.