Fix for rebasing on develop branch

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react"
 
-import Container from "@mui/material/Container"
+import Container, { ContainerProps } from "@mui/material/Container"
 import CssBaseline from "@mui/material/CssBaseline"
 import { styled } from "@mui/material/styles"
 import { makeStyles } from "@mui/styles"
@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const LoginContent = styled(Container)(() => ({
+const LoginContent: React.FC<ContainerProps & { component: "main" }> = styled(Container)(() => ({
   padding: 0,
   margin: 0,
   width: "100%",

src/components/ErrorPageContainer.tsx

@@ -36,14 +36,16 @@ const useStyles = makeStyles((theme: any) => ({
     margin: "1vh auto",
   },
   errorTitle: {
-    backgroundColor: (props: ErrorTypeProps) =>
-      props.errorType === "warning" ? theme.errors.yellowErrorBackground : theme.errors.redErrorBackground,
-    color: (props: ErrorTypeProps) =>
-      props.errorType === "warning" ? theme.errors.yellowErrorText : theme.errors.redErrorText,
+    color: theme.palette.common.black,
+    backgroundColor: theme.palette.common.white,
+    border: (props: ErrorTypeProps) =>
+      props.errorType === "warning"
+        ? `1px solid ${theme.palette.warning.main}`
+        : `1px solid ${theme.palette.error.main}`,
   },
   errorIcon: {
     color: (props: ErrorTypeProps) =>
-      props.errorType === "warning" ? theme.errors.yellowErrorText : theme.errors.redErrorText,
+      props.errorType === "warning" ? theme.palette.warning.main : theme.palette.error.main,
   },
 }))
 

src/components/Nav.js → src/components/Nav.tsx

@@ -1,4 +1,3 @@
-//@flow
 import React, { useState } from "react"
 
 import HomeIcon from "@mui/icons-material/Home"
@@ -12,8 +11,7 @@ import { styled } from "@mui/material/styles"
 import Toolbar from "@mui/material/Toolbar"
 import Typography from "@mui/material/Typography"
 import { makeStyles } from "@mui/styles"
-import i18n from "i18next"
-import { useDispatch, useSelector } from "react-redux"
+import * as i18n from "i18next"
 import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom"
 
 import logo from "../images/csc_logo.svg"
@@ -23,6 +21,7 @@ import { setLocale } from "features/localeSlice"
 import { resetUser } from "features/userSlice"
 import { resetObjectType } from "features/wizardObjectTypeSlice"
 import { resetFolder } from "features/wizardSubmissionFolderSlice"
+import { useAppSelector, useAppDispatch } from "hooks"
 import { pathWithLocale } from "utils"
 
 const useStyles = makeStyles(theme => ({
@@ -56,14 +55,13 @@ const ServiceTitle = styled(Typography)(({ theme }) => ({
 }))
 
 type MenuItemProps = {
-  currentLocale: string,
+  currentLocale: string
 }
 
 const NavigationLinks = (props: MenuItemProps) => {
   const { currentLocale } = props
-
   const classes = useStyles()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   const resetWizard = () => {
     dispatch(resetObjectType())
@@ -75,7 +73,6 @@ const NavigationLinks = (props: MenuItemProps) => {
       <IconButton
         component={RouterLink}
         to={`/${currentLocale}/home`}
-        className={classes.HomeIcon}
         aria-label="go to frontpage"
         color="inherit"
         size="large"
@@ -119,8 +116,7 @@ const LanguageSelector = (props: MenuItemProps) => {
 
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
-
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   const navigate = useNavigate()
 
@@ -176,21 +172,18 @@ const LanguageSelector = (props: MenuItemProps) => {
 }
 
 const NavigationMenu = () => {
-  const classes = useStyles()
-
-  let location = useLocation()
-
-  const currentLocale = useSelector(state => state.locale) || Locale.defaultLocale
+  const location = useLocation()
+  const currentLocale = useAppSelector(state => state.locale) || Locale.defaultLocale
 
   return (
-    <nav className={classes.nav}>
+    <nav>
       {location.pathname !== "/" && <NavigationLinks currentLocale={currentLocale} />}
       <LanguageSelector currentLocale={currentLocale} />
     </nav>
   )
 }
 
-const Nav = (): React$Element<typeof AppBar> => {
+const Nav: React.FC = () => {
   return (
     <NavBar>
       <Toolbar>

src/components/NewDraftWizard/WizardForms/WizardJSONSchemaParser.tsx

@@ -297,7 +297,7 @@ const FormSection = ({ name, label, level, children, description }: FormSectionP
         const error = get(errors, name)
         return (
           <div>
-            <div className="formSection" key={`${name}-section`}>
+            <div key={`${name}-section`}>
               <Typography key={`${name}-header`} variant={`h${level}` as Variant} role="heading">
                 {label}
                 {description && level == 2 && (

src/theme.ts

@@ -32,6 +32,7 @@ const palette = {
   info: {
     main: "#006778",
   },
+  warning: { main: "#ff5800" },
   common: {
     white: "#FFF",
     black: "#000",
@@ -96,7 +97,10 @@ let CSCtheme = createTheme({
     },
   },
   palette: palette,
-  errors: palette.error,
+  error: palette.error,
+  info: palette.info,
+  success: palette.success,
+  warning: palette.warning,
   props: {
     MuiTextField: {
       variant: "outlined",

src/types/font.d.ts

@@ -0,0 +1 @@
+declare module "*.otf"

src/types/theme.d.ts

@@ -1,11 +1,17 @@
 declare module "@mui/material/styles" {
   interface Theme {
-    errors: {
-      yellowErrorBackground: string
-      yellowErrorText: string
-      redErrorBackground: string
-      redErrorText: string
+    typography: {
+      fontFamily: string
+      fontSize: number
     }
+    error: {
+      main: string
+    }
+    info: {
+      main: string
+    }
+    success: { main: string }
+    warning: { main: string }
     wizard: {
       cardHeader: any
       objectListItem: any
@@ -20,12 +26,18 @@ declare module "@mui/material/styles" {
   }
 
   interface ThemeOptions {
-    errors?: {
-      yellowErrorBackground?: string
-      yellowErrorText?: string
-      redErrorBackground?: string
-      redErrorText?: string
+    typography: {
+      fontFamily: string
+      fontSize: number
+    }
+    error: {
+      main: string
+    }
+    info: {
+      main: string
     }
+    success: { main: string }
+    warning: { main: string }
     wizard?: {
       cardHeader?: any
       objectListItem?: any

src/views/Login.js → src/views/Login.tsx

@@ -1,4 +1,3 @@
-//@flow
 import React from "react"
 
 import MailOutlineIcon from "@mui/icons-material/MailOutline"
@@ -53,7 +52,7 @@ const FooterItem = styled(Grid)(({ theme }) => ({
   alignItems: "center",
 }))
 
-const Login = (): React$Element<typeof Container> => {
+const Login: React.FC = () => {
   let loginRoute = "/aai"
   if (process.env.NODE_ENV === "development") {
     loginRoute = "http://localhost:5430/aai"