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

@@ -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(

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 {

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
 

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
+}