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 => {
>
+ }
+
);
};
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%;
}