ui: refactor mui/styles

openkfw · Jun 28, 2022 · cf5e531 · cf5e531
1 parent fa66624
commit cf5e531
Show file tree

Hide file tree

Showing 79 changed files with 2,289 additions and 2,725 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # TruBudget <!-- omit in TOC -->
 
-![BuildStatus]https://github.com/openkfw/TruBudget/actions/workflows/github-ci.yml/badge.svg)
+![BuildStatus](https://github.com/openkfw/TruBudget/actions/workflows/github-ci.yml/badge.svg)
 ![DocumentationBuildStatus](https://github.com/openkfw/TruBudget/actions/workflows/update-documentation.yml/badge.svg)
 
 # Introduction

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,13 +23,14 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@date-io/date-fns": "v1",
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
+    "@date-io/dayjs": "^2.14.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@hapi/joi": "^17.1.1",
     "@mui/icons-material": "^5.5.1",
-    "@mui/lab": "^5.0.0-alpha.75",
     "@mui/material": "^5.5.3",
-    "@mui/styles": "^5.5.3",
+    "@mui/system": "^5.8.4",
+    "@mui/x-date-pickers": "^5.0.0-alpha.6",
     "accounting": "^0.4.1",
     "array-move": "^2.2.0",
     "axios": "^0.21.4",
@@ -38,7 +39,7 @@
     "connected-react-router": "^6.6.1",
     "content-disposition-attachment": "^0.2.0",
     "date-fns": "^2.16.1",
-    "dayjs": "^1.8.14",
+    "dayjs": "^1.11.3",
     "downshift": "^2.0.16",
     "file-saver": "^1.3.8",
     "history": "^4.9.0",

diff --git a/frontend/src/helper.js b/frontend/src/helper.js
@@ -168,13 +168,11 @@ export function makePermissionReadable(intent) {
   return strings.permissions[intent.replace(/[.]/g, "_")] || intent;
 }
 
-export const dateFormat = () => {
-  return "DD.MM.YYYY";
-};
-
 export const isDateReached = date => {
-  const today = dayjs(new Date());
-  return today.isAfter(date);
+  if (date === undefined) {
+    return false;
+  }
+  return dayjs().isSameOrAfter(date, "day");
 };
 
 export const isEmailAddressValid = emailAddress => {

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -6,7 +6,8 @@ import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import { createTheme } from "@mui/material/styles";
 import { ConnectedRouter } from "connected-react-router/immutable";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
+import * as relativeTime from "dayjs/plugin/relativeTime";
+import * as isSameOrAfter from "dayjs/plugin/isSameOrAfter";
 import { createBrowserHistory } from "history";
 import React, { Component } from "react";
 import { createRoot } from "react-dom/client";
@@ -20,9 +21,7 @@ import Main from "./pages/Main/Main";
 import LiveNotificationContainer from "./pages/Notifications/LiveNotificationContainer";
 import configureStore from "./store";
 
-// setup dayjs
-// if you need to add time to your charts you have to add a dayjs adapter
-// see: https://github.com/chartjs/Chart.js/pull/5960
+dayjs.extend(isSameOrAfter);
 dayjs.extend(relativeTime);
 
 const history = createBrowserHistory();

diff --git a/frontend/src/languages/english.js b/frontend/src/languages/english.js
@@ -6,7 +6,7 @@ const en = {
       thousand: ",",
       precision: 2
     },
-    dateFormat: "dd/MM/yyyy",
+    dateFormat: "DD/MM/YYYY",
     datePlaceholder: "dd/mm/yyyy",
     // numberRegex describes values with "." as decimal separator (matches e.g. 1000; 1,000; 1000.00; 1,000.00)
     numberRegex: /^([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(\.[0-9]+)?$/

diff --git a/frontend/src/languages/french.js b/frontend/src/languages/french.js
@@ -6,7 +6,7 @@ const fr = {
       thousand: ".",
       precision: 2
     },
-    dateFormat: "dd/MM/yyyy",
+    dateFormat: "DD/MM/YYYY",
     datePlaceholder: "dd/mm/yyyy",
     // numberRegex describes values with "," as decimal separator (matches e.g. 1000; 1.000; 1000,00; 1.000,00)
     numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/

diff --git a/frontend/src/languages/georgian.js b/frontend/src/languages/georgian.js
@@ -6,7 +6,7 @@ const ka = {
       thousand: ".",
       precision: 2
     },
-    dateFormat: "dd/MM/yyyy",
+    dateFormat: "DD/MM/YYYY",
     datePlaceholder: "dd/mm/yyyy",
     // numberRegex describes values with "," as decimal separator (matches e.g. 1000; 1.000; 1000,00; 1.000,00)
     numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/

diff --git a/frontend/src/languages/german.js b/frontend/src/languages/german.js
@@ -6,7 +6,7 @@ const de = {
       thousand: ".",
       precision: 2
     },
-    dateFormat: "dd/MM/yyyy",
+    dateFormat: "DD/MM/YYYY",
     datePlaceholder: "dd/mm/yyyy",
     // numberRegex describes values with "," as decimal separator (matches e.g. 1000; 1.000; 1000,00; 1.000,00)    numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/
     numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/

diff --git a/frontend/src/languages/portuguese.js b/frontend/src/languages/portuguese.js
@@ -6,7 +6,7 @@ const pt = {
       thousand: ".",
       precision: 2
     },
-    dateFormat: "dd/MM/yyyy",
+    dateFormat: "DD/MM/YYYY",
     datePlaceholder: "dd/mm/yyyy",
     // numberRegex describes values with "," as decimal separator (matches e.g. 1000; 1.000; 1000,00; 1.000,00)    numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/
     numberRegex: /^([0-9]{1,3}.([0-9]{3}.)*[0-9]{3}|[0-9]+)(,[0-9]+)?$/

diff --git a/frontend/src/pages/Common/ActionButton.js b/frontend/src/pages/Common/ActionButton.js
@@ -20,7 +20,6 @@ const ActionButton = ({
   // eslint-disable-next-line no-useless-computed-key
   ["data-test"]: dataTest,
   iconButtonStyle,
-  iconButtonClassName,
   alignTooltip = "bottom-end"
 }) => {
   const disabled = notVisible;
@@ -38,7 +37,6 @@ const ActionButton = ({
           <IconButton
             onClick={onClick}
             style={notVisible ? { ...styles.hide } : iconButtonStyle}
-            className={notVisible ? null : iconButtonClassName}
             disabled={disabled}
             data-test={dataTest}
             id={id}

diff --git a/frontend/src/pages/Common/BudgetEmptyState.js b/frontend/src/pages/Common/BudgetEmptyState.js
@@ -1,47 +1,32 @@
-import { withStyles, withTheme } from "@mui/styles";
-import Typography from "@mui/material/Typography";
 import React from "react";
-
+import Typography from "@mui/material/Typography";
 import strings from "../../localizeStrings";
 
-const styles = theme => {
-  return {
-    subtitle: {
-      color: theme.palette.grey.dark
-    },
-    caption: {
-      color: theme.palette.grey.main
-    }
-  };
+const BudgetEmptyState = props => {
+  const { text } = props;
+  return (
+    <table style={{ alignItems: "center" }}>
+      <tbody>
+        <tr height="200vh">
+          <td max-width="200vw">
+            <img
+              src="/images-for-empty-state/project-budget-empty-state.png"
+              alt={strings.common.no_budget}
+              width="150vw"
+            />
+          </td>
+          <td>
+            <Typography variant="subtitle1" sx={{ color: theme => theme.palette.grey.dark }}>
+              {strings.common.no_budget}
+            </Typography>
+            <Typography variant="caption" sx={{ color: theme => theme.palette.grey.main }}>
+              {text}
+            </Typography>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
 };
 
-const BudgetEmptyState = withTheme(
-  withStyles(styles)(props => {
-    const { text, classes } = props;
-    return (
-      <table style={{ alignItems: "center" }}>
-        <tbody>
-          <tr height="200vh">
-            <td max-width="200vw">
-              <img
-                src="/images-for-empty-state/project-budget-empty-state.png"
-                alt={strings.common.no_budget}
-                width="150vw"
-              />
-            </td>
-            <td>
-              <Typography variant="subtitle1" className={classes.subtitle}>
-                {strings.common.no_budget}
-              </Typography>
-              <Typography variant="caption" className={classes.caption}>
-                {text}
-              </Typography>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    );
-  })
-);
-
 export default BudgetEmptyState;
diff --git a/frontend/src/pages/Common/CreateButton.js b/frontend/src/pages/Common/CreateButton.js
@@ -1,9 +1,8 @@
+import React from "react";
 import Fab from "@mui/material/Fab";
 import Add from "@mui/icons-material/Add";
-import React from "react";
-import { withStyles } from "@mui/styles";
 
-const styles = {
+const defaultStyles = {
   createButtonContainer: {
     height: 20
   },
@@ -12,14 +11,20 @@ const styles = {
   }
 };
 
-const CreateButton = ({ classes, dataTest = "create", color = "primary", onClick }) => {
+const CreateButton = ({ dataTest = "create", color = "primary", onClick, styles = defaultStyles }) => {
   return (
-    <div className={classes.createButtonContainer}>
-      <Fab data-test={dataTest} onClick={onClick} color={color} className={classes.createButton} aria-label="Add">
+    <div style={{ ...defaultStyles.createButtonContainer, ...styles.createButtonContainer }}>
+      <Fab
+        data-test={dataTest}
+        onClick={onClick}
+        color={color}
+        style={{ ...defaultStyles.createButton, ...styles.createButton }}
+        aria-label="Add"
+      >
         <Add />
       </Fab>
     </div>
   );
 };
 
-export default withStyles(styles)(CreateButton);
+export default CreateButton;
diff --git a/frontend/src/pages/Common/CreationDialog.js b/frontend/src/pages/Common/CreationDialog.js
@@ -1,23 +1,16 @@
 import React from "react";
-
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogTitle from "@mui/material/DialogTitle";
 import isEmpty from "lodash/isEmpty";
 import strings from "../../localizeStrings";
 import CreationDialogStepper from "./CreationDialogStepper";
-import { withStyles } from "@mui/styles";
 
 const styles = {
   paperRoot: {
-    width: "100%",
     overflow: "scrollable"
-  },
-  container: {},
-  customWidth: {},
-  createButtonContainer: {},
-  createButton: {}
+  }
 };
 
 const getDialogActions = (props, handleCancel, handleBack, handleNext, handleSubmit) => {
@@ -94,13 +87,13 @@ const handleBack = props => props.setCurrentStep(props.currentStep - 1);
 const handleNext = props => props.setCurrentStep(props.currentStep + 1);
 
 const CreationDialog = props => {
-  const { dialogShown, title, handleSubmit, classes } = props;
+  const { dialogShown, title, handleSubmit } = props;
   return (
     <Dialog
       disableRestoreFocus
-      classes={{ paper: classes.paperRoot }}
+      style={{ paper: styles.paperRoot }}
       open={dialogShown}
-      maxWidth="md"
+      maxWidth="xl"
       data-test="creation-dialog"
     >
       <DialogTitle> {title}</DialogTitle>
@@ -110,4 +103,4 @@ const CreationDialog = props => {
   );
 };
 
-export default withStyles(styles)(CreationDialog);
+export default CreationDialog;
diff --git a/frontend/src/pages/Common/CreationDialogStepper.js b/frontend/src/pages/Common/CreationDialogStepper.js
@@ -4,13 +4,14 @@ import Step from "@mui/material/Step";
 import StepButton from "@mui/material/StepButton";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
+import Divider from "@mui/material/Divider";
 
 const getStepContent = ({ currentStep = 0, steps, ...props }) => {
   return steps[currentStep].content;
 };
 
 const styles = {
-  contentStyle: { margin: "0 16px" },
+  contentStyle: { margin: "0 16px", minWidth: "500px" },
   multiStep: { width: "90%" }
 };
 
@@ -33,9 +34,12 @@ const CreationDialogStepper = props => {
   return (
     <div>
       {numberOfSteps > 1 ? (
-        <Stepper style={styles.multiStep} nonLinear={editable} activeStep={currentStep}>
-          {getSteps(steps, editable, setCurrentStep)}
-        </Stepper>
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "20px" }}>
+          <Stepper style={styles.multiStep} nonLinear={editable} activeStep={currentStep}>
+            {getSteps(steps, editable, setCurrentStep)}
+          </Stepper>
+          <Divider />
+        </div>
       ) : null}
       <div style={styles.contentStyle}>
         <div>{getStepContent(props)}</div>

diff --git a/frontend/src/pages/Common/DatePicker.js b/frontend/src/pages/Common/DatePicker.js
@@ -1,13 +1,12 @@
 import React from "react";
-import { DatePicker as DatePickerMui } from "@mui/lab";
+import { DatePicker as DatePickerMui } from "@mui/x-date-pickers";
 import CancelIcon from "@mui/icons-material/Cancel";
 import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
-import { withStyles } from "@mui/styles";
 import _isEmpty from "lodash/isEmpty";
 import dayjs from "dayjs";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
-import LocalizationProvider from "@mui/lab/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers";
 import strings from "../../localizeStrings";
 
 const styles = {
@@ -25,9 +24,7 @@ const styles = {
   }
 };
 
-function DatePicker({ classes, name, label, onChange, onDelete, datetime, id = "default" }) {
-  const dateFormat = strings.format.dateFormat;
-  const datePlaceholder = strings.format.datePlaceholder;
+function DatePicker({ name, label, onChange, onDelete, datetime, id = "default" }) {
   const dateValue = _isEmpty(datetime) ? null : datetime;
 
   const handleOnBlur = (date, name) => {
@@ -36,17 +33,17 @@ function DatePicker({ classes, name, label, onChange, onDelete, datetime, id = "
   };
 
   return (
-    <div className={classes.searchField}>
-      <form className={classes.form} noValidate>
+    <div style={styles.searchField}>
+      <form style={styles.form} noValidate>
         <div data-test={`datepicker-${id}`}>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
             <DatePickerMui
               autoOk
               variant="standard"
               id={id}
               label={label}
-              placeholder={datePlaceholder}
-              inputFormat={dateFormat}
+              placeholder={strings.format.datePlaceholder}
+              inputFormat={strings.format.dateFormat}
               value={dateValue}
               onChange={date => {
                 onChange(dayjs(date).format("YYYY-MM-DD"), name);
@@ -57,11 +54,11 @@ function DatePicker({ classes, name, label, onChange, onDelete, datetime, id = "
           </LocalizationProvider>
         </div>
       </form>
-      <IconButton data-test={`clear-datepicker-${id}`} onClick={onDelete} className={classes.clearButton} size="large">
+      <IconButton data-test={`clear-datepicker-${id}`} onClick={onDelete} style={styles.clearButton} size="large">
         <CancelIcon color="action" />
       </IconButton>
     </div>
   );
 }
 
-export default withStyles(styles)(DatePicker);
+export default DatePicker;