Add feature card (#11)

* Add feature card

* Change card feature styles

* Add ongoing vote style

* Add time left style

* Change timeleft & sum

* Add btn disabled style

* Refactor Cards

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>

src/assets/images/arrowRight.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="#8C21BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 5L19 12L12 19" stroke="#8C21BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Button.tsx

@@ -40,5 +40,6 @@ export const ButtonSecondary = styled(Button)`
 
   &:disabled {
     background: ${Colors.GrayDisabledLight};
+    filter: grayscale(1);
   }
 `

src/components/Card.tsx

@@ -4,6 +4,7 @@ import { Colors } from '../constants/styles'
 import { ButtonSecondary } from '../components/Button'
 import externalIcon from '../assets/images/ext.svg'
 import indicatorIcon from '../assets/images/indicator.svg'
+import rightIcon from '../assets/images/arrowRight.svg'
 
 interface CardCommunityProps {
   img: string
@@ -132,6 +133,36 @@ function calculateWidth(votesFor: number, votesAgainst: number) {
   return (100 * votesAgainst) / (votesFor + votesAgainst)
 }
 
+interface CardFeatureProps {
+  heading: string
+  text: string
+  icon: string
+  sum?: number
+  timeLeft?: string
+  voting?: boolean
+}
+
+export const CardFeature = ({ heading, text, icon, sum, timeLeft, voting }: CardFeatureProps) => (
+  <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
+    <FeatureTop>
+      <CardHeading>{heading}</CardHeading>
+      {voting && <CardLinkFeature>Ongoing vote for removal</CardLinkFeature>}
+    </FeatureTop>
+
+    <FeatureVote>
+      <p>{text}</p>
+      <p style={{ fontSize: '24px' }}>{icon}</p>
+
+      {timeLeft && <span>{timeLeft}</span>}
+
+      {sum && <span style={{ fontWeight: 'normal' }}>{addCommas(sum)} SNT</span>}
+    </FeatureVote>
+    <FeatureBtn disabled={Boolean(timeLeft)}>
+      Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
+    </FeatureBtn>
+  </CardVoteBlock>
+)
+
 export const Card = styled.div`
   display: flex;
   align-items: center;
@@ -230,6 +261,26 @@ const CardLinkInternal = styled.a`
     color: ${Colors.VioletDark};
   }
 `
+
+const CardLinkFeature = styled(CardLinkInternal)`
+  padding-right: 28px;
+  font-size: 12px;
+  line-height: 20px;
+  position: relative;
+
+  &::after {
+    content: '';
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    background-image: url(${rightIcon});
+    background-size: cover;
+  }
+`
+
 const CardVoteBlock = styled.div`
   width: 50%;
   z-index: 2;
@@ -332,3 +383,33 @@ const VoteBtn = styled(ButtonSecondary)`
 const VoteBtnFinal = styled(VoteBtn)`
   width: 100%;
 `
+
+const FeatureTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const FeatureBtn = styled(VoteBtn)`
+  width: 100%;
+`
+const FeatureVote = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 45px auto 32px;
+  max-width: 290px;
+  text-align: center;
+
+  & > p {
+    font-size: 17px;
+    line-height: 18px;
+    margin-bottom: 8px;
+  }
+
+  & > span {
+    font-weight: bold;
+    font-size: 15px;
+    line-height: 22px;
+  }
+`

src/pages/Directory.tsx

@@ -1,17 +1,46 @@
 import React from 'react'
 import { ConnectButton, InfoWrap, PageInfo } from '../components/PageInfo'
 import { useEthers } from '@usedapp/core'
+import { Card, CardCommunity, CardFeature } from '../components/Card'
+import styled from 'styled-components'
 
 export function Directory() {
   const { account } = useEthers()
   return (
-    <InfoWrap>
-      <PageInfo
-        heading="Current directory"
-        text="Vote on your favourite communities being included in 
+    <div>
+      <InfoWrap>
+        <PageInfo
+          heading="Current directory"
+          text="Vote on your favourite communities being included in 
       Weekly Featured Communities"
-      />
-      {!account && <ConnectButton />}
-    </InfoWrap>
+        />
+        {!account && <ConnectButton />}
+      </InfoWrap>
+      <Voting>
+        <Card>
+          <CardCommunity
+            img="https://www.cryptokitties.co/icons/logo.svg"
+            heading="CryptoKitties"
+            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat."
+            tags={['nffts']}
+          />
+          <CardFeature
+            heading="Feature this community?"
+            text="Weekly Feature vote"
+            // text="This community has to wait until it can be featured again"
+            icon="⭐"
+            // icon="⏳"
+            sum={16740235}
+            voting={true}
+            // timeLeft='2 weeks left'
+          />
+        </Card>
+      </Voting>
+    </div>
   )
 }
+
+const Voting = styled.div`
+  display: flex;
+  flex-direction: column;
+`