Further simplification of welcome screen

alephium · Dec 16, 2024 · e562b12 · e562b12
1 parent 2d29a52
commit e562b12
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 53 deletions.
diff --git a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -21,7 +21,6 @@ import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import AlephiumLogo from '@/components/AlephiumLogo'
 import Button from '@/components/Button'
 import ThemeSwitcher from '@/components/ThemeSwitcher'
 import WalletNameButton from '@/components/WalletNameButton'
@@ -46,12 +45,6 @@ const SideBar = ({ renderTopComponent, noExpansion = false, noBorder = false, cl
 
   return (
     <SideBarStyled id="app-drag-region" className={className} noExpansion={noExpansion} noBorder={noBorder}>
-      <BrandContainer>
-        <AlephiumLogoContainer>
-          <AlephiumLogo />
-        </AlephiumLogoContainer>
-        {!noExpansion && <AlephiumName>alephium</AlephiumName>}
-      </BrandContainer>
       <TopContainer>{renderTopComponent?.()}</TopContainer>
       <BottomButtonsContainer>
         <BottomButtons>
@@ -102,34 +95,6 @@ const SideBarStyled = styled.div<{ noBorder: boolean; noExpansion: boolean }>`
         `}
 `
 
-const BrandContainer = styled.div`
-  display: flex;
-  gap: 14px;
-  align-items: center;
-  margin-bottom: var(--spacing-7);
-`
-
-const AlephiumLogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-  width: 36px;
-  height: 36px;
-  border-radius: 100px;
-  background-color: ${({ theme }) => theme.bg.contrast};
-`
-
-const AlephiumName = styled.div`
-  font-size: 18px;
-  font-weight: var(--fontWeight-semiBold);
-  display: none;
-
-  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
-    display: block;
-  }
-`
-
 const TopContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx b/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx
@@ -22,12 +22,12 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
+import AlephiumLogo from '@/components/AlephiumLogo'
 import Button from '@/components/Button'
 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 PanelTitle from '@/components/PageComponents/PanelTitle'
 import Paragraph from '@/components/Paragraph'
 import ConnectWithLedgerButton from '@/features/ledger/ConnectWithLedgerButton'
 import { useWalletConnectContext } from '@/features/walletConnect/walletConnectContext'
@@ -78,17 +78,11 @@ const UnlockPanel = ({ onNewWalletLinkClick }: UnlockPanelProps) => {
   return (
     <>
       <FloatingPanel verticalAlign="center" horizontalAlign="center" transparentBg>
-        <PanelTitle centerText>
-          {pendingDappConnectionUrl
-            ? t('Connect to dApp')
-            : isAwaitingSessionRequestApproval
-              ? t('Received dApp request')
-              : t('Welcome back.')}
-        </PanelTitle>
-        <ParagraphStyled centered secondary>
-          {pendingDappConnectionUrl ||
-            t(wallets.length === 1 ? 'Unlock your wallet to continue.' : 'Unlock a wallet to continue.')}
-        </ParagraphStyled>
+        <BrandContainer>
+          <AlephiumLogoContainer>
+            <AlephiumLogo />
+          </AlephiumLogoContainer>
+        </BrandContainer>
         <SectionStyled inList>
           <Select
             label={t('Wallet')}
@@ -160,3 +154,21 @@ const ParagraphStyled = styled(Paragraph)`
   font-weight: var(--fontWeight-semiBold);
   font-size: 16px;
 `
+
+const BrandContainer = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: var(--spacing-7);
+`
+
+const AlephiumLogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 26px;
+  width: 80px;
+  height: 80px;
+  border-radius: 100px;
+  background-color: ${({ theme }) => theme.bg.contrast};
+`
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -25,9 +25,10 @@ import { useTranslation } from 'react-i18next'
 import styled, { css, DefaultTheme } from 'styled-components'
 
 import { fadeInSlowly } from '@/animations'
+import AlephiumLogo from '@/components/AlephiumLogo'
 import AppHeader from '@/components/AppHeader'
 import NavItem from '@/components/NavItem'
-import SideBar from '@/components/PageComponents/SideBar'
+import SideBar, { SIDEBAR_EXPAND_THRESHOLD_PX } from '@/components/PageComponents/SideBar'
 import ScrollbarCustom from '@/components/Scrollbar'
 import { useAppSelector } from '@/hooks/redux'
 
@@ -49,11 +50,19 @@ const UnlockedWalletLayout = ({ children, title, className }: UnlockedWalletLayo
     <motion.div {...fadeInSlowly} className={className}>
       <SideBar
         renderTopComponent={() => (
-          <SideNavigation>
-            <NavItem Icon={Layers} label={t('Overview')} to="/wallet/overview" />
-            <NavItem Icon={ArrowLeftRight} label={t('Transfers')} to="/wallet/transfers" />
-            <NavItem Icon={Album} label={t('Addresses')} to="/wallet/addresses" />
-          </SideNavigation>
+          <>
+            <BrandContainer>
+              <AlephiumLogoContainer>
+                <AlephiumLogo />
+              </AlephiumLogoContainer>
+              <AlephiumName>alephium</AlephiumName>
+            </BrandContainer>
+            <SideNavigation>
+              <NavItem Icon={Layers} label={t('Overview')} to="/wallet/overview" />
+              <NavItem Icon={ArrowLeftRight} label={t('Transfers')} to="/wallet/transfers" />
+              <NavItem Icon={Album} label={t('Addresses')} to="/wallet/addresses" />
+            </SideNavigation>
+          </>
         )}
       ></SideBar>
 
@@ -112,3 +121,31 @@ const SideNavigation = styled.nav`
   flex-direction: column;
   gap: 15px;
 `
+
+const BrandContainer = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: var(--spacing-7);
+`
+
+const AlephiumLogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  width: 36px;
+  height: 36px;
+  border-radius: 100px;
+  background-color: ${({ theme }) => theme.bg.contrast};
+`
+
+const AlephiumName = styled.div`
+  font-size: 18px;
+  font-weight: var(--fontWeight-semiBold);
+  display: none;
+
+  @media (min-width: ${SIDEBAR_EXPAND_THRESHOLD_PX}px) {
+    display: block;
+  }
+`