From 3b67a4abe89d51ce32ce5c004fdacb1e6d37cda2 Mon Sep 17 00:00:00 2001
From: NicoSerranoP <nnicosp@hotmail.com>
Date: Sat, 17 Jun 2023 14:40:03 -0400
Subject: [PATCH] frontend(feat): dynamic header + WIP projects

---
 .../frontend/src/components/projects/Row.tsx  | 13 +++++-
 .../components/projects/TopDescription.tsx    | 40 ++++++++-----------
 .../src/components/projects/VoteSection.tsx   | 11 ++++-
 packages/frontend/src/pages/Projects.tsx      | 16 ++++++--
 4 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/projects/Row.tsx b/packages/frontend/src/components/projects/Row.tsx
index 36aaaf3..f45d41d 100644
--- a/packages/frontend/src/components/projects/Row.tsx
+++ b/packages/frontend/src/components/projects/Row.tsx
@@ -1,3 +1,4 @@
+import { styled } from 'styled-components'
 import VoteSection from './VoteSection'
 
 type Props = {
@@ -7,11 +8,19 @@ type Props = {
 
 const Row = ({ index }: Props) => {
     return (
-        <div>
+        <Container>
             <h3>Project Name {index}</h3>
             <VoteSection />
-        </div>
+        </Container>
     )
 }
 
+const Container = styled.div`
+    display: flex;
+    justify-content: center;
+    border: 3px solid #fff294;
+    margin-block: 15px;
+    gap: 12px;
+`
+
 export default Row
diff --git a/packages/frontend/src/components/projects/TopDescription.tsx b/packages/frontend/src/components/projects/TopDescription.tsx
index 94d07ee..4159d68 100644
--- a/packages/frontend/src/components/projects/TopDescription.tsx
+++ b/packages/frontend/src/components/projects/TopDescription.tsx
@@ -21,24 +21,22 @@ const TopDescription = () => {
     return (
         <Container>
             <Title>{isVotingTime ? 'Projects' : 'Voting result'}</Title>
-            <BlockText>
-                <Description>
-                    {isVotingTime
-                        ? `Total of ${numberOfProjects} projects. Only 1 vote per person and you can’t vote on your project.`
-                        : `${numberOfVoters} people voted.`}
-                </Description>
-                <Highlight>
-                    {isVotingTime
-                        ? `Voting ends: hh:mm:ss`
-                        : `Voting starts at: ${startMonth} ${startDay}, ${startHour}. Close at: ${endMonth} ${endDay}, ${endHour}.`}
-                </Highlight>
-                <BlockDescription>
-                    {isVotingTime
-                        ? 'Voting started. LFG'
-                        : isResultTime &&
-                          'You already voted. Let’s wait for results.'}
-                </BlockDescription>
-            </BlockText>
+            <Description>
+                {isVotingTime
+                    ? `Total of ${numberOfProjects} projects. Only 1 vote per person and you can’t vote on your project.`
+                    : `${numberOfVoters} people voted.`}
+            </Description>
+            <Highlight>
+                {isVotingTime
+                    ? `Voting ends: hh:mm:ss`
+                    : `Voting starts at: ${startMonth} ${startDay}, ${startHour}. Close at: ${endMonth} ${endDay}, ${endHour}.`}
+            </Highlight>
+            <BlockDescription>
+                {isVotingTime
+                    ? 'Voting started. LFG'
+                    : isResultTime &&
+                      'You already voted. Let’s wait for results.'}
+            </BlockDescription>
         </Container>
     )
 }
@@ -48,13 +46,7 @@ const Container = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`
-
-const BlockText = styled.div`
-    max-width: 70%;
     text-align: center;
-    display: flex;
-    flex-direction: column;
     gap: 6px;
 `
 
diff --git a/packages/frontend/src/components/projects/VoteSection.tsx b/packages/frontend/src/components/projects/VoteSection.tsx
index 9e865cc..e1fcc5f 100644
--- a/packages/frontend/src/components/projects/VoteSection.tsx
+++ b/packages/frontend/src/components/projects/VoteSection.tsx
@@ -1,5 +1,14 @@
+import { styled } from 'styled-components'
+
 const VoteSection = () => {
-    return <div>Vote</div>
+    return <Container>Vote</Container>
 }
 
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+`
+
 export default VoteSection
diff --git a/packages/frontend/src/pages/Projects.tsx b/packages/frontend/src/pages/Projects.tsx
index cd9b3ff..c577e3c 100644
--- a/packages/frontend/src/pages/Projects.tsx
+++ b/packages/frontend/src/pages/Projects.tsx
@@ -1,3 +1,4 @@
+import { styled } from 'styled-components'
 import Header from '../components/Header'
 import Row from '../components/projects/Row'
 import TopDescription from '../components/projects/TopDescription'
@@ -8,12 +9,19 @@ const Projects = () => {
     return (
         <div>
             <Header />
-            <TopDescription />
-            {projects.map((project, i) => (
-                <Row key={'project-' + i} index={i} project={project}></Row>
-            ))}
+            <Container>
+                <TopDescription />
+                {projects.map((project, i) => (
+                    <Row key={'project-' + i} index={i} project={project}></Row>
+                ))}
+            </Container>
         </div>
     )
 }
 
+const Container = styled.div`
+    max-width: 70%;
+    margin: auto;
+`
+
 export default Projects