fix: minor spacing, styling, and colour fixes

secretkeylabs · Feb 2, 2024 · 5e00bbb · 5e00bbb
1 parent d2c60d0
commit 5e00bbb
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 31 deletions.
diff --git a/src/app/ui-components/selectFeeRate/feeItem.tsx b/src/app/ui-components/selectFeeRate/feeItem.tsx
@@ -8,21 +8,28 @@ import { NumericFormat } from 'react-number-format';
 import styled, { useTheme } from 'styled-components';
 
 interface FeeContainer {
-  isSelected: boolean;
+  $isSelected: boolean;
 }
 
-const FeeItemContainer = styled.button<FeeContainer>`
+export const FeeItemContainer = styled.button<FeeContainer>`
   display: flex;
   padding: ${(props) => props.theme.space.s} ${(props) => props.theme.space.m};
   align-items: center;
   gap: ${(props) => props.theme.space.s};
   align-self: stretch;
   border-radius: ${(props) => props.theme.space.s};
-  border: 1px solid ${(props) => props.theme.colors.elevation6};
+  border: 1px solid ${(props) => props.theme.colors.white_850};
   flex-direction: row;
-  background: ${(props) => (props.isSelected ? props.theme.colors.elevation6_600 : 'transparent')};
-  margin-top: ${(props) => props.theme.space.xs};
+  background: ${(props) => (props.$isSelected ? props.theme.colors.elevation6_600 : 'transparent')};
   flex: 1;
+
+  &:hover:enabled {
+    background: ${(props) => props.theme.colors.elevation6_400};
+  }
+
+  &:active:enabled {
+    background: ${(props) => props.theme.colors.elevation6_600};
+  }
 `;
 
 const IconContainer = styled.div`
@@ -154,7 +161,7 @@ function FeeItem({
   const secondaryColor = totalFee ? 'white_200' : 'white_400';
 
   return (
-    <FeeItemContainer onClick={onClick} isSelected={selected} disabled={!totalFee}>
+    <FeeItemContainer onClick={onClick} $isSelected={selected} disabled={!totalFee}>
       <IconContainer>{getIcon()}</IconContainer>
       <TextsContainer>
         <ColumnsTexts>

diff --git a/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx b/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx
@@ -1,15 +1,15 @@
 import { Faders } from '@phosphor-icons/react';
 import { currencySymbolMap } from '@secretkeylabs/xverse-core';
 import Button from '@ui-library/button';
-import { StyledP } from '@ui-library/common.styled';
+import { HorizontalSplitButtonContainer, StyledP } from '@ui-library/common.styled';
 import Input from '@ui-library/input';
 import Sheet from '@ui-library/sheet';
 import Spinner from '@ui-library/spinner';
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
 import styled, { useTheme } from 'styled-components';
-import FeeItem from './feeItem';
+import FeeItem, { FeeItemContainer } from './feeItem';
 
 const Container = styled.div`
   display: flex;
@@ -22,22 +22,9 @@ const DetailText = styled(StyledP)`
 
 const FeePrioritiesContainer = styled.div`
   display: flex;
-  margin-top: ${(props) => props.theme.space.m};
   flex-direction: column;
-`;
-
-const FeeItemContainer = styled.button<{ $isSelected: boolean }>`
-  display: flex;
-  padding: ${(props) => props.theme.space.s} ${(props) => props.theme.space.m};
-  align-items: center;
-  gap: ${(props) => props.theme.space.s};
-  align-self: stretch;
-  border-radius: ${(props) => props.theme.space.s};
-  border: 1px solid ${(props) => props.theme.colors.elevation6};
-  flex-direction: row;
-  background: ${(props) => (props.$isSelected ? props.theme.colors.elevation6_600 : 'transparent')};
-  margin-top: ${(props) => props.theme.space.xs};
-  flex: 1;
+  gap: ${(props) => props.theme.space.xs};
+  margin-bottom: ${(props) => props.theme.space.l};
 `;
 
 const TextRow = styled.div`
@@ -62,12 +49,7 @@ const TotalFeeContainer = styled.div`
   gap: ${(props) => props.theme.space.xxs};
 `;
 
-const Buttons = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: stretch;
-  gap: ${(props) => props.theme.space.s};
-
+const Buttons = styled(HorizontalSplitButtonContainer)`
   margin: ${(props) => props.theme.space.l} 0;
 `;
 

diff --git a/src/app/ui-library/button.tsx b/src/app/ui-library/button.tsx
@@ -128,7 +128,7 @@ function Button({
         <Spinner />
       ) : (
         <>
-          <div>{icon}</div>
+          {icon && <div>{icon}</div>}
           <div>{title}</div>
         </>
       )}

diff --git a/src/app/ui-library/common.styled.ts b/src/app/ui-library/common.styled.ts
@@ -31,7 +31,7 @@ export const StyledHeading = styled.h1<TypographyProps>`
 export const VerticalStackButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing(6)}px;
+  gap: ${(props) => props.theme.space.s};
 `;
 
 export const HorizontalSplitButtonContainer = styled.div`

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -59,6 +59,7 @@ const Theme = {
     elevation3: '#2A2F39',
     elevation5: '#303643',
     elevation6: '#4C525F',
+    elevation6_400: 'rgba(76, 82, 95, 0.6)',
     elevation6_600: 'rgba(76, 82, 95, 0.4)',
     elevation6_800: 'rgba(76, 82, 95, 0.2)',
     elevation8: '#7A7688',