improve: add rounded corners to bars (#84)

* add border radius to info bar Signed-off-by: ryanwolhuter <[email protected]> * add rounded corners to votes Signed-off-by: ryanwolhuter <[email protected]> * add rounded corners to timeline Signed-off-by: ryanwolhuter <[email protected]> * undo border radius in mobile Signed-off-by: ryanwolhuter <[email protected]> Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Nov 21, 2022 · 57ffb84 · 57ffb84 · vercel · Nov 21, 2022
1 parent dfcd190
commit 57ffb84
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/components/InfoBar/InfoBar.tsx b/components/InfoBar/InfoBar.tsx
@@ -29,6 +29,7 @@ const Wrapper = styled.div`
   gap: 30px;
   align-items: center;
   background: var(--grey-100);
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     gap: 5px;
@@ -50,10 +51,13 @@ const Label = styled.h1`
   color: var(--white);
   background: var(--black);
   padding-inline: 15px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
 
   @media ${tabletAndUnder} {
     width: 100%;
     height: 40px;
+    border-radius: 0;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
   }

diff --git a/components/VoteTimeline/CommitPhase.tsx b/components/VoteTimeline/CommitPhase.tsx
@@ -78,12 +78,14 @@ const InnerWrapper = styled.div`
   color: var(--color);
   background-color: var(--background-color);
   clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     height: unset;
     gap: 10px;
     padding: 15px;
     clip-path: unset;
+    border-radius: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }

diff --git a/components/VoteTimeline/NextRoundStartsIn.tsx b/components/VoteTimeline/NextRoundStartsIn.tsx
@@ -38,6 +38,7 @@ const Wrapper = styled.div`
   font: var(--text-md);
   color: var(--black);
   background-color: var(--white);
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     height: unset;

diff --git a/components/VoteTimeline/RevealPhase.tsx b/components/VoteTimeline/RevealPhase.tsx
@@ -68,12 +68,14 @@ const Wrapper = styled.div`
   font: var(--text-md);
   color: var(--color);
   background-color: var(--background-color);
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     height: unset;
     padding: 15px;
     gap: 10px;
     margin: unset;
+    border-radius: 0;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }

diff --git a/components/VotesList/VotesListItem.tsx b/components/VotesList/VotesListItem.tsx
@@ -363,20 +363,21 @@ const VoteTextWrapper = styled.span`
 const Wrapper = styled.tr`
   background: var(--white);
   height: 80px;
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     height: auto;
     display: grid;
     gap: 12px;
     align-items: left;
     padding: 15px;
-    border-radius: 5px;
   }
 `;
 
 const VoteTitleOuterWrapper = styled.td`
   padding-left: 1vw;
   padding-right: 2.5vw;
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     padding: 0;
@@ -498,6 +499,7 @@ const VoteStatus = styled.div`
 
 const MoreDetailsWrapper = styled.td`
   padding-right: 2.5vw;
+  border-radius: 5px;
 
   @media ${tabletAndUnder} {
     padding-top: 10px;