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>
-        <CardLogo src={community.icon} alt={`${community.name} logo`} />
+        <CardLogoWrap>
+          {' '}
+          <CardLogo src={community.icon} alt={`${community.name} logo`} />
+        </CardLogoWrap>
+
         <CommunityInfo>
           <CardTop>
             <CardHeading>{community.name}</CardHeading>
@@ -131,47 +135,49 @@ export const CardVote = ({ community }: CardVoteProps) => {
       ) : (
         <CardHeading>{voteConstants.question}</CardHeading>
       )}
-      <VoteChart vote={vote} voteWinner={winner} />
+      <div>
+        <VoteChart vote={vote} voteWinner={winner} />
 
-      {winner ? (
-        <VoteBtnFinal>
-          Finalize the vote <span>✍️</span>
-        </VoteBtnFinal>
-      ) : (
-        <VotesBtns>
-          {showVoteModal && (
-            <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}>
-              <VoteModal
-                vote={vote}
-                selectedVote={selectedVoted}
-                availableAmount={65245346}
-                setShowConfirmModal={setNext}
-              />{' '}
-            </Modal>
-          )}
-          {showConfirmModal && (
-            <Modal setShowModal={setShowConfirmModal}>
-              <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
-            </Modal>
-          )}
-          <VoteBtn
-            onClick={() => {
-              setSelectedVoted(voteConstants.against)
-              setShowVoteModal(true)
-            }}
-          >
-            {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
-          </VoteBtn>
-          <VoteBtn
-            onClick={() => {
-              setSelectedVoted(voteConstants.for)
-              setShowVoteModal(true)
-            }}
-          >
-            {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
-          </VoteBtn>
-        </VotesBtns>
-      )}
+        {winner ? (
+          <VoteBtnFinal>
+            Finalize the vote <span>✍️</span>
+          </VoteBtnFinal>
+        ) : (
+          <VotesBtns>
+            {showVoteModal && (
+              <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}>
+                <VoteModal
+                  vote={vote}
+                  selectedVote={selectedVoted}
+                  availableAmount={65245346}
+                  setShowConfirmModal={setNext}
+                />{' '}
+              </Modal>
+            )}
+            {showConfirmModal && (
+              <Modal setShowModal={setShowConfirmModal}>
+                <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
+              </Modal>
+            )}
+            <VoteBtn
+              onClick={() => {
+                setSelectedVoted(voteConstants.against)
+                setShowVoteModal(true)
+              }}
+            >
+              {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
+            </VoteBtn>
+            <VoteBtn
+              onClick={() => {
+                setSelectedVoted(voteConstants.for)
+                setShowVoteModal(true)
+              }}
+            >
+              {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
+            </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)',
 }