Tweak wallet initials, fix wallet threshold initialization

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

Hide file tree

Showing 9 changed files with 46 additions and 25 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/NavItem.tsx b/apps/desktop-wallet/src/components/NavItem.tsx
@@ -21,7 +21,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components'
 
 import Button from '@/components/Button'
-import { SIDEBAR_EXPAND_THRESHOLD_PX } from '@/components/PageComponents/SideBar'
+import { sidebarExpandThresholdPx } from '@/style/globalStyles'
 
 interface NavItemProps {
   Icon: LucideIcon
@@ -81,7 +81,7 @@ const ButtonStyled = styled(Button)<{ isActive: boolean }>`
       color: ${theme.font.primary};
     `}
 
-  @media (max-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (max-width: ${sidebarExpandThresholdPx}px) {
     gap: 0;
     width: 42px;
     min-width: 42px;
@@ -90,7 +90,7 @@ const ButtonStyled = styled(Button)<{ isActive: boolean }>`
 `
 
 const TooltipStyleOverride = createGlobalStyle`
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (min-width: ${sidebarExpandThresholdPx}px) {
     #sidenav {
       display: none !important;
     }
@@ -102,7 +102,7 @@ const LabelContainer = styled.div`
   transition: width 0.4s ease-in-out;
   overflow: hidden;
 
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (min-width: ${sidebarExpandThresholdPx}px) {
     width: auto;
   }
 `

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/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -20,7 +20,7 @@ import { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 
 import WalletNameButton from '@/components/WalletNameButton'
-import { appHeaderHeightPx, walletSidebarWidthPx } from '@/style/globalStyles'
+import { appHeaderHeightPx, sidebarExpandThresholdPx, walletSidebarWidthPx } from '@/style/globalStyles'
 
 interface SideBarProps {
   renderTopComponent?: () => ReactNode
@@ -29,8 +29,6 @@ interface SideBarProps {
   className?: string
 }
 
-export const SIDEBAR_EXPAND_THRESHOLD_PX = 1300
-
 const SideBar = ({ renderTopComponent, noExpansion = false, noBorder = false, className }: SideBarProps) => (
   <SideBarStyled id="app-drag-region" className={className} noExpansion={noExpansion} noBorder={noBorder}>
     <TopContainer>{renderTopComponent?.()}</TopContainer>
@@ -58,7 +56,7 @@ const SideBarStyled = styled.div<{ noBorder: boolean; noExpansion: boolean }>`
   ${({ noExpansion }) =>
     !noExpansion
       ? css`
-          @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+          @media (min-width: ${sidebarExpandThresholdPx}px) {
             width: ${walletSidebarWidthPx * 3}px;
             align-items: normal;
           }
@@ -83,7 +81,7 @@ const BottomButtonsContainer = styled.div`
   display: flex;
   justify-content: flex-start;
 
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (min-width: ${sidebarExpandThresholdPx}px) {
     justify-content: space-around;
     width: 100%;
   }
@@ -96,7 +94,7 @@ const BottomButtons = styled.div`
   gap: 15px;
   app-region: no-drag;
 
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (min-width: ${sidebarExpandThresholdPx}px) {
     flex: 1;
     flex-direction: row-reverse;
     justify-content: space-between;

diff --git a/apps/desktop-wallet/src/components/WalletNameButton.tsx b/apps/desktop-wallet/src/components/WalletNameButton.tsx
@@ -20,7 +20,8 @@ import styled from 'styled-components'
 
 import { openModal } from '@/features/modals/modalActions'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux'
-import { onEnterOrSpace } from '@/utils/misc'
+import { sidebarExpandThresholdPx } from '@/style/globalStyles'
+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: ${sidebarExpandThresholdPx}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()
   },

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -28,9 +28,10 @@ import { fadeInSlowly } from '@/animations'
 import AlephiumLogo from '@/components/AlephiumLogo'
 import AppHeader from '@/components/AppHeader'
 import NavItem from '@/components/NavItem'
-import SideBar, { SIDEBAR_EXPAND_THRESHOLD_PX } from '@/components/PageComponents/SideBar'
+import SideBar from '@/components/PageComponents/SideBar'
 import ScrollbarCustom from '@/components/Scrollbar'
 import { useAppSelector } from '@/hooks/redux'
+import { sidebarExpandThresholdPx } from '@/style/globalStyles'
 
 interface UnlockedWalletLayoutProps {
   title?: string
@@ -129,7 +130,7 @@ const BrandContainer = styled.div`
   margin-bottom: var(--spacing-6);
   margin-left: 8px;
 
-  @media (max-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (max-width: ${sidebarExpandThresholdPx}px) {
     margin-left: auto;
     margin-right: auto;
   }
@@ -151,7 +152,7 @@ const AlephiumName = styled.div`
   font-weight: var(--fontWeight-semiBold);
   display: none;
 
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+  @media (min-width: ${sidebarExpandThresholdPx}px) {
     display: block;
   }
 `
diff --git a/apps/desktop-wallet/src/style/globalStyles.ts b/apps/desktop-wallet/src/style/globalStyles.ts
@@ -24,6 +24,7 @@ import resets from '@/style/resets'
 export const appHeaderHeightPx = 50
 export const walletSidebarWidthPx = 76
 export const messagesLeftMarginPx = 70
+export const sidebarExpandThresholdPx = 1300
 
 const electronWindowDimensions = `
   height: 100%;
@@ -58,7 +59,7 @@ export const GlobalStyle = createGlobalStyle`
     --fontWeight-semiBold: 600;
     --fontWeight-bold: 700;
 
-    --inputHeight: 44px;
+    --inputHeight: 42px;
     --tableCellHeight: 46px;
     --toggleWidth: 52px;
   }