diff --git a/packages/DApp/src/App.tsx b/packages/DApp/src/App.tsx
index 004fdb8..38ebdfc 100644
--- a/packages/DApp/src/App.tsx
+++ b/packages/DApp/src/App.tsx
@@ -33,6 +33,7 @@ const Page = styled.div`
`
const PageContent = styled.div`
height: 100%;
- max-width: 936px;
+ max-width: 996px;
+ padding: 0 30px;
margin: 0 auto;
`
diff --git a/packages/DApp/src/assets/images/curve-shape.svg b/packages/DApp/src/assets/images/curve-shape.svg
new file mode 100644
index 0000000..6ee72f5
--- /dev/null
+++ b/packages/DApp/src/assets/images/curve-shape.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/DApp/src/components/Card.tsx b/packages/DApp/src/components/Card.tsx
index e5318de..8c05b71 100644
--- a/packages/DApp/src/components/Card.tsx
+++ b/packages/DApp/src/components/Card.tsx
@@ -196,7 +196,7 @@ export const CardVote = ({ community, hideModalFunction }: CardVoteProps) => {
export const Card = styled.div`
display: flex;
align-items: stretch;
- margin: 20px;
+ margin: 24px 0;
`
export const CardCommunityWrap = styled.div`
width: 50%;
diff --git a/packages/DApp/src/components/PageBar.tsx b/packages/DApp/src/components/PageBar.tsx
index a746a52..cde2f0b 100644
--- a/packages/DApp/src/components/PageBar.tsx
+++ b/packages/DApp/src/components/PageBar.tsx
@@ -3,5 +3,5 @@ import styled from 'styled-components'
export const PageBar = styled.div`
display: flex;
justify-content: space-between;
- margin: 0 20px;
+ margin-bottom: 16px;
`
diff --git a/packages/DApp/src/components/WeeklyFeature.tsx b/packages/DApp/src/components/WeeklyFeature.tsx
new file mode 100644
index 0000000..40c089b
--- /dev/null
+++ b/packages/DApp/src/components/WeeklyFeature.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import styled from 'styled-components'
+import backgroundImage from '../assets/images/curve-shape.svg'
+import { Colors } from '../constants/styles'
+
+export const WeeklyFeature = ({ endDate }: { endDate: Date }) => {
+ const today = new Date()
+ const differenceInTime = endDate.getTime() - today.getTime()
+ if (differenceInTime < 1) return null
+ const daysLeft = Math.ceil(differenceInTime / (1000 * 3600 * 24))
+
+ return (
+
+ ⭐ Weekly Feature vote:
+ {daysLeft}
+ {daysLeft.toString().endsWith('1') ? 'day ' : ' days'} left
+
+ )
+}
+
+const View = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 16px 80px;
+ background: #4b67e0 url(${backgroundImage}) center no-repeat;
+ background-size: cover;
+ border-radius: 12px;
+ font-size: 17px;
+ font-weight: 700;
+ line-height: 18px;
+ text-align: center;
+ color: ${Colors.White};
+
+ span {
+ font-weight: 400;
+ margin-right: 6px;
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ img {
+ margin-right: 8px;
+ }
+`
diff --git a/packages/DApp/src/components/directory/DirectoryCards.tsx b/packages/DApp/src/components/directory/DirectoryCards.tsx
index c3c0d73..34956eb 100644
--- a/packages/DApp/src/components/directory/DirectoryCards.tsx
+++ b/packages/DApp/src/components/directory/DirectoryCards.tsx
@@ -12,6 +12,7 @@ import { DirectorySortingOptions } from '../../constants/SortingOptions'
import { SpinnerIcon } from '../../assets/animatedIcons/spinnerIcon'
import { useConfig } from '../../providers/config'
import { Colors } from '../../constants/styles'
+import { WeeklyFeature } from '../WeeklyFeature'
interface DirectoryCardProps {
community: CommunityDetail
@@ -29,7 +30,7 @@ function DirectoryCard({ community }: DirectoryCardProps) {
return (
- {' '}
+
@@ -58,7 +59,7 @@ export function DirectoryCards() {
})
return (
-
+ <>
+
{communities.map((community) => (
@@ -78,7 +80,7 @@ export function DirectoryCards() {
)}
-
+ >
)
}