feat: created the create account flow (#136)

* feat: created the create account flow

* fix: right not left

* fix: updated the styles and removed images

* tidy: refactor

src/components/Account/AccountNavigation.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import classNames from 'classnames'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
@@ -34,8 +35,13 @@ export const AccountNavigation = () => {
 
   const [showMenu, setShowMenu] = useState(false)
 
+  const [createAccount, setCreateAccount] = useState(false)
+
   async function createAccountHandler() {
+    setShowMenu(true)
+    setCreateAccount(true)
     const accountId = await createCreditAccount({ fee: hardcodedFee })
+    setCreateAccount(false)
     if (!accountId) return
     router.push(`/wallets/${params.wallet}/accounts/${accountId}`)
   }
@@ -53,22 +59,49 @@ export const AccountNavigation = () => {
       {creditAccounts === null ? (
         <Loading className='h-8 w-35' />
       ) : (
-        <>
-          {' '}
-          {hasCreditAccounts ? (
         <div className='relative'>
           <Button
-                variant='solid'
-                color='tertiary'
-                className='flex flex-1 flex-nowrap'
-                leftIcon={<Account />}
-                onClick={() => setShowMenu(!showMenu)}
+            onClick={hasCreditAccounts ? () => setShowMenu(!showMenu) : createAccountHandler}
+            leftIcon={hasCreditAccounts ? <Account /> : <Add />}
+            color={hasCreditAccounts ? 'tertiary' : 'primary'}
             hasFocus={showMenu}
-                hasSubmenu
+            hasSubmenu={hasCreditAccounts}
           >
-                <span>{accountSelected ? `Account ${selectedAccount}` : 'Select Account'}</span>
+            {hasCreditAccounts
+              ? accountSelected
+                ? `Account ${selectedAccount}`
+                : 'Select Account'
+              : 'Create Account'}
           </Button>
-              <Overlay className='left-0 mt-2 w-[274px]' show={showMenu} setShow={setShowMenu}>
+          <Overlay
+            className={classNames(
+              'max-w-screen right-0 mt-2 flex h-[530px] w-[336px] flex-wrap overflow-y-scroll scrollbar-hide',
+              hasCreditAccounts ? 'items-start' : 'items-end',
+            )}
+            show={showMenu}
+            setShow={setShowMenu}
+          >
+            <div className='absolute inset-0 z-1 h-full w-full bg-account' />
+            {!hasCreditAccounts && (
+              <div className='relative z-10 w-full p-4'>
+                <Text size='lg' className='font-bold'>
+                  Create Credit Account
+                </Text>
+                <Text className='mb-4 text-white/70'>
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                </Text>
+                <Button
+                  className='w-full'
+                  showProgressIndicator={createAccount}
+                  disabled={createAccount}
+                  text='Create Account'
+                  onClick={createAccountHandler}
+                />
+              </div>
+            )}
             {accountSelected && (
               <div className='flex w-full flex-wrap'>
                 <Text size='sm' uppercase={true} className='w-full px-4 pt-4'>
@@ -137,8 +170,8 @@ export const AccountNavigation = () => {
                 <Text size='sm' uppercase={true} className='w-full pb-2'>
                   Select Account
                 </Text>
-                    {creditAccounts.map((account) =>
-                      selectedAccount === account ? null : (
+                {creditAccounts.map((account) => {
+                  return selectedAccount === account ? null : (
                     <Button
                       key={account}
                       className='w-full whitespace-nowrap py-2'
@@ -150,18 +183,12 @@ export const AccountNavigation = () => {
                       }}
                       text={`Account ${account}`}
                     />
-                      ),
-                    )}
+                  )
+                })}
               </div>
             )}
           </Overlay>
         </div>
-          ) : (
-            <Button onClick={createAccountHandler} leftIcon={<Add />} color='tertiary'>
-              Create Account
-            </Button>
-          )}
-        </>
       )}
     </>
   )

src/components/Button.tsx

@@ -24,7 +24,8 @@ interface Props {
 }
 
 export const buttonColorClasses = {
-  primary: 'gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
+  primary:
+    'font-bold gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
   secondary:
     'border border-white/30 bg-transparent hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
   tertiary: 'bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20',

src/components/Overlay/Overlay.tsx

@@ -18,7 +18,8 @@ export const Overlay = ({ children, content, className, show, setShow }: Props)
     <>
       <div
         className={classNames(
-          'max-w-screen absolute z-50 rounded-sm border border-white/40 shadow-overlay backdrop-blur-sm gradient-popover',
+          'max-w-screen absolute z-50 rounded-sm shadow-overlay backdrop-blur-lg gradient-popover',
+          'before:content-[" "] before:absolute before:inset-0 before:z-[-1] before:rounded-sm before:p-[1px] before:border-glas',
           className,
         )}
       >

src/components/Wallet/ConnectedButton.tsx

@@ -74,7 +74,7 @@ export default function ConnectedButton() {
     <div className={'relative'}>
       {network?.chainId !== ChainInfoID.Osmosis1 && (
         <Text
-          className='absolute -right-2 -top-2.5 z-10 rounded-lg p-0.5 px-2 gradient-primary-to-secondary'
+          className='absolute -right-2 -top-2.5 z-10 rounded-sm p-0.5 px-2 gradient-primary-to-secondary'
           size='3xs'
           uppercase
         >

tailwind.config.js

@@ -44,9 +44,7 @@ module.exports = {
         sticky: '50px',
       },
       backgroundImage: {
-        'fund-modal': 'url(/images/fund-bg.webp), url(/images/fund-bg.png)',
-        'delete-modal': 'url(/images/delete-account-bg.webp), url(/images/delete-account-bg.png)',
-        'create-modal': 'url(/images/create-account-bg.webp), url(/images/create-account-bg.png)',
+        account: 'url(/images/account.webp), url(/images/account.png)',
       },
       backgroundSize: {
         desktop: '100% auto',