Merge pull request #27 from chingu-x/fix/alignment-of-page-content

Fix/alignment of page content

src/app/directory/components/TeamTable.tsx

@@ -6,7 +6,7 @@ const currentUserId = "1";
 
 function TeamTable() {
   return (
-    <div className="overflow-x-auto">
+    <div className="w-full">
       <table
         className={`table px-6 pb-10 border-separate border-none bg-primary-content pt-7 ${styles["table"]}`}
       >

src/app/directory/page.tsx

@@ -1,7 +1,18 @@
 import { TeamTable } from ".";
+import { Banner } from "@/components";
 
 function DirectoryPage() {
-  return <TeamTable />;
+  return (
+    <>
+      <Banner
+        image="/img/directory_banner.png"
+        alt="directory_banner"
+        title="Directory"
+        description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!"
+      />
+      <TeamTable />;
+    </>
+  );
 }
 
 export default DirectoryPage;

src/app/ideation/components/CreateIdeationContainer.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+    <div className="card w-full h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
       <VoteDescriptionCard />
       <section className="card-body gap-y-7 px-20">
         <h2 className="text-xl font-semibold text-neutral-focus">

src/app/ideation/components/IdeationContainer.tsx

@@ -10,7 +10,7 @@ function IdeationContainer({
   contributed_by,
 }: Ideation) {
   return (
-    <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
+    <div className="card w-full h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
       <VoteCard users={users} voted={voted} />
       <section className="card-body gap-y-7 p-0 w-[1000px] h-[377px] overflow-y-auto pr-5">
         <h2 className="text-xl font-semibold text-neutral-focus">{title}</h2>

src/app/ideation/page.tsx

@@ -3,7 +3,7 @@ import { Banner } from "@/components";
 
 function IdeationPage() {
   return (
-    <div className="flex flex-col gap-y-9 p-3">
+    <>
       <Banner
         image="/img/ideation_banner.png"
         alt="ideation_banner"
@@ -23,7 +23,7 @@ function IdeationPage() {
           contributed_by={i.contributed_by}
         />
       ))}
-    </div>
+    </>
   );
 }
 

src/app/layout.tsx

@@ -38,7 +38,7 @@ export default function RootLayout({
             <StoreProvider>
               <div className="flex flex-1 overflow-hidden">
                 <Sidebar />
-                <main className="flex flex-col flex-1 overflow-y-auto items-center">
+                <main className="flex flex-col flex-1 overflow-y-auto items-center gap-y-9 p-10 w-full">
                   {children}
                 </main>
               </div>

src/app/tech-stack/components/TechStackContainer.tsx

@@ -1,4 +1,3 @@
-import styles from "./TechStackContainer.module.css";
 import { TechStackCard, techStack } from ".";
 
 export default function TechStackContainer() {
@@ -12,9 +11,7 @@ export default function TechStackContainer() {
     }
   }
   return (
-    <div
-      className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
-    >
+    <div className="card bg-primary-content p-10 w-full">
       <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li

src/app/tech-stack/page.tsx

@@ -1,5 +1,16 @@
 import { TechStackContainer } from ".";
+import { Banner } from "@/components";
 
 export default function TeckStackPage() {
-  return <TechStackContainer />;
+  return (
+    <>
+      <Banner
+        image="/img/tech_stack_banner.png"
+        alt="teck_stack_banner"
+        title="Tech Stack"
+        description="Alright, let's get down to business. We need to figure out which tech stack we're going to use to power this bad boy. Are you a JavaScript junkie, a Python pro, a Java genius, or a Ruby rockstar? Let's vote"
+      />
+      <TechStackContainer />;
+    </>
+  );
 }

src/components/Banner.tsx

@@ -9,8 +9,8 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-[1280px] h-[320px] bg-accent-content flex flex-row px-20">
-      <Image src={image} alt={alt} width={454} height={300} priority={false} />
+    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
+      <Image src={image} alt={alt} width={454} height={200} priority={false} />
       <div className="flex flex-col justify-center pl-24 gap-y-3.5">
         <h3 className="text-3xl font-bold text-black">{title}</h3>
         <p className="text-lg font-medium text-black">{description}</p>