Merge pull request #36 from chingu-x/feature/responsive-design-ideati…

…on-page Feature/Ideation Page layout
chingu-x · Oct 6, 2023 · 1f07620 · 1f07620
2 parents afe4a19 + db84c24
commit 1f07620
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 32 deletions.
diff --git a/public/img/ideation_banner.png b/public/img/ideation_banner.png
diff --git a/public/img/ideation_banner.svg b/public/img/ideation_banner.svg
diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx
@@ -6,23 +6,25 @@ interface ContributionCardProps {
     name: string;
     avatar?: string;
   };
+  className?: string
+
 }
 
-function ContributionCard({ own_idea, contributed_by }: ContributionCardProps) {
+function ContributionCard({ own_idea, contributed_by, className }: ContributionCardProps) {
   return (
-    <div className="card w-1/3 h-fit bg-secondary-content rounded-lg">
+    <div className={`card max-w-[200px] w-full max-[1919px]:min-w-[160px] h-fit bg-secondary-content rounded-lg ${className}`}>
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h1 className="text-base font-medium text-base-300">
-          Contributed By
-        </h1>
-        <Avatar width={64} height={64} image={contributed_by.avatar} />
-        <h2 className="text-xl font-semibold text-base-300">
-          {contributed_by.name}
-        </h2>
+        <h1 className="text-base font-medium text-base-300">Contributed By</h1>
+        <div className="flex bg-base-100 items-center rounded-[100px] h-[25px] gap-x-2 py-[3px] px-[9px]">
+          <Avatar width={16} height={16} image={contributed_by.avatar} />
+          <h2 className="text-base font-medium text-base-300 leading-[19px]">
+            {contributed_by.name}
+          </h2>
+        </div>
         {own_idea ? (
           <Button
             title="Vote"
-            customClassName="w-full btn-secondary text-base-300 "
+            customClassName="w-full btn-secondary text-base-300 capitalize"
           >
             Edit Project
           </Button>

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -3,8 +3,17 @@ import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-full h-[190px] bg-base-100 flex flex-row items-center px-10">
-      <VoteDescriptionCard />
+    <div className="card w-full min-h-[190px] max-[1919px]:min-h-[280px] bg-base-100 flex flex-row items-center px-10">
+      <div className="flex flex-col justify-between h-full py-10 min-[1920px]:hidden">
+        <VoteDescriptionCard />
+        <Button
+          title="Create Project"
+          customClassName="max-[1920px]:w-[160px] btn-primary text-base-300 capitalize"
+        >
+          Create Project
+        </Button>
+      </div>
+      <VoteDescriptionCard className="hidden min-[1920px]:block" />
       <section className="card-body gap-y-7 px-20">
         <h2 className="text-xl font-semibold text-base-300">
           What is your Voyage project idea & vision?
@@ -17,7 +26,7 @@ function CreateIdeationContainer() {
       </section>
       <Button
         title="Create Project"
-        customClassName="w-1/7 btn-primary text-base-300 normal-case"
+        customClassName="max-w-[200px] w-full btn-primary text-base-300 capitalize hidden min-[1920px]:block"
       >
         Create Project
       </Button>

diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
@@ -10,24 +10,26 @@ function IdeationContainer({
   contributed_by,
 }: Ideation) {
   return (
-    <div className="card w-full h-[457px] bg-base-200 flex flex-row items-start p-10 gap-x-20">
-      <VoteCard users={users} voted={voted} />
+    <div className="card w-full bg-base-200 flex flex-row items-start p-10 gap-x-20">
+      <div className="flex flex-col justify-between gap-y-[24px] min-[1920px]:hidden">
+        <VoteCard users={users} voted={voted} />
+        <ContributionCard own_idea={own_idea} contributed_by={contributed_by} />
+      </div>
+      <VoteCard users={users} voted={voted} className="hidden min-[1920px]:block" />
       <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-base-300">{title}</h2>
         <h3 className="text-base text-neutral-focus font-semibold">
           Project Idea
         </h3>
-        <p className="text-base text-base-300 font-medium">
-          {project_idea}
-        </p>
+        <p className="text-base text-base-300 font-medium">{project_idea}</p>
         <h3 className="text-base text-neutral-focus font-semibold">
           Vision Statement
         </h3>
         <p className="text-base text-base-300 font-medium">
           {vision_statement}
         </p>
       </section>
-      <ContributionCard own_idea={own_idea} contributed_by={contributed_by} />
+      <ContributionCard own_idea={own_idea} contributed_by={contributed_by} className="hidden min-[1920px]:block" />
     </div>
   );
 }

diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
@@ -3,15 +3,14 @@ import { Avatar, Button } from "@/components";
 interface VoteCardProps {
   users: string[];
   voted: boolean;
+  className?: string;
 }
 
-function VoteCard({ users, voted }: VoteCardProps) {
+function VoteCard({ users, voted, className }: VoteCardProps) {
   return (
-    <div className="card w-1/3 h-fit bg-primary-content rounded-lg">
+    <div className={`card max-w-[200px] max-[1919px]:min-w-[160px] w-full h-fit bg-primary-content rounded-lg ${className}`}>
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h1 className="text-3xl font-semibold text-base-300">
-          {users.length}
-        </h1>
+        <h1 className="text-3xl font-semibold text-base-300">{users.length}</h1>
         <h2 className="text-xl font-semibold text-base-300">{`Vote${
           users.length > 1 ? "s" : ""
         }`}</h2>
@@ -22,7 +21,7 @@ function VoteCard({ users, voted }: VoteCardProps) {
         </div>
         <Button
           title="Vote"
-          customClassName="w-full btn-primary text-base-300 disabled:bg-primary-focus disabled:text-base-200"
+          customClassName="w-full btn-primary text-base-300 disabled:bg-primary-focus disabled:text-base-200 capitalize"
           disabled={voted}
         >
           {voted ? "Voted" : "Vote"}

diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -1,9 +1,13 @@
-function VoteDescriptionCard() {
+interface VoteDescriptionCardProps {
+  className?: string
+}
+
+function VoteDescriptionCard({ className }: VoteDescriptionCardProps) {
   return (
-    <div className="card w-1/3 h-32 bg-primary-content rounded-lg">
+    <div className={`card max-w-[200px] w-full max-[1919px]:max-w-[160px] h-28 max-[1919px]:h-32 bg-primary-content rounded-lg ${className}`}>
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h2 className="text-xl font-semibold text-base-300">Votes</h2>
-        <p className="text-base font-medium text-base-300 text-left">
+        <h2 className="text-xl font-semibold text-base-300 leading-[24px]">Votes</h2>
+        <p className="text-base font-medium text-base-300 text-left leading-[19px]">
           Vote for the projects you are interested in.
         </p>
       </section>

diff --git a/src/app/ideation/components/fixtures/ideation.ts b/src/app/ideation/components/fixtures/ideation.ts
@@ -34,7 +34,7 @@ export const ideation = [
           future and build wealth through real estate investments.`,
     users: ["Test User 1", "Test User 2", "Test User 3"],
     contributed_by: {
-      name: "Test User 1",
+      name: "@User 1",
       avatar:
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm3RFDZM21teuCMFYx_AROjt-AzUwDBROFww&usqp=CAU",
     },
@@ -54,7 +54,7 @@ export const ideation = [
     great way for families to save money by swapping gently used toys instead of buying new ones.`,
     users: ["Test User 1", "Test User 2"],
     contributed_by: {
-      name: "Test User 2",
+      name: "@User 2",
     },
     voted: false,
     own_idea: false,

diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
@@ -5,7 +5,7 @@ function IdeationPage() {
   return (
     <>
       <Banner
-        image="/img/ideation_banner.png"
+        image="/img/ideation_banner.svg"
         alt="ideation_banner"
         title="Ideation"
         description="Okay, time to put on your thinking caps and channel your inner creativity! What kind of amazing, mind-blowing project idea do you have that will make SpaceX jealous? Let's hear it!"