Rewriting most remaining MUI usage (#2905)

Co-authored-by: Ole Martin Handeland <[email protected]>

src/components/AltinnLoader.module.css

@@ -34,9 +34,9 @@
   0%,
   100%,
   80% {
-    box-shadow: 0 0.625em 0 -0.325em #008fd6;
+    box-shadow: 0 0.625em 0 -0.325em var(--colors-primary-blueMedium);
   }
   40% {
-    box-shadow: 0 0.625em 0 0 #008fd6;
+    box-shadow: 0 0.625em 0 0 var(--colors-primary-blueMedium);
   }
 }

src/components/AltinnSpinner.module.css

@@ -0,0 +1,14 @@
+.spinner {
+  color: var(--colors-primary-blueDark);
+  margin-right: auto;
+  margin-left: auto;
+  display: inline-block;
+}
+
+.spinnerText {
+  display: inline-block;
+  font-size: 16px;
+  margin-left: 10px;
+  vertical-align: middle;
+  margin-bottom: 25px;
+}

src/components/AltinnSpinner.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { CircularProgress, createStyles, makeStyles, Typography } from '@material-ui/core';
+import { CircularProgress, Typography } from '@material-ui/core';
 import classNames from 'classnames';
 import type { ArgumentArray } from 'classnames';
 
+import classes from 'src/components/AltinnSpinner.module.css';
 import { useLanguage } from 'src/features/language/useLanguage';
 
 export interface IAltinnSpinnerComponentProvidedProps {
@@ -12,27 +13,8 @@ export interface IAltinnSpinnerComponentProvidedProps {
   styleObj?: ArgumentArray;
 }
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    spinner: {
-      color: theme.altinnPalette.primary.blueDark,
-      marginRight: 'auto',
-      marginLeft: 'auto',
-      display: 'inline-block',
-    },
-    spinnerText: {
-      display: 'inline-block',
-      fontSize: 16,
-      marginLeft: '10px',
-      verticalAlign: 'middle',
-      marginBottom: '25px',
-    },
-  }),
-);
-
 export const AltinnSpinner = (props: IAltinnSpinnerComponentProvidedProps) => {
   const { id, spinnerText, styleObj } = props;
-  const classes = useStyles(props);
   const { langAsString } = useLanguage();
 
   return (

src/components/LandmarkShortcuts.module.css

@@ -0,0 +1,17 @@
+.button {
+  text-decoration: underline;
+  text-align: left;
+  padding: 5px 5px 5px 10px;
+}
+
+.srOnly {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.srOnly:focus {
+  position: relative;
+  width: auto;
+  height: auto;
+}

src/components/LandmarkShortcuts.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { makeStyles } from '@material-ui/core';
 import cn from 'classnames';
 
+import classes from 'src/components/LandmarkShortcuts.module.css';
+
 export interface ILandmarkShortcutsProps {
   shortcuts: ILandmarkShortcut[];
 }
@@ -12,28 +13,7 @@ interface ILandmarkShortcut {
   text: React.ReactNode;
 }
 
-const useStyles = makeStyles({
-  button: {
-    textDecoration: 'underline',
-    textAlign: 'left',
-    padding: '5px',
-    paddingLeft: '10px',
-  },
-  srOnly: {
-    position: 'absolute',
-    clip: 'rect(0,0,0,0)',
-    border: 0,
-    '&:focus': {
-      position: 'relative',
-      width: 'auto',
-      height: 'auto',
-    },
-  },
-});
-
 export function LandmarkShortcuts({ shortcuts }: ILandmarkShortcutsProps) {
-  const classes = useStyles();
-
   const handleClick = (id: string) => {
     // workaround because we still use a hash-router (sigh...)
     // can be replaced by the more elegant solution <a href="#main-content></a> once this is no longer the case.

src/components/ThemeWrapper.tsx → src/components/ViewportWrapper.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
-import type { ReactNode } from 'react';
-
-import { createTheme, ThemeProvider } from '@material-ui/core';
+import type { PropsWithChildren } from 'react';
 
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useIsMobile, useIsTablet } from 'src/hooks/useDeviceWidths';
 import { rightToLeftISOLanguageCodes } from 'src/language/languages';
-import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
-
-type ThemeWrapperProps = {
-  children?: ReactNode;
-};
 
-export const ThemeWrapper = ({ children }: ThemeWrapperProps) => {
+export const ViewportWrapper = ({ children }: PropsWithChildren) => {
   const isMobile = useIsMobile();
   const isTablet = useIsTablet();
   const selectedLanguage = useCurrentLanguage();
@@ -42,24 +35,17 @@ export const ThemeWrapper = ({ children }: ThemeWrapperProps) => {
   }, [isMobile, isTablet]);
 
   return (
-    <ThemeProvider
-      theme={createTheme({
-        ...AltinnAppTheme,
-        direction,
-      })}
+    <div
+      style={
+        isRtl
+          ? {
+              direction: 'rtl',
+              textAlign: 'right',
+            }
+          : undefined
+      }
     >
-      <div
-        style={
-          isRtl
-            ? {
-                direction: 'rtl',
-                textAlign: 'right',
-              }
-            : undefined
-        }
-      >
-        {children}
-      </div>
-    </ThemeProvider>
+      {children}
+    </div>
   );
 };

src/components/altinnError.module.css

@@ -20,7 +20,7 @@
 }
 .title {
   font-weight: 500;
-  color: #022f51;
+  color: var(--colors-primary-blueDarker);
 }
 
 .imageContainer {

src/components/altinnParty.module.css

@@ -0,0 +1,98 @@
+.partyPaper {
+  margin-bottom: 0.75rem;
+  border-radius: 0;
+  background-color: var(--colors-primary-blueLighter);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  width: 100%;
+}
+
+.partyWrapper {
+  padding: 1.25rem;
+  gap: 0.75rem;
+}
+
+.partyWrapper:hover {
+  cursor: pointer;
+}
+
+.partyWrapperDisabled:hover {
+  cursor: not-allowed;
+}
+
+.partyPaperDisabled {
+  margin-bottom: 0.75rem;
+  border-radius: 0;
+  background-color: var(--colors-primary-blueLighter);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  color: var(--colors-primary-grey);
+  width: 100%;
+}
+
+.partyIcon {
+  padding: 0.75rem;
+  font-size: 42px;
+}
+
+.partyName {
+  font-weight: 700;
+}
+
+.partyInfo {
+  font-weight: 300;
+  font-size: 0.875rem;
+}
+
+.subUnitWrapper {
+  color: var(--colors-primary-black);
+}
+
+.subUnitListHeaderWrapper {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  gap: 0.75rem;
+  border-top: 1px solid var(--colors-primary-greyMedium);
+}
+
+.subUnitListHeaderWrapper:hover {
+  cursor: pointer;
+}
+
+.subUnit {
+  width: 100%;
+  padding: 0 1.25rem;
+}
+
+.subUnit:hover {
+  background: var(--colors-primary-blueLight);
+  cursor: pointer;
+}
+
+.subUnitListHeader {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.subUnitListHeader:hover {
+  background: var(--colors-primary-blueLight);
+  cursor: pointer;
+}
+
+.subUnitListHeaderIcon {
+  font-size: 2rem;
+  color: var(--colors-primary-blue);
+}
+
+.subUnitTextWrapper {
+  padding: 1.25rem 1.25rem 1.25rem 3rem;
+  gap: 0.75rem;
+  border-top: 1px solid var(--colors-primary-greyMedium);
+}
+
+.subUnitTextBold {
+  font-weight: 700;
+}
+
+.subUnitIcon {
+  padding-left: 1.75rem;
+  font-size: 2.625rem;
+}