feat(1311): update transfer pages ux (#1344)

added pageHeader, value placeholder, adjusted display of transfer header, label update

Author: lengyel-arpad85

.gitignore

@@ -133,4 +133,5 @@ dist
 # Others
 .DS_Store
 .idea
-tmp
+tmp
+.vscode/settings.json

packages/wallet/frontend/src/components/TransferHeader.tsx

@@ -1,5 +1,4 @@
 import { cx } from 'class-variance-authority'
-import { BackButton } from './BackButton'
 
 const TYPES = {
   pink: 'text-pink',
@@ -17,18 +16,12 @@ type TransferHeaderProps = {
 export const TransferHeader = ({ type, balance }: TransferHeaderProps) => {
   return (
     <div className="text-center">
-      <div className="relative mb-16 mt-7 flex items-center">
-        <BackButton />
-        <div className="absolute left-[50%] -translate-x-1/2">
-          <h2 className={cx('text-xl font-light', TYPES[type])}>
-            Total balance
-          </h2>
-          {balance && (
-            <h3 className={cx('h-10 text-3xl font-semibold', TYPES[type])}>
-              {balance}
-            </h3>
-          )}
-        </div>
+      <div className="mb-16 mt-7 flex flex-col items-center justify-center">
+        <h2 className={cx('text-xl font-light', TYPES[type])}>Total balance</h2>
+
+        <h3 className={cx('h-10 text-3xl font-semibold', TYPES[type])}>
+          {balance ? balance : '-.--'}
+        </h3>
       </div>
     </div>
   )

packages/wallet/frontend/src/pages/transfer/request.tsx

@@ -6,6 +6,7 @@ import { useZodForm } from '@/lib/hooks/useZodForm'
 import { Input } from '@/ui/forms/Input'
 import { Badge } from '@/ui/Badge'
 import { TransferHeader } from '@/components/TransferHeader'
+import { PageHeader } from '@/components/PageHeader'
 import { useDialog } from '@/lib/hooks/useDialog'
 import { TimeUnit, requestSchema, transfersService } from '@/lib/api/transfers'
 import { SuccessDialog } from '@/components/dialogs/SuccessDialog'
@@ -103,6 +104,9 @@ const RequestPage: NextPageWithLayout<RequestProps> = ({ accounts }) => {
   return (
     <>
       <div className="flex flex-col lg:w-2/3">
+        <div className="flex items-center justify-between md:flex-col md:items-start md:justify-start">
+          <PageHeader title="Request Money" />
+        </div>
         <TransferHeader type="turqoise" balance={balanceSnapshot} />
         <Form
           form={requestForm}
@@ -131,7 +135,7 @@ const RequestPage: NextPageWithLayout<RequestProps> = ({ accounts }) => {
           }}
         >
           <div className="space-y-2">
-            <Badge size="fixed" text="to" />
+            <Badge size="fixed" text="into" />
             <Select
               required
               label="Account"

packages/wallet/frontend/src/pages/transfer/send.tsx

@@ -7,6 +7,7 @@ import { DebouncedInput, Input } from '@/ui/forms/Input'
 import { Select, type SelectOption } from '@/ui/forms/Select'
 import { Badge } from '@/ui/Badge'
 import { TransferHeader } from '@/components/TransferHeader'
+import { PageHeader } from '@/components/PageHeader'
 import { TogglePayment } from '@/ui/TogglePayment'
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import { accountService } from '@/lib/api/account'
@@ -247,6 +248,9 @@ const SendPage: NextPageWithLayout<SendProps> = ({ accounts }) => {
   return (
     <>
       <div className="flex flex-col lg:w-2/3">
+        <div className="flex items-center justify-between md:flex-col md:items-start md:justify-start">
+          <PageHeader title="Send Money" />
+        </div>
         <TransferHeader type="violet" balance={balanceSnapshot} />
         <Form
           form={sendForm}