refactor: use MUI system props + misc refactorings

components/Footer/Footer.tsx

@@ -54,40 +54,30 @@ export const Footer: FC = ({}) => {
 	return (
 		<Stack
 			gap={2}
-			padding="120px 24px 100px"
+			p="120px 24px 100px"
 			bgcolor="#121212"
 			alignItems="center"
 			justifyContent="center"
 		>
 			{/* <Stack
-        gap={{
-          xs: 2,
-          sm: 5,
-          md: 7
-        }}
-        direction='row'
-        flexWrap='wrap'
-        justifyContent='space-between'
-        width='100%'
-        maxWidth={1030}
-      >
-        { footerLinks.map(link => (
-          <LinkContainer 
-            key={link.title}
-            footerLink={link}
-          />
-        )) }
-      </Stack>
-      <Divider 
-        flexItem
-        color="grey"
-      /> */}
+				gap={{ xs: 2, sm: 5, md: 7 }}
+				direction="row"
+				flexWrap="wrap"
+				justifyContent="space-between"
+				width="100%"
+				maxWidth={1030}
+			>
+				{footerLinks.map(link => (
+					<LinkContainer key={link.title} footerLink={link} />
+				))}
+			</Stack>
+			<Divider flexItem color="grey" /> */}
 			<Stack
 				direction={{ xs: "column", md: "row" }}
 				justifyContent="space-between"
 				alignItems="center"
 				width="100%"
-				padding={{ xs: 2, md: 9 }}
+				p={{ xs: 2, md: 9 }}
 				gap={3}
 			>
 				<Box display="grid" alignItems="center" justifyContent="center" gap={3}>

components/Footer/components/LinkContainer.tsx

@@ -9,16 +9,11 @@ interface ILinkContainer {
 
 export const LinkContainer: FC<ILinkContainer> = ({ footerLink }) => {
 	return (
-		<Stack
-			gap="20px"
-			// flexGrow={1}
-			width="100%"
-			maxWidth={155}
-		>
+		<Stack gap={2} width="100%" maxWidth={155}>
 			<Typography variant="h6" color="white">
 				{footerLink.title}
 			</Typography>
-			<Stack gap="10px">
+			<Stack gap={1}>
 				{footerLink.links.map(link => (
 					<SubLink key={link.name} link={link} />
 				))}

components/Header/Header.tsx

@@ -27,15 +27,15 @@ export const Header: FC<IHeader> = ({ allowPadding }) => {
 			<header ref={headerRef} className={styles.header} style={{ marginTop }}>
 				<Paper
 					sx={t => ({
-						background: alpha(t.palette.background.paper, 0.8),
+						bgcolor: alpha(t.palette.background.paper, 0.8),
 						width: "100%",
 						webkitBackdropFilter: "blur(10px)",
 						backdropFilter: "blur(10px)",
-						borderRadius: "16px",
+						borderRadius: 1,
 						justifyContent: "center",
 						display: "flex",
 						alignItems: "center",
-						padding: "8px 20px",
+						p: "8px 20px",
 					})}
 					elevation={0}
 				>

components/Header/components/HeaderMobile.tsx

@@ -28,12 +28,12 @@ export const HeaderMobile: FC = () => {
 				onClose={() => toggleDrawer(false)}
 			>
 				<Box
-					sx={{ width: 280 }}
+					width={280}
 					role="presentation"
 					onClick={() => toggleDrawer(false)}
 					onKeyDown={() => toggleDrawer(false)}
 				>
-					<Box display="grid" gap={3} p="30px 0px">
+					<Box display="grid" gap={3} py={3}>
 						<List1 mobile />
 
 						<Divider />

components/Header/components/List2.tsx

@@ -14,7 +14,7 @@ export const List2: FC<IList2> = ({}) => {
 				role="link"
 				component="a"
 				sx={{
-					mx: "20px",
+					mx: 2,
 					color: currentRoute === "/faq" ? "primary.main" : "text.secondary",
 				}}
 				href="/faq"

components/SlideIn/SlideIn.tsx

@@ -15,14 +15,14 @@ export interface ISlideIn extends Omit<SlideProps, "children"> {
 }
 
 export const SlideIn: FC<ISlideIn> = ({
-	rootMargin: rootmargin = "-50px",
+	rootMargin = "-50px",
 	threshold = [0.4, 0.6],
 	children,
 	direction = "up",
 	...slideProps
 }) => {
 	const { ref, inView } = useInView({
-		rootMargin: rootmargin,
+		rootMargin,
 		threshold,
 		fallbackInView: true,
 	});

pages/about/components/Hero.tsx

@@ -5,7 +5,7 @@ import { FC } from "react";
 export const Hero: FC = () => {
 	return (
 		<Box display="grid" justifyContent="center" textAlign="center">
-			<Typography variant="h3" component="h2" pt={7} mx={1} maxWidth={800}>
+			<Typography variant="h3" component="h1" pt={7} mx={1} maxWidth={800}>
 				We believe in a more sustainable and
 				<Accent>conscientious</Accent>
 				way of living.

pages/about/components/OurStory.tsx

@@ -26,8 +26,8 @@ const Story: FC<IStory> = ({ imgSrc, content, rowReverse, icon }) => {
 				position="relative"
 				display="flex"
 				justifyContent="center"
-				maxWidth="400"
-				sx={{ width: { xs: "80%", md: "30%" } }}
+				maxWidth={400}
+				width={{ xs: "80%", md: "30%" }}
 			>
 				<Image
 					wrapstyle={{ display: "flex", justifyContent: "center" }}

pages/blog/components/BlogsList.tsx

@@ -54,7 +54,7 @@ const BlogCard: FC<IBlogCard> = ({ title, subtitle, image, href }) => {
 	return (
 		<Link href={href} target="_blank" className={styles.blogCard}>
 			<Image
-				wrapstyle={{ overflow: "hidden", borderRadius: "30px" }}
+				wrapstyle={{ overflow: "hidden", borderRadius: 3 }}
 				alt="feature image"
 				src={image}
 			/>

pages/company/components/Story.tsx

@@ -22,7 +22,7 @@ export const Story: FC = () => {
 					<Typography
 						variant="h4"
 						component="h3"
-						sx={{ sm: { textAlign: "center" }, md: { textAlign: "left" } }}
+						textAlign={{ sm: "center", md: "left" }}
 						mb={2}
 					>
 						We’re going to become <br /> partners for long run.
@@ -71,7 +71,7 @@ export const Story: FC = () => {
 						alt=""
 					/>
 
-					<Typography maxWidth={400} padding="20px 40px" margin="auto">
+					<Typography maxWidth={400} p="20px 40px" m="auto">
 						We estimate that using WalkingPal can save our designers and
 						engineers 15,800 hours per year. That is equivalent to 263,200,000
 						won (220,000 USD) per year.

pages/faq/components/Hero.tsx

@@ -7,10 +7,10 @@ interface IHero {}
 export const Hero: FC<IHero> = ({}) => {
 	return (
 		<Box display="grid" justifyContent="center" textAlign="center">
-			<Typography variant="h3" pt={7} pb={4} mx={1} maxWidth="800px">
+			<Typography variant="h3" pt={7} pb={4} mx={1} maxWidth={800}>
 				Questions? Look here.
 			</Typography>
-			<Typography variant="body1" mx={3} maxWidth="600px">
+			<Typography variant="body1" mx={3} maxWidth={600}>
 				If you’re trying to get to know us better, you’ve come to the right
 				place. This is<Accent>WalkingPal</Accent>at a glance.
 			</Typography>

pages/home/components/Hero.tsx

@@ -11,7 +11,7 @@ export const Hero: FC<IHero> = ({}) => {
 				<Typography variant="h1" mt={7}>
 					Empowering <br /> Walking
 				</Typography>
-				<Typography variant="h5" component="span" mt={7}>
+				<Typography variant="h5" mt={7}>
 					Get your walking buddy anytime, anywhere!
 				</Typography>
 				<Box my={4}>

pages/home/components/Intro.tsx

@@ -52,8 +52,8 @@ export const Intro: FC = ({}) => {
 				<Paper
 					elevation={3}
 					sx={{
-						borderRadius: "50px",
-						maxWidth: "327px",
+						borderRadius: 5,
+						maxWidth: 327,
 						overflow: "hidden",
 						display: "grid",
 					}}
@@ -81,8 +81,8 @@ export const Intro: FC = ({}) => {
 				<Paper
 					elevation={3}
 					sx={{
-						borderRadius: "50px",
-						maxWidth: "327px",
+						borderRadius: 5,
+						maxWidth: 327,
 						overflow: "hidden",
 						alignItems: "center",
 						display: "grid",
@@ -94,7 +94,7 @@ export const Intro: FC = ({}) => {
 						style={{ width: "100%" }}
 						alt="Create walking buddy groups in WalkingPal app"
 					/>
-					<Box sx={{ padding: 3, textAlign: "center" }}>
+					<Box p={3} textAlign="center">
 						<Typography variant="h6" component="span">
 							Create Groups
 						</Typography>

pages/home/components/JoinTheCommunityForm.tsx

@@ -9,7 +9,7 @@ const CommunityForm: FC = () => {
 			sx={{
 				display: "flex",
 				flexDirection: { xs: "column", sm: "row" },
-				borderRadius: "50px",
+				borderRadius: 5,
 				overflow: "hidden",
 				py: 9,
 				mx: 3,
@@ -21,13 +21,13 @@ const CommunityForm: FC = () => {
 					backgroundPosition: "center",
 					backgroundRepeat: "no-repeat",
 					backgroundSize: "cover",
-					maxWidth: "800px",
+					maxWidth: 800,
 					width: { xs: "100%", md: "calc(100% - 480px)" },
 					borderRadius: "50px 0 0 50px",
 				}}
 			/>
-			<Stack padding="32px" flexGrow={1} gap="32px">
-				<Stack gap="12px">
+			<Stack p={3} flexGrow={1} gap={3}>
+				<Stack gap={1}>
 					<Typography variant="h5">Join the community</Typography>
 					<Typography variant="body1">
 						Subscribe to our newsletter to stay updated with our latest

pages/home/components/ReImagineCommute.tsx

@@ -122,14 +122,15 @@ export const CommuteCard: FC<{ cc: typeof commuteCards[0] }> = ({ cc }) => {
 			elevation={2}
 			sx={{ width: 256, borderRadius: 3, overflow: "hidden" }}
 		>
-			<Stack padding="14px" bgcolor={cc.bgcolor} width="100%">
+			<Stack p={1} bgcolor={cc.bgcolor} width="100%">
 				<Stack
-					sx={{ height: 112, backgroundColor: "#FFF" }}
+					height={112}
+					bgcolor="#FFF"
 					justifyContent="center"
 					alignItems="center"
 					borderRadius="20px 20px 0 0"
 					direction="row"
-					gap="4px"
+					gap={0.5}
 				>
 					<Typography fontWeight={500} variant="body1" component="h3">
 						{cc.text}
@@ -139,11 +140,11 @@ export const CommuteCard: FC<{ cc: typeof commuteCards[0] }> = ({ cc }) => {
 					</Typography>
 				</Stack>
 				<Stack
-					height="180px"
+					height={180}
 					bgcolor={cc.bgcolor}
 					justifyContent="center"
 					alignItems="center"
-					padding={{ xs: "24px 0", md: "24px" }}
+					p={{ xs: "20px 0", md: 2 }}
 				>
 					<Box
 						component="img"

pages/home/components/RibbonDecoration.tsx

@@ -9,8 +9,8 @@ const getTag = (key: string) => (
 		color="#fff"
 		bgcolor="#000"
 		p="10px 25px"
-		borderRadius="30px"
-		width="185px"
+		borderRadius={3}
+		width={185}
 		key={"deco" + key}
 	>
 		Walking Buddy
@@ -20,7 +20,7 @@ const getLabel = (key: string, label: string) => (
 	<Typography
 		variant="h5"
 		component="span"
-		width="100px"
+		width={100}
 		textAlign="center"
 		key={"deco" + key}
 	>
@@ -32,9 +32,9 @@ const getMemoji = (key: string) => {
 	return (
 		<Avatar
 			src={memojis[index].src}
-			sx={{ width: "70px", height: "70px" }}
+			sx={{ width: 70, height: 70 }}
 			key={"deco" + key}
-			alt="WalkingPal memoji avatar"
+			alt=""
 		/>
 	);
 };

pages/register/components/InputField.tsx

@@ -38,7 +38,7 @@ export const InputField: FCC<IInputField> = ({
 	const [dialogActive, setDialogActive] = useState(false);
 	const isOther = otherUniversity === OTHER;
 	return (
-		<Stack gap={1} sx={{ p: 3, backgroundColor: "#fff" }}>
+		<Stack gap={1} p={3} bgcolor="#fff">
 			<InputLabel required sx={{ fontSize: 30, color: "#000" }}>
 				<Typography variant="h6" component="span" fontWeight="medium">
 					{label}

pages/register/components/ProgressIcon.tsx

@@ -16,12 +16,8 @@ export const ProgressIcon: FC<IProgressIcon> = ({ active, completed }) => {
 				height: 16,
 				borderRadius: "50%",
 				border: active ? "2px solid #FFF" : undefined,
-				backgroundColor: active
-					? "secondary.main"
-					: completed
-					? "#A6C753"
-					: "#D9D9D9",
+				bgcolor: active ? "secondary.main" : completed ? "#A6C753" : "#D9D9D9",
 			}}
-		></Box>
+		/>
 	);
 };

pages/register/components/RegistrationForm.tsx

@@ -119,7 +119,7 @@ export const RegistrationForm: FC<IRegistrationForm> = ({
 			width="100%"
 			bgcolor="white"
 			boxShadow="10px 20px 50px rgba(0,0,0,0.25)"
-			borderRadius="16px"
+			borderRadius={2}
 			overflow="hidden"
 		>
 			<div
@@ -132,7 +132,7 @@ export const RegistrationForm: FC<IRegistrationForm> = ({
 				{(Object.entries(fields) as Array<[FieldName, string]>).map(
 					([fieldName, label], i) => {
 						return (
-							<Box ref={boxRef} key={"field-" + i} sx={{ minWidth: "100%" }}>
+							<Box ref={boxRef} key={"field-" + i} minWidth="100%">
 								<InputField
 									enableFocus={i === 0}
 									tabIndex={-1}

pages/register/components/SubmittedAck.tsx

@@ -17,19 +17,14 @@ export const SubmittedAck: FC = () => {
 				width="100%"
 				bgcolor="white"
 				boxShadow="10px 20px 50px rgba(0,0,0,0.25)"
-				borderRadius="16px"
+				borderRadius={2}
 				overflow="hidden"
 			>
-				<Stack sx={{ p: "32px", pt: "45px", alignItems: "center" }}>
-					<Typography variant="h5" fontWeight="medium" textAlign="center">
+				<Stack p={3} pt={4} alignItems="center">
+					<Typography variant="h5" fontWeight="medium" align="center">
 						Congratulations!🥳
 					</Typography>
-					<Typography
-						variant="body2"
-						component="span"
-						textAlign="center"
-						sx={{ p: 5 }}
-					>
+					<Typography variant="body2" align="center" p={5}>
 						You have sucessfully registered as one of the early users of
 						<Accent sx={{ fontWeight: 500 }}>WalkingPal.</Accent>
 						<br />

theme/theme.ts

@@ -200,7 +200,7 @@ export function getThemedComponents(theme: Theme): {
 				styleOverrides: {
 					root: {
 						color: "#484848",
-						borderRadius: "10px",
+						borderRadius: 1,
 						"&:hover fieldset": {
 							border: "solid 3px #E7E7E7 !important",
 						},