Many touches all over the place, aiming for a more compact / pro look…

… & feel
alephium · Dec 17, 2024 · f72ca9f · f72ca9f
1 parent 4dbb2bf
commit f72ca9f
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 38 deletions.
diff --git a/apps/desktop-wallet/src/animations/index.ts b/apps/desktop-wallet/src/animations/index.ts
@@ -65,7 +65,7 @@ export const normalTransition = {
 }
 
 export const fastTransition = {
-  transition: { type: 'spring', damping: 40, stiffness: 800 }
+  transition: { type: 'spring', damping: 40, stiffness: 900 }
 }
 
 export const fadeInSlowly = {
@@ -84,8 +84,8 @@ export const fadeInOutFast = {
 }
 
 export const fadeInOutScaleFast = {
-  initial: { opacity: 0, scale: 0.95 },
+  initial: { opacity: 0, scale: 0.98 },
   animate: { opacity: 1, scale: 1 },
-  exit: { opacity: 0, scale: 0.95 },
+  exit: { opacity: 0, scale: 0.98 },
   ...fastTransition
 }
diff --git a/apps/desktop-wallet/src/components/Button.tsx b/apps/desktop-wallet/src/components/Button.tsx
@@ -148,15 +148,15 @@ export default styled(Button)`
 
     const activeBgColor = transparent
       ? colord(theme.bg.primary).isDark()
-        ? colord(theme.global.accent).alpha(0.4).toRgbString()
-        : colord(theme.global.accent).lighten(0.1).alpha(0.15).toRgbString()
+        ? colord(theme.bg.primary).alpha(0.4).toRgbString()
+        : colord(theme.bg.primary).lighten(0.1).alpha(0.15).toRgbString()
       : {
           primary: {
             default: colord(theme.global.accent).lighten(0.03).toRgbString(),
             contrast: colord(theme.bg.contrast).alpha(0.8).toRgbString(),
             valid: colord(theme.global.valid).lighten(0.03).toRgbString(),
             alert: colord(theme.global.alert).lighten(0.03).toRgbString(),
-            faded: colord(theme.global.accent).lighten(0.03).toRgbString()
+            faded: colord(theme.bg.primary).lighten(0.03).toRgbString()
           }[variant],
           secondary: {
             default: colord(theme.bg.primary).darken(0.08).toRgbString(),
@@ -297,5 +297,4 @@ const ButtonIcon = styled.div`
 
 const ButtonContent = styled.div`
   flex: 1;
-  width: 100%;
 `
diff --git a/apps/desktop-wallet/src/components/Inputs/index.tsx b/apps/desktop-wallet/src/components/Inputs/index.tsx
@@ -70,7 +70,7 @@ export const inputDefaultStyle = (
   height: ${heightSize === 'small' ? '38px' : heightSize === 'big' ? '50px' : 'var(--inputHeight)'};
   width: 100%;
   border-radius: 100px;
-  border: 2px solid ${({ theme }) => theme.border.primary};
+  border: 1px solid ${({ theme }) => theme.border.primary};
   color: ${({ theme }) => theme.font.primary};
   padding: ${hasIcon ? `0 45px 0 ${inputStyling.paddingLeftRight}` : `0 ${inputStyling.paddingLeftRight}`};
   font-weight: var(--fontWeight-medium);
@@ -89,7 +89,7 @@ export const inputDefaultStyle = (
 
   &:focus {
     background-color: ${({ theme }) => theme.bg.highlight};
-    border: 2px solid ${({ theme }) => theme.global.accent};
+    border: 1px solid ${({ theme }) => theme.global.accent};
   }
 
   &.error {

diff --git a/apps/desktop-wallet/src/components/NavItem.tsx b/apps/desktop-wallet/src/components/NavItem.tsx
@@ -49,14 +49,15 @@ const NavItem = ({ Icon, label, to, onClick }: NavItemProps) => {
     <>
       <TooltipStyleOverride />
       <ButtonStyled
+        role="secondary"
         aria-label={label}
         onClick={handleClick}
         Icon={Icon}
         transparent={!isActive}
         isActive={isActive}
         data-tooltip-id="sidenav"
         data-tooltip-content={label}
-        iconColor={isActive ? theme.global.accent : theme.font.secondary}
+        iconColor={theme.font.primary}
         wide
       >
         <LabelContainer>{label}</LabelContainer>
@@ -69,14 +70,15 @@ const ButtonStyled = styled(Button)<{ isActive: boolean }>`
   margin: 0;
   border-radius: var(--radius-big);
   text-align: left;
-  gap: 16px;
-  font-weight: ${({ isActive }) => (isActive ? 'var(--fontWeight-semiBold)' : 'var(--fontWeight-medium)')};
+  gap: 14px;
+  font-weight: var(--fontWeight-medium);
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
 
   ${({ isActive, theme }) =>
     isActive &&
     css`
-      background-color: ${theme.bg.accent};
-      color: ${theme.global.accent};
+      background-color: ${theme.bg.highlight};
+      color: ${theme.font.primary};
     `}
 
   @media (max-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {

diff --git a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -29,7 +29,7 @@ interface SideBarProps {
   className?: string
 }
 
-export const SIDEBAR_EXPAND_THRESHOLD_PX = 1200
+export const SIDEBAR_EXPAND_THRESHOLD_PX = 1300
 
 const SideBar = ({ renderTopComponent, noExpansion = false, noBorder = false, className }: SideBarProps) => (
   <SideBarStyled id="app-drag-region" className={className} noExpansion={noExpansion} noBorder={noBorder}>
@@ -53,6 +53,7 @@ const SideBarStyled = styled.div<{ noBorder: boolean; noExpansion: boolean }>`
   width: ${walletSidebarWidthPx}px;
   padding: ${appHeaderHeightPx - 20}px var(--spacing-3) var(--spacing-3) var(--spacing-3);
   border-right: ${({ theme, noBorder }) => (!noBorder ? `1px solid ${theme.border.secondary}` : 'none')};
+  background-color: ${({ theme }) => theme.bg.background2};
 
   ${({ noExpansion }) =>
     !noExpansion
@@ -68,7 +69,7 @@ const SideBarStyled = styled.div<{ noBorder: boolean; noExpansion: boolean }>`
           bottom: 0;
           top: 0;
           z-index: 3;
-        `}
+        `};
 `
 
 const TopContainer = styled.div`

diff --git a/apps/desktop-wallet/src/components/Popup.tsx b/apps/desktop-wallet/src/components/Popup.tsx
@@ -144,6 +144,7 @@ const Header = styled.div<{ hasExtraContent: boolean }>`
   height: ${({ hasExtraContent }) => (hasExtraContent ? 'auto' : `${headerHeight}px`)};
   padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4);
   border-bottom: 1px solid ${({ theme }) => theme.border.primary};
+  background-color: ${({ theme }) => theme.bg.background2};
 
   display: flex;
   align-items: center;

diff --git a/apps/desktop-wallet/src/components/WalletNameButton.tsx b/apps/desktop-wallet/src/components/WalletNameButton.tsx
@@ -54,7 +54,6 @@ const WalletNameButtonStyled = styled(motion.div)`
   align-items: center;
   justify-content: center;
   font-weight: var(--fontWeight-semiBold);
-  background-color: ${({ theme }) => theme.bg.background1};
   overflow: hidden;
   z-index: 1;
 

diff --git a/apps/desktop-wallet/src/features/theme/themes.ts b/apps/desktop-wallet/src/features/theme/themes.ts
@@ -22,27 +22,27 @@ import { DefaultTheme } from 'styled-components'
 export const lightTheme: DefaultTheme = {
   name: 'light',
   bg: {
-    primary: 'rgba(0, 0, 0, 0.05)',
+    primary: 'rgba(0, 0, 0, 0.04)',
     secondary: 'rgba(0, 0, 0, 0.03)',
     tertiary: 'rgba(0, 0, 0, 0.02)',
     contrast: '#000',
     background1: '#fff',
-    background2: '#fff',
+    background2: '#fafafa',
     hover: 'rgba(0, 0, 0, 0.01)',
-    highlight: 'rgba(0, 0, 0, 0.025)',
-    accent: colord('#0f22e3').alpha(0.15).toHex()
+    highlight: 'rgba(0, 0, 0, 0.05)',
+    accent: colord('#0f22e3').alpha(0.05).toHex()
   },
   font: {
-    primary: '#00001d',
+    primary: '#000014',
     secondary: '#000026',
     tertiary: 'rgba(0, 0, 0, 0.4)',
     contrastPrimary: 'rgba(255, 255, 255, 1)',
     contrastSecondary: 'rgba(255, 255, 255, 0.8)',
     highlight: '#ef6c5c'
   },
   border: {
-    primary: 'rgba(0, 0, 0, 0.07)',
-    secondary: 'rgba(0, 0, 0, 0.05)'
+    primary: 'rgba(0, 0, 0, 0.09)',
+    secondary: 'rgba(0, 0, 0, 0.06)'
   },
   shadow: {
     primary: '0 1px 1px rgba(0, 0, 0, 0.03)',
@@ -66,8 +66,8 @@ export const darkTheme: DefaultTheme = {
     secondary: 'rgba(255, 255, 255, 0.03)',
     tertiary: 'rgba(255, 255, 255, 0.02)',
     contrast: 'rgba(255, 255, 255, 1)',
-    background1: '#0b0b0d',
-    background2: '#0b0b0d',
+    background1: '#0d0d0f',
+    background2: '#070708',
     hover: 'rgba(255, 255, 255, 0.01)',
     highlight: 'rgba(255, 255, 255, 0.06)',
     accent: colord('#3b62f0').alpha(0.1).toHex()

diff --git a/apps/desktop-wallet/src/modals/CenteredModal.tsx b/apps/desktop-wallet/src/modals/CenteredModal.tsx
@@ -151,6 +151,7 @@ export const HeaderLogo = styled.div`
 const CenteredBox = styled(motion.div)<{ narrow: boolean; fullScreen: boolean }>`
   display: flex;
   flex-direction: column;
+  border: 1px solid ${({ theme }) => theme.border.primary};
 
   position: relative;
 

diff --git a/apps/desktop-wallet/src/modals/SettingsModal/index.tsx b/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
@@ -102,7 +102,7 @@ const SettingsModal = memo(({ id, initialTabValue }: ModalBaseProp & SettingsMod
                 return (
                   <TabTitleButton
                     key={tab.value}
-                    role={isActive ? 'primary' : 'secondary'}
+                    role="secondary"
                     variant="faded"
                     wide
                     transparent={!isActive}
@@ -124,7 +124,7 @@ const SettingsModal = memo(({ id, initialTabValue }: ModalBaseProp & SettingsMod
           </TabTitlesColumnContent>
           <TabTitlesColumnHeader>
             <ColumnTitle>
-              <Settings color={theme.font.secondary} strokeWidth={1} />
+              <Settings color={theme.font.secondary} size={16} />
               {t('Settings')}
             </ColumnTitle>
           </TabTitlesColumnHeader>
@@ -168,6 +168,7 @@ const CenteredBox = styled(motion.div)`
   box-shadow: ${({ theme }) => theme.shadow.tertiary};
   border-radius: var(--radius-huge);
   background-color: ${({ theme }) => theme.bg.background1};
+  border: 1px solid ${({ theme }) => theme.border.primary};
 `
 
 const Column = styled.div`
@@ -203,7 +204,7 @@ const ColumnTitle = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
   font-size: 16px;
   font-weight: var(--fontWeight-semiBold);
   color: ${({ theme }) => theme.font.primary};
@@ -262,17 +263,21 @@ const TabTitlesColumnContent = styled(ColumnContent)`
   height: 100%;
 `
 
-const TabTitles = styled.div``
+const TabTitles = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+`
 
 const TabTitlesColumnHeader = styled(ColumnHeader)`
   padding-left: 22px;
   padding-right: 22px;
 `
 
 const TabTitleButton = styled(Button)`
-  height: 46px;
   text-align: left;
   border-radius: var(--radius-big);
+  margin: 0;
 
   &:first-child {
     margin-top: 0;

diff --git a/apps/desktop-wallet/src/modals/SideModal.tsx b/apps/desktop-wallet/src/modals/SideModal.tsx
@@ -94,6 +94,7 @@ const Sidebar = styled(motion.div)<{ width: number }>`
   margin: 25px 20px 25px auto;
   border-radius: var(--radius-huge);
   box-shadow: ${({ theme }) => theme.shadow.tertiary};
+  border: 1px solid ${({ theme }) => theme.border.primary};
   overflow: hidden;
 `
 

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.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 { map } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -77,7 +76,6 @@ const FilterPanelContainer = styled.div`
   width: 100%;
   display: flex;
   z-index: 1;
-  background: ${({ theme }) => `linear-gradient(to top, ${colord(theme.bg.background2).toHex()} 25%, transparent)`};
 `
 
 const StyledUnlockedWalletPanel = styled(UnlockedWalletPanel)`

diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -119,7 +119,7 @@ const SideNavigation = styled.nav`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
 `
 
 const BrandContainer = styled.div`

diff --git a/apps/desktop-wallet/src/style/globalStyles.ts b/apps/desktop-wallet/src/style/globalStyles.ts
@@ -22,7 +22,7 @@ import { createGlobalStyle } from 'styled-components'
 import resets from '@/style/resets'
 
 export const appHeaderHeightPx = 72
-export const walletSidebarWidthPx = 80
+export const walletSidebarWidthPx = 76
 export const messagesLeftMarginPx = 70
 
 const electronWindowDimensions = `
@@ -48,9 +48,9 @@ export const GlobalStyle = createGlobalStyle`
 
     --radius-tiny: 4px;
     --radius-small: 6px;
-    --radius-medium: 10px;
-    --radius-big: 12px;
-    --radius-huge: 22px;
+    --radius-medium: 8px;
+    --radius-big: 10px;
+    --radius-huge: 18px;
     --radius-full: 100%;
 
     --fontWeight-normal: 400;