From c1c4dc63f2eba88ecef96889baa9b899f3e28f87 Mon Sep 17 00:00:00 2001
From: Diogo Matos <me@diogogmatos.dev>
Date: Tue, 4 Feb 2025 14:45:27 +0000
Subject: [PATCH] feat: externalize layout paddings

---
 src/app/[lang]/about/departments/page.tsx | 5 ++++-
 src/app/[lang]/about/team/page.tsx        | 5 ++++-
 src/app/[lang]/layout.tsx                 | 2 +-
 src/components/footer.tsx                 | 7 ++++++-
 src/lib/styling.ts                        | 2 ++
 tailwind.config.ts                        | 4 ++++
 6 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/styling.ts

diff --git a/src/app/[lang]/about/departments/page.tsx b/src/app/[lang]/about/departments/page.tsx
index 308be51..1207021 100644
--- a/src/app/[lang]/about/departments/page.tsx
+++ b/src/app/[lang]/about/departments/page.tsx
@@ -4,6 +4,7 @@ import DepartmentCard from "@/components/department-card";
 import AppLink from "@/components/link";
 import PromotionalCard from "@/components/promotional-card";
 import { useDictionary } from "@/contexts/dictionary-provider";
+import { horizontalPadding, verticalPadding } from "@/lib/styling";
 import { CardType, type TeamData } from "@/lib/types";
 import { fetchTeamData } from "@/lib/utils";
 import { useState, useEffect } from "react";
@@ -67,7 +68,9 @@ export default function Departments() {
   ];
 
   return (
-    <main className="flex flex-col gap-8 sm:gap-12">
+    <main
+      className={`flex flex-col gap-8 sm:gap-12 ${horizontalPadding + verticalPadding}`}
+    >
       <div className="flex flex-col gap-4 px-2 md:px-5">
         <AppLink arrow="back" title={dict.button.back} href={"/about"} />
         <h1 className="font-title text-3xl font-medium">
diff --git a/src/app/[lang]/about/team/page.tsx b/src/app/[lang]/about/team/page.tsx
index e8f71bc..b54da31 100644
--- a/src/app/[lang]/about/team/page.tsx
+++ b/src/app/[lang]/about/team/page.tsx
@@ -18,6 +18,7 @@ import Avatar from "@/components/avatar";
 import { useDictionary } from "@/contexts/dictionary-provider";
 import PromotionalCard from "@/components/promotional-card";
 import AppLink from "@/components/link";
+import { horizontalPadding, verticalPadding } from "@/lib/styling";
 
 export default function Team() {
   const [fromDefaultOpen, isFromDefaultOpen] = useState(true);
@@ -59,7 +60,9 @@ export default function Team() {
   };
 
   return (
-    <main className="space-y-8 sm:space-y-12">
+    <main
+      className={`space-y-8 sm:space-y-12 ${horizontalPadding + verticalPadding}`}
+    >
       <div className="flex flex-col gap-4 px-2 md:px-5">
         <AppLink arrow="back" title={dict.button.back} href="/about" />
         <div className="flex items-center justify-between gap-5 sm:justify-normal">
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
index d11cd58..cc79cf5 100644
--- a/src/app/[lang]/layout.tsx
+++ b/src/app/[lang]/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
       >
         <DictionaryProvider lang={lang}>
           <Navbar />
-          <div className="h-full px-5 py-5 md:px-7 md:py-12">{children}</div>
+          <div className="h-full">{children}</div>
           <Footer />
         </DictionaryProvider>
       </body>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 5597376..684e8d7 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -12,7 +12,12 @@ const Footer = () => {
     <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5 pb-16 pt-8 sm:flex-row sm:place-items-end sm:px-7 md:px-20">
       <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-5 sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
         <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
-          <Image src="/logo/cesium.svg" alt="CeSIUM Logo Icon" width={32} height={37} />
+          <Image
+            src="/logo/cesium.svg"
+            alt="CeSIUM Logo Icon"
+            width={32}
+            height={37}
+          />
           <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
           <div className="justify-left flex h-[30px] space-x-5">
             {dict.socials.map((social) => {
diff --git a/src/lib/styling.ts b/src/lib/styling.ts
new file mode 100644
index 0000000..a75f27d
--- /dev/null
+++ b/src/lib/styling.ts
@@ -0,0 +1,2 @@
+export const horizontalPadding = "px-5 md:px-7";
+export const verticalPadding = "py-5 md:py-12";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6d727ba..cda7eb7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -48,6 +48,10 @@ const config: Config = {
     "to-[#ED7950]/20",
     "from-[#03A300]/10",
     "to-[#82E700]/10",
+    "px-5",
+    "py-5",
+    "md:px-7",
+    "md:py-12",
   ],
 };
 export default config;