diff --git a/src/components/PoolSaturationTag.js b/src/components/PoolSaturationTag.js index a2e09df..8cecc0b 100644 --- a/src/components/PoolSaturationTag.js +++ b/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,7 +16,7 @@ const Tag = styled.div` align-items: center; .value { margin-left: 6px; - color: #2B2C32; + color: #2b2c32; font-size: 14px; line-height: 22px; } @@ -24,18 +24,17 @@ const Tag = styled.div` 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 = {| @@ -43,7 +42,7 @@ type Props = {| |}; function PoolSaturationTag({ value }: Props): Node { - const totalValue = 1 + const totalValue = 1; function formatArray(percent) { return [ { @@ -82,9 +81,9 @@ function PoolSaturationTag({ value }: Props): Node {
-
{roundOneDecimal(value*100)}%
+
{roundOneDecimal(value * 100)}%
- ) + ); } 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 {
-
{roundOneDecimal(value*100)}%
+
{roundedSaturationValue}%
); } export default PoolSaturationTag; -export { PoolSaturationTagRevamp }; \ No newline at end of file +export { PoolSaturationTagRevamp }; diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js index 68e9d6b..929f293 100644 --- a/src/components/SearchRevamp.js +++ b/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 && { setSearchValue(''); @@ -106,6 +108,8 @@ const SearchRevamp = ({ filter }: Props): Node => { > Clear Input + } + ); }; diff --git a/src/components/common/Button.js b/src/components/common/Button.js index e3802f9..d5b247d 100644 --- a/src/components/common/Button.js +++ b/src/components/common/Button.js @@ -46,7 +46,8 @@ 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; @@ -54,6 +55,7 @@ const BtnRevampWrapper = styled.button` width: 100%; text-transform: uppercase; cursor: pointer; + letter-spacing: 0.5px; &:hover { color: #3154cb; background-color: #f0f3f5; diff --git a/src/containers/HomeRevamp.js b/src/containers/HomeRevamp.js index 024cec9..1e10396 100644 --- a/src/containers/HomeRevamp.js +++ b/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) => diff --git a/src/helpers/globalStyles.js b/src/helpers/globalStyles.js index 0ab476a..163aa42 100644 --- a/src/helpers/globalStyles.js +++ b/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%; }