fix(ui) text styles

src/components/PoolSaturationTag.js

@@ -4,7 +4,7 @@ import React from 'react';
 import type { Node } from 'react';
 import styled from 'styled-components';
 import { PieChart } from 'react-minimal-pie-chart';
-import { roundOneDecimal, } from '../utils/utils';
+import { roundOneDecimal } from '../utils/utils';
 
 const Tag = styled.div`
   padding: 2px 8px;
@@ -16,34 +16,33 @@ const Tag = styled.div`
   align-items: center;
   .value {
     margin-left: 6px;
-    color: #2B2C32;
+    color: #2b2c32;
     font-size: 14px;
     line-height: 22px;
   }
   .piechart {
     width: 15px;
     height: 15px;
     margin-right: 5px;
-    @media (min-width:1125px) and (max-width: 1200px) {
+    @media (min-width: 1125px) and (max-width: 1200px) {
       margin: 0;
     }
   }
-  @media (min-width:1125px) and (max-width: 1200px) {
+  @media (min-width: 1125px) and (max-width: 1200px) {
     margin: 0;
     margin-top: 4px;
   }
   @media (max-width: 1125px) {
     margin-bottom: 8px;
   }
-
 `;
 
 type Props = {|
   +value: number,
 |};
 
 function PoolSaturationTag({ value }: Props): Node {
-  const totalValue = 1
+  const totalValue = 1;
   function formatArray(percent) {
     return [
       {
@@ -82,9 +81,9 @@ function PoolSaturationTag({ value }: Props): Node {
       <div className="piechart">
         <PieChart totalValue={totalValue} data={formatArray(value)} />
       </div>
-      <div className="value">{roundOneDecimal(value*100)}%</div>
+      <div className="value">{roundOneDecimal(value * 100)}%</div>
     </Tag>
-  )
+  );
 }
 
 const TagRevamp = styled.div`
@@ -97,7 +96,7 @@ const TagRevamp = styled.div`
   align-items: center;
   .value {
     margin-left: 6px;
-    color: #2B2C32;
+    color: #2b2c32;
     font-size: 16px;
     line-height: 22px;
   }
@@ -108,20 +107,20 @@ const TagRevamp = styled.div`
   @media (max-width: 1125px) {
     margin-bottom: 8px;
   }
-
 `;
 
 function PoolSaturationTagRevamp({ value }: Props): Node {
   const totalValue = 1;
+  const roundedSaturationValue = roundOneDecimal(value * 100);
   function formatArray(percent) {
     return [
       {
         value: percent,
-        color: '#DBE0E9',
+        color: value > 0.6 ? '#ED8600' : '#000000',
       },
       {
         value: totalValue - percent,
-        color: '#A7AFC0',
+        color: '#DBE0E9',
       },
     ];
   }
@@ -130,10 +129,10 @@ function PoolSaturationTagRevamp({ value }: Props): Node {
       <div className="piechart">
         <PieChart totalValue={totalValue} data={formatArray(value)} />
       </div>
-      <div className="value">{roundOneDecimal(value*100)}%</div>
+      <div className="value">{roundedSaturationValue}%</div>
     </TagRevamp>
   );
 }
 
 export default PoolSaturationTag;
-export { PoolSaturationTagRevamp };
+export { PoolSaturationTagRevamp };

src/components/SearchRevamp.js

@@ -9,6 +9,7 @@ import searchIcon from '../assets/search-icon.svg';
 const Form = styled.form`
   display: flex;
   position: relative;
+  margin-right: 1px;
 `;
 const SearchInput = styled.input`
   height: 40px;
@@ -32,7 +33,7 @@ const SearchInput = styled.input`
   }
 
   :focus {
-    outline: 2px solid #242838;
+    outline: 1px solid #242838;
   }
 `;
 const SearchBtn = styled.button`
@@ -98,6 +99,7 @@ const SearchRevamp = ({ filter }: Props): Node => {
         placeholder="Search stake pool"
         type="text"
       />
+      {searchValue.length > 0 &&   
       <ClearBtn
         onClick={(e) => {
           setSearchValue('');
@@ -106,6 +108,8 @@ const SearchRevamp = ({ filter }: Props): Node => {
       >
         <img src={closeIcon} alt="Clear Input" />
       </ClearBtn>
+      }
+
     </Form>
   );
 };

src/components/common/Button.js

@@ -46,14 +46,16 @@ const BtnRevampWrapper = styled.button`
   box-sizing: border-box;
   min-width: 120px;
   padding: 9px 20px;
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: 500;
   color: #4b6dde;
   background: none;
   border: 0;
   border-radius: 8px;
   width: 100%;
   text-transform: uppercase;
   cursor: pointer;
+  letter-spacing: 0.5px;
   &:hover {
     color: #3154cb;
     background-color: #f0f3f5;

src/containers/HomeRevamp.js

@@ -35,7 +35,8 @@ const Header = styled.div`
   }
 `;
 const Title = styled.h1`
-  color: #38393d;
+  color: #000;
+  font-weight: 500;
   font-size: 18px;
   @media (max-width: 1125px) {
     margin-bottom: 20px;
@@ -122,8 +123,10 @@ const SORTING_FUNCTIONS = {
     a.total_size - b.total_size,
   [`${Sorting.POOL_SIZE}_${SortingDirections.DESC}`]: (a: Pool, b: Pool) =>
     b.total_size - a.total_size,
-  [`${Sorting.SATURATION}_${SortingDirections.ASC}`]: (a: Pool, b: Pool) => a.saturation - b.saturation,
-  [`${Sorting.SATURATION}_${SortingDirections.DESC}`]: (a: Pool, b: Pool) => b.saturation - a.saturation,
+  [`${Sorting.SATURATION}_${SortingDirections.ASC}`]: (a: Pool, b: Pool) =>
+    a.saturation - b.saturation,
+  [`${Sorting.SATURATION}_${SortingDirections.DESC}`]: (a: Pool, b: Pool) =>
+    b.saturation - a.saturation,
   [`${Sorting.PLEDGE}_${SortingDirections.ASC}`]: (a: Pool, b: Pool) =>
     Number(a.pledge) - Number(b.pledge),
   [`${Sorting.PLEDGE}_${SortingDirections.DESC}`]: (a: Pool, b: Pool) =>

src/helpers/globalStyles.js

@@ -75,6 +75,24 @@ td {
   font-family: 'Rubik', sans-serif;
 }
 
+/* width */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+
+  backgroud-color:transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #c8ccce;
+  border-radius: 12px;
+  border: 7px solid transparent,
+
+}
 html {
   font-size: 62.5%;
 }