Add weekly feature bar (#65)

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

packages/DApp/src/assets/images/curve-shape.svg

@@ -0,0 +1,3 @@
+<svg width="936" height="54" viewBox="0 0 936 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.1" d="M403 41C250.818 51.322 5.27655 12.8728 -80.5 5.5L-1.5 69H928.716L953 -37.5C544.228 -9.32519 593.227 28.0975 403 41Z" fill="white"/>
+</svg>

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

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

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 (
+    <View>
+      ⭐ <span>Weekly Feature vote:</span>
+      {daysLeft}&nbsp;
+      {daysLeft.toString().endsWith('1') ? 'day ' : ' days'} left
+    </View>
+  )
+}
+
+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;
+  }
+`

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 (
     <Card>
       <CardCommunityWrap>
-        {' '}
+        &nbsp;
         <CardCommunity community={community} showRemoveButton={true} />
       </CardCommunityWrap>
       <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
@@ -58,7 +59,7 @@ export function DirectoryCards() {
   })
 
   return (
-    <div>
+    <>
       <PageBar>
         <Search
           type="text"
@@ -68,6 +69,7 @@ export function DirectoryCards() {
         />
         <FilterList value={sortedBy} setValue={setSortedBy} options={DirectorySortingOptions} />
       </PageBar>
+      <WeeklyFeature endDate={new Date('07/26/2021')} />
       <Voting>
         {communities.map((community) => (
           <DirectoryCard key={community.publicKey} community={community} />
@@ -78,7 +80,7 @@ export function DirectoryCards() {
           <SpinnerIcon />
         </IconWrapper>
       )}
-    </div>
+    </>
   )
 }