From 9ccb32b7437ff43ae0651881fcbe2e916c636720 Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Tue, 6 Feb 2024 13:48:41 +0100
Subject: [PATCH] fix: filled the empty space below collapsed content (#773)

* fix: filled the empty space below collapsed content

* fix: fixed timings
---
 src/components/account/AccountDetails/index.tsx | 15 ++++++++++++---
 src/components/common/Accordion.tsx             |  2 +-
 src/components/common/AccordionContent.tsx      |  8 --------
 src/types/interfaces/components/Accordion.d.ts  |  7 +++++++
 4 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 src/types/interfaces/components/Accordion.d.ts

diff --git a/src/components/account/AccountDetails/index.tsx b/src/components/account/AccountDetails/index.tsx
index c6b57578..fbf96df1 100644
--- a/src/components/account/AccountDetails/index.tsx
+++ b/src/components/account/AccountDetails/index.tsx
@@ -136,7 +136,7 @@ function AccountDetails(props: Props) {
           className={classNames(
             'group/accountdetail relative min-h-75',
             'border rounded-base border-white/20',
-            'backdrop-blur-sticky z-2',
+            'backdrop-blur-sticky z-3 overflow-hidden',
             !reduceMotion && 'transition-all duration-500',
             accountDetailsExpanded
               ? 'is-expanded w-full h-auto'
@@ -198,16 +198,25 @@ function AccountDetails(props: Props) {
           </div>
           <div
             className={classNames(
-              'grid',
+              'grid relative z-2',
               !reduceMotion && 'transition-[grid-template-rows,opacity]',
               accountDetailsExpanded
-                ? 'transition-[grid-template-rows,opacity] opacity-100 delay-500 duration-600 grid-rows-[1fr]'
+                ? 'transition-[grid-template-rows,opacity] opacity-100 delay-200 duration-600 grid-rows-[1fr]'
                 : 'transition-opacity opacity-0 duration-300 grid-rows-[0fr]',
             )}
           >
             <div className='overflow-hidden'>
               <AccountSummary account={account} isAccountDetails />
             </div>
+            <div
+              className={classNames(
+                'absolute inset-0 -z-1',
+                'before:content-[""] before:transition-opacity before:-z-1 before:absolute before:left-0 before:h-full before:w-full before:bg-white/10 before:rounded-b-base before:border-t before:border-white/10',
+                accountDetailsExpanded
+                  ? 'before:opacity-100 before:delay-500 before:top-full'
+                  : 'before:opacity-0 before:duration-0',
+              )}
+            />
           </div>
           <div
             className={classNames(
diff --git a/src/components/common/Accordion.tsx b/src/components/common/Accordion.tsx
index 3fbb9f5e..95018c01 100644
--- a/src/components/common/Accordion.tsx
+++ b/src/components/common/Accordion.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import AccordionContent, { Item } from 'components/common/AccordionContent'
+import AccordionContent from 'components/common/AccordionContent'
 import Card from 'components/common/Card'
 
 interface Props {
diff --git a/src/components/common/AccordionContent.tsx b/src/components/common/AccordionContent.tsx
index 64024a5b..02cf0506 100644
--- a/src/components/common/AccordionContent.tsx
+++ b/src/components/common/AccordionContent.tsx
@@ -8,14 +8,6 @@ interface Props {
   index: number
 }
 
-export interface Item {
-  title: string
-  renderContent: () => React.ReactNode
-  isOpen?: boolean
-  renderSubTitle: () => React.ReactNode
-  toggleOpen: (index: number) => void
-}
-
 export default function AccordionContent(props: Props) {
   const { title, renderContent, isOpen, renderSubTitle, toggleOpen } = props.item
 
diff --git a/src/types/interfaces/components/Accordion.d.ts b/src/types/interfaces/components/Accordion.d.ts
new file mode 100644
index 00000000..21155c36
--- /dev/null
+++ b/src/types/interfaces/components/Accordion.d.ts
@@ -0,0 +1,7 @@
+interface Item {
+  title: string
+  renderContent: () => React.ReactNode
+  isOpen?: boolean
+  renderSubTitle: () => React.ReactNode
+  toggleOpen: (index: number) => void
+}