Merge pull request #183 from Emurgo/fix/table-text-alignment

fix table alignment to left
Emurgo · Jun 28, 2022 · 604ec14 · 604ec14
2 parents b1b392b + 4002309
commit 604ec14
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 36 deletions.
diff --git a/src/components/CardRoa.js b/src/components/CardRoa.js
@@ -33,13 +33,10 @@ function CardRoa({ roa, description }: Props): Node {
 
 const RoaElementRevamp = styled.div`
   height: 26px;
-  text-align: center;
   padding: 3px 0;
   color: #242838;
   font-size: 16px;
-  @media (max-width: 1125px) {
-    text-align: left;
-  }
+  text-align: left;
 `;
 
 function CardRoaRevamp({ roa, description }: Props): Node {

diff --git a/src/components/CostsCard.js b/src/components/CostsCard.js
@@ -12,7 +12,7 @@ const Card = styled.div`
     flex-direction: column;
     align-items: flex-start;
   }
-  @media (min-width:1125px) and (max-width: 1200px) {
+  @media (min-width: 1125px) and (max-width: 1200px) {
     flex-direction: column-reverse;
     align-items: center;
   }
@@ -44,4 +44,4 @@ function CostsCardRevamp({ value }: Props): Node {
 }
 
 export default CostsCard;
-export { CostsCardRevamp }
+export { CostsCardRevamp };
diff --git a/src/components/DesktopTableRevamp.js b/src/components/DesktopTableRevamp.js
@@ -39,12 +39,7 @@ const Table = styled.table`
       border-bottom: 2px solid #f0f4f5;
     }
     th {
-      &:first-child {
-        text-align: left;
-      }
-      &:not(:first-child) {
-        text-align: right;
-      }
+      text-align: left;
       color: #6b7384;
       font-size: 14px;
       letter-spacing: 0;
@@ -78,15 +73,9 @@ const Table = styled.table`
   }
   .col-3 {
     width: 100px;
-    @media (min-width: 1125px) and (max-width: 1200px) {
-      width: 100px;
-    }
   }
   .col-4 {
-    width: 110px;
-    @media (min-width: 1125px) and (max-width: 1200px) {
-      width: 110px;
-    }
+    width: 120px;
   }
   .col-5 {
     width: 90px;

diff --git a/src/components/PledgeCard.js b/src/components/PledgeCard.js
@@ -57,7 +57,7 @@ const CardRevamp = styled.div`
   font-size: 16px;
   line-height: 22px;
   color: #242838;
-  padding: 2px 8px;
+  padding: 2px 0;
   text-align: left;
   @media (max-width: 1125px) {
     justify-content: center;

diff --git a/src/components/PoolSizeTag.js b/src/components/PoolSizeTag.js
@@ -88,7 +88,7 @@ function PoolSizeTag({ value }: Props): Node {
 }
 
 const TagRevamp = styled.div`
-  padding: 2px 8px;
+  padding: 2px 0;
   background: ${(props) => props.background};
   border-radius: 8px;
   color: #2b2c32;

diff --git a/src/components/common/Tooltip.js b/src/components/common/Tooltip.js
@@ -12,10 +12,10 @@ const WrapperToolTip = styled.div`
   .label {
     padding-left: 3px;
   }
-  @media (min-width:1125px) and (max-width: 1200px) {
+  @media (min-width: 1125px) and (max-width: 1200px) {
     justify-content: center;
   }
-`
+`;
 const ToolTip = styled.span`
   position: relative;
   cursor: pointer;
@@ -35,17 +35,17 @@ const ToolTip = styled.span`
     background: #000;
     display: none;
     text-align: center;
-    opacity:0;
-    transition:10s opacity;
+    opacity: 0;
+    transition: 10s opacity;
   }
-  img{
+  img {
     max-width: 100%;
     width: 18px;
     height: 18px;
   }
   &:hover:before {
     display: block;
-    opacity:1;
+    opacity: 1;
     color: white;
   }
 `;
@@ -58,9 +58,7 @@ type Props = {|
 function Tooltip({ label, textInfo }: Props): Node {
   return (
     <WrapperToolTip>
-      <ToolTip data-text={textInfo}>
-        {textInfo != null && <img src={infoIcon} alt="" />}
-      </ToolTip>
+      <ToolTip data-text={textInfo}>{textInfo != null && <img src={infoIcon} alt="" />}</ToolTip>
       <span className="label">{label}</span>
     </WrapperToolTip>
   );
@@ -71,13 +69,11 @@ const WrapperToolTipRevamp = styled.div`
   align-items: baseline;
   flex-direction: column;
   justify-content: flex-end;
-  .label {
-    padding-left: 3px;
-  }
-  @media (min-width:1125px) and (max-width: 1200px) {
+
+  @media (min-width: 1125px) and (max-width: 1200px) {
     justify-content: center;
   }
-`
+`;
 
 function TooltipRevamp({ label, textInfo }: Props): Node {
   return (
@@ -90,4 +86,4 @@ function TooltipRevamp({ label, textInfo }: Props): Node {
 }
 
 export default Tooltip;
-export { TooltipRevamp }
+export { TooltipRevamp };