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

* Add polish notes

* Polish balances

* update gap in mini portfolio names

src/components/AccountDrawer/AuthenticatedHeader.tsx

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

src/components/Tokens/TokenDetails/BalanceSummary.tsx

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

src/components/Tokens/TokenTable/FilterOption.tsx

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

src/components/Tokens/TokenTable/NetworkFilter.tsx

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

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -97,7 +97,7 @@ const StyledMenuContent = styled.div`
 `
 const Chevron = styled.span<{ open: boolean }>`
   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