frontend(feat): dynamic header + WIP projects

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

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;
 `
 

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

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