Fix ui on beacon request modals

trilitech · Aug 29, 2024 · a4568b8 · a4568b8
1 parent 772df39
commit a4568b8
Show file tree

Hide file tree

Showing 9 changed files with 714 additions and 839 deletions.
diff --git a/apps/web/src/components/AccountSelectorModal/RemoveAccountModal.tsx b/apps/web/src/components/AccountSelectorModal/RemoveAccountModal.tsx
@@ -12,6 +12,7 @@ import { type LedgerAccount, type SecretKeyAccount, type SocialAccount } from "@
 import { useImplicitAccounts, useRemoveAccount } from "@umami/state";
 
 import { AlertIcon } from "../../assets/icons";
+import { useColor } from "../../styles/useColor";
 import { ModalCloseButton } from "../CloseButton";
 
 type RemoveAccountModalProps = {
@@ -21,6 +22,7 @@ type RemoveAccountModalProps = {
 export const RemoveAccountModal = ({ account }: RemoveAccountModalProps) => {
   const { goBack, onClose } = useDynamicModalContext();
   const removeAccount = useRemoveAccount();
+  const color = useColor();
 
   const isLastImplicitAccount = useImplicitAccounts().length === 1;
 
@@ -55,7 +57,7 @@ export const RemoveAccountModal = ({ account }: RemoveAccountModalProps) => {
           <Heading marginTop="18px" marginBottom="12px" size="xl">
             Remove Account
           </Heading>
-          <Text maxWidth="340px" color="gray.700" fontWeight="400" size="md">
+          <Text maxWidth="340px" color={color("700")} fontWeight="400" size="md">
             {description}
           </Text>
         </Flex>

diff --git a/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx b/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx
@@ -139,7 +139,7 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
             {keepValid ? (
               <Icon as={ChevronDownIcon} marginRight="12px" data-testid="chevron-icon" />
             ) : (
-              <CrossButton marginRight="14px" onClick={clearInput} />
+              <CrossButton marginRight="12px" onClick={clearInput} />
             )}
           </Center>
         </Box>
@@ -148,6 +148,7 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
         <InputGroup>
           <Input
             {...style}
+            paddingRight="40px"
             aria-label={inputName}
             autoComplete="off"
             id={inputId}
@@ -165,9 +166,9 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
             placeholder="Enter address or contact name"
             value={rawValue}
           />
-          <InputRightElement>
+          <InputRightElement marginRight="12px">
             {rawValue ? (
-              <CrossButton marginRight="0px" onClick={clearInput} />
+              <CrossButton width="16px" height="auto" onClick={clearInput} />
             ) : (
               <ChevronDownIcon data-testid="chevron-icon" />
             )}
@@ -188,13 +189,7 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
 };
 
 const CrossButton = (props: IconProps) => (
-  <Icon
-    as={XMarkIcon}
-    marginRight="16px"
-    cursor="pointer"
-    data-testid="clear-input-button"
-    {...props}
-  />
+  <Icon as={XMarkIcon} cursor="pointer" data-testid="clear-input-button" {...props} />
 );
 
 export const OwnedImplicitAccountsAutocomplete = <T extends FieldValues, U extends Path<T>>(

diff --git a/apps/web/src/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/apps/web/src/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -53,13 +53,13 @@ export const AdvancedSettingsAccordion = ({ index = 0 }: AdvancedSettingsAccordi
   return (
     <Accordion width="full" marginTop="16px" allowToggle>
       <AccordionItem background={color("100")} border="none" borderRadius="8px">
-        <AccordionButton>
+        <AccordionButton borderRadius="full">
           <Heading flex="1" textAlign="left" marginY="10px" size="md">
             Advanced
           </Heading>
           <AccordionIcon />
         </AccordionButton>
-        <AccordionPanel gap="16px" display="flex">
+        <AccordionPanel gap="16px" display="flex" padding="16px">
           <FormControl>
             <FormLabel fontSize="14px">Fee</FormLabel>
             <InputGroup>

diff --git a/apps/web/src/components/SendFlow/Beacon/ContractCallSignPage.tsx b/apps/web/src/components/SendFlow/Beacon/ContractCallSignPage.tsx
@@ -56,13 +56,13 @@ export const ContractCallSignPage = ({ operation, message }: BeaconSignPageProps
             <FormLabel marginTop="24px">Contract Call Parameter</FormLabel>
             <Accordion allowToggle={true}>
               <AccordionItem background={color("100")} border="none" borderRadius="8px">
-                <AccordionButton>
+                <AccordionButton borderRadius="full">
                   <Box flex="1" textAlign="left">
                     JSON
                   </Box>
                   <AccordionIcon />
                 </AccordionButton>
-                <AccordionPanel>
+                <AccordionPanel padding="10px 0 0">
                   <JsValueWrap value={{ entrypoint, values: args }} />
                 </AccordionPanel>
               </AccordionItem>

diff --git a/apps/web/src/components/SendFlow/Beacon/Header.tsx b/apps/web/src/components/SendFlow/Beacon/Header.tsx
@@ -2,6 +2,7 @@ import { type OperationRequestOutput } from "@airgap/beacon-wallet";
 import { AspectRatio, Flex, Heading, Image, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
 
+import { CodeSandboxIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
 import { SignPageHeader } from "../SignPageHeader";
 
@@ -11,10 +12,10 @@ export const Header = ({ message }: { message: OperationRequestOutput }) => {
   return (
     <SignPageHeader>
       <Flex alignItems="center" justifyContent="center" marginTop="10px">
-        <Heading marginRight="4px" color={color("450")} size="sm">
+        <Heading marginRight="4px" color={color("700")} size="sm">
           Network:
         </Heading>
-        <Text color={color("400")} size="sm">
+        <Text color={color("700")} fontWeight="400" size="sm">
           {capitalize(message.network.type)}
         </Text>
       </Flex>
@@ -27,7 +28,12 @@ export const Header = ({ message }: { message: OperationRequestOutput }) => {
         backgroundColor={color("100")}
       >
         <AspectRatio width="30px" marginRight="12px" ratio={1}>
-          <Image borderRadius="4px" src={message.appMetadata.icon} />
+          <Image
+            borderRadius="4px"
+            objectFit="cover"
+            fallback={<CodeSandboxIcon width="36px" height="36px" />}
+            src={message.appMetadata.icon}
+          />
         </AspectRatio>
         <Heading size="sm">{message.appMetadata.name}</Heading>
       </Flex>

diff --git a/apps/web/src/components/SendFlow/Beacon/OriginationOperationSignPage.tsx b/apps/web/src/components/SendFlow/Beacon/OriginationOperationSignPage.tsx
@@ -21,6 +21,7 @@ import { FormProvider } from "react-hook-form";
 
 import { type BeaconSignPageProps } from "./BeaconSignPageProps";
 import { useSignWithBeacon } from "./useSignWithBeacon";
+import { CodeSandboxIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
 import { AdvancedSettingsAccordion } from "../../AdvancedSettingsAccordion";
 import { JsValueWrap } from "../../JsValueWrap";
@@ -41,10 +42,10 @@ export const OriginationOperationSignPage = ({ operation, message }: BeaconSignP
               Operation Request
             </Flex>
             <Flex alignItems="center" justifyContent="center" marginTop="10px">
-              <Heading marginRight="4px" color={color("450")} size="sm">
+              <Heading marginRight="4px" color={color("700")} size="sm">
                 Network:
               </Heading>
-              <Text color={color("400")} size="sm">
+              <Text color={color("700")} fontWeight="400" size="sm">
                 {capitalize(message.network.type)}
               </Text>
             </Flex>
@@ -59,7 +60,12 @@ export const OriginationOperationSignPage = ({ operation, message }: BeaconSignP
               backgroundColor={color("100")}
             >
               <AspectRatio width="60px" marginRight="12px" ratio={1}>
-                <Image borderRadius="4px" src={message.appMetadata.icon} />
+                <Image
+                  borderRadius="4px"
+                  objectFit="cover"
+                  fallback={<CodeSandboxIcon width="36px" height="36px" />}
+                  src={message.appMetadata.icon}
+                />
               </AspectRatio>
               <Heading size="sm">{message.appMetadata.name}</Heading>
             </Flex>
@@ -76,7 +82,7 @@ export const OriginationOperationSignPage = ({ operation, message }: BeaconSignP
                   </Heading>
                   <AccordionIcon />
                 </AccordionButton>
-                <AccordionPanel overflowY="auto" maxHeight="300px">
+                <AccordionPanel overflowY="auto" maxHeight="300px" padding="10px 0 0">
                   <JsValueWrap value={code} />
                 </AccordionPanel>
               </AccordionItem>
@@ -89,7 +95,7 @@ export const OriginationOperationSignPage = ({ operation, message }: BeaconSignP
                   </Heading>
                   <AccordionIcon />
                 </AccordionButton>
-                <AccordionPanel overflowY="auto" maxHeight="300px">
+                <AccordionPanel overflowY="auto" maxHeight="300px" padding="10px 0 0">
                   <JsValueWrap value={storage} />
                 </AccordionPanel>
               </AccordionItem>

diff --git a/apps/web/src/components/SendFlow/SuccessStep.tsx b/apps/web/src/components/SendFlow/SuccessStep.tsx
@@ -2,24 +2,27 @@ import {
   Button,
   Flex,
   Heading,
+  Link,
   ModalBody,
-  ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
 import { useSelectedNetwork } from "@umami/state";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { StubIcon as WindowLinkIcon } from "../../assets/icons";
+import { useColor } from "../../styles/useColor";
+import { ModalCloseButton } from "../CloseButton";
 
 export const SuccessStep = ({ hash }: { hash: string }) => {
   const network = useSelectedNetwork();
   const tzktUrl = `${network.tzktExplorerUrl}/${hash}`;
   const { onClose } = useDynamicModalContext();
   const navigate = useNavigate();
+  const color = useColor();
 
   return (
     <ModalContent paddingY="20px">
@@ -29,31 +32,28 @@ export const SuccessStep = ({ hash }: { hash: string }) => {
       </ModalHeader>
       <ModalBody>
         <Flex justifyContent="center" marginTop="10px">
-          <Text color="text.dark" textAlign="center" size="sm">
+          <Text color={color("700")} textAlign="center" size="sm">
             You can follow this operation's progress in the Operations section. It may take up to 30
             seconds to appear.
           </Text>
         </Flex>
       </ModalBody>
-      <ModalFooter justifyContent="center" flexDirection="column" width="100%">
+      <ModalFooter justifyContent="center" flexDirection="column" gap="12px" width="100%">
         <Button
           width="100%"
           onClick={() => {
             onClose();
             navigate("/activity");
           }}
           size="lg"
+          variant="primary"
         >
           See all Operations
         </Button>
-        <Link rel="noopener noreferrer" target="_blank" to={tzktUrl}>
-          <Flex alignItems="center" marginTop="24px">
-            <Button variant="CTAWithIcon">
-              <Text marginRight="4px">View in Tzkt</Text>
-              <WindowLinkIcon stroke="currentcolor" />
-            </Button>
-          </Flex>
-        </Link>
+        <Button as={Link} width="full" href={tzktUrl} isExternal variant="tertiary">
+          <Text marginRight="4px">View in Tzkt</Text>
+          <WindowLinkIcon stroke="currentcolor" />
+        </Button>
       </ModalFooter>
     </ModalContent>
   );

diff --git a/apps/web/src/components/beacon/PermissionRequestModal.tsx b/apps/web/src/components/beacon/PermissionRequestModal.tsx
@@ -17,7 +17,6 @@ import {
   Heading,
   Image,
   ModalBody,
-  ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
@@ -33,8 +32,10 @@ import {
 import { capitalize } from "lodash";
 import { FormProvider, useForm } from "react-hook-form";
 
+import { CodeSandboxIcon } from "../../assets/icons";
 import { OwnedImplicitAccountsAutocomplete } from "../../components/AddressAutocomplete";
 import { useColor } from "../../styles/useColor";
+import { ModalCloseButton } from "../CloseButton";
 import { JsValueWrap } from "../JsValueWrap";
 
 export const PermissionRequestModal = ({ request }: { request: PermissionRequestOutput }) => {
@@ -75,15 +76,15 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
         <Flex alignItems="center" justifyContent="center">
           Permission Request
         </Flex>
-        <Text marginTop="10px" color={color("400")} textAlign="center" size="sm">
+        <Text marginTop="10px" color={color("700")} textAlign="center" size="sm">
           {request.appMetadata.name} is requesting permission to sign this operation.
         </Text>
 
         <Flex alignItems="center" justifyContent="center" marginTop="10px">
-          <Heading marginRight="4px" color={color("450")} size="sm">
+          <Heading marginRight="4px" color={color("700")} size="sm">
             Network:
           </Heading>
-          <Text color={color("400")} size="sm">
+          <Text color={color("700")} fontWeight="400" size="sm">
             {capitalize(request.network.type)}
           </Text>
         </Flex>
@@ -98,20 +99,25 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
           backgroundColor={color("100")}
         >
           <AspectRatio width="60px" marginRight="12px" ratio={1}>
-            <Image borderRadius="4px" src={request.appMetadata.icon} />
+            <Image
+              borderRadius="4px"
+              objectFit="cover"
+              fallback={<CodeSandboxIcon width="36px" height="36px" />}
+              src={request.appMetadata.icon}
+            />
           </AspectRatio>
           <Heading size="sm">{request.appMetadata.name}</Heading>
         </Flex>
 
         <Accordion marginTop="16px" allowToggle={true}>
           <AccordionItem background={color("100")} border="none" borderRadius="8px">
-            <AccordionButton>
+            <AccordionButton borderRadius="full">
               <Heading flex="1" textAlign="left" marginY="10px" size="md">
                 Request
               </Heading>
               <AccordionIcon />
             </AccordionButton>
-            <AccordionPanel>
+            <AccordionPanel padding="10px 0 0">
               <JsValueWrap overflow="auto" maxHeight="250px" value={request} />
             </AccordionPanel>
           </AccordionItem>
@@ -129,7 +135,7 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
         </FormProvider>
       </ModalBody>
       <ModalFooter>
-        <Button width="100%" isDisabled={!isValid} onClick={grant}>
+        <Button width="100%" isDisabled={!isValid} onClick={grant} variant="primary">
           Allow
         </Button>
       </ModalFooter>