More theme customization and typing. (#21)

* Theme customization and typing. Some values used in both MUI theme and custom css.

* Animation times use properties defined in theme

---------

Co-authored-by: Luis Doebbel <luis.doebbel@nventive.com>

Author: luisdlopez

frontend/src/app/components/errorHelperText/ErrorHelperText.tsx

@@ -1,12 +1,30 @@
 import Typography from "@mui/material/Typography";
 import { RefObject, useEffect, useRef, useState } from "react";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import classes from "./error-helper-text.module.css";
+import { css } from "@mui/material-pigment-css";
 
 interface IErrorBox {
   message: string;
 }
 
+const enter = css`
+  opacity: 0;
+`;
+
+const enterActive = css(({ theme }) => ({
+  opacity: 1,
+  transition: `opacity ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeIn}`,
+}));
+
+const exit = css`
+  opacity: 0;
+`;
+
+const exitActive = css(({ theme }) => ({
+  opacity: 0,
+  transition: `opacity ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeOut}`,
+}));
+
 export default function ErrorHelperText({ message }: IErrorBox) {
   const [activeMessage, setActiveMessage] = useState<string | undefined>(
     undefined,
@@ -21,10 +39,10 @@ export default function ErrorHelperText({ message }: IErrorBox) {
       {activeMessage && (
         <CSSTransition
           classNames={{
-            enter: classes["enter"],
-            enterActive: classes["enter-active"],
-            exit: classes["exit"],
-            exitActive: classes["exit-active"],
+            enter: enter,
+            enterActive: enterActive,
+            exit: exit,
+            exitActive: exitActive,
           }}
           timeout={350}
           nodeRef={nodeRef}

frontend/src/app/components/errorHelperText/error-helper-text.module.css

@@ -2,6 +2,17 @@ import Spinner from "@components/spinner/Spinner";
 import { RefObject, useRef } from "react";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import classes from "./loading.module.css";
+import { css } from "@mui/material-pigment-css";
+
+const enterActive = css(({ theme }) => ({
+  opacity: 1,
+  transition: `opacity ${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeIn}`,
+}));
+
+const exitActive = css(({ theme }) => ({
+  opacity: 0,
+  transition: `opacity ${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeOut}`,
+}));
 
 interface ILoading {
   isLoading?: boolean;
@@ -16,9 +27,9 @@ export default function Loading({ isLoading = true }: ILoading) {
         <CSSTransition
           classNames={{
             enter: classes["enter"],
-            enterActive: classes["enter-active"],
+            enterActive: enterActive,
             exit: classes["exit"],
-            exitActive: classes["exit-active"],
+            exitActive: exitActive,
           }}
           timeout={500}
           nodeRef={nodeRef}

frontend/src/app/components/loading/Loading.tsx

@@ -15,16 +15,6 @@
   opacity: 0;
 }
 
-.enter-active {
-  opacity: 1;
-  transition: opacity 0.5s ease-in;
-}
-
 .exit {
   opacity: 1;
 }
-
-.enter-active {
-  opacity: 0;
-  transition: opacity 0.5s ease-out;
-}

frontend/src/app/components/loading/loading.module.css

@@ -4,7 +4,7 @@ export default function Spinner() {
   return (
     <span
       sx={(theme) => ({
-        backgroundImage: `linear-gradient(${theme.palette.primary.main} 16px,transparent 0),
+        backgroundImage: `linear-gradient(${theme.palette.primary.dark} 16px,transparent 0),
           linear-gradient(${theme.palette.primary.main} 16px, transparent 0),
           linear-gradient(${theme.palette.primary.main} 16px, transparent 0),
           linear-gradient(${theme.palette.primary.dark} 16px, transparent 0)`,

frontend/src/app/components/spinner/Spinner.tsx

@@ -1,53 +1,58 @@
 import { Theme, SxProps } from "@mui/material/styles";
 import {} from "@mui/material/themeCssVarsAugmentation";
 
+// Extend the Pigment CSS theme types with Material UI Theme
 declare module "@mui/material-pigment-css" {
   interface ThemeArgs {
     theme: Theme;
   }
 }
 
 declare module "@mui/material/styles" {
+  // Named like this to augment the existing ZIndex theme type
   interface ZIndex {
     debugBanner: number;
     cookieBanner: number;
     loading: number;
   }
 
+  interface CustomSpacing {
+    a: string;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+  }
+
+  interface CustomBorderRadius {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+  }
+
   interface Theme {
     zIndex: ZIndex;
     customProperties: {
-      borderRadius: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-      };
-      time: {
-        normal: string;
-        slow: string;
-      };
+      spacing: CustomSpacing;
+      borderRadius: CustomBorderRadius;
     };
   }
 
   // allow configuration using `createTheme`
   interface ThemeOptions {
     zIndex?: Partial<ZIndex>;
     customProperties?: {
-      borderRadius?: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-      };
-      time?: {
-        normal: string;
-        slow: string;
-      };
+      spacing?: Partial<CustomSpacing>;
+      borderRadius?: Partial<CustomBorderRadius>;
     };
   }
 }
 
+// Allows typescript to recognize sx prop on HTML elements
 declare global {
   namespace React {
     interface HTMLAttributes {

frontend/src/material-ui-pigment-css.d.ts

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: InterTight;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("@assets/fonts/InterTight/InterTight-Regular.woff2") format("woff2"),
+    url("@assets/fonts/InterTight/InterTight-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: InterTight;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    url("@assets/fonts/InterTight/InterTight-Medium.woff2") format("woff2"),
+    url("@assets/fonts/InterTight/InterTight-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: InterTight;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    url("@assets/fonts/InterTight/InterTight-SemiBold.woff2") format("woff2"),
+    url("@assets/fonts/InterTight/InterTight-SemiBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: InterTight;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("@assets/fonts/InterTight/InterTight-Bold.woff2") format("woff2"),
+    url("@assets/fonts/InterTight/InterTight-Bold.ttf") format("truetype");
+}

frontend/src/styles/_animations.scss

@@ -12,8 +12,6 @@ body {
   flex-direction: column;
   min-height: 100%;
   width: 100%;
-  font-family: InterTight, sans-serif;
-  font-size: 16px;
   overflow-y: scroll;
 }
 
@@ -23,7 +21,6 @@ body {
   flex: 1 1 auto;
   height: 100%;
   width: 100%;
-  animation: 0.5s fade-in forwards;
 }
 
 .flex {

frontend/src/styles/_fonts.scss

@@ -2,17 +2,16 @@
 =                Variables                    =
 ============================================ */
 
-// ideally, these should match the spacing from MUI
+// Allow utility classes to use the same spacing properties defined in the MUI theme
 $spacing: (
-  0: 0,
-  a: auto,
-  xxs: 0.25rem,
-  xs: 0.5rem,
-  sm: 0.75rem,
-  md: 1rem,
-  lg: 1.5rem,
-  xl: 2rem,
-  xxl: 3rem,
+  a: var(--mui-customProperties-spacing-a),
+  xxs: var(--mui-customProperties-spacing-xxs),
+  xs: var(--mui-customProperties-spacing-xs),
+  sm: var(--mui-customProperties-spacing-sm),
+  md: var(--mui-customProperties-spacing-md),
+  lg: var(--mui-customProperties-spacing-lg),
+  xl: var(--mui-customProperties-spacing-xl),
+  xxl: var(--mui-customProperties-spacing-xxl),
 );
 
 $direction: (