fix: completion page apis, validation, email states

src/components/CardContainer.tsx

@@ -33,7 +33,7 @@ export function CardContainer({
             justifyContent: 'space-between',
             alignItems: { xs: 'flex-start', sm: 'center' },
             flexDirection: { xs: 'column', sm: 'row' },
-            bgcolor: highlighted ? 'primary.light' : 'background.default',
+            bgcolor: highlighted ? 'background.primary' : 'background.default',
             p: 2,
             borderRadius: 1,
             gap: { xs: 1, sm: 0 },

src/components/Layout/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Skeleton, Typography } from '@mui/material';
+import { Box, IconButton, Typography } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { More } from 'iconsax-react';
 import type { UserInfo } from '@/contexts/AuthContext';
@@ -7,7 +7,7 @@ interface HeaderProps {
   user: UserInfo;
 }
 
-export const Header: React.FC<HeaderProps> = ({ user, loading }) => {
+export const Header: React.FC<HeaderProps> = ({ user }) => {
   return (
     <Box
       sx={{

src/components/Layout/Toolbar.tsx

@@ -1,14 +1,9 @@
-import {
-  Avatar,
-  Box,
-  IconButton,
-  Toolbar as MuiToolbar,
-  Skeleton,
-} from '@mui/material';
+import { Avatar, Box, IconButton, Toolbar as MuiToolbar } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { HambergerMenu, Menu } from 'iconsax-react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { UserInfo } from '@/contexts/AuthContext';
+import Logo from '../Logo';
 
 interface ToolbarProps {
   sideNavOpen: boolean;
@@ -22,12 +17,12 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   setSideNavOpen,
   isMobile,
   user,
-  loading,
 }) => {
   return (
     <MuiToolbar
       sx={{
         height: (t) => t.spacing(isMobile ? 8 : 10.5),
+        bgcolor: 'background.paper',
         px: isMobile ? 3 : 2,
         borderBottom: (t) => `1px solid ${t.palette.divider}`,
         boxSizing: 'content-box',

src/components/Layout/buildNavItems.tsx

@@ -10,8 +10,9 @@ const getIcon = (icon?: Iconsax) => (isSelected: boolean) =>
     <Icon Component={icon} variant={isSelected ? 'Bold' : 'Broken'} />
   ) : undefined;
 
+// TODO: make this a hook
 export function buildNavItems(routes: RouteConfig[]): NavItemConfig[] {
-  const { t } = useTranslation();
+  const { t } = useTranslation('sideNav');
 
   return routes.flatMap((route) => {
     // Check if route itself does not have a navItem but its child has

src/components/Loading.tsx

@@ -1,5 +1,4 @@
 import { CircularProgress, Stack } from '@mui/material';
-import React from 'react';
 
 export const Loading = () => {
   return (
@@ -7,7 +6,7 @@ export const Loading = () => {
       sx={{
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: (t) => t.palette.background.default,
+        backgroundColor: 'background.default',
         position: 'fixed',
         inset: '0',
         zIndex: (t) => t.zIndex.tooltip + 1,