UI: update icon properties and adjust layout styles for consistency

bluewave-labs · Feb 2, 2025 · 31314be · 31314be
1 parent a841c26
commit 31314be
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 14 deletions.
diff --git a/Client/public/assets/icons/alerts/AlertCircleIcon.tsx b/Client/public/assets/icons/alerts/AlertCircleIcon.tsx
@@ -1,8 +1,6 @@
 import React, { FC, SVGProps } from 'react';
 
 interface AlertCircleIconProps extends SVGProps<SVGSVGElement> {
-	width?: number;
-	height?: number;
 	color?: string;
 	strokeWidth?: number;
 }

diff --git a/Client/public/assets/icons/arrows/ChevronSelectorVerticalIcon.tsx b/Client/public/assets/icons/arrows/ChevronSelectorVerticalIcon.tsx
@@ -36,7 +36,7 @@ const ChevronSelectorVerticalIcon: FC<ChevronSelectorVerticalIconProps> = ({
 			aria-label='Chevron Selector Vertical Icon'
 			role='img'
 			{...props}>
-			<g clip-path='url(#clip0_4303_3121)'>
+			<g clipPath='url(#clip0_4303_3121)'>
 				<path
 					d='M4.66675 10L8.00008 13.3333L11.3334 10'
 					stroke={color}

diff --git a/Client/src/app/documents/components/DragAndDropBox.tsx b/Client/src/app/documents/components/DragAndDropBox.tsx
@@ -82,7 +82,7 @@ const DragAndDropBox = ({ text, height = { sm: 150, md: 200, lg: 250 } }: DragAn
 			<div {...getRootProps()}>
 				<input
 					{...getInputProps({
-						accept: 'image/png, application/pdf, image/jpeg',
+						accept: 'application/pdf',
 						multiple: false,
 					})}
 				/>

diff --git a/Client/src/app/layout/DropdownMenu.tsx b/Client/src/app/layout/DropdownMenu.tsx
@@ -40,7 +40,7 @@ export default function DropdownMenu() {
 				onClick={handleClick}
 				size='small'
 				sx={{
-					typography: 'body1',
+					typography: 'h2',
 					textTransform: 'capitalize',
 				}}
 				startIcon={
@@ -95,7 +95,7 @@ export default function DropdownMenu() {
 							sx={{ display: 'flex', alignItems: 'center', gap: 8 }}>
 							<Box
 								component={icon}
-								width={{ sm: '0.8rem', md: '0.9rem', lg: '1rem' }}
+								width={{ sm: '0.8rem', md: '0.9rem', lg: '1.25rem' }}
 								height='auto'
 								strokeWidth={2.2}
 							/>
@@ -113,7 +113,7 @@ export default function DropdownMenu() {
 					sx={{ display: 'flex', alignItems: 'center', gap: 8 }}>
 					<Box
 						component={LogOutIcon}
-						width={{ sm: '0.8rem', md: '0.9rem', lg: '1rem' }}
+						width={{ sm: '0.8rem', md: '0.9rem', lg: '1.1rem' }}
 						height='auto'
 					/>
 					<Typography variant='body1'>Log out</Typography>

diff --git a/Client/src/app/layout/Sidebar.tsx b/Client/src/app/layout/Sidebar.tsx
@@ -97,6 +97,7 @@ export default function Sidebar() {
 								return (
 									<ListItem
 										key={text}
+										sx={{ mb: { sm: 1, md: 2, lg: 4 } }}
 										disablePadding>
 										<Link
 											href={href}
@@ -109,6 +110,7 @@ export default function Sidebar() {
 												selected={isActive}
 												sx={{
 													px: 4,
+													py: { sm: 2, md: 4, lg: 6 },
 													borderLeft: 3,
 													borderLeftColor: 'transparent',
 													'&.Mui-selected': {
@@ -124,7 +126,17 @@ export default function Sidebar() {
 												</ListItemIcon>
 												<ListItemText
 													primary={text}
-													sx={{ mb: { sm: 2.5, md: 1, lg: 0 } }}
+													//For MUI V7 - ListItemText no longer accepts primaryTypographyProps
+													// slotProps={
+													// 	isActive
+													// 		? { variant: 'h3', color: 'text.icon' }
+													// 		: { variant: 'h3', fontWeight: 400, color: 'text.primary' }
+													// }
+													primaryTypographyProps={
+														isActive
+															? { variant: 'h3', color: 'text.icon' }
+															: { variant: 'h3', fontWeight: 400, color: 'text.primary' }
+													}
 												/>
 											</ListItemButton>
 										</Link>

diff --git a/Client/src/app/not-found.tsx b/Client/src/app/not-found.tsx
@@ -18,12 +18,13 @@ export default function NotFound() {
 			zIndex={1500}
 			pt={40}
 			bgcolor='background.content'>
-			<Box
-				component={AlertCircleIcon}
-				width={{ sm: '4rem', md: '4.5rem', lg: '5rem' }}
-				height='auto'
-				mb={10}
-			/>
+			<Box mb={10}>
+				<AlertCircleIcon
+					width='5rem'
+					height='auto'
+				/>
+			</Box>
+
 			<Typography
 				variant='h2'
 				gutterBottom>