1  import React from 'react'
  2  import styled from 'styled-components'
  3  import { Colors } from '../constants/styles'
  4  
  5  export function Rules() {
  6    return (
  7      <VotingRules>
  8        <RulesHeading>Voting rules</RulesHeading>
  9        <Rule>
 10          <RuleIcon>🗳️</RuleIcon>
 11          <RuleText>
 12            SNT holders can use their SNT voting power to vote for or against addition or removal of communities in the
 13            directory.
 14          </RuleText>
 15        </Rule>
 16        <Rule>
 17          <RuleIcon>👍</RuleIcon>
 18          <RuleText>
 19            If a vote to add ends in favour of a community, the community will be added to the directory. Otherwise, a new
 20            vote for the addition of that community can be started after 30 days.
 21          </RuleText>
 22        </Rule>
 23        <Rule>
 24          <RuleIcon>🗑️</RuleIcon>
 25          <RuleText>
 26            If a vote to remove a community ends in favour of the removal, the community will disappear from the
 27            directory. Otherwise, a new vote for removal can be submitted after about 30 days.
 28          </RuleText>
 29        </Rule>
 30        <Rule>
 31          <RuleIcon>⏳</RuleIcon>
 32          <RuleText>
 33            Each vote lasts for two weeks. When the voting period ends, the verification period starts, someone has to
 34            cast the votes.
 35          </RuleText>
 36        </Rule>
 37        <Rule>
 38          <RuleIcon>⏳</RuleIcon>
 39          <RuleText>
 40            Each verification period lasts for one week. When the verification ends, someone has to finalize the vote with
 41            a finalization transaction.
 42          </RuleText>
 43        </Rule>
 44        <Rule>
 45          <RuleIcon>⭐</RuleIcon>
 46          <RuleText>
 47            There is an always ongoing vote for which communities from the directory should appear in the Weekly Featured
 48            section. Every week, five communities with the most votes are added to the section, replacing the five
 49            communities that were featured the previous week. After the community leaves Weekly Featured, it cannot get
 50            there again for three weeks.
 51          </RuleText>
 52        </Rule>
 53      </VotingRules>
 54    )
 55  }
 56  
 57  const VotingRules = styled.div`
 58    max-width: 648px;
 59    padding: 24px;
 60    margin: 0 auto;
 61    background-color: ${Colors.VioletSecondaryLight};
 62    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
 63    border-radius: 6px;
 64  
 65    @media (max-width: 768px) {
 66      max-width: 524px;
 67    }
 68  
 69    @media (max-width: 600px) {
 70      padding: 182px 16px 16px;
 71      background-color: unset;
 72      border: none;
 73      box-shadow: none;
 74    }
 75  `
 76  
 77  const RulesHeading = styled.p`
 78    font-weight: bold;
 79    font-size: 22px;
 80    line-height: 24px;
 81    margin-bottom: 24px;
 82  
 83    @media (max-width: 600px) {
 84      font-size: 17px;
 85    }
 86  `
 87  
 88  const Rule = styled.div`
 89    display: flex;
 90    justify-content: space-between;
 91  
 92    &:not(:last-child) {
 93      margin-bottom: 16px;
 94    }
 95  `
 96  
 97  const RuleIcon = styled.p`
 98    font-size: 24px;
 99    line-height: 30px;
100    margin-right: 16px;
101  }
102  
103  `
104  
105  const RuleText = styled.p`
106    line-height: 22px;
107  
108    @media (max-width: 600px) {
109      font-size: 13px;
110      line-height: 18px;
111  `