diff --git a/apps/desktop-wallet/src/components/Inputs/index.tsx b/apps/desktop-wallet/src/components/Inputs/index.tsx index e7e765b24..063b4715c 100644 --- 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 index 2513a1309..ffb822104 100644 --- 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 index 0d9460df4..c7c25e3f8 100644 --- 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)` 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 index dc7bb0ec3..a61cdd289 100644 --- 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) => ( {renderTopComponent?.()} @@ -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 index f0ceb74c3..9e7379da0 100644 --- 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} > - {activeWalletName} + + {getInitials(activeWalletName)} + {activeWalletName} + ) } @@ -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 index e57b71b97..25550e72c 100644 --- 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 ( - + diff --git a/apps/desktop-wallet/src/features/theme/themes.ts b/apps/desktop-wallet/src/features/theme/themes.ts index c0dc9b13c..d05e4a25d 100644 --- 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 index 8c57f9ed3..05203421a 100644 --- 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 index 15d8a7ffb..f6ee37634 100644 --- 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; }