feat: onboarding redesigned

passkeys-4337 · Nov 17, 2023 · df213d8 · df213d8
1 parent 24a6557
commit df213d8
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 49 deletions.
diff --git a/front/src/components/BaseLogo/index.tsx b/front/src/components/BaseLogo/index.tsx
@@ -0,0 +1,15 @@
+type Props = {
+  style?: React.CSSProperties;
+};
+
+export default function BaseLogo({ style }: Props) {
+  return (
+    <svg style={style} viewBox="0 0 416 111" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M110.034 55.017C110.034 85.402 85.359 110.034 54.921 110.034C26.0432 110.034 2.35281 87.8625 0 59.6416H72.8467V50.3923H0C2.35281 22.1714 26.0432 0 54.921 0C85.359 0 110.034 24.6319 110.034 55.017ZM314.358 100.066C333.455 100.066 345.98 89.7739 345.98 74.2731C345.98 59.8883 336.555 53.068 322.295 50.7119L309.646 48.6037C299.974 46.9917 293.525 42.7754 293.525 33.4749C293.525 24.0505 300.718 16.8581 314.358 16.8581C327.627 16.8581 334.447 23.5544 335.191 33.1029H344.74C343.996 20.4543 334.323 9.16968 314.482 9.16968C294.889 9.16968 284.101 20.2062 284.101 33.847C284.101 48.3557 293.897 55.0521 307.29 57.2842L320.063 59.2683C330.727 61.1284 336.679 65.4686 336.679 74.6451C336.679 85.4337 327.875 92.378 314.482 92.378C300.594 92.378 291.913 85.6817 291.169 74.2731H281.745C282.489 89.1539 293.897 100.066 314.358 100.066ZM173.574 98.3303H138.852V11.0298H172.334C187.091 11.0298 197.383 19.7102 197.383 33.599C197.383 43.6435 191.679 50.3398 182.503 52.5719V52.944C193.415 55.0521 200.111 62.4925 200.111 74.1491C200.111 89.1539 189.075 98.3303 173.574 98.3303ZM171.094 49.3478C181.635 49.3478 188.083 43.6435 188.083 34.715V33.4749C188.083 24.5465 181.635 18.9662 171.094 18.9662H148.153V49.3478H171.094ZM172.21 90.3939C183.743 90.3939 190.811 84.0696 190.811 74.3971V73.157C190.811 63.1125 183.619 57.0362 172.086 57.0362H148.153V90.3939H172.21ZM275.216 98.3303H265.295L257.855 74.6451H223.133L215.693 98.3303H206.268L234.914 11.0298H246.198L275.216 98.3303ZM240.99 20.5783H240.246L225.613 66.8327H255.499L240.99 20.5783ZM359.949 98.3303V11.0298H416V19.0902H369.25V49.0998H412.28V57.0362H369.25V90.2699H416V98.3303H359.949Z"
+      />
+    </svg>
+  );
+}
diff --git a/front/src/components/LogoAnimated/index.tsx b/front/src/components/LogoAnimated/index.tsx
@@ -53,21 +53,21 @@ export default function LogoAnimated({ style }: Props) {
         d="M43.4803 76.6886L43.4803 76.6886L43.4871 76.69C45.1079 77.0312 46.7314 77.1308 50.2939 77.0373C54.2829 76.8814 55.1898 76.761 57.2917 76.07L57.2917 76.07L57.3007 76.0671C63.4061 74.1025 67.8707 70.9925 71.393 66.2763L71.393 66.2763L71.3992 66.2681C73.6588 63.2853 75.0321 60.5693 76.1179 57.1015C76.5028 55.8544 76.6809 55.1697 76.78 54.2024C76.885 53.1778 76.9024 51.8254 76.9024 49.2461C76.9024 46.6667 76.885 45.3143 76.78 44.2897C76.6808 43.3216 76.5024 42.6365 76.1169 41.3874L76.1168 41.3871C73.2644 32.1392 66.6558 25.4632 57.2969 22.4238L57.2915 22.422C56.1325 22.0408 55.4316 21.8527 54.5 21.7359C53.5219 21.6131 52.2684 21.566 49.9961 21.5184C46.6159 21.4553 44.4358 21.557 43.229 21.8033C33.0503 23.9236 24.4871 32.2843 21.876 42.6671C21.4426 44.4014 21.2109 46.7939 21.2109 49.2461C21.2109 51.6982 21.4427 54.0909 21.8761 55.8252C24.5156 66.3531 33.0062 74.5339 43.4803 76.6886Z"
         fill="var(--accent-9)"
         stroke="var(--accent-9)"
-        stroke-width="3"
+        strokeWidth="3"
         className="svg-elem-7"
       ></path>
       <path
         d="M89.6141 64.017L89.608 64.0233C83.7784 70.0001 82.0034 79.1185 85.1888 86.9343L85.1903 86.9381C86.802 90.9234 90.4895 95.1396 94.1007 97.1782L94.1007 97.1781L94.1098 97.1833L96.0352 98.2881L96.7871 98.7195L96.7886 99.5864L96.8202 117.262V117.264V134.316L101.207 138.673L101.21 138.677L104.976 142.443L112.091 135.301L112.093 135.299L119.238 128.154L115.407 124.322L110.515 119.43L109.454 118.369L110.515 117.308L115.337 112.486C115.338 112.485 115.339 112.484 115.34 112.482C116.644 111.163 117.833 109.935 118.693 109.021C118.904 108.796 119.093 108.593 119.258 108.413C119.168 108.314 119.071 108.207 118.967 108.094C118.285 107.354 117.336 106.367 116.291 105.321C115.224 104.255 114.265 103.264 113.576 102.527C113.234 102.16 112.948 101.846 112.747 101.612C112.65 101.499 112.553 101.382 112.475 101.277C112.442 101.232 112.376 101.141 112.316 101.03C112.292 100.985 112.221 100.852 112.174 100.671C112.15 100.58 112.112 100.399 112.13 100.17C112.149 99.9287 112.241 99.5483 112.566 99.2228L112.671 99.1178L112.795 99.0354C112.893 98.9697 113.231 98.7804 113.606 98.5702C113.653 98.5437 113.701 98.5169 113.749 98.49L113.75 98.4897C114.235 98.2174 114.879 97.8564 115.569 97.4643L115.576 97.4603L115.583 97.4565C120.465 94.7507 124.396 89.6605 125.745 84.3534L125.746 84.3518C126.084 83.0277 126.292 81.0352 126.322 78.9875C126.353 76.9339 126.203 74.9885 125.9 73.748L125.898 73.7409L125.896 73.7337C124.163 66.3302 118.144 60.1473 110.644 58.0788C109.606 57.7961 107.709 57.5938 105.685 57.5354C103.666 57.4772 101.748 57.5684 100.672 57.7855C96.4693 58.6684 92.7911 60.7213 89.6141 64.017ZM114.889 99.4948C114.889 99.4955 114.89 99.4963 114.89 99.4972C114.886 99.4912 114.885 99.4902 114.889 99.4948ZM109.522 65.5598L109.527 65.5627C110.549 66.2721 111.451 67.417 112.09 68.5537C112.72 69.6751 113.233 71.0358 113.233 72.2555C113.233 73.3946 112.79 74.6957 112.248 75.7713C111.705 76.8479 110.925 77.9726 110.022 78.6572C109.069 79.3819 107.825 79.8635 106.629 80.1118C105.437 80.3591 104.116 80.4115 102.986 80.1131L102.976 80.1104L102.966 80.1076C99.6182 79.1735 97.0159 75.8212 96.9766 72.3672L96.9765 72.3592C96.938 65.9599 104.22 61.9069 109.522 65.5598Z"
         fill="var(--accent-9)"
         stroke="var(--accent-9)"
-        stroke-width="3"
+        strokeWidth="3"
         className="svg-elem-8"
       ></path>
       <path
         d="M33.5306 90.6869L33.5268 90.6875C19.507 92.842 7.72197 102.862 3.28831 116.404C1.78348 121.039 1.5 123.315 1.5 132.604V139.595H42.6101H83.7202V123.104V105.757L81.662 103.801L81.6589 103.798C78.7174 100.988 76.3732 97.9582 74.6791 94.7693L74.6746 94.7608L73.881 93.2435L70.982 92.2684C70.9818 92.2683 70.9816 92.2682 70.9814 92.2682C65.59 90.461 63.1311 90.1999 48.7366 90.2314C39.6881 90.2632 35.4098 90.3933 33.5306 90.6869Z"
         fill="var(--accent-9)"
         stroke="var(--accent-9)"
-        stroke-width="3"
+        strokeWidth="3"
         className="svg-elem-9"
       ></path>
     </svg>

diff --git a/front/src/components/OnBoarding/index.tsx b/front/src/components/OnBoarding/index.tsx
@@ -1,10 +1,11 @@
 import { useMe } from "@/providers/MeProvider";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Button, Flex, Link, TextField, IconButton } from "@radix-ui/themes";
+import { Button, Flex, Link, TextField, IconButton, Text } from "@radix-ui/themes";
 import { useState } from "react";
 import ThemeButton from "../ThemeButton";
 import LogoAnimated from "../LogoAnimated";
 import Spinner from "../Spinner";
+import BaseLogo from "../BaseLogo";
 
 export default function OnBoarding() {
   const [username, setUsername] = useState("");
@@ -18,26 +19,24 @@ export default function OnBoarding() {
       direction="column"
       style={{ position: "relative", width: "100%", gap: "2rem" }}
     >
-      <ThemeButton
-        style={{
-          position: "absolute",
-          top: "0rem",
-          right: "0rem",
-        }}
-      />
-      <IconButton
-        style={{ position: "absolute", top: "0rem", left: "0rem" }}
-        onClick={() => window.open("https://github.com/passkeys-4337/smart-wallet", "_blank")}
-        variant="soft"
-      >
-        <GitHubLogoIcon />
-      </IconButton>
-      <LogoAnimated
-        style={{
-          transform: "translateY(3rem)",
-          width: "240px",
-        }}
-      />
+      <Flex justify={"between"} align={"baseline"} width={"100%"}>
+        <IconButton
+          onClick={() => window.open("https://github.com/passkeys-4337/smart-wallet", "_blank")}
+          variant="soft"
+        >
+          <GitHubLogoIcon />
+        </IconButton>
+        <Flex
+          gap={"1"}
+          style={{ width: "100%", color: "var(--gray-8)" }}
+          align={"center"}
+          justify={"center"}
+        >
+          <Text size={"2"}>Build for</Text>
+          <BaseLogo style={{ fill: "var(--gray-8)", width: "60px" }} />
+        </Flex>
+        <ThemeButton />
+      </Flex>
 
       {isLoading && <Spinner />}
 
@@ -62,37 +61,61 @@ export default function OnBoarding() {
             }
           }}
         >
+          <LogoAnimated
+            style={{
+              width: "240px",
+            }}
+          />
           {createForm && (
-            <TextField.Input
-              required
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="Name"
-              disabled={isLoading}
-              size={"3"}
-              style={{
-                width: "250px",
-                padding: "0.5rem",
-              }}
-            />
+            <Flex gap={"2"} style={{ width: "250px" }}>
+              <TextField.Input
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Wallet name"
+                disabled={isLoading}
+                size={"3"}
+                style={{
+                  padding: "0.5rem",
+                }}
+              />
+
+              <Button
+                style={{ width: "110px", textAlign: "center" }}
+                variant={"outline"}
+                size={"3"}
+                type={"submit"}
+              >
+                CREATE
+              </Button>
+            </Flex>
+          )}
+          {!createForm && (
+            <Button style={{ width: "250px" }} variant={"outline"} size={"3"} type={"submit"}>
+              LOG IN
+            </Button>
           )}
-          <Button style={{ width: "250px" }} variant={"outline"} size={"3"} type={"submit"}>
-            {createForm ? "CREATE ACCOUNT" : "SIGN IN"}
-          </Button>
         </form>
       )}
 
-      {!createForm && (
-        <Link onClick={() => !isLoading && setCreateForm(true)} size={"2"}>
-          or create a new account
-        </Link>
-      )}
+      <Flex style={{ width: "100%", whiteSpace: "nowrap" }} justify={"end"}>
+        {!createForm && (
+          <Link
+            onClick={() => {
+              !isLoading && setCreateForm(true);
+            }}
+            size={"2"}
+          >
+            or create a new wallet
+          </Link>
+        )}
 
-      {createForm && (
-        <Link onClick={() => !isLoading && setCreateForm(false)} size={"2"}>
-          or sign in with an existing account
-        </Link>
-      )}
+        {createForm && (
+          <Link onClick={() => !isLoading && setCreateForm(false)} size={"2"}>
+            or log in with an existing passkey
+          </Link>
+        )}
+      </Flex>
     </Flex>
   );
 }