Unauthed page improvements (#46)

Author: bakerac4

app/src/core/components/withTextField.tsx

@@ -1,7 +1,7 @@
 import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
 import { useState } from 'react';
 import { Control, Controller, FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { SomeZodObject } from 'zod';
 
 import { getLabelFromSchema } from '~/core/utils/zod';
@@ -20,6 +20,28 @@ const TextField = styled(MuiTextField)`
             background: ${({ theme }) => theme.palette.background.paper};
         }
 
+        ${({ theme }) =>
+            theme.palette.mode === 'dark' &&
+            css`
+                & .MuiOutlinedInput-root {
+                    &.Mui-focused fieldset {
+                        border-color: ${({ theme }) => theme.palette.grey[200]};
+                    }
+                    &.Mui-error fieldset {
+                        border-color: ${({ theme }) => theme.palette.error.main} !important;
+                    }
+                }
+
+                & .MuiFormLabel-root {
+                    &.Mui-focused {
+                        color: ${({ theme }) => theme.palette.grey[200]};
+                        &.Mui-error {
+                            color: ${({ theme }) => theme.palette.error.main};
+                        }
+                    }
+                }
+            `}
+
         & .MuiInputBase-input.Mui-disabled {
             cursor: not-allowed !important;
         }

app/src/features/authentication/public/ForgotPasswordView.tsx

@@ -1,5 +1,5 @@
 import { Box, Container } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Lottie from 'react-lottie-player';
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
@@ -83,6 +83,8 @@ function ForgotPasswordView() {
     const { isDesktop } = useWindowSize();
     const [animationData, setAnimationData] = useState<object>();
 
+    const memoizedGSplash = useMemo(() => <GSplash />, []);
+
     useEffect(() => {
         import('~/assets/lottie/ForgotPassword.json').then(setAnimationData);
     }, []);
@@ -91,11 +93,7 @@ function ForgotPasswordView() {
         <>
             <UnauthorizedRootCss />
             <FormBoxContainer>
-                {isDesktop && (
-                    <ImageBox>
-                        <GSplash />
-                    </ImageBox>
-                )}
+                {isDesktop && <ImageBox>{memoizedGSplash}</ImageBox>}
                 <FormBox>
                     <ColorModeToggle style={{ position: 'absolute', right: 10, top: 10 }} />
                     <CenteredContainer>

app/src/features/authentication/public/LoginView.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, Grid2 } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Lottie from 'react-lottie-player';
 import { useLocation } from 'react-router';
 import { Link, useSearchParams } from 'react-router-dom';
@@ -92,6 +92,8 @@ function Login() {
 
     const [animationData, setAnimationData] = useState<object>();
 
+    const memoizedGSplash = useMemo(() => <GSplash />, []);
+
     useEffect(() => {
         import('~/assets/lottie/landing.json').then(setAnimationData);
     }, []);
@@ -101,11 +103,7 @@ function Login() {
             <UnauthorizedRootCss />
 
             <FormBoxContainer>
-                {isDesktop && (
-                    <ImageBox>
-                        <GSplash />
-                    </ImageBox>
-                )}
+                {isDesktop && <ImageBox>{memoizedGSplash}</ImageBox>}
                 <FormBox>
                     <ColorModeToggle style={{ position: 'absolute', right: 10, top: 10 }} />
                     <CenteredContainer>