refactor: remove uneed wrappers

Author: elvisdragonmao

src/layouts/AdminLayout.module.css

@@ -7,7 +7,6 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	overflow-y: auto; /* scroll  */
 }
 
 .content {

src/layouts/AdminLayout.tsx

@@ -13,7 +13,7 @@ export const AdminLayout = ({ children }: AdminLayoutProps) => {
 				<AdminNav />
 				<main className={styles.main}>
 					<div className={styles.content}>{children}</div>
-					<Footer></Footer>
+					<Footer />
 				</main>
 			</div>
 		</>

src/layouts/UserLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Footer } from "../shared/components/Footer/Footer";
 import styles from "./UserLayout.module.css";
 
 interface UserLayoutProps {
@@ -7,8 +8,11 @@ interface UserLayoutProps {
 
 export const UserLayout = ({ children }: UserLayoutProps) => {
 	return (
-		<div className={styles.container}>
-			<div className={styles.content}>{children}</div>
-		</div>
+		<>
+			<div className={styles.container}>
+				<div className={styles.content}>{children}</div>
+			</div>
+			<Footer />
+		</>
 	);
 };

src/shared/components/Footer/Footer.module.css

@@ -1,49 +1,25 @@
 .footer {
 	background-color: var(--background-color-primary);
 	border-top: solid 1px var(--background-color-tertiary);
-	outline: 1px solid var(--background-color-tertiary);
+}
+
+.footer a {
+	color: inherit;
+	text-decoration: underline;
+	text-underline-offset: 0.2rem;
 }
 
 .inner {
 	display: flex;
-	justify-content: space-between;
 	flex-wrap: wrap;
 	align-items: center;
 	max-width: 1200px;
+	width: 100%;
 	margin: 0 auto;
-	padding: 0.75rem clamp(12px, 2.5vw, 24px);
-	gap: 12px;
-}
-.inner a {
-	color: var(--color-body);
-}
-
-.left {
-	font-size: 1rem;
-	color: var(--color-body);
-}
-
-.right {
-	display: flex;
+	padding: 1rem 1.5rem;
 	gap: 1rem;
-	color: var(--color-body);
-}
-@media (max-width: 400px) {
-	.footer {
-		padding: 0px;
-	}
-	.inner {
-		justify-content: center;
-	}
-	.left,
-	.right {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-	}
 }
-.link {
-	text-decoration: underline;
-	text-decoration-color: var(--color-body);
-	text-underline-offset: 0.2rem;
+
+.credit {
+	flex-grow: 1;
 }

src/shared/components/Footer/Footer.tsx

@@ -5,25 +5,18 @@ export const Footer = () => {
 	return (
 		<footer className={styles.footer}>
 			<div className={styles.inner}>
-				<div className={styles.left}>
-					<p>
-						Core System by{" "}
-						<a href="https://sdc-nycu.notion.site/welcome" className={styles.link}>
-							NYCU SDC
-						</a>
-					</p>
-				</div>
-				<div className={styles.right}>
-					<a href="https://github.com" target="_blank" rel="noopener noreferrer">
-						<Github size={20} />
-					</a>
-					<a href="https://instagram.com/nycu_sdc" target="_blank" rel="noopener noreferrer">
-						<Instagram size={20} />
-					</a>
-					<a href="https://www.facebook.com/NYCUSDC/" target="_blank" rel="noopener noreferrer">
-						<Facebook size={20} />
-					</a>
-				</div>
+				<p className={styles.credit}>
+					Core System by <a href="https://sdc-nycu.notion.site/welcome">NYCU SDC</a>
+				</p>
+				<a href="https://github.com" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+					<Github size={20} />
+				</a>
+				<a href="https://instagram.com/nycu_sdc" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+					<Instagram size={20} />
+				</a>
+				<a href="https://www.facebook.com/NYCUSDC/" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+					<Facebook size={20} />
+				</a>
 			</div>
 		</footer>
 	);