From f8cc896fbd702bbea6ce99aff42bc35a914ab0b1 Mon Sep 17 00:00:00 2001
From: Brycen G <brycengranville@outlook.com>
Date: Mon, 2 Dec 2024 14:18:32 -0500
Subject: [PATCH] style(frontend): apply new styling rules

---
 frontend/append.js                            |  4 +--
 frontend/cypress/plugins/index.js             |  2 +-
 frontend/server.js                            |  1 -
 frontend/src/components/Medal.tsx             |  2 +-
 frontend/src/components/Navbar.tsx            |  4 +--
 .../src/components/dashboard/CardFour.tsx     |  2 +-
 frontend/src/components/dashboard/CardOne.tsx |  2 +-
 .../src/components/dashboard/CardThree.tsx    |  2 +-
 frontend/src/components/dashboard/CardTwo.tsx |  2 +-
 .../src/components/dashboard/ChatCard.tsx     | 28 +++++++++----------
 .../src/components/dashboard/CheckboxFive.tsx |  4 +--
 .../src/components/dashboard/CheckboxFour.tsx |  4 +--
 .../src/components/dashboard/CheckboxOne.tsx  |  4 +--
 .../components/dashboard/CheckboxThree.tsx    |  4 +--
 .../src/components/dashboard/CheckboxTwo.tsx  |  2 +-
 .../components/dashboard/DarkModeSwitcher.tsx |  4 +--
 frontend/src/components/dashboard/Header.tsx  |  6 ++--
 .../src/components/dashboard/SwitcherFour.tsx |  2 +-
 .../src/components/dashboard/SwitcherOne.tsx  |  2 +-
 .../components/dashboard/SwitcherThree.tsx    |  4 +--
 .../src/components/dashboard/SwitcherTwo.tsx  |  2 +-
 .../src/pages.disabled/dashboard/index.tsx    |  2 +-
 frontend/src/pages/index.tsx                  |  2 +-
 23 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/frontend/append.js b/frontend/append.js
index 6828de57..b90d3fe8 100644
--- a/frontend/append.js
+++ b/frontend/append.js
@@ -1,7 +1,7 @@
 const { existsSync, appendFileSync } = require('node:fs');
-const { join } = require('node:path');
+const path = require('node:path');
 
-const standAloneNextServerPath = join(__dirname, '.next', 'standalone', 'server.js');
+const standAloneNextServerPath = path.join(__dirname, '.next', 'standalone', 'server.js');
 const standAloneNextServerExists = existsSync(standAloneNextServerPath);
 
 // I used the javascript to modify the javascript
diff --git a/frontend/cypress/plugins/index.js b/frontend/cypress/plugins/index.js
index 5e5a708d..717e6316 100644
--- a/frontend/cypress/plugins/index.js
+++ b/frontend/cypress/plugins/index.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+// eslint-disable-next-line unicorn/no-anonymous-default-export
 const useBabelRC = require('@cypress/code-coverage/use-babelrc');
 
 module.exports = (on, config) => {
diff --git a/frontend/server.js b/frontend/server.js
index 41889ce9..c8734747 100644
--- a/frontend/server.js
+++ b/frontend/server.js
@@ -4,7 +4,6 @@
 
 const { createServer } = require('node:http');
 const { parse } = require('node:url');
-const { join } = require('node:path');
 const next = require('next');
 
 const development = process.env.NODE_ENV !== 'production';
diff --git a/frontend/src/components/Medal.tsx b/frontend/src/components/Medal.tsx
index 5902e72d..3fdbff4e 100644
--- a/frontend/src/components/Medal.tsx
+++ b/frontend/src/components/Medal.tsx
@@ -51,7 +51,7 @@ const Modal = (properties: IMedalProperties) => {
 										onClick={() => setShowModal(false)}
 										data-testid="medal-button2"
 									>
-										<span className="block h-6 w-6 bg-transparent text-2xl text-black opacity-5 outline-none focus:outline-none">
+										<span className="block size-6 bg-transparent text-2xl text-black opacity-5 outline-none focus:outline-none">
 											×
 										</span>
 									</button>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index b0e3c076..dc64b367 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -70,7 +70,7 @@ const Navbar = () => {
 							>
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
-									className="h-6 w-6"
+									className="size-6"
 									aria-hidden="true"
 									fill="none"
 									viewBox="0 0 24 24"
@@ -95,7 +95,7 @@ const Navbar = () => {
 									>
 										<span className="sr-only">Open user menu</span>
 										<img
-											className="h-8 w-8 rounded-full"
+											className="size-8 rounded-full"
 											src="https://avatars.githubusercontent.com/u/66782301?s=96&v=4"
 											alt=""
 										/>
diff --git a/frontend/src/components/dashboard/CardFour.tsx b/frontend/src/components/dashboard/CardFour.tsx
index 82b2827c..8b2bf42e 100644
--- a/frontend/src/components/dashboard/CardFour.tsx
+++ b/frontend/src/components/dashboard/CardFour.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const CardFour = () => {
 	return (
 		<div className="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
-			<div className="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+			<div className="flex size-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
 				<svg
 					className="fill-primary dark:fill-white"
 					width="22"
diff --git a/frontend/src/components/dashboard/CardOne.tsx b/frontend/src/components/dashboard/CardOne.tsx
index 20116b45..f6e207d3 100644
--- a/frontend/src/components/dashboard/CardOne.tsx
+++ b/frontend/src/components/dashboard/CardOne.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const CardOne = () => {
 	return (
 		<div className="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
-			<div className="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+			<div className="flex size-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
 				<svg
 					className="fill-primary dark:fill-white"
 					width="22"
diff --git a/frontend/src/components/dashboard/CardThree.tsx b/frontend/src/components/dashboard/CardThree.tsx
index 4cc88e52..65ace4f0 100644
--- a/frontend/src/components/dashboard/CardThree.tsx
+++ b/frontend/src/components/dashboard/CardThree.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const CardThree = () => {
 	return (
 		<div className="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
-			<div className="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+			<div className="flex size-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
 				<svg
 					className="fill-primary dark:fill-white"
 					width="22"
diff --git a/frontend/src/components/dashboard/CardTwo.tsx b/frontend/src/components/dashboard/CardTwo.tsx
index 4b895c67..c3834635 100644
--- a/frontend/src/components/dashboard/CardTwo.tsx
+++ b/frontend/src/components/dashboard/CardTwo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const CardTwo = () => {
 	return (
 		<div className="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
-			<div className="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+			<div className="flex size-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
 				<svg
 					className="fill-primary dark:fill-white"
 					width="20"
diff --git a/frontend/src/components/dashboard/ChatCard.tsx b/frontend/src/components/dashboard/ChatCard.tsx
index e41baf10..51cc2016 100644
--- a/frontend/src/components/dashboard/ChatCard.tsx
+++ b/frontend/src/components/dashboard/ChatCard.tsx
@@ -8,9 +8,9 @@ const ChatCard = () => {
 
 			<div>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-01.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-3"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-3"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
@@ -21,15 +21,15 @@ const ChatCard = () => {
 								<span className="text-xs"> . 12 min</span>
 							</p>
 						</div>
-						<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
+						<div className="flex size-6 items-center justify-center rounded-full bg-primary">
 							<span className="text-sm font-medium text-white">3</span>
 						</div>
 					</div>
 				</a>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-04.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-3"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-3"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
@@ -43,9 +43,9 @@ const ChatCard = () => {
 					</div>
 				</a>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-05.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-6"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-6"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
@@ -59,9 +59,9 @@ const ChatCard = () => {
 					</div>
 				</a>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-01.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-3"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-3"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
@@ -72,15 +72,15 @@ const ChatCard = () => {
 								<span className="text-xs"> . Sun</span>
 							</p>
 						</div>
-						<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
+						<div className="flex size-6 items-center justify-center rounded-full bg-primary">
 							<span className="text-sm font-medium text-white">2</span>
 						</div>
 					</div>
 				</a>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-02.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-7"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-7"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
@@ -94,9 +94,9 @@ const ChatCard = () => {
 					</div>
 				</a>
 				<a href="messages.html" className="flex items-center gap-5 px-7.5 py-3 hover:bg-gray-3 dark:hover:bg-meta-4">
-					<div className="relative h-14 w-14 rounded-full">
+					<div className="relative size-14 rounded-full">
 						<Image src="/assets/images/user/user-05.png" alt="User" />
-						<span className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-meta-6"></span>
+						<span className="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-meta-6"></span>
 					</div>
 
 					<div className="flex flex-1 items-center justify-between">
diff --git a/frontend/src/components/dashboard/CheckboxFive.tsx b/frontend/src/components/dashboard/CheckboxFive.tsx
index 7707eb31..9fe9466c 100644
--- a/frontend/src/components/dashboard/CheckboxFive.tsx
+++ b/frontend/src/components/dashboard/CheckboxFive.tsx
@@ -16,11 +16,11 @@ const CheckboxFive = () => {
 						}}
 					/>
 					<div
-						className={`box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${
+						className={`box mr-4 flex size-5 items-center justify-center rounded-full border border-primary ${
 							isChecked && '!border-4'
 						}`}
 					>
-						<span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span>
+						<span className="size-2.5 rounded-full bg-white dark:bg-transparent"></span>
 					</div>
 				</div>
 				Checkbox Text
diff --git a/frontend/src/components/dashboard/CheckboxFour.tsx b/frontend/src/components/dashboard/CheckboxFour.tsx
index 9cf09b3c..e8265cd7 100644
--- a/frontend/src/components/dashboard/CheckboxFour.tsx
+++ b/frontend/src/components/dashboard/CheckboxFour.tsx
@@ -16,11 +16,11 @@ const CheckboxFour = () => {
 						}}
 					/>
 					<div
-						className={`mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
+						className={`mr-4 flex size-5 items-center justify-center rounded-full border ${
 							isChecked && 'border-primary'
 						}`}
 					>
-						<span className={`h-2.5 w-2.5 rounded-full bg-transparent ${isChecked && '!bg-primary'}`}> </span>
+						<span className={`size-2.5 rounded-full bg-transparent ${isChecked && '!bg-primary'}`}> </span>
 					</div>
 				</div>
 				Checkbox Text
diff --git a/frontend/src/components/dashboard/CheckboxOne.tsx b/frontend/src/components/dashboard/CheckboxOne.tsx
index 57b0f766..0a42f529 100644
--- a/frontend/src/components/dashboard/CheckboxOne.tsx
+++ b/frontend/src/components/dashboard/CheckboxOne.tsx
@@ -16,11 +16,11 @@ const CheckboxOne = () => {
 						}}
 					/>
 					<div
-						className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+						className={`mr-4 flex size-5 items-center justify-center rounded border ${
 							isChecked && 'bg-gray border-primary dark:bg-transparent'
 						}`}
 					>
-						<span className={`h-2.5 w-2.5 rounded-sm ${isChecked && 'bg-primary'}`}></span>
+						<span className={`size-2.5 rounded-sm ${isChecked && 'bg-primary'}`}></span>
 					</div>
 				</div>
 				Checkbox Text
diff --git a/frontend/src/components/dashboard/CheckboxThree.tsx b/frontend/src/components/dashboard/CheckboxThree.tsx
index 10367343..6ad18a1c 100644
--- a/frontend/src/components/dashboard/CheckboxThree.tsx
+++ b/frontend/src/components/dashboard/CheckboxThree.tsx
@@ -16,13 +16,13 @@ const CheckboxThree = () => {
 						}}
 					/>
 					<div
-						className={`box mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+						className={`box mr-4 flex size-5 items-center justify-center rounded border ${
 							isChecked && 'bg-gray border-primary dark:bg-transparent'
 						}`}
 					>
 						<span className={`text-primary opacity-0 ${isChecked && '!opacity-100'}`}>
 							<svg
-								className="h-3.5 w-3.5 stroke-current"
+								className="size-3.5 stroke-current"
 								fill="none"
 								viewBox="0 0 24 24"
 								xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/dashboard/CheckboxTwo.tsx b/frontend/src/components/dashboard/CheckboxTwo.tsx
index d9040ec1..35b3e9b3 100644
--- a/frontend/src/components/dashboard/CheckboxTwo.tsx
+++ b/frontend/src/components/dashboard/CheckboxTwo.tsx
@@ -16,7 +16,7 @@ const CheckboxTwo = () => {
 						}}
 					/>
 					<div
-						className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+						className={`mr-4 flex size-5 items-center justify-center rounded border ${
 							isChecked && 'bg-gray border-primary dark:bg-transparent'
 						}`}
 					>
diff --git a/frontend/src/components/dashboard/DarkModeSwitcher.tsx b/frontend/src/components/dashboard/DarkModeSwitcher.tsx
index 2e39b71c..8bd9938f 100644
--- a/frontend/src/components/dashboard/DarkModeSwitcher.tsx
+++ b/frontend/src/components/dashboard/DarkModeSwitcher.tsx
@@ -13,10 +13,10 @@ const DarkModeSwitcher = () => {
 				<input
 					type="checkbox"
 					onChange={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
-					className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
+					className="dur absolute top-0 z-50 m-0 size-full cursor-pointer opacity-0"
 				/>
 				<span
-					className={`absolute left-[3px] top-1/2 flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
+					className={`absolute left-[3px] top-1/2 flex size-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
 						colorMode === 'dark' && '!right-[3px] !translate-x-full'
 					}`}
 				>
diff --git a/frontend/src/components/dashboard/Header.tsx b/frontend/src/components/dashboard/Header.tsx
index 80135da3..220b049a 100644
--- a/frontend/src/components/dashboard/Header.tsx
+++ b/frontend/src/components/dashboard/Header.tsx
@@ -24,8 +24,8 @@ const Header = (properties: any) => {
 						}}
 						className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
 					>
-						<span className="relative block h-5.5 w-5.5 cursor-pointer">
-							<span className="du-block absolute right-0 h-full w-full">
+						<span className="relative block size-5.5 cursor-pointer">
+							<span className="du-block absolute right-0 size-full">
 								<span
 									className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
 										!properties.sidebarOpen && '!w-full delay-300'
@@ -42,7 +42,7 @@ const Header = (properties: any) => {
 									}`}
 								></span>
 							</span>
-							<span className="absolute right-0 h-full w-full rotate-45">
+							<span className="absolute right-0 size-full rotate-45">
 								<span
 									className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
 										!properties.sidebarOpen && '!h-0 !delay-[0]'
diff --git a/frontend/src/components/dashboard/SwitcherFour.tsx b/frontend/src/components/dashboard/SwitcherFour.tsx
index 550e4b08..d90c922b 100644
--- a/frontend/src/components/dashboard/SwitcherFour.tsx
+++ b/frontend/src/components/dashboard/SwitcherFour.tsx
@@ -17,7 +17,7 @@ const SwitcherFour = () => {
 					/>
 					<div className="block h-8 w-14 rounded-full bg-black"></div>
 					<div
-						className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
+						className={`absolute left-1 top-1 flex size-6 items-center justify-center rounded-full bg-white transition ${
 							enabled && '!right-1 !translate-x-full'
 						}`}
 					></div>
diff --git a/frontend/src/components/dashboard/SwitcherOne.tsx b/frontend/src/components/dashboard/SwitcherOne.tsx
index 32a8dcc5..da533357 100644
--- a/frontend/src/components/dashboard/SwitcherOne.tsx
+++ b/frontend/src/components/dashboard/SwitcherOne.tsx
@@ -17,7 +17,7 @@ const SwitcherOne = () => {
 					/>
 					<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
 					<div
-						className={`absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${
+						className={`absolute left-1 top-1 size-6 rounded-full bg-white transition ${
 							enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
 						}`}
 					></div>
diff --git a/frontend/src/components/dashboard/SwitcherThree.tsx b/frontend/src/components/dashboard/SwitcherThree.tsx
index 9e80ff6b..0da68a62 100644
--- a/frontend/src/components/dashboard/SwitcherThree.tsx
+++ b/frontend/src/components/dashboard/SwitcherThree.tsx
@@ -17,7 +17,7 @@ const SwitcherThree = () => {
 					/>
 					<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
 					<div
-						className={`dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
+						className={`dot absolute left-1 top-1 flex size-6 items-center justify-center rounded-full bg-white transition ${
 							enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
 						}`}
 					>
@@ -40,7 +40,7 @@ const SwitcherThree = () => {
 						</span>
 						<span className={`${enabled && 'hidden'}`}>
 							<svg
-								className="h-4 w-4 stroke-current"
+								className="size-4 stroke-current"
 								fill="none"
 								viewBox="0 0 24 24"
 								xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/dashboard/SwitcherTwo.tsx b/frontend/src/components/dashboard/SwitcherTwo.tsx
index 4d694e86..88ecb112 100644
--- a/frontend/src/components/dashboard/SwitcherTwo.tsx
+++ b/frontend/src/components/dashboard/SwitcherTwo.tsx
@@ -17,7 +17,7 @@ const SwitcherTwo = () => {
 					/>
 					<div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
 					<div
-						className={`dot absolute -top-1 left-0 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${
+						className={`dot absolute -top-1 left-0 size-7 rounded-full bg-white shadow-switch-1 transition ${
 							enabled && '!right-0 !translate-x-full !bg-primary dark:!bg-white'
 						}`}
 					></div>
diff --git a/frontend/src/pages.disabled/dashboard/index.tsx b/frontend/src/pages.disabled/dashboard/index.tsx
index 76b49d2c..67291c99 100644
--- a/frontend/src/pages.disabled/dashboard/index.tsx
+++ b/frontend/src/pages.disabled/dashboard/index.tsx
@@ -41,7 +41,7 @@ const RootDashboard = () => {
 					id="preloader"
 					className="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-gray-900"
 				>
-					<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
+					<div className="size-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
 				</div>
 			) : (
 				<DefaultLayout>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 37ff32ea..904276aa 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -40,7 +40,7 @@ const Index = () => {
 							Get started
 							<svg
 								aria-hidden="true"
-								className="-mr-1 ml-2 h-5 w-5"
+								className="-mr-1 ml-2 size-5"
 								fill="currentColor"
 								viewBox="0 0 20 20"
 								xmlns="http://www.w3.org/2000/svg"