Tweak wallet initials

alephium · Dec 18, 2024 · 8251fdb · 8251fdb
1 parent 787d3fa
commit 8251fdb
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/apps/desktop-wallet/src/components/Inputs/index.tsx b/apps/desktop-wallet/src/components/Inputs/index.tsx
@@ -88,7 +88,7 @@ export const inputDefaultStyle = (
   `}
 
   &:focus {
-    background-color: ${({ theme }) => theme.bg.highlight};
+    background-color: ${({ theme }) => theme.bg.hover};
     border: 1px solid ${({ theme }) => theme.global.accent};
   }
 
@@ -102,7 +102,7 @@ export const inputDefaultStyle = (
   }
 
   &:hover {
-    background-color: ${({ theme }) => theme.bg.highlight};
+    background-color: ${({ theme }) => theme.bg.hover};
   }
 
   // Remove number arrows

diff --git a/apps/desktop-wallet/src/components/PageComponents/PanelTitle.tsx b/apps/desktop-wallet/src/components/PageComponents/PanelTitle.tsx
@@ -88,8 +88,7 @@ const BackArrow = styled(ArrowLeft)`
 
 const H1 = styled(motion.h1)<PanelTitleProps>`
   flex: 1;
-  margin: 10px 0;
   color: ${({ theme, color }) => (color ? color : theme.font.primary)};
-  font-size: ${({ size }) => (size === 'small' ? '20px' : size === 'big' ? '32px' : '28px')};
+  font-size: ${({ size }) => (size === 'small' ? '16px' : size === 'big' ? '32px' : '28px')};
   font-weight: var(--fontWeight-semiBold);
 `
diff --git a/apps/desktop-wallet/src/components/WalletNameButton.tsx b/apps/desktop-wallet/src/components/WalletNameButton.tsx
@@ -18,9 +18,10 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
+import { SIDEBAR_EXPAND_THRESHOLD_PX } from '@/components/PageComponents/SideBar'
 import { openModal } from '@/features/modals/modalActions'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux'
-import { onEnterOrSpace } from '@/utils/misc'
+import { getInitials, onEnterOrSpace } from '@/utils/misc'
 
 const WalletNameButton = () => {
   const dispatch = useAppDispatch()
@@ -38,7 +39,10 @@ const WalletNameButton = () => {
       role="button"
       tabIndex={0}
     >
-      <WalletNameContainer>{activeWalletName}</WalletNameContainer>
+      <WalletNameContainer>
+        <Initials>{getInitials(activeWalletName)}</Initials>
+        <Name>{activeWalletName}</Name>
+      </WalletNameContainer>
     </WalletNameButtonStyled>
   )
 }
@@ -49,10 +53,9 @@ const WalletNameButtonStyled = styled(motion.div)`
   flex: 1;
   height: var(--inputHeight);
   border-radius: var(--radius-big);
-  border: 1px solid ${({ theme }) => theme.border.primary};
   display: flex;
   align-items: center;
-  justify-content: center;
+  padding: 6px;
   font-weight: var(--fontWeight-semiBold);
   overflow: hidden;
   z-index: 1;
@@ -64,7 +67,26 @@ const WalletNameButtonStyled = styled(motion.div)`
 `
 
 const WalletNameContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`
+
+const Name = styled.span`
+  flex: 1;
+  text-align: center;
+  @media (max-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+    display: none;
+  }
+`
+
+const Initials = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  color: ${({ theme }) => theme.font.primary};
+  height: 36px;
+  width: 36px;
+  border-radius: 100px;
+  border: 1px solid ${({ theme }) => theme.border.primary};
 `
diff --git a/apps/desktop-wallet/src/components/WorthOverviewPanel.tsx b/apps/desktop-wallet/src/components/WorthOverviewPanel.tsx
@@ -41,7 +41,7 @@ const WorthOverviewPanel = ({ className, addressHash, children }: WorthOverviewP
 
   return (
     <WorthOverviewPanelStyled className={className}>
-      <AnimatedBackground height={700} />
+      <AnimatedBackground height={600} />
       <Panel>
         <Balances>
           <BalancesRow>

diff --git a/apps/desktop-wallet/src/features/theme/themes.ts b/apps/desktop-wallet/src/features/theme/themes.ts
@@ -33,7 +33,7 @@ export const lightTheme: DefaultTheme = {
     accent: colord('#0f22e3').alpha(0.05).toHex()
   },
   font: {
-    primary: '#000014',
+    primary: '#000',
     secondary: '#000026',
     tertiary: 'rgba(0, 0, 0, 0.4)',
     contrastPrimary: 'rgba(255, 255, 255, 1)',
@@ -68,7 +68,7 @@ export const darkTheme: DefaultTheme = {
     contrast: 'rgba(255, 255, 255, 1)',
     background1: '#0d0d0f',
     background2: '#070708',
-    hover: 'rgba(255, 255, 255, 0.01)',
+    hover: 'rgba(255, 255, 255, 0.015)',
     highlight: 'rgba(255, 255, 255, 0.06)',
     accent: colord('#3b62f0').alpha(0.1).toHex()
   },