Add and improve card styles (#49)

* Align tags

* Add CardLogo wrap

* Add green dot to Account

* Change CardVote layout

packages/DApp/src/components/Card.tsx

@@ -67,7 +67,11 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
         </Modal>
       )}
       <Community>
+        <CardLogoWrap>
+          {' '}
           <CardLogo src={community.icon} alt={`${community.name} logo`} />
+        </CardLogoWrap>
+
         <CommunityInfo>
           <CardTop>
             <CardHeading>{community.name}</CardHeading>
@@ -131,6 +135,7 @@ export const CardVote = ({ community }: CardVoteProps) => {
       ) : (
         <CardHeading>{voteConstants.question}</CardHeading>
       )}
+      <div>
         <VoteChart vote={vote} voteWinner={winner} />
 
         {winner ? (
@@ -172,6 +177,7 @@ export const CardVote = ({ community }: CardVoteProps) => {
             </VoteBtn>
           </VotesBtns>
         )}
+      </div>
     </CardVoteBlock>
   )
 }
@@ -204,12 +210,18 @@ const CommunityInfo = styled.div`
   flex-direction: column;
 `
 
+const CardLogoWrap = styled.div`
+  width: 64px !important;
+  height: 64px !important;
+  object-fit: cover;
+  margin-right: 16px;
+`
 const CardLogo = styled.img`
   width: 64px !important;
   height: 64px !important;
   border-radius: 50%;
-  margin-right: 16px;
 `
+
 export const CardHeading = styled.h2`
   font-weight: bold;
   font-size: 17px;
@@ -246,7 +258,7 @@ const CardTags = styled.div`
   flex-wrap: wrap;
 `
 const Tag = styled.div`
-  margin: 5px;
+  margin: 0 8px 8px 0;
   padding: 0 10px;
   border: 1px solid ${Colors.VioletDark};
   box-sizing: border-box;

packages/DApp/src/components/top/TopBar.tsx

@@ -118,12 +118,26 @@ const ButtonConnect = styled(StatusConnectButton)`
   padding: 10px 27px;
 `
 const Account = styled.button`
+  position: relative;
   font-weight: 500;
   font-size: 13px;
   line-height: 22px;
   color: ${Colors.Black};
-  padding: 11px 12px 11px 17px;
+  padding: 11px 12px 11px 28px;
   background: ${Colors.White};
   border: 1px solid ${Colors.GrayBorder};
   border-radius: 21px;
+
+  &::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    top: 50%;
+    left: 17px;
+    transform: translate(-50%, -50%);
+    background-color: ${Colors.Green};
+    bacground-position: center;
+    border-radius: 50%;
+  }
 `

packages/DApp/src/constants/styles.ts

@@ -17,6 +17,7 @@ export const Colors = {
   GreyTextDisabled: '#B1B1B1',
   GrayLight: '#FBFCFE',
   GrayBorder: '#EEF2F5',
+  Green: '#4EBC60',
   ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)',
 }