From b12f5d35837ea32b4b3898e6e33f60f375ee54dd Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Fri, 15 Sep 2023 10:44:05 +0200
Subject: [PATCH] Account detail finetuning (#474)

* fix: fixed the position of extended AccountDetails

* feat: shrink full screen content on expansion

* fix: fixed the overlap
---
 src/components/Account/AccountDetails/index.tsx | 9 ++++-----
 src/pages/_layout.tsx                           | 8 +++++++-
 src/store/slices/common.ts                      | 1 +
 src/types/interfaces/store/common.d.ts          | 1 +
 tailwind.config.js                              | 2 ++
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Account/AccountDetails/index.tsx b/src/components/Account/AccountDetails/index.tsx
index 00b92fcb..84b640ff 100644
--- a/src/components/Account/AccountDetails/index.tsx
+++ b/src/components/Account/AccountDetails/index.tsx
@@ -20,7 +20,6 @@ import useHealthComputer from 'hooks/useHealthComputer'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
-import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import {
@@ -47,7 +46,7 @@ function AccountDetails(props: Props) {
   const { account } = props
   const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
   const updatedAccount = useStore((s) => s.updatedAccount)
-  const [isExpanded, setIsExpanded] = useToggle()
+  const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded)
   const { health } = useHealthComputer(account)
   const { health: updatedHealth } = useHealthComputer(updatedAccount || account)
   const { data: prices } = usePrices()
@@ -86,7 +85,7 @@ function AccountDetails(props: Props) {
     <div
       data-testid='account-details'
       className={classNames(
-        isExpanded ? 'right-5' : '-right-80',
+        accountDetailsExpanded ? 'right-6.5' : '-right-80',
         'w-100 flex items-start gap-4 absolute top-6',
         !reduceMotion && 'transition-all duration-300',
       )}
@@ -99,7 +98,7 @@ function AccountDetails(props: Props) {
           !reduceMotion && 'transition-colors duration-300',
           'hover:bg-white/10 hover:cursor-pointer ',
         )}
-        onClick={() => setIsExpanded(!isExpanded)}
+        onClick={() => useStore.setState({ accountDetailsExpanded: !accountDetailsExpanded })}
       >
         <div className='flex flex-wrap justify-center w-full py-4'>
           <HealthGauge health={health} updatedHealth={updatedHealth} />
@@ -138,7 +137,7 @@ function AccountDetails(props: Props) {
             'group-hover:opacity-100',
           )}
         >
-          {isExpanded ? <Cross className='w-2' /> : <ThreeDots className='h-1' />}
+          {accountDetailsExpanded ? <Cross className='w-2' /> : <ThreeDots className='h-1' />}
         </div>
 
         {glowElement(!reduceMotion)}
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 8204cd37..4e9a5ade 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -9,7 +9,10 @@ import DesktopHeader from 'components/Header/DesktopHeader'
 import ModalsContainer from 'components/Modals/ModalsContainer'
 import PageMetadata from 'components/PageMetadata'
 import Toaster from 'components/Toaster'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { REDUCE_MOTION_KEY } from 'constants/localStore'
 import useCurrentAccount from 'hooks/useCurrentAccount'
+import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 
 interface Props {
@@ -38,6 +41,8 @@ function PageContainer(props: Props) {
 export default function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation()
   const focusComponent = useStore((s) => s.focusComponent)
+  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded)
   const isFullWidth = location.pathname.includes('trade') || location.pathname === '/'
   const account = useCurrentAccount()
 
@@ -52,7 +57,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           'lg:mt-[65px]',
           'min-h-screen gap-6 px-4 py-6 w-full relative',
           'flex',
-          account && 'pr-24',
+          isFullWidth && account && (accountDetailsExpanded ? 'pr-110.5' : 'pr-24'),
+          !reduceMotion && 'transition-all duration-300',
           'justify-center',
           focusComponent && 'items-center',
           isMobile && 'items-start',
diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts
index deebd552..0dc51106 100644
--- a/src/store/slices/common.ts
+++ b/src/store/slices/common.ts
@@ -8,5 +8,6 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
     isOpen: true,
     selectedAccount: null,
     focusComponent: null,
+    accountDetailsExpanded: false,
   }
 }
diff --git a/src/types/interfaces/store/common.d.ts b/src/types/interfaces/store/common.d.ts
index 0b47f88f..12247ae8 100644
--- a/src/types/interfaces/store/common.d.ts
+++ b/src/types/interfaces/store/common.d.ts
@@ -7,6 +7,7 @@ interface CommonSlice {
   selectedAccount: string | null
   updatedAccount?: Account
   focusComponent: FocusComponent | null
+  accountDetailsExpanded: boolean
 }
 
 interface FocusComponent {
diff --git a/tailwind.config.js b/tailwind.config.js
index 21f31bc9..62160b00 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -204,9 +204,11 @@ module.exports = {
         '2xl': '1920px',
       },
       spacing: {
+        6.5: '26px',
         24: '96px',
         35: '140px',
         80: '320px',
+        110.5: '442px',
       },
       transitionDuration: {
         3000: '3000ms',