From 5d7b83c8cad1e45e7336bc61a1e7b1b192cd3bcb Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 31 May 2024 15:11:20 +0200
Subject: [PATCH] Adjust login/signup layout (#329)

* Adjust login/signup layout

* Fix clear button in input field
---
 .../keychain/src/components/Auth/Login.tsx    | 10 +++--
 .../keychain/src/components/Auth/Signup.tsx   | 11 ++----
 .../src/components/Container/Header/index.tsx |  6 +--
 .../src/components/Container/index.tsx        |  7 ++--
 .../keychain/src/components/PortalBanner.tsx  | 39 +++++++++----------
 .../src/components/PortalFooter/index.tsx     | 13 +++----
 packages/keychain/src/pages/_app.tsx          |  2 +-
 packages/ui/src/components/Field.tsx          |  4 +-
 packages/ui/src/theme/components/Button.ts    |  1 -
 9 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/packages/keychain/src/components/Auth/Login.tsx b/packages/keychain/src/components/Auth/Login.tsx
index 8e0c75956..ccd9b4f40 100644
--- a/packages/keychain/src/components/Auth/Login.tsx
+++ b/packages/keychain/src/components/Auth/Login.tsx
@@ -1,4 +1,4 @@
-import { Field } from "@cartridge/ui";
+import { Field, FingerprintIcon } from "@cartridge/ui";
 import { VStack, Button } from "@chakra-ui/react";
 import { Container } from "../Container";
 import { Form as FormikForm, Field as FormikField, Formik } from "formik";
@@ -85,7 +85,7 @@ export function Login({
   );
 
   return (
-    <Container chainId={chainId} overflowY="auto">
+    <Container chainId={chainId} overflowY={error ? "auto" : undefined}>
       <Formik
         initialValues={{ username: prefilledName }}
         onSubmit={onSubmit}
@@ -103,13 +103,13 @@ export function Login({
               description="Enter your Controller username"
             />
 
-            <VStack align="stretch" pb={PORTAL_FOOTER_MIN_HEIGHT}>
+            <VStack align="stretch" pb={error ? PORTAL_FOOTER_MIN_HEIGHT : undefined}>
               <FormikField
                 name="username"
                 placeholder="Username"
                 validate={validateUsernameFor("login")}
               >
-                {({ field, meta }) => (
+                {({ field, meta, form }) => (
                   <Field
                     {...field}
                     autoFocus
@@ -118,6 +118,7 @@ export function Login({
                     error={meta.error}
                     isLoading={props.isValidating}
                     isDisabled={isLoading}
+                    onClear={() => form.setFieldValue(field.name, "")}
                   />
                 )}
               </FormikField>
@@ -134,6 +135,7 @@ export function Login({
                 type="submit"
                 colorScheme="colorful"
                 isLoading={isLoading}
+                leftIcon={<FingerprintIcon fontSize="2xl" />}
               >
                 Log in
               </Button>
diff --git a/packages/keychain/src/components/Auth/Signup.tsx b/packages/keychain/src/components/Auth/Signup.tsx
index 1f4ef885c..800d8031d 100644
--- a/packages/keychain/src/components/Auth/Signup.tsx
+++ b/packages/keychain/src/components/Auth/Signup.tsx
@@ -21,7 +21,6 @@ import { client } from "utils/graphql";
 import { PopupCenter } from "utils/url";
 import { FormValues, SignupProps } from "./types";
 import { isIframe, validateUsernameFor } from "./utils";
-import { useClearField } from "./hooks";
 import { RegistrationLink } from "./RegistrationLink";
 import { doSignup } from "hooks/account";
 import { useControllerTheme } from "hooks/theme";
@@ -68,7 +67,7 @@ export function Signup({
 
   return (
     <>
-      <Container>
+      <Container overflowY={error ? "auto" : undefined}>
         <Formik
           initialValues={{ username: prefilledName }}
           onSubmit={onSubmit}
@@ -171,8 +170,6 @@ function Form({
     },
   );
 
-  const onClearUsername = useClearField("username");
-
   const onLogin = useCallback(() => {
     onLoginProp(values.username);
   }, [values.username, onLoginProp]);
@@ -188,20 +185,20 @@ function Form({
         description="Create your Cartridge Controller"
       />
 
-      <VStack align="stretch" pb={PORTAL_FOOTER_MIN_HEIGHT}>
+      <VStack align="stretch" pb={error ? PORTAL_FOOTER_MIN_HEIGHT : undefined}>
         <FormikField
           name="username"
           placeholder="Username"
           validate={validateUsernameFor("signup")}
         >
-          {({ field, meta }) => (
+          {({ field, meta, form }) => (
             <Field
               {...field}
               autoFocus
               placeholder="Username"
               touched={meta.touched}
               error={meta.error}
-              onClear={onClearUsername}
+              onClear={() => form.setFieldValue(field.name, "")}
               isLoading={isValidating}
             />
           )}
diff --git a/packages/keychain/src/components/Container/Header/index.tsx b/packages/keychain/src/components/Container/Header/index.tsx
index 910bbe029..a3d8a8b2f 100644
--- a/packages/keychain/src/components/Container/Header/index.tsx
+++ b/packages/keychain/src/components/Container/Header/index.tsx
@@ -61,14 +61,14 @@ export function Header({
             right={0}
           >
             <Flex
-              bg="darkGray.800"
+              bg="darkGray.700"
               borderRadius="lg"
               h={`${ICON_SIZE}px`}
               w={`${ICON_SIZE}px`}
               justify="center"
               alignItems="center"
               borderWidth={4}
-              borderColor={colorMode === "dark" ? "solid.bg" : "blueGray.100"}
+              borderColor="solid.bg"
             >
               <Image
                 src={theme.icon}
@@ -143,4 +143,4 @@ function Container({
 export const BANNER_HEIGHT = 150;
 export const ICON_IMAGE_SIZE = 64;
 export const ICON_SIZE = 80;
-export const ICON_OFFSET = 16;
+export const ICON_OFFSET = 32;
diff --git a/packages/keychain/src/components/Container/index.tsx b/packages/keychain/src/components/Container/index.tsx
index 3b0e58d02..3fea228ea 100644
--- a/packages/keychain/src/components/Container/index.tsx
+++ b/packages/keychain/src/components/Container/index.tsx
@@ -31,6 +31,7 @@ export function Container({
         w="full"
         h="full"
         p={4}
+        pt={12}
         overflowY="auto"
         css={{
           "::-webkit-scrollbar": {
@@ -50,6 +51,8 @@ export function Container({
         alignItems="center"
         justify="center"
         minH={FOOTER_HEIGHT / 4}
+        bottom={0}
+        position="fixed"
       >
         <CartridgeIcon fontSize="sm" />
         <Text fontSize="xs" color="currentColor">
@@ -69,7 +72,6 @@ function Wrapper({ children }: React.PropsWithChildren) {
       <Show below="md">
         <ChakraContainer
           w="100vw"
-          h="100vh"
           bg="solid.bg"
           p={0}
           as={motion.div}
@@ -83,10 +85,9 @@ function Wrapper({ children }: React.PropsWithChildren) {
 
       {/** Show as modal  */}
       <Show above="md">
-        <Flex w="100vw" h="100vh" m={0} p={0} alignItems="center">
+        <Flex w="100vw" m={0} p={0} alignItems="center">
           <ChakraContainer
             w="432px"
-            h="600px"
             bg="solid.bg"
             p={0}
             as={motion.div}
diff --git a/packages/keychain/src/components/PortalBanner.tsx b/packages/keychain/src/components/PortalBanner.tsx
index a336d3e6a..2c328faa1 100644
--- a/packages/keychain/src/components/PortalBanner.tsx
+++ b/packages/keychain/src/components/PortalBanner.tsx
@@ -12,29 +12,28 @@ export function PortalBanner({
   description?: string | React.ReactElement;
 }) {
   return (
-    <VStack w="full" mb={4} p={3}>
-      <VStack pt={6} px={8}>
-        {!!Icon && (
-          <Circle size={12} mb={4} bg="solid.primary">
-            <Icon boxSize={8} />
-          </Circle>
-        )}
+    <VStack pb={6}>
+      {!!Icon && (
+        <Circle size={12} mb={4} bg="solid.primary">
+          <Icon boxSize={8} />
+        </Circle>
+      )}
 
-        {!!icon && (
-          <Circle size={12} mb={4} bg="solid.primary">
-            {icon}
-          </Circle>
-        )}
+      {!!icon && (
+        <Circle size={12} mb={4} bg="solid.primary">
+          {icon}
+        </Circle>
+      )}
 
-        <Text fontSize="lg" fontWeight="semibold" whiteSpace="nowrap">
-          {title}
+      <Text fontSize="lg" fontWeight="semibold" whiteSpace="nowrap">
+        {title}
+      </Text>
+
+      {description && (
+        <Text fontSize="sm" color="text.secondary" align="center">
+          {description}
         </Text>
-        {description && (
-          <Text fontSize="sm" color="text.secondary" align="center">
-            {description}
-          </Text>
-        )}
-      </VStack>
+      )}
     </VStack>
   );
 }
diff --git a/packages/keychain/src/components/PortalFooter/index.tsx b/packages/keychain/src/components/PortalFooter/index.tsx
index ade3fdf3b..d06a11d6e 100644
--- a/packages/keychain/src/components/PortalFooter/index.tsx
+++ b/packages/keychain/src/components/PortalFooter/index.tsx
@@ -42,13 +42,12 @@ export function PortalFooter({
   const height = useMemo(
     () =>
       isOpen
-        ? `${
-            window.document.body.scrollHeight -
-            BANNER_HEIGHT -
-            FOOTER_HEIGHT +
-            ICON_SIZE / 2 -
-            ICON_OFFSET
-          }px`
+        ? `${window.innerHeight -
+        BANNER_HEIGHT -
+        FOOTER_HEIGHT +
+        ICON_SIZE / 2 -
+        ICON_OFFSET
+        }px`
         : "auto",
     [isOpen],
   );
diff --git a/packages/keychain/src/pages/_app.tsx b/packages/keychain/src/pages/_app.tsx
index b9b2b4865..2fd0c684b 100644
--- a/packages/keychain/src/pages/_app.tsx
+++ b/packages/keychain/src/pages/_app.tsx
@@ -39,7 +39,7 @@ export default function Keychain({ Component, pageProps }: AppProps) {
         }
 
         body {
-          background: var(--chakra-colors-translucent-lg);
+          background: var(--chakra-colors-solid-bg);
         }
       `}</style>
 
diff --git a/packages/ui/src/components/Field.tsx b/packages/ui/src/components/Field.tsx
index 947e1621e..61d998cf1 100644
--- a/packages/ui/src/components/Field.tsx
+++ b/packages/ui/src/components/Field.tsx
@@ -67,7 +67,7 @@ export function Field({
               cursor={isActive ? "pointer" : "default"}
               opacity={isActive ? 100 : 0} // workaround for onBlur handler triggeres before onClear
             >
-              <TimesCircleIcon color="text.secondary" boxSize={5} />
+              <TimesCircleIcon color="text.secondary" boxSize={6} />
             </InputRightElement>
           )
         )}
@@ -75,7 +75,7 @@ export function Field({
 
       {error && touched && (
         <HStack marginY={3}>
-          <AlertIcon color="text.error" />
+          <AlertIcon fontSize="xl" color="text.error" />
           <Text color="text.error" fontSize="sm">
             {error}
           </Text>
diff --git a/packages/ui/src/theme/components/Button.ts b/packages/ui/src/theme/components/Button.ts
index 18ff0b402..7d0ced39a 100644
--- a/packages/ui/src/theme/components/Button.ts
+++ b/packages/ui/src/theme/components/Button.ts
@@ -18,7 +18,6 @@ export const Button: ComponentStyleConfig = defineStyleConfig({
     },
     lineHeight: "none",
     textTransform: "uppercase",
-    letterSpacing: "widest",
     _disabled: {
       pointerEvents: "none",
     },