@@ -62,7 +73,7 @@ const MapDialog: FC
= ({ section='', open, onClose, location, onLocation
{t('mapDialog.cancelButton')}
-
+
);
};
diff --git a/src/components/molecules/NewsFlashFilterPanel.tsx b/src/components/molecules/NewsFlashFilterPanel.tsx
index 4d5c07b1..c01c7656 100644
--- a/src/components/molecules/NewsFlashFilterPanel.tsx
+++ b/src/components/molecules/NewsFlashFilterPanel.tsx
@@ -1,35 +1,45 @@
-import React, { FC } from 'react';
-import classnames from 'classnames';
-import { Box, makeStyles } from '@material-ui/core';
-import { silverSmokeColor, oceanBlueColor } from 'style';
-import ynetLogo from 'assets/ynet-website-logo.svg';
-import wallaLogo from 'assets/walla-logo.svg';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
import madaLogo from 'assets/mada-logo.svg';
+import wallaLogo from 'assets/walla-logo.svg';
+import ynetLogo from 'assets/ynet-website-logo.svg';
+import classnames from 'classnames';
+import { Typography } from 'components/atoms';
import { AnyWayButton } from 'components/atoms/AnyWayButton';
-import RootStore from 'store/root.store';
-import { useStore } from 'store/storeConfig';
import { SourceFilterEnum } from 'models/SourceFilter';
-import { Typography } from 'components/atoms';
+import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
+import RootStore from 'store/root.store';
+import { useStore } from 'store/storeConfig';
+import { oceanBlueColor, silverSmokeColor } from 'style';
+
+const PREFIX = 'NewsFlashFilterPanel';
+
+const classes = {
+ image: `${PREFIX}-image`,
+ button: `${PREFIX}-button`,
+ active: `${PREFIX}-active`,
+ container: `${PREFIX}-container`,
+};
-const useStyles = makeStyles({
- image: {
+const StyledBox = styled(Box)({
+ [`& .${classes.image}`]: {
maxWidth: '50px',
maxHeight: '35px',
},
- button: {
+ [`& .${classes.button}`]: {
height: '50px',
marginLeft: '10px',
width: '50px',
border: `1px solid ${silverSmokeColor}`,
},
- active: {
+ [`& .${classes.active}`]: {
border: `2px solid ${silverSmokeColor}`,
borderColor: oceanBlueColor,
},
- container: {
+ [`&.${classes.container}`]: {
paddingTop: '16px',
paddingBottom: '20px',
marginRight: '10px',
@@ -43,7 +53,6 @@ const useStyles = makeStyles({
interface IProps {}
const NewsFlashFilterPanel: FC = () => {
- const classes = useStyles();
const { t } = useTranslation();
const store: RootStore = useStore();
@@ -62,7 +71,7 @@ const NewsFlashFilterPanel: FC = () => {
};
return (
-
+
{Object.values(SourceFilterEnum).map((filter: SourceFilterEnum) => {
const logo = getLogoByFilter(filter);
return (
@@ -81,7 +90,7 @@ const NewsFlashFilterPanel: FC = () => {
);
})}
-
+
);
};
diff --git a/src/components/molecules/OverlayLoader.tsx b/src/components/molecules/OverlayLoader.tsx
index b5a26eb3..d8f58a36 100644
--- a/src/components/molecules/OverlayLoader.tsx
+++ b/src/components/molecules/OverlayLoader.tsx
@@ -1,11 +1,17 @@
-import React, { FC } from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
import Loader from 'components/atoms/Loader';
-import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core';
+import React, { FC } from 'react';
import { silverSmokeColor } from 'style';
-const useStyles = makeStyles({
- root: {
+const PREFIX = 'OverlayLoader';
+
+const classes = {
+ root: `${PREFIX}-root`,
+};
+
+const StyledBox = styled(Box)({
+ [`&.${classes.root}`]: {
position: 'absolute',
top: 0,
left: 0,
@@ -14,7 +20,7 @@ const useStyles = makeStyles({
backgroundColor: silverSmokeColor,
opacity: 0.5,
zIndex: 2,
- display: (show) => (show ? 'flex' : 'none'),
+ display: (show: any) => (show ? 'flex' : 'none'),
alignItems: 'center',
justifyContent: 'center',
},
@@ -25,12 +31,10 @@ interface IProps {
}
const OverlayLoader: FC = ({ show }) => {
- // passing props to useStyles - see demo: https://codesandbox.io/s/giubj?file=/demo.js:224-229
- const classes = useStyles(show);
return (
-
+
-
+
);
};
export default OverlayLoader;
diff --git a/src/components/molecules/PieChartView.tsx b/src/components/molecules/PieChartView.tsx
index d83809f9..33f7be8e 100644
--- a/src/components/molecules/PieChartView.tsx
+++ b/src/components/molecules/PieChartView.tsx
@@ -1,7 +1,22 @@
import React, { FC, useCallback } from 'react';
+import { styled } from '@mui/material/styles';
import { ResponsiveContainer, PieChart, Pie, Cell, PieLabelRenderProps } from 'recharts';
import { fontFamilyString, pieChartColors, whiteColor } from 'style';
-import { makeStyles } from '@material-ui/core';
+
+const PREFIX = 'PieChartView';
+const COLORS = pieChartColors;
+const RADIAN = Math.PI / 180;
+const PIE_SHADOW_ID = 'pie-shadow';
+
+const classes = {
+ shadow: `${PREFIX}-shadow`,
+};
+
+const StyledResponsiveContainer = styled(ResponsiveContainer)({
+ [`& .${classes.shadow}`]: {
+ filter: `url(#${PIE_SHADOW_ID})`,
+ },
+});
const TEXT_RELATIVE_WIDTH = 0.8;
@@ -21,15 +36,6 @@ interface IProps {
labelProps?: ILabelProps;
}
-const COLORS = pieChartColors;
-const RADIAN = Math.PI / 180;
-const PIE_SHADOW_ID = 'pie-shadow';
-const useStyles = makeStyles({
- shadow: {
- filter: `url(#${PIE_SHADOW_ID})`,
- },
-});
-
export const renderCollisionCustomizedLabel = (props: any, fontSize = '100%', usePercent = false, single = false) => {
const { percent, value, name, cx, cy, outerRadius, midAngle } = props;
const sin = Math.sin(-RADIAN * midAngle); // if sin >= 0 label is on top half
@@ -153,14 +159,12 @@ export const PieChartView: FC = ({
[labelProps, usePercent, data, yLabel],
);
- const classes = useStyles();
-
return (
-
+
-
+
= ({
))}
-
+
);
};
export default PieChartView;
diff --git a/src/components/molecules/Table/TableView.tsx b/src/components/molecules/Table/TableView.tsx
index 31d3a21c..91cd9086 100644
--- a/src/components/molecules/Table/TableView.tsx
+++ b/src/components/molecules/Table/TableView.tsx
@@ -1,54 +1,59 @@
-import React, { FC } from 'react';
-import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { styled } from '@mui/material/styles';
import { Typography } from 'components/atoms';
-import { Table, TableBody, TableCell, TableHead, TableRow, Theme } from '@material-ui/core';
-import { silverGrayColor, blackColor } from 'style';
+import React, { FC } from 'react';
+import { blackColor, silverGrayColor } from 'style';
import { ITableData } from './formatTableData.service';
-interface IProps {
- data: ITableData;
-}
+const PREFIX = 'TableView';
-const useStyles = makeStyles((theme: Theme) => ({
- table: {
+const classes = {
+ table: `${PREFIX}-table`,
+ root: `${PREFIX}-root`,
+ sizeSmall: `${PREFIX}-sizeSmall`,
+ head: `${PREFIX}-head`,
+};
+
+const StyledTable = styled(Table)(({ theme: Theme }) => ({
+ [`&.${classes.table}`]: {
border: `1px solid ${blackColor}`,
borderBottom: 0,
borderCollapse: 'separate',
},
}));
-const StyledTableCell = withStyles((theme: Theme) =>
- createStyles({
- root: {
- textAlign: 'center',
- padding: theme.spacing(0.7, 0),
- borderBottom: `1px solid ${blackColor}`,
- },
- sizeSmall: {
- '&:last-child': {
- padding: theme.spacing(0.7, 1),
- },
- },
- head: {
- backgroundColor: silverGrayColor,
- color: theme.palette.common.black,
- },
- }),
-)(TableCell);
-const StyledTableRow = withStyles(() =>
- createStyles({
- root: {
- // styles can be added here
+interface IProps {
+ data: ITableData;
+}
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+ [`& .${classes.root}`]: {
+ textAlign: 'center',
+ padding: theme.spacing(0.7, 0),
+ borderBottom: `1px solid ${blackColor}`,
+ },
+ [`& .${classes.sizeSmall}`]: {
+ '&:last-child': {
+ padding: theme.spacing(0.7, 1),
},
- }),
-)(TableRow);
+ },
+ [`& .${classes.head}`]: {
+ backgroundColor: silverGrayColor,
+ color: theme.palette.common.black,
+ },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme: Theme }) => ({
+ [`& .${classes.root}`]: {
+ // styles can be added here
+ },
+}));
const TableView: FC = ({ data }) => {
- const classes = useStyles();
const { items, labels } = data;
return (
-
+
{labels.map((label: string, index: number) => (
@@ -69,7 +74,7 @@ const TableView: FC = ({ data }) => {
))}
-
+
);
};
export default TableView;
diff --git a/src/components/molecules/TextView/SeverityImage.tsx b/src/components/molecules/TextView/SeverityImage.tsx
index 0e2c6cbd..cb1597e5 100644
--- a/src/components/molecules/TextView/SeverityImage.tsx
+++ b/src/components/molecules/TextView/SeverityImage.tsx
@@ -1,47 +1,58 @@
-import React, { FC } from 'react';
-import Person from 'assets/Person.png';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
import Ambulance from 'assets/Ambulance.png';
import Crutches from 'assets/Crutches.png';
-import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core/styles';
+import Person from 'assets/Person.png';
import classNames from 'classnames';
+import React, { FC } from 'react';
-interface SProps {
- severity: string;
- inRecord?: boolean;
-}
+const PREFIX = 'SeverityImage';
+
+const classes = {
+ root: `${PREFIX}-root`,
+ singleType: `${PREFIX}-singleType`,
+ list: `${PREFIX}-list`,
+ image: `${PREFIX}-image`,
+};
-const useStyles = makeStyles((theme) => ({
- root: {
+const StyledBox = styled(Box)(() => ({
+ [`& .${classes.root}`]: {
width: '50%',
},
- singleType: {
+
+ [`& .${classes.singleType}`]: {
height: '40%',
width: 'auto',
},
- list: {
+
+ [`& .${classes.list}`]: {
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
},
- image: {
+
+ [`& .${classes.image}`]: {
height: '80%',
width: 'auto',
},
}));
+interface SProps {
+ severity: string;
+ inRecord?: boolean;
+}
+
const SeverityImage: FC = ({ severity, inRecord }) => {
- const classes = useStyles();
interface SeverityTypesImages {
[index: string]: string;
}
const imgBySeverity: SeverityTypesImages = { fatal: Person, severe: Ambulance, light: Crutches };
const root = classNames(classes.root, inRecord ? classes.list : classes.singleType);
return (
-
+
![{imgBySeverity[severity]}]({imgBySeverity[severity]})
-
+
);
};
diff --git a/src/components/molecules/TextView/TextView.tsx b/src/components/molecules/TextView/TextView.tsx
index 8502610f..63e7c149 100644
--- a/src/components/molecules/TextView/TextView.tsx
+++ b/src/components/molecules/TextView/TextView.tsx
@@ -1,26 +1,26 @@
-import React, { FC } from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
import { IWidgetCountBySeverityTextData } from 'models/WidgetData';
-import { makeStyles } from '@material-ui/core';
+import React, { FC } from 'react';
import { brightGreyColor } from 'style';
-import Box from '@material-ui/core/Box';
-import classNames from 'classnames';
-import TextViewList from './TextViewList';
-import TextViewHeader from './TextViewHeader';
import SeverityImage from './SeverityImage';
+import TextViewHeader from './TextViewHeader';
+import TextViewList from './TextViewList';
-interface IProps {
- data: IWidgetCountBySeverityTextData;
- segmentText: string;
-}
+const PREFIX = 'TextView';
-export interface CountBySeverity {
- fatal: number;
- severe: number;
- light: number;
-}
+const classes = {
+ root: `${PREFIX}-root`,
+ headerBase: `${PREFIX}-headerBase`,
+ list: `${PREFIX}-list`,
+ singleTypeImage: `${PREFIX}-singleTypeImage`,
+ headerSingleType: `${PREFIX}-headerSingleType`,
+ headerList: `${PREFIX}-headerList`,
+};
-const useStyles = makeStyles(() => ({
- root: {
+const Root = styled('div')(() => ({
+ [`&.${classes.root}`]: {
position: 'relative',
top: '10%',
display: 'flex',
@@ -31,28 +31,44 @@ const useStyles = makeStyles(() => ({
letterSpacing: 1,
alignItems: 'center',
},
- headerBase: {
+
+ [`& .${classes.headerBase}`]: {
width: '70%',
height: '20%',
},
- list: {
+
+ [`& .${classes.list}`]: {
width: '80%',
height: '100%',
alignSelf: 'flex-end',
},
- singleTypeImage: {
+
+ [`& .${classes.singleTypeImage}`]: {
height: '40%',
width: 'auto',
},
- headerSingleType: {
+
+ [`& .${classes.headerSingleType}`]: {
position: 'relative',
bottom: '20%',
},
- headerList: {
+
+ [`& .${classes.headerList}`]: {
alignSelf: 'center',
},
}));
+interface IProps {
+ data: IWidgetCountBySeverityTextData;
+ segmentText: string;
+}
+
+export interface CountBySeverity {
+ fatal: number;
+ severe: number;
+ light: number;
+}
+
function getSingleType(countBySeverity: CountBySeverity): string {
if (countBySeverity.fatal) {
return 'fatal';
@@ -68,8 +84,6 @@ function getSingleType(countBySeverity: CountBySeverity): string {
}
const TextView: FC = ({ data, segmentText }) => {
- const classes = useStyles();
-
const countBySeverity: CountBySeverity = {
fatal: data?.items.severity_fatal_count,
severe: data?.items.severity_severe_count,
@@ -80,7 +94,7 @@ const TextView: FC = ({ data, segmentText }) => {
const headerClass = classNames(classes.headerBase, isSingleType ? classes.headerSingleType : classes.headerList);
return (
-
+
= ({ data, segmentText }) => {
)}
-
+
);
};
export default TextView;
diff --git a/src/components/molecules/TextView/TextViewHeader.tsx b/src/components/molecules/TextView/TextViewHeader.tsx
index 022e0be7..fcac1848 100644
--- a/src/components/molecules/TextView/TextViewHeader.tsx
+++ b/src/components/molecules/TextView/TextViewHeader.tsx
@@ -1,12 +1,27 @@
-import React, { FC } from 'react';
-import Box from '@material-ui/core/Box';
-import { roadIconColors } from 'style';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
import { Typography } from 'components/atoms';
-import { useTranslation } from 'react-i18next';
import { IWidgetCountBySeverityTextData } from 'models/WidgetData';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { roadIconColors } from 'style';
import { LANG } from 'const/languages.const';
+const PREFIX = 'TextViewHeader';
+
+const classes = {
+ numOfAcc: `${PREFIX}-numOfAcc`,
+};
+
+const Root = styled('div')(({ theme }) => ({
+ [`& .${classes.numOfAcc}`]: {
+ position: 'relative',
+ bottom: theme.spacing(2),
+ color: roadIconColors.red,
+ marginRight: theme.spacing(1),
+ },
+}));
+
interface IProps {
data: IWidgetCountBySeverityTextData;
segmentText: string;
@@ -17,18 +32,9 @@ interface AProps {
singleType: string;
}
-const useStyles = makeStyles((theme) => ({
- numOfAcc: {
- position: 'relative',
- bottom: theme.spacing(2),
- color: roadIconColors.red,
- marginRight: theme.spacing(1),
- },
-}));
-
const AccidentsOccurred: FC = ({ accidentsCount, singleType }) => {
const { t, i18n } = useTranslation();
- const classes = useStyles();
+
const elements = [
{t('textView.occurred')}
@@ -60,7 +66,7 @@ const AccidentsOccurred: FC = ({ accidentsCount, singleType }) => {
const TextViewHeader: React.FC = ({ data: { items }, segmentText, singleType }) => {
const { t, i18n } = useTranslation();
return (
- <>
+
{items.end_year === items.start_year ? (
{t('textView.inYear')}
@@ -78,12 +84,11 @@ const TextViewHeader: React.FC = ({ data: { items }, segmentText, single
{`${t('textView.onSegment')} ${
i18n.language === LANG.EN ? ' ' : ''
}${segmentText}`}
-
-
+
);
};
diff --git a/src/components/molecules/TextView/TextViewRecord.tsx b/src/components/molecules/TextView/TextViewRecord.tsx
index 2947024e..27667397 100644
--- a/src/components/molecules/TextView/TextViewRecord.tsx
+++ b/src/components/molecules/TextView/TextViewRecord.tsx
@@ -1,25 +1,27 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { Typography } from 'components/atoms';
import React from 'react';
-import Box from '@material-ui/core/Box';
import { roadIconColors, silverSmokeColor } from 'style';
import SeverityImage from './SeverityImage';
-import { makeStyles } from '@material-ui/core/styles';
-import { Typography } from 'components/atoms';
-interface IProps {
- numOfAccidents: number;
- severityDesc: string;
- imgSrc: string;
- isLast?: boolean;
-}
+const PREFIX = 'TextViewRecord';
+
+const classes = {
+ root: `${PREFIX}-root`,
+ text: `${PREFIX}-text`,
+ acNum: `${PREFIX}-acNum`,
+};
-const useStyles = makeStyles((theme) => ({
- root: {
+const StyledBox = styled(Box)(({ theme }) => ({
+ [`&.${classes.root}`]: {
display: 'flex',
justifyContent: 'space-around',
width: '80%',
height: '20%',
},
- text: {
+
+ [`& .${classes.text}`]: {
position: 'relative',
top: theme.spacing(2),
display: 'flex',
@@ -28,23 +30,30 @@ const useStyles = makeStyles((theme) => ({
lineHeight: 0.5,
justifyContent: 'center',
},
- acNum: {
+
+ [`& .${classes.acNum}`]: {
color: roadIconColors.red,
fontWeight: 'bold',
fontSize: '200%',
},
}));
+interface IProps {
+ numOfAccidents: number;
+ severityDesc: string;
+ imgSrc: string;
+ isLast?: boolean;
+}
+
const TextViewRecord: React.FC = ({ isLast, numOfAccidents, severityDesc, imgSrc }) => {
- const classes = useStyles();
return (
-
+
{numOfAccidents}
{severityDesc}
-
+
);
};
diff --git a/src/components/molecules/UserProfileHeader.tsx b/src/components/molecules/UserProfileHeader.tsx
index 985bbf46..365aecfe 100644
--- a/src/components/molecules/UserProfileHeader.tsx
+++ b/src/components/molecules/UserProfileHeader.tsx
@@ -1,17 +1,23 @@
+import { Avatar } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
import { Typography } from 'components/atoms';
import React, { useState } from 'react';
-import UserInfoForm from './UserUpdateForm';
import { useTranslation } from 'react-i18next';
-import makeStyles from '@material-ui/core/styles/makeStyles';
import { oceanBlueColor, skyBlueColor } from 'style';
-import Box from '@material-ui/core/Box';
-import { Avatar } from '@material-ui/core';
import { IUserInfo } from 'services/user.service';
+import UserInfoForm from './UserUpdateForm';
-const avatarSize = '40px';
+const PREFIX = 'UserProfileHeader';
-const useStyles = makeStyles((theme) => ({
- userButton: {
+const classes = {
+ userButton: `${PREFIX}-userButton`,
+ welcomeMsg: `${PREFIX}-welcomeMsg`,
+ avatar: `${PREFIX}-avatar`,
+};
+
+const Root = styled('div')(({ theme }) => ({
+ [`& .${classes.userButton}`]: {
color: `${oceanBlueColor}`,
padding: theme.spacing(1),
textDecoration: 'none',
@@ -20,15 +26,19 @@ const useStyles = makeStyles((theme) => ({
},
cursor: 'pointer',
},
- welcomeMsg: {
+
+ [`& .${classes.welcomeMsg}`]: {
padding: theme.spacing(1),
},
- avatar: {
+
+ [`& .${classes.avatar}`]: {
width: avatarSize,
height: avatarSize,
},
}));
+const avatarSize = '40px';
+
interface IUserProfileHeader {
userDetails: IUserInfo;
isUpdateScreenOpen: boolean;
@@ -37,12 +47,12 @@ interface IUserProfileHeader {
const UserProfileHeader: React.FC = ({ userDetails, isUpdateScreenOpen, handleLogout }) => {
const { t } = useTranslation();
const userData = userDetails.data;
- const classes = useStyles();
+
const [isDialogOpen, setIsDialogOpen] = useState(isUpdateScreenOpen);
const toggleUserUpdateScreen = (isOpen: boolean) => setIsDialogOpen(isOpen);
return (
- <>
+
{t('UserProfileHeader.logout')}
@@ -53,9 +63,8 @@ const UserProfileHeader: React.FC = ({ userDetails, isUpdate
{`${t('header.User Greeting')} ${userData.firstName || ''}`}
-
toggleUserUpdateScreen(false)} />
-
+
);
};
diff --git a/src/components/molecules/UserUpdateForm.tsx b/src/components/molecules/UserUpdateForm.tsx
index a4b82cef..52a53ebc 100644
--- a/src/components/molecules/UserUpdateForm.tsx
+++ b/src/components/molecules/UserUpdateForm.tsx
@@ -1,42 +1,55 @@
-import React, { ChangeEvent, useState } from 'react';
-import DialogWithHeader from './DialogWithHeader';
-import { Box, Grid, TextField, makeStyles, FormHelperText } from '@material-ui/core';
-import { useStore } from 'store/storeConfig';
+import { Box, FormHelperText, Grid, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
import Button from 'components/atoms/Button';
import { observer } from 'mobx-react-lite';
+import React, { ChangeEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { useStore } from 'store/storeConfig';
import { IValidationErrors, validateUserDetails } from 'utils/validations';
+import DialogWithHeader from './DialogWithHeader';
-interface IProps {
- isShowing: boolean;
- onClose: () => void;
- defaultValues: IFormInput;
-}
+const PREFIX = 'UserUpdateForm';
-export interface IFormInput {
- email: string;
- firstName: string;
- lastName: string;
- workplace: string;
-}
+const classes = {
+ grid: `${PREFIX}-grid`,
+ error: `${PREFIX}-error`,
+ submitButton: `${PREFIX}-submitButton`,
+ hide: `${PREFIX}-hide`,
+};
-const useStyles = makeStyles((theme) => ({
- grid: {
+const StyledDialogWithHeader = styled(DialogWithHeader)(({ theme }) => ({
+ [`& .${classes.grid}`]: {
marginTop: theme.spacing(1),
},
- error: {
+
+ [`& .${classes.error}`]: {
textAlign: 'center',
},
- submitButton: {
+
+ [`& .${classes.submitButton}`]: {
display: 'flex',
justifyContent: 'center',
marginBottom: theme.spacing(2),
},
- hide: {
+
+ [`& .${classes.hide}`]: {
visibility: 'hidden',
},
}));
+interface IProps {
+ isShowing: boolean;
+ onClose: () => void;
+ defaultValues: IFormInput;
+}
+
+export interface IFormInput {
+ email: string;
+ firstName: string;
+ lastName: string;
+ workplace: string;
+}
+
const initialValidations = {
email: true,
firstName: true,
@@ -54,7 +67,6 @@ const UserInfoForm: React.FC = ({ isShowing, onClose, defaultValues }) =
const newValue = { [name]: value };
setFormInput((prevState) => ({ ...prevState, ...newValue }));
};
- const classes = useStyles();
const handleSubmit = async (e: any) => {
e.preventDefault();
@@ -70,7 +82,7 @@ const UserInfoForm: React.FC = ({ isShowing, onClose, defaultValues }) =
};
return (
- = ({ isShowing, onClose, defaultValues }) =
}}
>
-
+
);
};
diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx
index 731df1b1..6e610653 100644
--- a/src/components/molecules/card/AnyWayCard.tsx
+++ b/src/components/molecules/card/AnyWayCard.tsx
@@ -1,59 +1,52 @@
-import React, { FC, useState } from 'react';
-import { Card, CardContent, Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import widgetToImage from 'services/to-image.service';
+import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import SettingsOverscanIcon from '@mui/icons-material/SettingsOverscan';
+import { Box, Card, CardContent } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
import { AnyWayButton } from 'components/atoms/AnyWayButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import GetAppOutlinedIcon from '@material-ui/icons/GetAppOutlined';
-import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-
-import { fontFamilyString } from 'style';
-import CardHeader from './CardHeader';
import SocialShare from 'components/atoms/SocialShare';
+import CardEditor from 'components/organisms/CardEditorDialog';
+import { IDateComments } from 'models/WidgetData';
+import React, { FC, useState } from 'react';
+import widgetToImage from 'services/to-image.service';
import { FooterVariant, getWidgetVariant, HeaderVariant } from 'services/widgets.style.service';
+import { fontFamilyString, transparent } from 'style';
import { getSizes } from './card.util';
import CardBackgroundImage from './CardBackgroundImage';
import CardFooter from './CardFooter';
-import CardEditor from 'components/organisms/CardEditorDialog';
-import { transparent } from 'style';
-import { IDateComments } from 'models/WidgetData';
+import CardHeader from './CardHeader';
-const DEFAULTE_SIZE = 1;
-export interface CardSizeOptions {
- size?: number;
-}
-interface IProps {
- widgetName: string;
- roadNumber: number;
- actionButtons?: boolean;
- sizeOptions?: CardSizeOptions;
- getCardRef?: (element: HTMLElement) => any;
- title: string | undefined;
- dateComment: IDateComments;
- information?: string;
-}
+const PREFIX = 'AnyWayCard';
-const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);
+const classes = {
+ root: `${PREFIX}-root`,
+ content: `${PREFIX}-content`,
+ button: `${PREFIX}-button`,
+ information: `${PREFIX}-information`,
+};
-const useStyles = makeStyles((theme) => ({
- root: {
+const Root = styled('div')(({ theme }) => ({
+ [`& .${classes.root}`]: {
fontFamily: fontFamilyString,
position: 'relative', // for meta tags
boxSizing: 'border-box',
zIndex: 0,
},
- content: {
+
+ [`& .${classes.content}`]: {
height: '100%',
boxSizing: 'border-box',
padding: 0,
},
- button: {
+
+ [`& .${classes.button}`]: {
'&:hover': {
backgroundColor: transparent,
},
},
- information: {
+
+ [`& .${classes.information}`]: {
minWidth: theme.spacing(8),
textAlign: 'center',
lineHeight: '0.75',
@@ -61,6 +54,23 @@ const useStyles = makeStyles((theme) => ({
},
}));
+const DEFAULTE_SIZE = 1;
+export interface CardSizeOptions {
+ size?: number;
+}
+interface IProps {
+ widgetName: string;
+ roadNumber: number;
+ actionButtons?: boolean;
+ sizeOptions?: CardSizeOptions;
+ getCardRef?: (element: HTMLElement) => any;
+ title: string | undefined;
+ dateComment: IDateComments;
+ information?: string;
+}
+
+const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);
+
const AnyWayCard: FC = ({
widgetName,
roadNumber,
@@ -80,14 +90,13 @@ const AnyWayCard: FC = ({
const factor = getSizeFactor(sizeOptions);
const sizes = getSizes(variant, factor);
- const classes = useStyles();
const imgDownloadHandler = () => {
if (element && element instanceof HTMLElement) {
widgetToImage(widgetName, element);
}
};
const buttons = !actionButtons ? null : (
- <>
+
@@ -103,7 +112,7 @@ const AnyWayCard: FC = ({
)}
-
+
);
const refFn = (element: HTMLDivElement) => {
@@ -114,7 +123,7 @@ const AnyWayCard: FC = ({
};
return (
- <>
+
{/* BACKGROUND IMAGE */}
@@ -147,7 +156,7 @@ const AnyWayCard: FC = ({
-
+
);
};
export default AnyWayCard;
diff --git a/src/components/molecules/card/CardBackgroundImage.tsx b/src/components/molecules/card/CardBackgroundImage.tsx
index da2cd292..0444bdba 100644
--- a/src/components/molecules/card/CardBackgroundImage.tsx
+++ b/src/components/molecules/card/CardBackgroundImage.tsx
@@ -1,28 +1,33 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import CardBackgrounMapImage from 'assets/card-bg-map.png';
+import CardBackgrounRoadImage from 'assets/card-bg-road.png';
import React, { FC } from 'react';
import { HeaderVariant } from 'services/widgets.style.service';
-import CardBackgrounRoadImage from 'assets/card-bg-road.png';
-import CardBackgrounMapImage from 'assets/card-bg-map.png';
-const ROAD_IMAGE_HEIGHT = 130;
-const MAP_IMAGE_HEIGHT = '100%';
+const PREFIX = 'CardBackgroundImage';
-interface IProps {
- variant: HeaderVariant;
-}
+const classes = {
+ img: `${PREFIX}-img`,
+};
-const useStyles = makeStyles((theme) => ({
- img: {
+const Root = styled('img')(({ theme }) => ({
+ [`&.${classes.img}`]: {
position: 'absolute',
zIndex: -1,
top: 0,
right: 0,
- marginInlineStart: (props) => (props.variant === HeaderVariant.Label ? theme.spacing(1) : 0),
+ marginInlineStart: (props: any) => (props.variant === HeaderVariant.Label ? theme.spacing(1) : 0),
},
}));
+const ROAD_IMAGE_HEIGHT = 130;
+const MAP_IMAGE_HEIGHT = '100%';
+
+interface IProps {
+ variant: HeaderVariant;
+}
+
const CardBackgroundImage: FC = ({ variant }) => {
- const classes = useStyles({ variant });
let src;
let height;
@@ -38,6 +43,6 @@ const CardBackgroundImage: FC = ({ variant }) => {
break;
}
- return 
;
+ return ;
};
export default CardBackgroundImage;
diff --git a/src/components/molecules/card/CardFooter.tsx b/src/components/molecules/card/CardFooter.tsx
index 0580b5de..d20616b2 100644
--- a/src/components/molecules/card/CardFooter.tsx
+++ b/src/components/molecules/card/CardFooter.tsx
@@ -1,21 +1,23 @@
-import React from 'react';
-import { Logo, Typography } from 'components/atoms';
-import LamasImage from 'assets/cbs.png';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
import AnywayImage from 'assets/anyway.png';
-import { makeStyles } from '@material-ui/core/styles';
-import { cardFooterHeight } from 'style';
-import { Box } from '@material-ui/core';
+import LamasImage from 'assets/cbs.png';
+import { Logo, Typography } from 'components/atoms';
import { IDateComments } from 'models/WidgetData';
import { useTranslation } from 'react-i18next';
import { dateFormat } from 'utils/time.utils';
import { useLocale } from 'hooks/date.hooks';
+import React from 'react';
+import { cardFooterHeight } from 'style';
-interface IProps {
- dateComment: IDateComments;
-}
+const PREFIX = 'CardFooter';
+
+const classes = {
+ main: `${PREFIX}-main`,
+};
-const useStyles = makeStyles({
- main: {
+const Root = styled('div')({
+ [`&.${classes.main}`]: {
width: '100%',
display: 'flex',
boxSizing: 'border-box',
@@ -25,14 +27,17 @@ const useStyles = makeStyles({
},
});
+interface IProps {
+ dateComment: IDateComments;
+}
+
const CardFooter: React.FC = ({ dateComment }) => {
const { t } = useTranslation();
- const classes = useStyles();
const locale = useLocale();
const lastUpdateDate = dateComment.last_update ? dateFormat(new Date(dateComment.last_update), locale) : null;
const dateRange = dateComment.date_range ? dateComment.date_range.join('-') : null;
return (
-
+
{dateRange}
{lastUpdateDate && (
@@ -46,7 +51,7 @@ const CardFooter: React.FC = ({ dateComment }) => {
-
+
);
};
diff --git a/src/components/molecules/card/CardHeader.tsx b/src/components/molecules/card/CardHeader.tsx
index 17674d91..0dc8f33d 100644
--- a/src/components/molecules/card/CardHeader.tsx
+++ b/src/components/molecules/card/CardHeader.tsx
@@ -1,36 +1,48 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import AnywayImage from 'assets/anyway.png';
+import LamasImage from 'assets/cbs.png';
+import { Logo, Typography } from 'components/atoms';
import React, { FC } from 'react';
import { HeaderVariant } from 'services/widgets.style.service';
-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 { opacity80percent, silverSmokeColor } from 'style/';
import { splitTextHeader } from 'utils/string.utils';
+import RoadNumberImage from './RoadNumberImage';
-const useStyles = makeStyles({
- wrapper: {
+const PREFIX = 'CardHeader';
+
+const classes = {
+ wrapper: `${PREFIX}-wrapper`,
+ textWrapper: `${PREFIX}-textWrapper`,
+ roadImageWrapper: `${PREFIX}-roadImageWrapper`,
+ logosContainer: `${PREFIX}-logosContainer`,
+ labelWrapper: `${PREFIX}-labelWrapper`,
+ label: `${PREFIX}-label`,
+};
+
+const StyledBox = styled(Box)({
+ [`& .${classes.wrapper}`]: {
width: '100%',
height: '100%',
},
- textWrapper: {
+ [`& .${classes.textWrapper}`]: {
width: '100%',
},
- roadImageWrapper: {
+ [`& .${classes.roadImageWrapper}`]: {
position: 'relative',
top: '40%',
},
- logosContainer: {
+ [`& .${classes.logosContainer}`]: {
height: '100%',
},
- labelWrapper: {
+ [`& .${classes.labelWrapper}`]: {
backgroundColor: silverSmokeColor + opacity80percent,
position: 'absolute',
width: 'fit-content',
display: 'flex',
right: 0,
},
- label: {
+ [`& .${classes.label}`]: {
maxWidth: 'min-content',
},
});
@@ -41,15 +53,13 @@ interface IProps {
road: number;
}
const CardHeader: FC = ({ variant, text, road }) => {
- const classes = useStyles();
-
let headerContent = null;
const headerText = splitTextHeader(text);
switch (variant) {
case HeaderVariant.Centered:
headerContent = (
-
+
@@ -57,7 +67,7 @@ const CardHeader: FC = ({ variant, text, road }) => {
{headerText?.textLine2}
-
+
);
break;
case HeaderVariant.Label:
diff --git a/src/components/molecules/map/Map.tsx b/src/components/molecules/map/Map.tsx
index 6dd8761e..7dad12d4 100644
--- a/src/components/molecules/map/Map.tsx
+++ b/src/components/molecules/map/Map.tsx
@@ -1,16 +1,20 @@
-import { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-
-import { MapContainer } from 'react-leaflet';
+import { styled } from '@mui/material/styles';
import L, { LatLng } from 'leaflet';
import { IPoint } from 'models/Point';
-import { INITIAL_CENTER, INITIAL_ZOOM } from 'utils/utils';
-import { uniquePoints } from 'utils/utils';
+import { FC } from 'react';
+import { MapContainer } from 'react-leaflet';
import MapViewControl from 'services/MapViewControl';
+import { INITIAL_CENTER, INITIAL_ZOOM, uniquePoints } from 'utils/utils';
import GoogleMapsLayer from './GoogleMapsLayer';
-const useStyles = makeStyles({
- root: {
+const PREFIX = 'Map';
+
+const classes = {
+ root: `${PREFIX}-root`,
+};
+
+const StyledMapContainer = styled(MapContainer)({
+ [`&.${classes.root}`]: {
height: '100%',
width: '100%',
},
@@ -27,17 +31,15 @@ interface IProps {
data?: IPoint[];
}
-const Map: FC = ({ zoom = INITIAL_ZOOM, center=INITIAL_CENTER, data, children }) => {
- const classes = useStyles();
-
+const Map: FC = ({ zoom = INITIAL_ZOOM, center = INITIAL_CENTER, data, children }) => {
const bounds = getBounds(data);
return (
-
+
{children}
-
+
);
};
diff --git a/src/components/molecules/widgets/AccidentCountByCarTypeWidget.tsx b/src/components/molecules/widgets/AccidentCountByCarTypeWidget.tsx
index 26e07583..0f11fc81 100644
--- a/src/components/molecules/widgets/AccidentCountByCarTypeWidget.tsx
+++ b/src/components/molecules/widgets/AccidentCountByCarTypeWidget.tsx
@@ -1,8 +1,22 @@
-import React, { FC } from 'react';
-import { IWidgetAccidentCountByCarType } from 'models/WidgetData';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
import DoubleBarChartView from 'components/molecules/DoubleBarChartView';
-import { Box, makeStyles, Theme } from '@material-ui/core';
+import { IWidgetAccidentCountByCarType } from 'models/WidgetData';
+import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
+const PREFIX = 'AccidentCountByCarType';
+
+const classes = {
+ chartWrapper: `${PREFIX}-chartWrapper`,
+};
+
+const Root = styled('div')(({ theme: Theme }) => ({
+ [`& .${classes.chartWrapper}`]: {
+ height: '80%',
+ width: '100%',
+ },
+}));
+
const CAR_TYPE = 'car_type';
const PERCENTAGE_SEGMENT = 'percentage_segment';
const PERCENTAGE_COUNTRY = 'percentage_country';
@@ -11,15 +25,8 @@ interface IProps {
data: IWidgetAccidentCountByCarType;
segmentText: string;
}
-const useStyle = makeStyles((theme: Theme) => ({
- chartWrapper: {
- height: '80%',
- width: '100%',
- },
-}));
const AccidentCountByCarType: FC = ({ data, segmentText }) => {
- const classes = useStyle();
const { t } = useTranslation();
const { items } = data;
const roundedItems = items.map((i) => ({
@@ -29,7 +36,7 @@ const AccidentCountByCarType: FC = ({ data, segmentText }) => {
}));
return (
- <>
+
{t('widgets.countByCarType.Accidents count by vehicle type')}
{t('widgets.countByCarType.compared to national average')}
@@ -45,7 +52,7 @@ const AccidentCountByCarType: FC = ({ data, segmentText }) => {
xLabel2={PERCENTAGE_COUNTRY}
/>
-
+
);
};
export default AccidentCountByCarType;
diff --git a/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx b/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx
index f9c2307d..0f11680c 100644
--- a/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx
+++ b/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx
@@ -1,57 +1,65 @@
-import React, { FC } from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
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 React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import RootStore from 'store/root.store';
import { useStore } from 'store/storeConfig';
+import { cherryJamColor, silverSpoonColor } from 'style';
+import PieChartView, { renderCollisionCustomizedLabel } from '../PieChartView';
-const ACCIDENT_TYPE = 'desc';
-const COUNT = 'count';
-const MAIN_CONTENT_HEIGHT = 250;
-const SECONDARY_CONTENT_HEIGHT = 190;
+const PREFIX = 'HeadOnCollisionsComparisonWidget';
-interface IProps {
- data: IWidgetHeadOnCollisionsComparisonData;
- segmetText: string;
- usePercent?: boolean;
-}
+const classes = {
+ textHighlight: `${PREFIX}-textHighlight`,
+ segmentDesc: `${PREFIX}-segmentDesc`,
+ timeRange: `${PREFIX}-timeRange`,
+ primaryContent: `${PREFIX}-primaryContent`,
+ primaryDesc: `${PREFIX}-primaryDesc`,
+ secondaryContent: `${PREFIX}-secondaryContent`,
+ secondaryDesc: `${PREFIX}-secondaryDesc`,
+};
-const useStyles = makeStyles(() => ({
- textHighlight: {
+const StyledBox = styled(Box)(() => ({
+ [`& .${classes.textHighlight}`]: {
color: cherryJamColor,
},
- segmentDesc: {
+
+ [`& .${classes.segmentDesc}`]: {
color: silverSpoonColor,
},
- timeRange: {
+
+ [`& .${classes.timeRange}`]: {
position: 'relative',
bottom: '25%',
right: '10%',
color: silverSpoonColor,
},
- primaryContent: {
+
+ [`& .${classes.primaryContent}`]: {
display: 'flex',
height: MAIN_CONTENT_HEIGHT,
width: '100%',
alignItems: 'center',
justifyContent: 'space-between',
},
- primaryDesc: {
+
+ [`& .${classes.primaryDesc}`]: {
display: 'flex',
flexDirection: 'column',
width: '30%',
},
- secondaryContent: {
+
+ [`& .${classes.secondaryContent}`]: {
display: 'flex',
height: SECONDARY_CONTENT_HEIGHT,
width: '80%',
position: 'relative',
bottom: '10%',
},
- secondaryDesc: {
+
+ [`& .${classes.secondaryDesc}`]: {
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
@@ -59,8 +67,18 @@ const useStyles = makeStyles(() => ({
},
}));
+const ACCIDENT_TYPE = 'desc';
+const COUNT = 'count';
+const MAIN_CONTENT_HEIGHT = 250;
+const SECONDARY_CONTENT_HEIGHT = 190;
+
+interface IProps {
+ data: IWidgetHeadOnCollisionsComparisonData;
+ segmetText: string;
+ usePercent?: boolean;
+}
+
const HeadOnCollisionsComparisonWidget: FC = ({ data, segmetText, usePercent }) => {
- const classes = useStyles();
const store: RootStore = useStore();
const { t } = useTranslation();
const bigPieData = data.items.specific_road_segment_fatal_accidents;
@@ -68,7 +86,7 @@ const HeadOnCollisionsComparisonWidget: FC = ({ data, segmetText, usePer
const roadNumberSegment: string = ` ${t('onUrban.route')} ${store.newsFlashWidgetsMetaRoadNumber}`;
const descSegment: string = roadNumberSegment == null ? '' : segmetText.substr(roadNumberSegment.length);
return (
-
+
@@ -108,7 +126,7 @@ const HeadOnCollisionsComparisonWidget: FC = ({ data, segmetText, usePer
outerRadius={'100%'}
/>
-
+
);
};
export default HeadOnCollisionsComparisonWidget;
diff --git a/src/components/molecules/widgets/InjuredAccidentsWithPedestrians.tsx b/src/components/molecules/widgets/InjuredAccidentsWithPedestrians.tsx
index c7abd81c..3ed590d3 100644
--- a/src/components/molecules/widgets/InjuredAccidentsWithPedestrians.tsx
+++ b/src/components/molecules/widgets/InjuredAccidentsWithPedestrians.tsx
@@ -1,7 +1,23 @@
-import React, { FC } from 'react';
-import { IWidgetInjuredAccidentsWithPedestrians } from 'models/WidgetData';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
import StackedBarChartView from 'components/molecules/StackedBarChartView';
-import { Box, makeStyles, Theme } from '@material-ui/core';
+import { IWidgetInjuredAccidentsWithPedestrians } from 'models/WidgetData';
+import React, { FC } from 'react';
+
+const PREFIX = 'InjuredAccidentsWithPedestrians';
+
+const classes = {
+ chartWrapper: `${PREFIX}-chartWrapper`,
+};
+
+const Root = styled('div')(() => ({
+ [`& .${classes.chartWrapper}`]: {
+ height: '100%',
+ width: '90%',
+ margin: 'auto',
+ padding: '5px',
+ },
+}));
const YEAR = 'year';
const KILLED_INJURY_SEVERITY_COUNT = 'killed_injury_severity_count';
@@ -15,20 +31,11 @@ interface IProps {
data: IWidgetInjuredAccidentsWithPedestrians;
segmentText: string;
}
-const useStyle = makeStyles((theme: Theme) => ({
- chartWrapper: {
- height: '100%',
- width: '90%',
- margin: 'auto',
- padding: '5px',
- },
-}));
const InjuredAccidentsWithPedestrians: FC = ({ data, segmentText }) => {
- const classes = useStyle();
const { items } = data;
return (
- <>
+
{segmentText}
= ({ data, segmentText }) => {
name3={NAME3}
/>
-
+
);
};
export default InjuredAccidentsWithPedestrians;
diff --git a/src/components/molecules/widgets/StreetViewWidget.tsx b/src/components/molecules/widgets/StreetViewWidget.tsx
index 0eb27219..76f31ccd 100644
--- a/src/components/molecules/widgets/StreetViewWidget.tsx
+++ b/src/components/molecules/widgets/StreetViewWidget.tsx
@@ -1,22 +1,27 @@
+import { styled } from '@mui/material/styles';
+import { IWidgetStreetViewData } from 'models/WidgetData';
import React, { FC } from 'react';
-import { mapApiKey } from 'utils/utils';
import ReactStreetview from 'services/streetView';
-import { makeStyles } from '@material-ui/core';
-import { IWidgetStreetViewData } from 'models/WidgetData';
+import { mapApiKey } from 'utils/utils';
-interface IProps {
- data: IWidgetStreetViewData;
-}
+const PREFIX = 'StreetViewWidget';
-const useStyles = makeStyles({
- root: {
+const classes = {
+ root: `${PREFIX}-root`,
+};
+
+const Root = styled('div')({
+ [`&.${classes.root}`]: {
width: '100%',
height: '100%',
},
});
+interface IProps {
+ data: IWidgetStreetViewData;
+}
+
const StreetViewWidget: FC = ({ data }) => {
- const classes = useStyles();
const { latitude, longitude } = data.items;
const streetViewPanoramaOptions = {
@@ -25,13 +30,13 @@ const StreetViewWidget: FC = ({ data }) => {
};
return (
-
+
-
+
);
};
export default StreetViewWidget;
diff --git a/src/components/organisms/AboutDialog.tsx b/src/components/organisms/AboutDialog.tsx
index 138e764b..886388a6 100644
--- a/src/components/organisms/AboutDialog.tsx
+++ b/src/components/organisms/AboutDialog.tsx
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import DialogWithHeader from 'components/molecules/DialogWithHeader';
import { Typography } from 'components/atoms';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
const maxWidth = 'sm';
diff --git a/src/components/organisms/CardEditorDialog.tsx b/src/components/organisms/CardEditorDialog.tsx
index eb38a6b1..48ed72b3 100644
--- a/src/components/organisms/CardEditorDialog.tsx
+++ b/src/components/organisms/CardEditorDialog.tsx
@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
import DialogWithHeader from '../molecules/DialogWithHeader';
import { useStore } from 'store/storeConfig';
import WidgetWrapper from 'components/molecules/widgets/WidgetWrapper';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import AnyWayCard, { CardSizeOptions } from 'components/molecules/card/AnyWayCard';
import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/atoms';
import widgetToImage from 'services/to-image.service';
diff --git a/src/components/organisms/FilterBar.tsx b/src/components/organisms/FilterBar.tsx
index ec1474ac..a7189494 100644
--- a/src/components/organisms/FilterBar.tsx
+++ b/src/components/organisms/FilterBar.tsx
@@ -1,32 +1,38 @@
-import React, { FC, useCallback, useState, useEffect } from 'react';
-import { makeStyles, createStyles, Divider, Grid, Box } from '@material-ui/core';
-import { AppBar, Toolbar } from '@material-ui/core';
+import { AppBar, Box, Divider, Grid, Toolbar } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import { styled } from '@mui/material/styles';
+import { Button, Typography } from 'components/atoms';
import SelectButton from 'components/atoms/SelectButton';
import { observer } from 'mobx-react-lite';
-import { useStore } from 'store/storeConfig';
-import RootStore from 'store/root.store';
-import { useLocation } from 'react-router';
import queryString from 'query-string';
-import { Typography, Button } from 'components/atoms';
+import React, { FC, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import Collapse from '@material-ui/core/Collapse';
+import { useLocation } from 'react-router';
+import RootStore from 'store/root.store';
+import { useStore } from 'store/storeConfig';
-interface IProps {}
+const PREFIX = 'FilterBar';
-const useStyles = makeStyles(() =>
- createStyles({
- grow: {
- flexGrow: 1,
- },
- descriptionHeader: {
- alignItems: 'center',
- },
- }),
-);
+const classes = {
+ grow: `${PREFIX}-grow`,
+ descriptionHeader: `${PREFIX}-descriptionHeader`,
+};
+
+const Root = styled('div')(() => ({
+ [`&.${classes.grow}`]: {
+ flexGrow: 1,
+ },
+
+ [`& .${classes.descriptionHeader}`]: {
+ alignItems: 'center',
+ },
+}));
+
+interface IProps {}
const FilterBar: FC = () => {
const store: RootStore = useStore();
- const classes = useStyles();
+
const onFilterChange = useCallback((value: number) => store.changeTimeFilter(value), [store]);
const { t } = useTranslation();
const [isDescOpen, setIsDescOpen] = useState(false);
@@ -42,7 +48,7 @@ const FilterBar: FC = () => {
}, [queryParam, store]);
return (
-
+
@@ -72,7 +78,7 @@ const FilterBar: FC = () => {
- 
-