Simplify app header (and sidebar)

alephium · Dec 17, 2024 · b18b8e1 · b18b8e1
1 parent d3d72ca
commit b18b8e1
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 71 deletions.
diff --git a/apps/desktop-wallet/src/components/AddressColorIndicator.tsx b/apps/desktop-wallet/src/components/AddressColorIndicator.tsx
@@ -34,7 +34,7 @@ interface AddressColorIndicatorProps {
 const AddressColorIndicator = ({
   addressHash,
   hideMainAddressBadge,
-  size = 12,
+  size = 10,
   className
 }: AddressColorIndicatorProps) => {
   const address = useAppSelector((s) => selectAddressByHash(s, addressHash))

diff --git a/apps/desktop-wallet/src/components/AppHeader.tsx b/apps/desktop-wallet/src/components/AppHeader.tsx
@@ -25,12 +25,12 @@ import styled, { useTheme } from 'styled-components'
 import Button from '@/components/Button'
 import DefaultAddressSwitch from '@/components/DefaultAddressSwitch'
 import CompactToggle from '@/components/Inputs/CompactToggle'
-import NetworkSwitch from '@/components/NetworkSwitch'
 import VerticalDivider from '@/components/PageComponents/VerticalDivider'
 import { useScrollContext } from '@/contexts/scroll'
 import { openModal } from '@/features/modals/modalActions'
 import RefreshButton from '@/features/refreshData/RefreshButton'
 import { discreetModeToggled } from '@/features/settings/settingsActions'
+import SettingsButton from '@/features/settings/SettingsButton'
 import { useWalletConnectContext } from '@/features/walletConnect/walletConnectContext'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux'
 import useWalletLock from '@/hooks/useWalletLock'
@@ -139,7 +139,7 @@ const AppHeader: FC<AppHeader> = ({ children, title, className, invisible, posit
               <VerticalDivider />
             </>
           )}
-          <NetworkSwitch />
+          <SettingsButton />
         </HeaderButtons>
       </AppHeaderContainer>
     </AppHeaderStyled>
@@ -210,4 +210,8 @@ const HeaderButtons = styled.div`
 const WalletConnectLogoStyled = styled(WalletConnectLogo)`
   height: auto;
   width: 100%;
+
+  path {
+    fill: ${({ theme }) => theme.font.secondary};
+  }
 `
diff --git a/apps/desktop-wallet/src/components/Button.tsx b/apps/desktop-wallet/src/components/Button.tsx
@@ -38,6 +38,7 @@ export interface ButtonProps extends HTMLMotionProps<'button'> {
   rounded?: boolean
   Icon?: LucideIcon
   iconColor?: string
+  iconSize?: number
   isHighlighted?: boolean
   disablePointer?: boolean
   loading?: boolean
@@ -49,6 +50,7 @@ const Button = ({
   disabled,
   submit,
   Icon,
+  iconSize = 16,
   className,
   isHighlighted,
   loading,
@@ -92,7 +94,7 @@ const Button = ({
         <>
           {Icon && (
             <ButtonIcon>
-              <Icon size={18} />
+              <Icon size={iconSize} />
             </ButtonIcon>
           )}
           <ButtonContent>{children as ReactNode}</ButtonContent>
@@ -214,7 +216,7 @@ export default styled(Button)`
 
         ${ButtonIcon} {
           svg {
-            stroke: ${hoverColor};
+            stroke: ${iconColor || hoverColor};
           }
         }
       }
@@ -239,17 +241,17 @@ export default styled(Button)`
   display: flex;
   align-items: center;
   justify-content: ${({ Icon }) => (Icon ? 'center' : 'flex-start')};
-  height: ${({ squared, short, tall }) => (short ? '32px' : squared ? '36px' : tall ? '48px' : '42px')};
-  width: ${({ squared, short, wide }) => (squared ? '36px' : short && !wide ? 'auto' : wide ? '100%' : '80%')};
+  height: ${({ squared, short, tall }) => (short ? '32px' : squared ? '34px' : tall ? '48px' : '42px')};
+  width: ${({ squared, short, wide }) => (squared ? '34px' : short && !wide ? 'auto' : wide ? '100%' : '80%')};
   max-width: ${({ wide }) => (wide ? 'auto' : '250px')};
   border-radius: 100px;
   font-weight: ${({ role, variant }) =>
     role === 'secondary' || variant === 'faded' ? 'var(--fontWeight-medium)' : 'var(--fontWeight-semiBold)'};
-  font-size: 14px;
+  font-size: ${({ short }) => (short ? 13 : 14)}px;
   font-family: inherit;
   margin: ${({ squared }) => (squared ? '0' : '10px 0')};
   padding: ${({ squared, Icon }) => (squared ? 'var(--spacing-2)' : Icon ? '0 28px 0 14px' : '0 14px')};
-  min-width: ${({ squared }) => (squared ? '36px' : '60px')};
+  min-width: ${({ squared }) => (squared ? '34px' : '60px')};
   text-align: center;
   cursor: ${({ disablePointer }) => !disablePointer && 'pointer'};
   backdrop-filter: blur(10px)

diff --git a/apps/desktop-wallet/src/components/NetworkSwitch.tsx b/apps/desktop-wallet/src/components/NetworkSwitch.tsx
@@ -17,14 +17,12 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { NetworkName, NetworkNames, networkPresetSwitched, networkSettingsPresets } from '@alephium/shared'
-import { upperFirst } from 'lodash'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight, Dot } from 'lucide-react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { useTheme } from 'styled-components'
 
 import Button from '@/components/Button'
-import DotIcon from '@/components/DotIcon'
 import Select from '@/components/Inputs/Select'
 import useAnalytics from '@/features/analytics/useAnalytics'
 import { openModal } from '@/features/modals/modalActions'
@@ -76,16 +74,19 @@ const NetworkSwitch = () => {
 
   const openSettingsModal = () => dispatch(openModal({ name: 'SettingsModal', props: { initialTabValue: 'network' } }))
 
+  const currentNetwork = networkSelectOptions.find((n) => n.value === network.name)
+
   return (
     <Select
       options={networkSelectOptions}
       onSelect={handleNetworkPresetChange}
-      controlledValue={networkSelectOptions.find((n) => n.value === network.name)}
+      controlledValue={currentNetwork}
       title={t('Current network')}
       id="network"
       noMargin
       renderCustomComponent={SelectCustomComponent}
       skipEqualityCheck
+      heightSize="small"
       ListBottomComponent={
         <MoreOptionsItem onClick={openSettingsModal}>
           {t('More options')} <ArrowRight size={16} />
@@ -98,7 +99,6 @@ const NetworkSwitch = () => {
 export default NetworkSwitch
 
 const SelectCustomComponent = () => {
-  const { t } = useTranslation()
   const theme = useTheme()
   const network = useAppSelector((state) => state.network)
 
@@ -110,17 +110,19 @@ const SelectCustomComponent = () => {
   }[network.status]
 
   return (
-    <Button role="secondary" transparent short data-tooltip-id="default" data-tooltip-content={t('Current network')}>
-      <NetworkNameLabel>{upperFirst(network.name)}</NetworkNameLabel>
-      <DotIcon color={networkStatusColor} />
-    </Button>
+    <Button
+      role="secondary"
+      transparent
+      squared
+      data-tooltip-id="default"
+      data-tooltip-content={network.name}
+      Icon={Dot}
+      iconColor={networkStatusColor}
+      iconSize={40}
+    />
   )
 }
 
-const NetworkNameLabel = styled.span`
-  margin-right: 10px;
-`
-
 const MoreOptionsItem = styled.div`
   display: flex;
   align-items: center;

diff --git a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -16,16 +16,10 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Settings } from 'lucide-react'
 import { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import Button from '@/components/Button'
-import ThemeSwitcher from '@/components/ThemeSwitcher'
 import WalletNameButton from '@/components/WalletNameButton'
-import { openModal } from '@/features/modals/modalActions'
-import { useAppDispatch } from '@/hooks/redux'
 import { appHeaderHeightPx, walletSidebarWidthPx } from '@/style/globalStyles'
 
 interface SideBarProps {
@@ -37,34 +31,16 @@ interface SideBarProps {
 
 export const SIDEBAR_EXPAND_THRESHOLD_PX = 1200
 
-const SideBar = ({ renderTopComponent, noExpansion = false, noBorder = false, className }: SideBarProps) => {
-  const { t } = useTranslation()
-  const dispatch = useAppDispatch()
-
-  const openSettingsModal = () => dispatch(openModal({ name: 'SettingsModal', props: {} }))
-
-  return (
-    <SideBarStyled id="app-drag-region" className={className} noExpansion={noExpansion} noBorder={noBorder}>
-      <TopContainer>{renderTopComponent?.()}</TopContainer>
-      <BottomButtonsContainer>
-        <BottomButtons>
-          <ThemeSwitcher />
-          <Button
-            squared
-            role="secondary"
-            onClick={openSettingsModal}
-            aria-label={t('Settings')}
-            Icon={Settings}
-            data-tooltip-id="sidenav"
-            rounded
-            data-tooltip-content={t('Settings')}
-          />
-          <WalletNameButton />
-        </BottomButtons>
-      </BottomButtonsContainer>
-    </SideBarStyled>
-  )
-}
+const SideBar = ({ renderTopComponent, noExpansion = false, noBorder = false, className }: SideBarProps) => (
+  <SideBarStyled id="app-drag-region" className={className} noExpansion={noExpansion} noBorder={noBorder}>
+    <TopContainer>{renderTopComponent?.()}</TopContainer>
+    <BottomButtonsContainer>
+      <BottomButtons>
+        <WalletNameButton />
+      </BottomButtons>
+    </BottomButtonsContainer>
+  </SideBarStyled>
+)
 
 export default SideBar
 

diff --git a/apps/desktop-wallet/src/components/PageComponents/VerticalDivider.tsx b/apps/desktop-wallet/src/components/PageComponents/VerticalDivider.tsx
@@ -20,7 +20,7 @@ import styled from 'styled-components'
 
 export default styled.div`
   width: 1px;
-  min-height: var(--spacing-4);
-  height: 100%;
+  min-height: var(--spacing-3);
+  height: 70%;
   background-color: ${({ theme }) => theme.border.primary};
 `
diff --git a/apps/desktop-wallet/src/components/ThemeSwitcher.tsx b/apps/desktop-wallet/src/components/ThemeSwitcher.tsx
@@ -16,7 +16,6 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { colord } from 'colord'
 import { motion } from 'framer-motion'
 import { Moon, Sun } from 'lucide-react'
 import styled from 'styled-components'
@@ -30,10 +29,10 @@ interface ThemeSwitcherProps {
   className?: string
 }
 
-const switcherSize = 36
+const switcherSize = 34
 
-const lightColor = '#fab01e'
-const darkColor = '#422c08'
+const lightColor = '#ffc95c'
+const darkColor = '#ffb623'
 
 const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
   const theme = useAppSelector((state) => state.global.theme)
@@ -56,11 +55,11 @@ const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
       onKeyDown={(e) => onEnterOrSpace(e, handleThemeToggle)}
     >
       <ThemeRotatingContainer animate={{ rotate: isDark ? 0 : 180 }} initial={{ rotate: isDark ? 0 : 180 }}>
-        <ThemeIconContainer style={{ backgroundColor: colord(darkColor).alpha(0.4).toHex() }}>
-          <Moon size={20} stroke={lightColor} />
+        <ThemeIconContainer>
+          <Moon size={16} stroke={lightColor} />
         </ThemeIconContainer>
-        <ThemeIconContainer style={{ backgroundColor: colord(lightColor).alpha(0.1).toHex() }}>
-          <Sun size={20} stroke={lightColor} />
+        <ThemeIconContainer>
+          <Sun size={16} stroke={darkColor} />
         </ThemeIconContainer>
       </ThemeRotatingContainer>
     </div>

diff --git a/apps/desktop-wallet/src/components/Tooltips.tsx b/apps/desktop-wallet/src/components/Tooltips.tsx
@@ -20,7 +20,7 @@ import Tooltip from '@/components/Tooltip'
 
 const Tooltips = () => (
   <>
-    <Tooltip id="default" />
+    <Tooltip id="default" delayShow={0} />
     <Tooltip id="sidenav" place="right" />
     <Tooltip id="copy" place="bottom" />
   </>

diff --git a/apps/desktop-wallet/src/components/WorthOverviewPanel.tsx b/apps/desktop-wallet/src/components/WorthOverviewPanel.tsx
@@ -22,6 +22,7 @@ import styled from 'styled-components'
 
 import AnimatedBackground from '@/components/AnimatedBackground'
 import Box from '@/components/Box'
+import NetworkSwitch from '@/components/NetworkSwitch'
 import AddressWorth from '@/modals/AddressDetailsModal/AddressWorth'
 import WalletWorth from '@/pages/UnlockedWallet/OverviewPage/WalletWorth'
 
@@ -45,7 +46,9 @@ const WorthOverviewPanel = ({ className, addressHash, children }: WorthOverviewP
         <Balances>
           <BalancesRow>
             <BalancesColumn>
-              <Today>{t('Value today')}</Today>
+              <Surtitle>
+                <Worth>{t('Value today')}</Worth> <NetworkSwitch />
+              </Surtitle>
               {singleAddress ? <AddressWorth addressHash={addressHash} /> : <WalletWorth />}
             </BalancesColumn>
           </BalancesRow>
@@ -97,9 +100,15 @@ const BalancesColumn = styled.div`
   min-width: 200px;
 `
 
-const Today = styled.div`
+const Surtitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+const Worth = styled.span`
+  flex: 1;
+  white-space: nowrap;
   color: ${({ theme }) => theme.font.tertiary};
   font-size: 18px;
-  margin-bottom: 4px;
-  text-align: center;
 `
diff --git a/apps/desktop-wallet/src/features/settings/SettingsButton.tsx b/apps/desktop-wallet/src/features/settings/SettingsButton.tsx
@@ -0,0 +1,45 @@
+/*
+Copyright 2018 - 2024 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with the library. If not, see <http://www.gnu.org/licenses/>.
+*/
+import { Settings } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import Button from '@/components/Button'
+import { openModal } from '@/features/modals/modalActions'
+import { useAppDispatch } from '@/hooks/redux'
+
+const SettingsButton = () => {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+
+  const openSettingsModal = () => dispatch(openModal({ name: 'SettingsModal', props: {} }))
+  return (
+    <Button
+      squared
+      role="secondary"
+      onClick={openSettingsModal}
+      aria-label={t('Settings')}
+      Icon={Settings}
+      data-tooltip-id="sidenav"
+      rounded
+      transparent
+      data-tooltip-content={t('Settings')}
+    />
+  )
+}
+
+export default SettingsButton