Thinner font + misc

alephium · Dec 17, 2024 · 787d3fa · 787d3fa
1 parent f72ca9f
commit 787d3fa
Show file tree

Hide file tree

Showing 18 changed files with 38 additions and 39 deletions.
diff --git a/apps/desktop-wallet/src/components/AnimatedBackground.tsx b/apps/desktop-wallet/src/components/AnimatedBackground.tsx
@@ -119,9 +119,9 @@ const AnimatedBackground = ({
           const circleAnimation = [circle1, circle2, circle3, circle4, circle5][index]
           const backgroundColors = [
             isDarkTheme ? '#120096' : '#c689ff',
-            '#ff8119',
-            '#ff6969',
-            isDarkTheme ? '#e484ff' : '#d579ff',
+            isDarkTheme ? '#ff8119' : '#ffd4b6',
+            isDarkTheme ? '#ff6969' : '#ffaaaa',
+            isDarkTheme ? '#e484ff' : '#ffb7ff',
             isDarkTheme ? '#1600da' : '#ff9bc8'
           ]
           return (

diff --git a/apps/desktop-wallet/src/components/AppHeader.tsx b/apps/desktop-wallet/src/components/AppHeader.tsx
@@ -163,7 +163,7 @@ const AppHeaderContainer = styled.div`
   align-items: center;
 
   height: ${appHeaderHeightPx}px;
-  padding: 0 var(--spacing-4) 0 40px;
+  padding: 0 var(--spacing-2) 0 40px;
   gap: var(--spacing-1);
 `
 
@@ -173,7 +173,7 @@ const GradientBackground = styled(motion.div)`
   left: 0;
   right: 0;
   height: 140px;
-  background: ${({ theme }) => `linear-gradient(to bottom, ${colord(theme.bg.background2).toHex()} 35%, transparent)`};
+  background: ${({ theme }) => `linear-gradient(to bottom, ${colord(theme.bg.background1).toHex()} 35%, transparent)`};
   pointer-events: none;
   z-index: 0;
 `

diff --git a/apps/desktop-wallet/src/components/InfoBox.tsx b/apps/desktop-wallet/src/components/InfoBox.tsx
@@ -100,7 +100,6 @@ const TextContainer = styled.div<{ wordBreak?: boolean; ellipsis?: boolean }>`
   font-weight: var(--fontWeight-medium);
   word-break: ${({ wordBreak }) => (wordBreak ? 'break-all' : 'initial')};
   text-align: center;
-  font-size: 14px;
 
   ${({ ellipsis }) =>
     ellipsis

diff --git a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -51,7 +51,7 @@ const SideBarStyled = styled.div<{ noBorder: boolean; noExpansion: boolean }>`
   align-items: center;
   z-index: 1;
   width: ${walletSidebarWidthPx}px;
-  padding: ${appHeaderHeightPx - 20}px var(--spacing-3) var(--spacing-3) var(--spacing-3);
+  padding: ${appHeaderHeightPx}px var(--spacing-2) var(--spacing-2) var(--spacing-2);
   border-right: ${({ theme, noBorder }) => (!noBorder ? `1px solid ${theme.border.secondary}` : 'none')};
   background-color: ${({ theme }) => theme.bg.background2};
 

diff --git a/apps/desktop-wallet/src/components/SplashScreen.tsx b/apps/desktop-wallet/src/components/SplashScreen.tsx
@@ -20,7 +20,7 @@ import { motion } from 'framer-motion'
 import { useState } from 'react'
 import styled from 'styled-components'
 
-import { slowTransition } from '@/animations'
+import { fastTransition } from '@/animations'
 import alephiumLogo from '@/images/alephium_logo_monochrome.svg'
 
 const SplashScreen = () => {
@@ -32,13 +32,13 @@ const SplashScreen = () => {
     <StyledSplashScreen
       initial={{ opacity: 1 }}
       animate={{ opacity: 0 }}
-      transition={{ duration: 0.3, delay: 1 }}
+      transition={{ duration: 0.5, delay: 0.5 }}
       onAnimationComplete={() => setSplashScreenVisible(false)}
     >
       <AlephiumLogoContainer
-        initial={{ opacity: 0, scale: 1.5 }}
+        initial={{ opacity: 0, scale: 1.2 }}
         animate={{ opacity: 1, scale: 1 }}
-        {...slowTransition}
+        {...fastTransition}
       >
         <AlephiumLogo />
       </AlephiumLogoContainer>

diff --git a/apps/desktop-wallet/src/components/TabBar.tsx b/apps/desktop-wallet/src/components/TabBar.tsx
@@ -101,7 +101,7 @@ export const Tab = styled.div<{ isActive: boolean }>`
   background-color: ${({ isActive, theme }) => (isActive ? theme.bg.accent : theme.bg.primary)};
   cursor: pointer;
   font-size: 15px;
-  font-weight: var(--fontWeight-semiBold);
+  font-weight: var(--fontWeight-medium);
   border-radius: 100px;
   padding: 0 30px;
   height: calc(var(--inputHeight) - 2px);

diff --git a/apps/desktop-wallet/src/components/WorthOverview.tsx b/apps/desktop-wallet/src/components/WorthOverview.tsx
@@ -33,6 +33,6 @@ const WorthOverview = ({ overrideWorth, worth, ...props }: WorthOverviewProps) =
 export default WorthOverview
 
 const WorthOverviewStyled = styled(Amount)`
-  font-size: 38px;
+  font-size: 36px;
   font-weight: var(--fontWeight-bold);
 `
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={600} />
+      <AnimatedBackground height={700} />
       <Panel>
         <Balances>
           <BalancesRow>
@@ -99,6 +99,7 @@ const BalancesColumn = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   min-width: 200px;
+  gap: 4px;
 `
 
 const Surtitle = styled.div`
@@ -112,5 +113,5 @@ const Worth = styled.span`
   flex: 1;
   white-space: nowrap;
   color: ${({ theme }) => theme.font.tertiary};
-  font-size: 18px;
+  font-size: 16px;
 `
diff --git a/apps/desktop-wallet/src/features/transactionsDisplay/transactionRow/AddressCell.tsx b/apps/desktop-wallet/src/features/transactionsDisplay/transactionRow/AddressCell.tsx
@@ -21,7 +21,6 @@ import styled, { css } from 'styled-components'
 const AddressCell = styled.div<{ alignRight?: boolean; hasMargins?: boolean }>`
   flex: 1;
   min-width: 0;
-  max-width: 130px;
   align-items: baseline;
   display: flex;
 

diff --git a/apps/desktop-wallet/src/features/transactionsDisplay/transactionRow/TimestampCell.tsx b/apps/desktop-wallet/src/features/transactionsDisplay/transactionRow/TimestampCell.tsx
@@ -55,7 +55,6 @@ const LabelTime = styled.div`
 
 const DirectionLabel = styled.span`
   color: ${({ theme }) => theme.font.primary};
-  font-weight: var(--fontWeight-semiBold);
   font-size: 14px;
 `
 

diff --git a/apps/desktop-wallet/src/modals/SettingsModal/index.tsx b/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
@@ -103,10 +103,10 @@ const SettingsModal = memo(({ id, initialTabValue }: ModalBaseProp & SettingsMod
                   <TabTitleButton
                     key={tab.value}
                     role="secondary"
-                    variant="faded"
-                    wide
                     transparent={!isActive}
                     onClick={() => setCurrentTab(tab)}
+                    style={{ opacity: !isActive ? 0.5 : 1 }}
+                    wide
                   >
                     {tab.label}
                   </TabTitleButton>

diff --git a/apps/desktop-wallet/src/modals/SideModal.tsx b/apps/desktop-wallet/src/modals/SideModal.tsx
@@ -89,7 +89,7 @@ const Sidebar = styled(motion.div)<{ width: number }>`
   width: 100%;
   max-width: ${({ width }) => width}px;
   max-height: 95vh;
-  background-color: ${({ theme }) => theme.bg.background2};
+  background-color: ${({ theme }) => theme.bg.background1};
   position: relative;
   margin: 25px 20px 25px auto;
   border-radius: var(--radius-huge);

diff --git a/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx b/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx
@@ -28,7 +28,6 @@ import Input from '@/components/Inputs/Input'
 import Select from '@/components/Inputs/Select'
 import WalletPassphrase from '@/components/Inputs/WalletPassphrase'
 import { FloatingPanel, Section } from '@/components/PageComponents/PageContainers'
-import Paragraph from '@/components/Paragraph'
 import ConnectWithLedgerButton from '@/features/ledger/ConnectWithLedgerButton'
 import { useWalletConnectContext } from '@/features/walletConnect/walletConnectContext'
 import { useAppSelector } from '@/hooks/redux'
@@ -150,11 +149,6 @@ const WalletPassphraseStyled = styled(WalletPassphrase)`
   right: 20px;
 `
 
-const ParagraphStyled = styled(Paragraph)`
-  font-weight: var(--fontWeight-semiBold);
-  font-size: 16px;
-`
-
 const BrandContainer = styled.div`
   display: flex;
   gap: 14px;
@@ -166,9 +160,9 @@ const AlephiumLogoContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 30px;
-  width: 90px;
-  height: 90px;
+  padding: 34px;
+  width: 100px;
+  height: 100px;
   border-radius: 100px;
   background-color: ${({ theme }) => theme.bg.contrast};
 `
diff --git a/apps/desktop-wallet/src/pages/LockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/LockedWalletLayout.tsx
@@ -29,7 +29,7 @@ interface LockedWalletLayoutProps extends MotionProps {
 
 const LockedWalletLayout: FC<LockedWalletLayoutProps> = ({ children, ...props }) => (
   <>
-    <AnimatedBackgroundStyled offsetTop={360} />
+    <AnimatedBackgroundStyled offsetTop={400} />
     <motion.main {...props}>
       <ScrollbarCustom>
         <AppHeader position="fixed" />

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AdvancedOperationsButton.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AdvancedOperationsButton.tsx
@@ -30,7 +30,7 @@ const AdvancedOperationsButton = () => {
   const openAdvancedOperationsSideModal = () => dispatch(openModal({ name: 'AdvancedOperationsSideModal' }))
 
   return (
-    <Button role="secondary" Icon={Wrench} onClick={openAdvancedOperationsSideModal}>
+    <Button role="secondary" Icon={Wrench} onClick={openAdvancedOperationsSideModal} short>
       {t('Advanced operations')}
     </Button>
   )

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx
@@ -53,7 +53,7 @@ const TabContent: FC<TabContentProps> = ({
       />
       {HeaderMiddleComponent}
       <ButtonContainer {...fadeInOut}>
-        <HeaderButton wide onClick={onButtonClick}>
+        <HeaderButton wide onClick={onButtonClick} short>
           {buttonText}
         </HeaderButton>
       </ButtonContainer>

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -86,7 +86,7 @@ export const UnlockedWalletPanel = styled.div<{
   padding-right: 40px;
 
   ${({ top, doubleTop }) => css`
-    padding-top: ${top ? 20 : doubleTop ? 40 : 0}px;
+    padding-top: ${top ? 10 : doubleTop ? 20 : 0}px;
   `}
 
   ${({ bottom }) =>
@@ -126,16 +126,22 @@ const BrandContainer = styled.div`
   display: flex;
   gap: 14px;
   align-items: center;
-  margin-bottom: var(--spacing-7);
+  margin-bottom: var(--spacing-6);
+  margin-left: 8px;
+
+  @media (max-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
 `
 
 const AlephiumLogoContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 12px;
-  width: 36px;
-  height: 36px;
+  padding: 10px;
+  width: 32px;
+  height: 32px;
   border-radius: 100px;
   background-color: ${({ theme }) => theme.bg.contrast};
 `

diff --git a/apps/desktop-wallet/src/style/globalStyles.ts b/apps/desktop-wallet/src/style/globalStyles.ts
@@ -21,7 +21,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import resets from '@/style/resets'
 
-export const appHeaderHeightPx = 72
+export const appHeaderHeightPx = 50
 export const walletSidebarWidthPx = 76
 export const messagesLeftMarginPx = 70
 
@@ -54,7 +54,7 @@ export const GlobalStyle = createGlobalStyle`
     --radius-full: 100%;
 
     --fontWeight-normal: 400;
-    --fontWeight-medium: 500;
+    --fontWeight-medium: 550;
     --fontWeight-semiBold: 600;
     --fontWeight-bold: 700;
 
@@ -70,6 +70,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     color: ${({ theme }) => theme.font.primary};
     background-color: ${({ theme }) => theme.bg.primary};
+    font-weight: var(--fontWeight-medium);
   }
 
   .skeleton-loader {