Avoid scaling resolution issues, effort to make UI crisper / denser

alephium · Jan 22, 2025 · 342aa28 · 342aa28
1 parent 804a183
commit 342aa28
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 36 deletions.
diff --git a/apps/desktop-wallet/src/animations/index.ts b/apps/desktop-wallet/src/animations/index.ts
@@ -65,9 +65,9 @@ export const fadeInOutFast = {
   ...fastTransition
 }
 
-export const fadeInOutScaleFast = {
-  initial: { opacity: 0, scale: 0.98 },
-  animate: { opacity: 1, scale: 1 },
-  exit: { opacity: 0, scale: 0.98 },
+export const fadeInOutBottomFast = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 1 },
+  exit: { opacity: 0, y: 1 },
   ...fastTransition
 }
diff --git a/apps/desktop-wallet/src/components/Button.tsx b/apps/desktop-wallet/src/components/Button.tsx
@@ -32,7 +32,7 @@ const Button = ({
   disabled,
   submit,
   Icon,
-  iconSize = 16,
+  iconSize = 14,
   className,
   isHighlighted,
   loading,
@@ -76,7 +76,7 @@ const Button = ({
         <>
           {Icon && (
             <ButtonIcon>
-              <Icon size={iconSize} />
+              <Icon size={!children ? 16 : iconSize} />
             </ButtonIcon>
           )}
           <ButtonContent>{children as ReactNode}</ButtonContent>
@@ -224,7 +224,7 @@ export default styled(Button)`
   align-items: center;
   justify-content: ${({ Icon }) => (Icon ? 'center' : 'flex-start')};
   height: ${({ circle, short, tall, tiny }) =>
-    tiny ? '28px' : short ? '32px' : circle ? '34px' : tall ? '48px' : '42px'};
+    tiny ? '28px' : short ? '32px' : circle ? '34px' : tall ? '48px' : '40px'};
   width: ${({ circle, short, wide, tiny }) =>
     tiny ? '28px' : circle ? '34px' : short && !wide ? 'auto' : wide ? '100%' : '80%'};
   max-width: ${({ wide }) => (wide ? 'auto' : '250px')};

diff --git a/apps/desktop-wallet/src/components/NavItem.tsx b/apps/desktop-wallet/src/components/NavItem.tsx
@@ -51,10 +51,8 @@ const NavItem = ({ Icon, label, to, onClick }: NavItemProps) => {
 const ButtonStyled = styled(Button)<{ isActive: boolean }>`
   margin: 0;
   text-align: left;
-  gap: 14px;
-  font-weight: var(--fontWeight-medium);
   opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
-  padding: 0 18px;
+  border-radius: var(--radius-big);
 
   @media (max-width: ${sidebarExpandThresholdPx}px) {
     gap: 0;

diff --git a/apps/desktop-wallet/src/components/Popup.tsx b/apps/desktop-wallet/src/components/Popup.tsx
@@ -2,7 +2,7 @@ import { motion } from 'framer-motion'
 import { MouseEvent, ReactNode, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
-import { fadeInOutScaleFast, fastTransition } from '@/animations'
+import { fadeInOutBottomFast, fastTransition } from '@/animations'
 import Scrollbar from '@/components/Scrollbar'
 import ModalContainer from '@/modals/ModalContainer'
 import { Coordinates } from '@/types/numbers'
@@ -61,8 +61,8 @@ const Popup = ({ children, onClose, title, hookCoordinates, extraHeaderContent,
       role="dialog"
       ref={contentRef}
       style={hookOffset && { x: hookOffset.x }}
-      animate={hookOffset && { ...fadeInOutScaleFast.animate, ...hookOffset }}
-      exit={fadeInOutScaleFast.exit}
+      animate={hookOffset && { ...fadeInOutBottomFast.animate, ...hookOffset }}
+      exit={fadeInOutBottomFast.exit}
       minWidth={minWidth}
       {...fastTransition}
     >

diff --git a/apps/desktop-wallet/src/modals/CenteredModal.tsx b/apps/desktop-wallet/src/modals/CenteredModal.tsx
@@ -5,7 +5,7 @@ import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { fadeInOutScaleFast } from '@/animations'
+import { fadeInOutBottomFast } from '@/animations'
 import Button from '@/components/Button'
 import { Section } from '@/components/PageComponents/PageContainers'
 import PanelTitle, { TitleContainer } from '@/components/PageComponents/PanelTitle'
@@ -59,7 +59,7 @@ const CenteredModal: FC<CenteredModalProps> = ({
 
   return (
     <ModalContainer id={id} focusMode={focusMode} hasPadding skipFocusOnMount={skipFocusOnMount} {...rest}>
-      <CenteredBox role="dialog" {...fadeInOutScaleFast} narrow={narrow} fullScreen={fullScreen}>
+      <CenteredBox role="dialog" {...fadeInOutBottomFast} narrow={narrow} fullScreen={fullScreen}>
         <ModalHeader transparent={transparentHeader}>
           <TitleRow>
             {onBack && !disableBack && (

diff --git a/apps/desktop-wallet/src/modals/CurrentWalletModal.tsx b/apps/desktop-wallet/src/modals/CurrentWalletModal.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import { fadeInOutScaleFast } from '@/animations'
+import { fadeInOutBottomFast } from '@/animations'
 import Button from '@/components/Button'
 import InfoBox from '@/components/InfoBox'
 import { ModalBaseProp } from '@/features/modals/modalTypes'
@@ -22,7 +22,7 @@ const CurrentWalletModal = memo(({ id }: ModalBaseProp) => {
 
   return (
     <ModalContainer id={id}>
-      <NotificationsBox role="dialog" {...fadeInOutScaleFast}>
+      <NotificationsBox role="dialog" {...fadeInOutBottomFast}>
         <h2>{t('Current wallet')}</h2>
 
         {numberOfWallets === 1 ? <InfoBox text={activeWalletName} /> : <WalletSelect />}

diff --git a/apps/desktop-wallet/src/modals/SettingsModal/index.tsx b/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
@@ -5,7 +5,7 @@ import { memo, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css, useTheme } from 'styled-components'
 
-import { fadeInOutScaleFast } from '@/animations'
+import { fadeInOutBottomFast } from '@/animations'
 import Button from '@/components/Button'
 import Scrollbar from '@/components/Scrollbar'
 import { TabItem } from '@/components/TabBar'
@@ -75,7 +75,7 @@ const SettingsModal = memo(({ id, initialTabValue }: ModalBaseProp & SettingsMod
 
   return (
     <ModalContainer id={id}>
-      <CenteredBox role="dialog" {...fadeInOutScaleFast}>
+      <CenteredBox role="dialog" {...fadeInOutBottomFast}>
         <TabTitlesColumn>
           <TabTitlesColumnContent>
             <TabTitles>
@@ -125,6 +125,7 @@ const SettingsModal = memo(({ id, initialTabValue }: ModalBaseProp & SettingsMod
             </ColumnContent>
           </Scrollbar>
           <ColumnHeader>
+            <ColumnHeaderBackground />
             <ColumnTitle>{currentTab.label}</ColumnTitle>
             <Button aria-label={t('Close')} circle role="secondary" onClick={onClose} Icon={X} tiny />
           </ColumnHeader>
@@ -177,11 +178,20 @@ const ColumnHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 58px;
-  background: ${({ theme }) => `linear-gradient(to bottom, ${colord(theme.bg.background1).toHex()} 55%, transparent)`};
+  min-height: 50px;
   z-index: 1;
 `
 
+const ColumnHeaderBackground = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: -10px;
+  right: 0;
+  left: 0;
+  background: ${({ theme }) => `linear-gradient(to bottom, ${colord(theme.bg.background1).toHex()} 55%, transparent)`};
+  z-index: 0;
+`
+
 const ColumnTitle = styled.div`
   flex: 1;
   display: flex;
@@ -190,6 +200,7 @@ const ColumnTitle = styled.div`
   font-size: 16px;
   font-weight: var(--fontWeight-semiBold);
   color: ${({ theme }) => theme.font.primary};
+  z-index: 1;
 `
 
 const ColumnContent = styled.div`

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -36,7 +36,7 @@ const UnlockedWalletLayout = ({ children, title, className }: UnlockedWalletLayo
           <>
             <BrandContainer>
               <AlephiumLogoContainer>
-                <AlephiumLogo contrasted />
+                <AlephiumLogo />
               </AlephiumLogoContainer>
               <AlephiumName>alephium</AlephiumName>
             </BrandContainer>
@@ -102,31 +102,23 @@ const SideNavigation = styled.nav`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 5px;
 `
 
 const BrandContainer = styled.div`
   display: flex;
-  gap: 14px;
+  gap: 10px;
   align-items: center;
   margin-bottom: var(--spacing-6);
-  margin-left: 8px;
-
-  @media (max-width: ${sidebarExpandThresholdPx}px) {
-    margin-left: auto;
-    margin-right: auto;
-  }
+  margin-left: var(--spacing-3);
 `
 
 const AlephiumLogoContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 13px;
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background-color: ${({ theme }) => theme.bg.contrast};
+  width: 13px;
+  height: 13px;
 `
 
 const AlephiumName = styled.div`

diff --git a/apps/desktop-wallet/src/style/globalStyles.ts b/apps/desktop-wallet/src/style/globalStyles.ts
@@ -38,7 +38,7 @@ export const GlobalStyle = createGlobalStyle`
     --radius-full: 100%;
 
     --fontWeight-normal: 400;
-    --fontWeight-medium: 550;
+    --fontWeight-medium: 500;
     --fontWeight-semiBold: 600;
     --fontWeight-bold: 700;