From 8067883fba5678ec231cfa5f2afd0112a1c0923c Mon Sep 17 00:00:00 2001
From: Tomek Marciniak <tmarciniakm@gmail.com>
Date: Sun, 17 Dec 2023 23:20:14 +0100
Subject: [PATCH] feat(wallet): ui revamp dec 2023 2/2

---
 packages/features/.ladle/components.tsx       |   2 +
 packages/features/src/about/views/About.tsx   |  58 ++++----
 .../address-book/components/ContactTile.tsx   |  11 +-
 .../features/src/components/ui/checkbox.tsx   |   2 +-
 .../features/src/components/ui/textarea.tsx   |   2 +-
 .../onboarding/components/WalletInfoForm.tsx  |  82 +++++-----
 .../onboarding/views/MnemonicConfirmation.tsx |   2 +-
 .../src/onboarding/views/MnemonicInput.tsx    |   4 +-
 .../onboarding/views/MnemonicWritedown.tsx    |   4 +-
 .../features/src/onboarding/views/Start.tsx   |   2 +-
 .../src/onboarding/views/StayConnected.tsx    |  35 +++--
 .../features/src/receive/views/Receive.tsx    |   4 +-
 .../features/src/settings/views/Settings.tsx  | 140 +++++++++---------
 13 files changed, 178 insertions(+), 170 deletions(-)

diff --git a/packages/features/.ladle/components.tsx b/packages/features/.ladle/components.tsx
index 50d32ea4..1ef80214 100644
--- 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
index 6ed466e0..d8adcbb1 100644
--- 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
index afcb7869..9bccdfab 100644
--- 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
index 901cafb6..937df338 100644
--- 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
index dab7c64f..09069fdc 100644
--- 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
index d621e438..475c35da 100644
--- 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
index 5beb8cbf..e3423234 100644
--- 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
index 8fcaf8a9..f6288366 100644
--- 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
index 9791f5ed..196533f8 100644
--- 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
index 7b9084ac..3c017957 100644
--- 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
index 07c8ba36..607aedac 100644
--- 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
index faef8777..122d4dbb 100644
--- 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}
diff --git a/packages/features/src/settings/views/Settings.tsx b/packages/features/src/settings/views/Settings.tsx
index 971d0c05..f345d4fe 100644
--- a/packages/features/src/settings/views/Settings.tsx
+++ b/packages/features/src/settings/views/Settings.tsx
@@ -49,83 +49,85 @@ export const SettingsView = () => {
   }
   return (
     <AppLayout>
-      <div className="flex flex-col flex-1 gap-6">
+      <div className="flex flex-col flex-1">
         <ViewHeading
           title="Settings"
           backButton={{ onClick: () => navigate(-1) }}
         />
-        <div className="flex flex-col gap-2">
-          <Label>Network</Label>
-          <RadioGroup value={network} onValueChange={handleNetworkSwitch}>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem
-                value={
-                  Mina.Networks[
-                    Mina.Networks.MAINNET.toUpperCase() as keyof typeof Mina.Networks
-                  ]
-                }
-                id="networkMainnet"
-              />
-              <Label htmlFor="networkMainnet">Mainnet</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem
-                value={
-                  Mina.Networks[
-                    Mina.Networks.DEVNET.toUpperCase() as keyof typeof Mina.Networks
-                  ]
-                }
-                id="networkDevnet"
-              />
-              <Label htmlFor="networkDevnet">Devnet</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem
-                value={
-                  Mina.Networks[
-                    Mina.Networks.BERKELEY.toUpperCase() as keyof typeof Mina.Networks
-                  ]
-                }
-                id="networkBerkeley"
-              />
-              <Label htmlFor="networkBerkeley">Berkeley</Label>
-            </div>
-          </RadioGroup>
-        </div>
-        <div className="flex flex-col gap-2">
-          <Label>Theme</Label>
-          <RadioGroup value={theme} onValueChange={handleThemeSwitch}>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="light" id="themeLight" />
-              <Label htmlFor="themeLight">Light</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="dark" id="themeDark" />
-              <Label htmlFor="themeDark">Dark</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="system" id="themeSystem" />
-              <Label htmlFor="themeSystem">System</Label>
-            </div>
-          </RadioGroup>
-        </div>
-        <div className="flex flex-col gap-4">
-          <h2>Authorized Domains</h2>
+        <div className="flex flex-col gap-4 p-4 flex-1">
           <div className="flex flex-col gap-2">
-            <Card className="flex py-2 px-4 justify-between">
-              <div>Pallad</div>
-              <div className="flex gap-2 items-center">
-                <div>pallad.xyz</div>
-                <a>
-                  <TrashIcon size={16} />
-                </a>
+            <Label>Network</Label>
+            <RadioGroup value={network} onValueChange={handleNetworkSwitch}>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={
+                    Mina.Networks[
+                      Mina.Networks.MAINNET.toUpperCase() as keyof typeof Mina.Networks
+                    ]
+                  }
+                  id="networkMainnet"
+                />
+                <Label htmlFor="networkMainnet">Mainnet</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={
+                    Mina.Networks[
+                      Mina.Networks.DEVNET.toUpperCase() as keyof typeof Mina.Networks
+                    ]
+                  }
+                  id="networkDevnet"
+                />
+                <Label htmlFor="networkDevnet">Devnet</Label>
               </div>
-            </Card>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={
+                    Mina.Networks[
+                      Mina.Networks.BERKELEY.toUpperCase() as keyof typeof Mina.Networks
+                    ]
+                  }
+                  id="networkBerkeley"
+                />
+                <Label htmlFor="networkBerkeley">Berkeley</Label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label>Theme</Label>
+            <RadioGroup value={theme} onValueChange={handleThemeSwitch}>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="light" id="themeLight" />
+                <Label htmlFor="themeLight">Light</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="dark" id="themeDark" />
+                <Label htmlFor="themeDark">Dark</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="system" id="themeSystem" />
+                <Label htmlFor="themeSystem">System</Label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div className="flex flex-col gap-4">
+            <h2>Authorized Domains</h2>
+            <div className="flex flex-col gap-2">
+              <Card className="flex py-2 px-4 justify-between">
+                <div>Pallad</div>
+                <div className="flex gap-2 items-center">
+                  <div>pallad.xyz</div>
+                  <a>
+                    <TrashIcon size={16} />
+                  </a>
+                </div>
+              </Card>
+            </div>
           </div>
+          <Button variant="destructive" onClick={restartCurrentWallet}>
+            Restart Wallet
+          </Button>
         </div>
-        <Button variant="destructive" onClick={restartCurrentWallet}>
-          Restart Wallet
-        </Button>
       </div>
     </AppLayout>
   )