feat(wallet): ui revamp dec 2023 2/2

palladians · Dec 17, 2023 · 8067883 · 8067883
1 parent 63621df
commit 8067883
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 170 deletions.
diff --git a/packages/features/.ladle/components.tsx b/packages/features/.ladle/components.tsx
@@ -9,6 +9,7 @@ import {
 import { MemoryRouter } from 'react-router-dom'
 import { ThemeProvider } from 'next-themes'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { Toaster } from '@/components/ui/toaster'
 
 export const Provider: GlobalProvider = ({ children }) => {
   const { dispatch } = useLadleContext()
@@ -31,6 +32,7 @@ export const Provider: GlobalProvider = ({ children }) => {
             }}
           >
             {children}
+            <Toaster />
           </div>
         </MemoryRouter>
       </TooltipProvider>

diff --git a/packages/features/src/about/views/About.tsx b/packages/features/src/about/views/About.tsx
@@ -24,38 +24,40 @@ export const AboutView = () => {
   const navigate = useNavigate()
   return (
     <AppLayout>
-      <div className="flex flex-col flex-1 gap-4">
+      <div className="flex flex-col flex-1">
         <ViewHeading
           title="About"
           backButton={{ onClick: () => navigate(-1) }}
         />
-        <Card className="flex gap-4 p-4 justify-between">
-          <div className="flex items-center gap-4">
-            <Logo />
-            <div className="font-semibold">Pallad</div>
-          </div>
-          <Button variant="outline" disabled>
-            Up to date
-          </Button>
-        </Card>
-        <Card className="flex flex-col gap-4 p-4">
-          {AppMeta.map(({ label, value }) => (
-            <MetaField key={label} label={label} value={value} />
-          ))}
-        </Card>
-        <Card className="flex flex-col items-start">
-          <Button variant="link">
-            <a
-              href="https://pallad.xyz"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              pallad.xyz
-            </a>
-          </Button>
-          <Button variant="link">Terms of Service</Button>
-          <Button variant="link">Privacy Policy</Button>
-        </Card>
+        <div className="flex flex-col gap-4 flex-1 p-4">
+          <Card className="flex gap-4 p-4 justify-between rounded-[1rem]">
+            <div className="flex items-center gap-4">
+              <Logo />
+              <div className="font-semibold">Pallad</div>
+            </div>
+            <Button variant="outline" disabled>
+              Up to date
+            </Button>
+          </Card>
+          <Card className="flex flex-col gap-4 p-4 rounded-[1rem]">
+            {AppMeta.map(({ label, value }) => (
+              <MetaField key={label} label={label} value={value} />
+            ))}
+          </Card>
+          <Card className="flex flex-col items-start rounded-[1rem]">
+            <Button variant="link">
+              <a
+                href="https://pallad.xyz"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                pallad.xyz
+              </a>
+            </Button>
+            <Button variant="link">Terms of Service</Button>
+            <Button variant="link">Privacy Policy</Button>
+          </Card>
+        </div>
       </div>
     </AppLayout>
   )

diff --git a/packages/features/src/address-book/components/ContactTile.tsx b/packages/features/src/address-book/components/ContactTile.tsx
@@ -1,7 +1,7 @@
 import { TrashIcon } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import {
@@ -24,13 +24,10 @@ export const ContactTile = ({ contact, index }: ContactTileProps) => {
   const removeContact = useAddressBookStore((state) => state.removeContact)
   return (
     <Card
-      className="flex items-center justify-between p-2"
+      className="flex items-center justify-between p-1"
       data-testid="addressBook__contact"
     >
       <div className="flex items-center justify-center">
-        <Avatar>
-          <AvatarFallback>{contact.name?.[0]}</AvatarFallback>
-        </Avatar>
         <Button
           variant="link"
           className="text-sky-400"
@@ -39,7 +36,7 @@ export const ContactTile = ({ contact, index }: ContactTileProps) => {
           }
           data-testid="addressBook__contactName"
         >
-          {contact.name}
+          <Badge variant="secondary">{contact.name}</Badge>
         </Button>
       </div>
       <div className="flex items-center gap-2">
@@ -55,7 +52,7 @@ export const ContactTile = ({ contact, index }: ContactTileProps) => {
           <Tooltip>
             <TooltipTrigger>
               <Button
-                variant="outline"
+                variant="link"
                 size="icon"
                 onClick={() => removeContact({ index })}
                 data-testid="addressBook__removeAddress"

diff --git a/packages/features/src/components/ui/checkbox.tsx b/packages/features/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-4 w-4 shrink-0 rounded-[0.25rem] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}

diff --git a/packages/features/src/components/ui/textarea.tsx b/packages/features/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-[1rem] border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

diff --git a/packages/features/src/onboarding/components/WalletInfoForm.tsx b/packages/features/src/onboarding/components/WalletInfoForm.tsx
@@ -45,53 +45,55 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
         </Button>
       }
     >
-      <div className="flex flex-col flex-1 gap-4">
+      <div className="flex flex-col flex-1">
         <ViewHeading
           title={title}
           backButton={{ onClick: () => navigate(-1) }}
         />
-        <div className="gap-2">
-          <Label htmlFor="walletNameInput" className="cursor-pointer">
-            Wallet Name
-          </Label>
-          <Input
-            id="walletNameInput"
-            placeholder="Wallet Name"
-            data-testid="onboarding__walletNameInput"
-            {...register('walletName')}
-          />
-        </div>
-        <div className="gap-2">
-          <Label htmlFor="spendingPasswordInput" className="cursor-pointer">
-            Spending Password
-          </Label>
-          <div className="flex gap-2">
+        <div className="flex flex-col flex-1 gap-4 p-4">
+          <div className="gap-2">
+            <Label htmlFor="walletNameInput" className="cursor-pointer">
+              Wallet Name
+            </Label>
             <Input
-              id="spendingPasswordInput"
-              type={showPassword ? 'text' : 'password'}
-              data-testid="onboarding__spendingPasswordInput"
-              placeholder="Password"
-              {...register('spendingPassword')}
+              id="walletNameInput"
+              placeholder="Wallet Name"
+              data-testid="onboarding__walletNameInput"
+              {...register('walletName')}
             />
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              {showPassword ? <EyeOffIcon /> : <EyeIcon />}
-            </Button>
           </div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Checkbox
-            value={termsAccepted}
-            onClick={toggleAccepted}
-            data-testid="onboarding__tosCheckbox"
-            id="tosCheckbox"
-          />
-          <Label htmlFor="tosCheckbox" className="cursor-pointer">
-            I accept Terms of Service.
-          </Label>
+          <div className="gap-2">
+            <Label htmlFor="spendingPasswordInput" className="cursor-pointer">
+              Spending Password
+            </Label>
+            <div className="flex gap-2">
+              <Input
+                id="spendingPasswordInput"
+                type={showPassword ? 'text' : 'password'}
+                data-testid="onboarding__spendingPasswordInput"
+                placeholder="Password"
+                {...register('spendingPassword')}
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <Checkbox
+              value={termsAccepted}
+              onClick={toggleAccepted}
+              data-testid="onboarding__tosCheckbox"
+              id="tosCheckbox"
+            />
+            <Label htmlFor="tosCheckbox" className="cursor-pointer">
+              I accept Terms of Service.
+            </Label>
+          </div>
         </div>
       </div>
     </WizardLayout>

diff --git a/packages/features/src/onboarding/views/MnemonicConfirmation.tsx b/packages/features/src/onboarding/views/MnemonicConfirmation.tsx
@@ -105,7 +105,7 @@ export const MnemonicConfirmationView = () => {
           title="Confirm The Mnemonic"
           backButton={{ onClick: () => navigate(-1) }}
         />
-        <div className="flex flex-col flex-1 gap-4">
+        <div className="flex flex-col flex-1 gap-4 p-4">
           <Label data-testid="onboarding__writedownIndex">
             Type in the word #{confirmationIndex + 1}
           </Label>

diff --git a/packages/features/src/onboarding/views/MnemonicInput.tsx b/packages/features/src/onboarding/views/MnemonicInput.tsx
@@ -96,7 +96,7 @@ export const MnemonicInputView = () => {
           backButton={{ onClick: () => navigate(-1) }}
         />
         {noOneIsLooking ? (
-          <div className="flex flex-1 flex-col gap-4">
+          <div className="flex flex-1 flex-col gap-4 p-4">
             <Label htmlFor="mnemonicTextarea">Your Mnemonic</Label>
             <Textarea
               id="mnemonicTextarea"
@@ -105,7 +105,7 @@ export const MnemonicInputView = () => {
             />
           </div>
         ) : (
-          <div className="flex flex-1 flex-col gap-2">
+          <div className="flex flex-1 flex-col gap-2 p-4">
             <Label htmlFor="confirmAlone">Confirm No One Is Behind You</Label>
             <Button
               id="confirmAlone"

diff --git a/packages/features/src/onboarding/views/MnemonicWritedown.tsx b/packages/features/src/onboarding/views/MnemonicWritedown.tsx
@@ -39,7 +39,7 @@ export const MnemonicWritedownView = () => {
           backButton={{ onClick: () => navigate(-1) }}
         />
         {noOneIsLooking ? (
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 p-4">
             <Label>Write This Down</Label>
             <div className="flex flex-wrap gap-2">
               {mnemonic?.map((word, i) => (
@@ -61,7 +61,7 @@ export const MnemonicWritedownView = () => {
             </div>
           </div>
         ) : (
-          <div className="flex flex-col flex-1 gap-2">
+          <div className="flex flex-col flex-1 gap-2 p-4">
             <Label>Confirm No One Is Behind You</Label>
             <Button
               onClick={() => setNoOneIsLooking(true)}

diff --git a/packages/features/src/onboarding/views/Start.tsx b/packages/features/src/onboarding/views/Start.tsx
@@ -46,7 +46,7 @@ export const StartView = () => {
         </>
       }
     >
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 p-4">
         <div>
           <h1 className="text-5xl text-sky-500 font-semibold">Pallad</h1>
           <h2 className="text-5xl">- Enter The Minaverse</h2>

diff --git a/packages/features/src/onboarding/views/StayConnected.tsx b/packages/features/src/onboarding/views/StayConnected.tsx
@@ -26,23 +26,26 @@ export const StayConnectedView = () => {
         </>
       }
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col flex-1">
         <ViewHeading title="Stay Connected" />
-        <div className="leading-8">
-          That's it. Before moving to Dashboard consider joining our Community.
-        </div>
-        <div className="flex gap-2">
-          <Button variant="outline" asChild className="flex-1">
-            <a href={DISCORD_URL} target="_blank">
-              Discord
-            </a>
-          </Button>
-          <Button variant="outline" asChild className="flex-1">
-            <a href={TWITTER_URL} className="flex gap-2" target="_blank">
-              <TwitterIcon size={16} />
-              Twitter
-            </a>
-          </Button>
+        <div className="flex flex-col gap-4 flex-1 p-4">
+          <div className="leading-8">
+            That's it. Before moving to Dashboard consider joining our
+            Community.
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" asChild className="flex-1">
+              <a href={DISCORD_URL} target="_blank">
+                Discord
+              </a>
+            </Button>
+            <Button variant="outline" asChild className="flex-1">
+              <a href={TWITTER_URL} className="flex gap-2" target="_blank">
+                <TwitterIcon size={16} />
+                Twitter
+              </a>
+            </Button>
+          </div>
         </div>
       </div>
     </WizardLayout>

diff --git a/packages/features/src/receive/views/Receive.tsx b/packages/features/src/receive/views/Receive.tsx
@@ -26,7 +26,7 @@ export const ReceiveView = () => {
         />
         <div className="flex flex-col flex-1 justify-center items-center gap-4 p-4">
           {publicKey && (
-            <div className="relative max-w-[256px] max-h-[256px] w-full h-full">
+            <div className="animate-in slide-in-from-bottom-2 fade-in relative max-w-[256px] max-h-[256px] w-full h-full">
               <QRCode
                 value={publicKey}
                 bgColor={theme === 'dark' ? '#020617' : '#ffffff'}
@@ -42,7 +42,7 @@ export const ReceiveView = () => {
           <Tooltip>
             <TooltipTrigger>
               <Card
-                className="p-2 break-all text-center leading-8 cursor-pointer rounded-[1rem] text-sm max-w-[256px]"
+                className="animate-in slide-in-from-bottom-1 delay-100 fill-mode-both fade-in p-2 break-all text-center leading-8 cursor-pointer rounded-[1rem] text-sm max-w-[256px]"
                 onClick={copyWalletAddress}
               >
                 {publicKey}