Thinner font + misc

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

Hide file tree

Showing 11 changed files with 25 additions and 26 deletions.
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/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/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/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/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 {