Update address input styles (#424)

* Update icon pack * Update address input styles * Use link button instead of link decorator * Add router decorator to savings withdraw story
marsfoundation · Nov 7, 2024 · 7bcc739 · 7bcc739
1 parent 82f67db
commit 7bcc739
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 241 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -71,7 +71,7 @@
     "deepmerge-ts": "^5.1.0",
     "fetch-retry": "^5.0.6",
     "jsbi": "^3.2.5",
-    "lucide-react": "^0.284.0",
+    "lucide-react": "^0.454.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",

diff --git a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
@@ -1,7 +1,7 @@
 import { assets } from '@/ui/assets'
 import MagicWand from '@/ui/assets/magic-wand.svg?react'
 import { DialogTitle } from '@/ui/atoms/dialog/Dialog'
-import { ActionButton } from '@/ui/molecules/action-button/ActionButton'
+import { Button } from '@/ui/atoms/new/button/Button'
 import { Alert } from '@/ui/molecules/new/alert/Alert'
 
 export interface SandboxDialogViewProps {
@@ -51,9 +51,9 @@ export function SandboxDialogView({
         ))}
       </ul>
       {isError && error && <Alert variant="warning">{error.message}</Alert>}
-      <ActionButton isLoading={isPending} onClick={onActionButtonClick} isDone={isInSandbox} variant="primary" size="l">
-        {isInSandbox ? 'Sandbox Mode already activated' : 'Activate Sandbox Mode'}
-      </ActionButton>
+      <Button loading={isPending} onClick={onActionButtonClick} size="l">
+        Active Sandbox Mode
+      </Button>
     </div>
   )
 }
diff --git a/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx b/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
@@ -1,27 +1,33 @@
-import BoxArrowTopRight from '@/ui/assets/box-arrow-top-right.svg?react'
-import { Link } from '@/ui/atoms/link/Link'
+import { ButtonIcon } from '@/ui/atoms/new/button/Button'
+import { LinkButton } from '@/ui/atoms/new/link-button/LinkButton'
 import { cn } from '@/ui/utils/style'
 import { testIds } from '@/ui/utils/testIds'
+import { SquareArrowOutUpRight } from 'lucide-react'
 import { InputHTMLAttributes, forwardRef } from 'react'
 
 interface AddressInputProps extends InputHTMLAttributes<HTMLInputElement> {
   error: string | undefined
   blockExplorerUrl: string | undefined
+  label?: string
 }
 
 export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
-  ({ error, blockExplorerUrl, ...rest }, ref) => {
+  ({ error, blockExplorerUrl, label, ...rest }, ref) => {
     return (
       <div className="flex flex-col gap-2">
+        {label && <div className="typography-label-5 text-secondary">{label}</div>}
         <div
           className={cn(
-            'relative flex h-14 border-basics-border bg-input-background text-basics-dark-grey',
-            'w-full flex-grow items-center rounded-xl border text-[0.7rem] leading-none sm:text-base',
-            error && 'border-error bg-error/10 text-system-error-primary',
+            'grid h-14 grid-cols-[1fr_auto] gap-2',
+            'typography-label-6 sm:typography-label-4 text-primary',
+            'rounded-sm border border-primary bg-secondary',
+            'focus-within:border-brand-primary',
+            'items-center rounded-sm px-3 sm:px-4',
+            error && 'border-reskin-error-200 bg-system-error-primary',
           )}
         >
           <input
-            className={cn('flex h-full w-full rounded-xl pl-3 sm:pl-4 focus:outline-none', error && 'outline-error')}
+            className={cn('flex w-full focus:outline-none')}
             maxLength={42}
             ref={ref}
             placeholder="Receiver address"
@@ -31,19 +37,16 @@ export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
             {...rest}
           />
           {blockExplorerUrl && (
-            <div className="absolute right-0 mr-3 sm:mr-4">
-              <Link
-                to={blockExplorerUrl}
-                external
-                className="flex items-center gap-2.5 font-medium text-basics-dark-grey text-sm"
-              >
-                <BoxArrowTopRight className={cn('h-4 w-4', error && 'text-system-error-primary')} />
-              </Link>
-            </div>
+            <LinkButton to={blockExplorerUrl} variant="transparent" size="s" className="h-fit rounded-[1px] p-0">
+              <ButtonIcon icon={SquareArrowOutUpRight} />
+            </LinkButton>
           )}
         </div>
         {error && (
-          <div className="text-system-error-primary text-xs" data-testid={testIds.component.AddressInput.error}>
+          <div
+            className="typography-label-6 text-system-error-primary"
+            data-testid={testIds.component.AddressInput.error}
+          >
             {error}
           </div>
         )}

diff --git a/...ages/app/src/features/dialogs/savings/withdraw/components/form/ControlledAddressInput.tsx b/...ages/app/src/features/dialogs/savings/withdraw/components/form/ControlledAddressInput.tsx
@@ -1,20 +1,21 @@
-import { Controller, UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useController } from 'react-hook-form'
 import { ReceiverFormSchema } from '../../types'
 import { AddressInput } from './AddressInput'
 
 interface ControlledAddressInputProps {
+  label?: string
   form: UseFormReturn<ReceiverFormSchema>
   blockExplorerUrl: string | undefined
 }
 
-export function ControlledAddressInput({ form, blockExplorerUrl }: ControlledAddressInputProps) {
+export function ControlledAddressInput({ label, form, blockExplorerUrl }: ControlledAddressInputProps) {
+  const { field } = useController({ control: form.control, name: 'receiver' })
   return (
-    <Controller
-      control={form.control}
-      name="receiver"
-      render={({ field }) => (
-        <AddressInput {...field} error={form.formState.errors.receiver?.message} blockExplorerUrl={blockExplorerUrl} />
-      )}
+    <AddressInput
+      {...field}
+      label={label}
+      error={form.formState.errors.receiver?.message}
+      blockExplorerUrl={blockExplorerUrl}
     />
   )
 }
diff --git a/...s/app/src/features/dialogs/savings/withdraw/components/form/SavingsWithdrawDialogForm.tsx b/...s/app/src/features/dialogs/savings/withdraw/components/form/SavingsWithdrawDialogForm.tsx
@@ -1,4 +1,3 @@
-import { DialogPanelTitle } from '@/features/dialogs/common/components/DialogPanelTitle'
 import { DialogForm, DialogFormProps } from '@/features/dialogs/common/components/form/DialogForm'
 import { ControlledAddressInput } from '@/features/dialogs/savings/withdraw/components/form/ControlledAddressInput'
 import { SendModeExtension } from '@/features/dialogs/savings/withdraw/types'
@@ -12,13 +11,13 @@ export interface SavingsWithdrawDialogFormProps extends DialogFormProps {
 
 export function SavingsWithdrawDialogForm({ sendModeExtension, ...rest }: SavingsWithdrawDialogFormProps) {
   return (
-    <>
+    <div className="flex flex-col gap-2">
       <DialogForm {...rest} />
       {sendModeExtension && (
         <Form {...sendModeExtension.receiverForm}>
           <div className="mt-2 mb-3 flex flex-col gap-2">
-            <DialogPanelTitle>Send to</DialogPanelTitle>
             <ControlledAddressInput
+              label="Send to"
               form={sendModeExtension.receiverForm}
               blockExplorerUrl={sendModeExtension.blockExplorerAddressLink}
             />
@@ -31,6 +30,6 @@ export function SavingsWithdrawDialogForm({ sendModeExtension, ...rest }: Saving
           </div>
         </Form>
       )}
-    </>
+    </div>
   )
 }
diff --git a/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx b/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx
@@ -8,6 +8,7 @@ import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
 import { useForm } from 'react-hook-form'
+import { withRouter } from 'storybook-addon-remix-react-router'
 import { SavingsWithdrawView, SavingsWithdrawViewProps } from './SavingsWithdrawView'
 
 const dai = tokens.DAI
@@ -118,6 +119,7 @@ const sendArgs: Partial<SavingsWithdrawViewProps> = {
 
 const meta: Meta<typeof SavingsWithdrawView> = {
   title: 'Features/Dialogs/Views/Savings/Withdraw',
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider(), withRouter()],
   component: (args) => {
     const form = useForm() as any
     return args.sendModeExtension ? (
@@ -130,7 +132,6 @@ const meta: Meta<typeof SavingsWithdrawView> = {
       <SavingsWithdrawView {...args} form={form} />
     )
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
 }
 
 export default meta

diff --git a/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx b/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx
@@ -1,8 +1,8 @@
 import { formatPercentage } from '@/domain/common/format'
 import { Percentage } from '@/domain/types/NumericValues'
 import { assets } from '@/ui/assets'
-import { LinkDecorator } from '@/ui/atoms/link-decorator/LinkDecorator'
 import { Button } from '@/ui/atoms/new/button/Button'
+import { LinkButton } from '@/ui/atoms/new/link-button/LinkButton'
 import { Panel } from '@/ui/atoms/new/panel/Panel'
 import { links } from '@/ui/constants/links'
 import { cn } from '@/ui/utils/style'
@@ -49,11 +49,9 @@ export function UpgradeSavingsBanner({ onUpgradeSavingsClick, apyImprovement }:
           <Button variant="secondary" size={tablet ? 'm' : 's'} onClick={onUpgradeSavingsClick}>
             Upgrade now
           </Button>
-          <LinkDecorator to={links.docs.upgradeSdai} external>
-            <Button variant="tertiary" size={tablet ? 'm' : 's'}>
-              Learn more
-            </Button>
-          </LinkDecorator>
+          <LinkButton to={links.docs.upgradeSdai} external variant="tertiary" size={tablet ? 'm' : 's'}>
+            Learn more
+          </LinkButton>
         </div>
       </div>
     </Panel>

diff --git a/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx b/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
@@ -61,7 +61,7 @@ export function TopbarAirdropDropdown({
             {isLoading ? (
               <Skeleton className="h-6 w-10 rounded-sm" />
             ) : (
-              <div className="typography-label-4" data-chromatic="ignore">
+              <div className="typography-label-4 tabular-nums" data-chromatic="ignore">
                 {formatAirdropAmount({ amount, precision, isGrowing })} {SPK_MOCK_TOKEN.symbol}
               </div>
             )}

diff --git a/packages/app/src/ui/atoms/new/button/Button.tsx b/packages/app/src/ui/atoms/new/button/Button.tsx
@@ -33,10 +33,11 @@ export const buttonVariants = cva(
           'disabled:cursor-not-allowed disabled:border-none disabled:bg-reskin-neutral-50 disabled:text-reskin-neutral-500',
         ),
         transparent: cn(
-          'text-secondary transition-colors',
+          'overflow-visible text-secondary transition-colors',
           'hover:text-reskin-neutral-700',
           'active:text-reskin-neutral-900',
           'disabled:cursor-not-allowed disabled:text-reskin-neutral-300',
+          'focus-visible:bg-transparent',
         ),
         loading: 'cursor-wait bg-reskin-neutral-50 text-reskin-base-white',
       },

diff --git a/packages/app/src/ui/molecules/action-button/ActionButton.stories.tsx b/packages/app/src/ui/molecules/action-button/ActionButton.stories.tsx
diff --git a/packages/app/src/ui/molecules/action-button/ActionButton.tsx b/packages/app/src/ui/molecules/action-button/ActionButton.tsx