From 3ca14daeebdbe39dc3209deb52931b014bdcef74 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Thu, 14 Mar 2024 16:46:31 +0200 Subject: [PATCH 1/5] fix text styles --- src/components/SearchRevamp.js | 3 ++- src/components/common/Button.js | 4 +++- src/containers/HomeRevamp.js | 9 ++++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js index 68e9d6b..960934c 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` 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) => From 42e204d2bcbf00717573faf6df8ff0f9efb07070 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Fri, 15 Mar 2024 14:51:43 +0200 Subject: [PATCH 2/5] style scrollbar --- src/helpers/globalStyles.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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%; } From a58e6c997e51b3d5dd636e00a98776984682a556 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Fri, 15 Mar 2024 15:09:58 +0200 Subject: [PATCH 3/5] fix saturation tag color --- src/components/PoolSaturationTag.js | 57 ++++++++++++++--------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/components/PoolSaturationTag.js b/src/components/PoolSaturationTag.js index a2e09df..7822d41 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 [ { @@ -60,21 +59,21 @@ function PoolSaturationTag({ value }: Props): Node { let backgroundColor = null; switch (true) { - case value > 0.9: - backgroundColor = '#FFC3D3'; - break; - case value > 0.8: - backgroundColor = '#FCE4BC'; - break; - case value > 0.7: - backgroundColor = '#FBF6B6'; - break; - case value > 0.6: - backgroundColor = '#DDFBB6'; - break; - default: - backgroundColor = '#C9EDE5'; - break; + case value > 0.9: + backgroundColor = '#FFC3D3'; + break; + case value > 0.8: + backgroundColor = '#FCE4BC'; + break; + case value > 0.7: + backgroundColor = '#FBF6B6'; + break; + case value > 0.6: + backgroundColor = '#DDFBB6'; + break; + default: + backgroundColor = '#C9EDE5'; + break; } 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 }; From 88fa3a52342b5886f8438d4933160bbdb05cff19 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Fri, 15 Mar 2024 15:14:14 +0200 Subject: [PATCH 4/5] fix format --- src/components/PoolSaturationTag.js | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/PoolSaturationTag.js b/src/components/PoolSaturationTag.js index 7822d41..8cecc0b 100644 --- a/src/components/PoolSaturationTag.js +++ b/src/components/PoolSaturationTag.js @@ -59,21 +59,21 @@ function PoolSaturationTag({ value }: Props): Node { let backgroundColor = null; switch (true) { - case value > 0.9: - backgroundColor = '#FFC3D3'; - break; - case value > 0.8: - backgroundColor = '#FCE4BC'; - break; - case value > 0.7: - backgroundColor = '#FBF6B6'; - break; - case value > 0.6: - backgroundColor = '#DDFBB6'; - break; - default: - backgroundColor = '#C9EDE5'; - break; + case value > 0.9: + backgroundColor = '#FFC3D3'; + break; + case value > 0.8: + backgroundColor = '#FCE4BC'; + break; + case value > 0.7: + backgroundColor = '#FBF6B6'; + break; + case value > 0.6: + backgroundColor = '#DDFBB6'; + break; + default: + backgroundColor = '#C9EDE5'; + break; } return ( From 622fe2644ade1ee038c7b525f52a952ca276c212 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Fri, 15 Mar 2024 15:25:30 +0200 Subject: [PATCH 5/5] conditionaly show clear btn --- src/components/SearchRevamp.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js index 960934c..929f293 100644 --- a/src/components/SearchRevamp.js +++ b/src/components/SearchRevamp.js @@ -99,6 +99,7 @@ const SearchRevamp = ({ filter }: Props): Node => { placeholder="Search stake pool" type="text" /> + {searchValue.length > 0 && { setSearchValue(''); @@ -107,6 +108,8 @@ const SearchRevamp = ({ filter }: Props): Node => { > Clear Input + } + ); };