From b055bfe9b026021c12fefb7e0785e5b8bbed9cfc Mon Sep 17 00:00:00 2001
From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com>
Date: Sun, 18 Aug 2024 10:53:36 +0300
Subject: [PATCH] fix: fix UI issues (#1037)

* fix UI issues

* remove unused import

---------

Co-authored-by: Vynnyk Dmytro <simbiatoff@gmail.com>
---
 .../pages/unlock-wallet/content.tsx           |  1 -
 src/libs/layout/unlock-vault/index.tsx        |  5 +-
 src/libs/ui/components/input/input.tsx        | 22 +-------
 .../password-inputs/password-inputs.tsx       |  2 -
 .../password-visibility-icon.tsx              |  1 +
 .../recipient-plate/recipient-plate.tsx       |  4 +-
 .../components/contacts-list.tsx              | 11 ++--
 .../recipient-tabs/components/recent-list.tsx | 13 +++--
 .../recipient-tabs/recipient-tabs.tsx         | 51 +++++++++++++------
 src/libs/ui/components/tabs/tabs.tsx          |  6 ++-
 src/libs/ui/forms/transfer.ts                 |  4 +-
 11 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/src/apps/onboarding/pages/unlock-wallet/content.tsx b/src/apps/onboarding/pages/unlock-wallet/content.tsx
index f7e1f55d1..5ee6fc6b2 100644
--- a/src/apps/onboarding/pages/unlock-wallet/content.tsx
+++ b/src/apps/onboarding/pages/unlock-wallet/content.tsx
@@ -72,7 +72,6 @@ export function UnlockWalletPageContent({
             validationType={InputValidationType.Password}
             type={passwordInputType}
             placeholder={t('Password')}
-            oneColoredIcons
             autoFocus
             suffixIcon={
               <PasswordVisibilityIcon
diff --git a/src/libs/layout/unlock-vault/index.tsx b/src/libs/layout/unlock-vault/index.tsx
index eb9252ece..afd1d6491 100644
--- a/src/libs/layout/unlock-vault/index.tsx
+++ b/src/libs/layout/unlock-vault/index.tsx
@@ -206,7 +206,10 @@ export const UnlockVaultPage = ({ popupLayout }: UnlockVaultPageProps) => {
 
   const footer = (
     <FooterButtonsContainer>
-      <Button type="submit" disabled={isLoading}>
+      <Button
+        type="submit"
+        style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
+      >
         {isLoading ? (
           <AlignedFlexRow gap={SpacingSize.Small}>
             <Player
diff --git a/src/libs/ui/components/input/input.tsx b/src/libs/ui/components/input/input.tsx
index 638deaa77..47b99964a 100644
--- a/src/libs/ui/components/input/input.tsx
+++ b/src/libs/ui/components/input/input.tsx
@@ -7,15 +7,7 @@ import { BaseProps } from '@libs/ui/types';
 type Ref = HTMLInputElement;
 
 const InputContainer = styled('div')<InputProps>(
-  ({
-    theme,
-    oneColoredIcons,
-    disabled,
-    error,
-    monotype,
-    readOnly,
-    secondaryBackground
-  }) => ({
+  ({ theme, disabled, monotype, readOnly, secondaryBackground }) => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -34,14 +26,6 @@ const InputContainer = styled('div')<InputProps>(
     lineHeight: '2.4rem',
     height: '4rem',
 
-    path: {
-      fill: oneColoredIcons
-        ? theme.color.contentDisabled
-        : error
-          ? theme.color.fillCritical
-          : ''
-    },
-
     ...((disabled || readOnly) && {
       color: theme.color.contentSecondary
     })
@@ -132,8 +116,6 @@ export interface InputProps extends BaseProps {
   rightLabel?: string | null;
   prefixIcon?: ReactNode | null;
   suffixIcon?: ReactNode | null;
-  // TODO: make a better name 🙈
-  oneColoredIcons?: boolean;
   suffixText?: string | null | ReactNode;
 
   type?: HTMLInputTypeAttribute;
@@ -163,7 +145,6 @@ export const Input = forwardRef<Ref, InputProps>(function Input(
     error,
     validationType,
     validationText,
-    oneColoredIcons,
     onFocus,
     dataTestId,
     readOnly,
@@ -207,7 +188,6 @@ export const Input = forwardRef<Ref, InputProps>(function Input(
         monotype={monotype}
         error={error}
         height={height}
-        oneColoredIcons={oneColoredIcons}
         secondaryBackground={secondaryBackground}
       >
         {prefixIcon && <PrefixContainer>{prefixIcon}</PrefixContainer>}
diff --git a/src/libs/ui/components/password-inputs/password-inputs.tsx b/src/libs/ui/components/password-inputs/password-inputs.tsx
index 53bd6e32e..3cd0455f5 100644
--- a/src/libs/ui/components/password-inputs/password-inputs.tsx
+++ b/src/libs/ui/components/password-inputs/password-inputs.tsx
@@ -65,7 +65,6 @@ export const PasswordInputs = ({
           validationType={InputValidationType.Password}
           type={passwordInputType}
           placeholder={t('Password')}
-          oneColoredIcons
           suffixIcon={
             <PasswordVisibilityIcon
               passwordInputType={passwordInputType}
@@ -79,7 +78,6 @@ export const PasswordInputs = ({
         <Input
           type={confirmPasswordInputType}
           placeholder={t('Confirm password')}
-          oneColoredIcons
           suffixIcon={
             <PasswordVisibilityIcon
               passwordInputType={confirmPasswordInputType}
diff --git a/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx b/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
index 5044f4fe3..dd3ce04cc 100644
--- a/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
+++ b/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
@@ -25,6 +25,7 @@ export function PasswordVisibilityIcon({
           ? 'assets/icons/hide.svg'
           : 'assets/icons/show.svg'
       }
+      color="contentDisabled"
       size={20}
     />
   );
diff --git a/src/libs/ui/components/recipient-plate/recipient-plate.tsx b/src/libs/ui/components/recipient-plate/recipient-plate.tsx
index 8540a815f..34d43e1db 100644
--- a/src/libs/ui/components/recipient-plate/recipient-plate.tsx
+++ b/src/libs/ui/components/recipient-plate/recipient-plate.tsx
@@ -55,7 +55,7 @@ export const RecipientPlate = ({
           gap={SpacingSize.Medium}
           onClick={handleClick}
         >
-          <Avatar publicKey={publicKey} size={24} />
+          <Avatar publicKey={publicKey} size={24} borderRadius={2} />
           <LeftAlignedFlexColumn>
             <Hash
               value={publicKey}
@@ -78,7 +78,7 @@ export const RecipientPlate = ({
 
   return (
     <Container gap={SpacingSize.Medium} onClick={handleClick}>
-      <Avatar publicKey={publicKey} size={24} />
+      <Avatar publicKey={publicKey} size={24} borderRadius={2} />
       <LeftAlignedFlexColumn>
         <Hash
           value={publicKey}
diff --git a/src/libs/ui/components/recipient-tabs/components/contacts-list.tsx b/src/libs/ui/components/recipient-tabs/components/contacts-list.tsx
index 6ea40ade6..fc653c997 100644
--- a/src/libs/ui/components/recipient-tabs/components/contacts-list.tsx
+++ b/src/libs/ui/components/recipient-tabs/components/contacts-list.tsx
@@ -1,17 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import { selectAllContacts } from '@background/redux/contacts/selectors';
 import { ContactWithId } from '@background/redux/contacts/types';
 import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 
-import { SpacingSize, TileContainer } from '@libs/layout';
+import { SpacingSize } from '@libs/layout';
 import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
 
 interface ContactsListProps {
   handleSelectRecipient: (publicKey: string, name: string) => void;
 }
 
+const Container = styled.div`
+  padding: 16px;
+`;
+
 export const ContactsList = ({ handleSelectRecipient }: ContactsListProps) => {
   const [contactsWithId, setContactsWithId] = useState<ContactWithId[]>([]);
 
@@ -32,11 +37,11 @@ export const ContactsList = ({ handleSelectRecipient }: ContactsListProps) => {
   if (contactsWithId.length === 0) {
     return (
       <Tile>
-        <TileContainer top={SpacingSize.None}>
+        <Container>
           <Typography type="body" color="contentPrimary" textAlign="center">
             No contacts found
           </Typography>
-        </TileContainer>
+        </Container>
       </Tile>
     );
   }
diff --git a/src/libs/ui/components/recipient-tabs/components/recent-list.tsx b/src/libs/ui/components/recipient-tabs/components/recent-list.tsx
index 9c5ff5059..762ff9bdc 100644
--- a/src/libs/ui/components/recipient-tabs/components/recent-list.tsx
+++ b/src/libs/ui/components/recipient-tabs/components/recent-list.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import { selectAllContacts } from '@background/redux/contacts/selectors';
 import { selectRecentRecipientPublicKeys } from '@background/redux/recent-recipient-public-keys/selectors';
 import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 
-import { SpacingSize, TileContainer } from '@libs/layout';
+import { SpacingSize } from '@libs/layout';
 import { List, RecipientPlate, Tile, Typography } from '@libs/ui/components';
 
 interface MyAccountsListProps {
@@ -18,6 +19,10 @@ interface RecentListState {
   name: string;
 }
 
+const Container = styled.div`
+  padding: 16px;
+`;
+
 export const RecentList = ({ handleSelectRecipient }: MyAccountsListProps) => {
   const [accountsWithIds, setAccountsWithIds] = useState<RecentListState[]>([]);
 
@@ -54,11 +59,11 @@ export const RecentList = ({ handleSelectRecipient }: MyAccountsListProps) => {
   if (!accountsWithIds.length) {
     return (
       <Tile>
-        <TileContainer top={SpacingSize.None}>
+        <Container>
           <Typography type="body" color="contentPrimary" textAlign="center">
-            No recent recipients were found.
+            No recent recipients found
           </Typography>
-        </TileContainer>
+        </Container>
       </Tile>
     );
   }
diff --git a/src/libs/ui/components/recipient-tabs/recipient-tabs.tsx b/src/libs/ui/components/recipient-tabs/recipient-tabs.tsx
index 6cb733559..2f75ea777 100644
--- a/src/libs/ui/components/recipient-tabs/recipient-tabs.tsx
+++ b/src/libs/ui/components/recipient-tabs/recipient-tabs.tsx
@@ -33,7 +33,8 @@ export const RecipientTabs = ({
 
   const { t } = useTranslation();
 
-  const { register, trigger, control, formState, setValue } = recipientForm;
+  const { register, trigger, control, formState, setValue, clearErrors } =
+    recipientForm;
   const { errors } = formState;
   const { onChange } = register('recipientPublicKey');
 
@@ -94,7 +95,29 @@ export const RecipientTabs = ({
     >
       <Input
         monotype
-        prefixIcon={<SvgIcon src="assets/icons/search.svg" size={24} />}
+        prefixIcon={
+          <SvgIcon
+            src="assets/icons/search.svg"
+            size={24}
+            color="contentDisabled"
+          />
+        }
+        suffixIcon={
+          inputValue && (
+            <SvgIcon
+              src="assets/icons/cross.svg"
+              size={16}
+              onClick={() => {
+                setValue('recipientPublicKey', '');
+                if (setRecipientPublicKey) {
+                  setRecipientPublicKey('');
+                }
+                setRecipientName('');
+                trigger('recipientPublicKey');
+              }}
+            />
+          )
+        }
         placeholder={t('Public key')}
         {...register('recipientPublicKey')}
         onChange={e => {
@@ -107,19 +130,17 @@ export const RecipientTabs = ({
         error={!!errors?.recipientPublicKey}
         validationText={errors?.recipientPublicKey?.message}
       />
-      <VerticalSpaceContainer top={SpacingSize.Tiny}>
-        <Tabs>
-          <Tab tabName={RecipientTabName.Recent}>
-            <RecentList handleSelectRecipient={handleSelectRecipient} />
-          </Tab>
-          <Tab tabName={RecipientTabName.MyAccounts}>
-            <MyAccountsList handleSelectRecipient={handleSelectRecipient} />
-          </Tab>
-          <Tab tabName={RecipientTabName.Contacts}>
-            <ContactsList handleSelectRecipient={handleSelectRecipient} />
-          </Tab>
-        </Tabs>
-      </VerticalSpaceContainer>
+      <Tabs onClick={inputValue ? undefined : clearErrors}>
+        <Tab tabName={RecipientTabName.Recent}>
+          <RecentList handleSelectRecipient={handleSelectRecipient} />
+        </Tab>
+        <Tab tabName={RecipientTabName.MyAccounts}>
+          <MyAccountsList handleSelectRecipient={handleSelectRecipient} />
+        </Tab>
+        <Tab tabName={RecipientTabName.Contacts}>
+          <ContactsList handleSelectRecipient={handleSelectRecipient} />
+        </Tab>
+      </Tabs>
     </VerticalSpaceContainer>
   );
 };
diff --git a/src/libs/ui/components/tabs/tabs.tsx b/src/libs/ui/components/tabs/tabs.tsx
index b30e57925..edb1ed7bf 100644
--- a/src/libs/ui/components/tabs/tabs.tsx
+++ b/src/libs/ui/components/tabs/tabs.tsx
@@ -52,9 +52,10 @@ interface TabProps {
 interface TabsProps {
   children: React.ReactElement<TabProps>[];
   preferActiveTabId?: number;
+  onClick?: () => void;
 }
 
-export function Tabs({ children, preferActiveTabId }: TabsProps) {
+export function Tabs({ children, preferActiveTabId, onClick }: TabsProps) {
   // set preferActiveTabId as the default value if it is provided. We do not need to track props change, so we can set it directly in useState
   const [activeTabId, setActiveTabId] = useState(preferActiveTabId || 0);
 
@@ -77,6 +78,9 @@ export function Tabs({ children, preferActiveTabId }: TabsProps) {
               <TabContainer
                 onClick={() => {
                   setActiveTabId(index);
+                  if (onClick) {
+                    onClick();
+                  }
                 }}
                 key={tabName}
               >
diff --git a/src/libs/ui/forms/transfer.ts b/src/libs/ui/forms/transfer.ts
index 3724d6145..b71c13aaf 100644
--- a/src/libs/ui/forms/transfer.ts
+++ b/src/libs/ui/forms/transfer.ts
@@ -29,8 +29,8 @@ export const useTransferRecipientForm = () => {
   });
 
   const recipientFormOptions: UseFormProps<TransferRecipientFormValues> = {
-    reValidateMode: 'onBlur',
-    mode: 'onBlur',
+    reValidateMode: 'onChange',
+    mode: 'onChange',
     resolver: yupResolver(recipientFormSchema),
     delayError: 500
   };