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 (
-
+
Project Name {index}
-
+
)
}
+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 (
{isVotingTime ? 'Projects' : 'Voting result'}
-
-
- {isVotingTime
- ? `Total of ${numberOfProjects} projects. Only 1 vote per person and you can’t vote on your project.`
- : `${numberOfVoters} people voted.`}
-
-
- {isVotingTime
- ? `Voting ends: hh:mm:ss`
- : `Voting starts at: ${startMonth} ${startDay}, ${startHour}. Close at: ${endMonth} ${endDay}, ${endHour}.`}
-
-
- {isVotingTime
- ? 'Voting started. LFG'
- : isResultTime &&
- 'You already voted. Let’s wait for results.'}
-
-
+
+ {isVotingTime
+ ? `Total of ${numberOfProjects} projects. Only 1 vote per person and you can’t vote on your project.`
+ : `${numberOfVoters} people voted.`}
+
+
+ {isVotingTime
+ ? `Voting ends: hh:mm:ss`
+ : `Voting starts at: ${startMonth} ${startDay}, ${startHour}. Close at: ${endMonth} ${endDay}, ${endHour}.`}
+
+
+ {isVotingTime
+ ? 'Voting started. LFG'
+ : isResultTime &&
+ 'You already voted. Let’s wait for results.'}
+
)
}
@@ -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 Vote
+ return Vote
}
+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 (
-
- {projects.map((project, i) => (
-
- ))}
+
+
+ {projects.map((project, i) => (
+
+ ))}
+
)
}
+const Container = styled.div`
+ max-width: 70%;
+ margin: auto;
+`
+
export default Projects