fix: [Spore] general polish items (#7302)

* Add polish notes

* Polish balances

* update gap in mini portfolio names
This commit is contained in:
Callil Capuozzo 2023-09-11 19:37:31 -04:00 committed by GitHub
parent 1316a45c7a
commit 0fffff66dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 10 deletions

@ -117,7 +117,7 @@ const AccountNamesWrapper = styled.div`
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 2px; margin-left: 8px;
` `
const StyledInfoIcon = styled(Info)` const StyledInfoIcon = styled(Info)`

@ -11,13 +11,11 @@ import { ThemedText } from 'theme'
import { NumberType, useFormatter } from 'utils/formatNumbers' import { NumberType, useFormatter } from 'utils/formatNumbers'
const BalancesCard = styled.div` const BalancesCard = styled.div`
background-color: ${({ theme }) => theme.surface1};
border: ${({ theme }) => `1px solid ${theme.surface3}`};
border-radius: 16px; border-radius: 16px;
color: ${({ theme }) => theme.neutral1}; color: ${({ theme }) => theme.neutral1};
display: none; display: none;
height: fit-content; height: fit-content;
padding: 20px; padding: 16px;
width: 100%; width: 100%;
// 768 hardcoded to match NFT-redesign navbar breakpoints // 768 hardcoded to match NFT-redesign navbar breakpoints
@ -35,7 +33,7 @@ const BalanceRow = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 20px; margin-top: 12px;
` `
const BalanceItem = styled.div` const BalanceItem = styled.div`
display: flex; display: flex;

@ -1,8 +1,8 @@
import styled from 'styled-components' import styled from 'styled-components'
const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>` const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>`
height: 100%; height: 100%;
color: ${({ theme, active }) => (active ? theme.accent1 : theme.neutral1)}; color: ${({ theme, active }) => (active ? theme.neutral1 : theme.neutral1)};
background-color: ${({ theme, active }) => (active ? theme.accent2 : theme.surface3)}; background-color: ${({ theme, active }) => (active ? theme.surface1 : theme.surface1)};
margin: 0; margin: 0;
padding: 6px 6px 6px 14px; padding: 6px 6px 6px 14px;
border-radius: 12px; border-radius: 12px;
@ -19,7 +19,7 @@ const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>`
opacity: ${({ theme, active }) => (active ? theme.opacity.hover : 1)}; opacity: ${({ theme, active }) => (active ? theme.opacity.hover : 1)};
} }
:focus { :focus {
background-color: ${({ theme, active }) => (active ? theme.accent2 : theme.surface3)}; background-color: ${({ theme, active }) => (active ? theme.surface2 : theme.surface3)};
} }
` `
export default FilterOption export default FilterOption

@ -83,7 +83,7 @@ const StyledMenuContent = styled.div`
` `
const Chevron = styled.span<{ open: boolean }>` const Chevron = styled.span<{ open: boolean }>`
padding-top: 1px; padding-top: 1px;
color: ${({ open, theme }) => (open ? theme.accent1 : theme.neutral2)}; color: ${({ open, theme }) => (open ? theme.neutral1 : theme.neutral2)};
` `
const NetworkLabel = styled.div` const NetworkLabel = styled.div`
${EllipsisStyle} ${EllipsisStyle}

@ -97,7 +97,7 @@ const StyledMenuContent = styled.div`
` `
const Chevron = styled.span<{ open: boolean }>` const Chevron = styled.span<{ open: boolean }>`
padding-top: 1px; padding-top: 1px;
color: ${({ open, theme }) => (open ? theme.accent1 : theme.neutral2)}; color: ${({ open, theme }) => (open ? theme.neutral1 : theme.neutral2)};
` `
// TODO: change this to reflect data pipeline // TODO: change this to reflect data pipeline