Improve UI

Author: jribbink

components/AccountsList.tsx

@@ -22,11 +22,13 @@ const styles: SXStyles = {
   plusButtonContainer: {
     display: "flex",
     alignItems: "center",
-    gap: 2,
+    gap: 3,
   },
   plusButtonContainerColumn: {
     flexDirection: "column",
     alignItems: "stretch",
+    gap: 2,
+    mt: 3,
   },
   footer: {
     lineHeight: 1.7,
@@ -96,8 +98,9 @@ export default function AccountsList({
               <PlusButton
                 onClick={onUseAnyAccount}
                 data-test="use-any-account-button"
+                icon="arrow"
               >
-                Use Existing Address (Fork Mode)
+                Use Existing Address
               </PlusButton>
             )}
             <PlusButton

components/AnyAccountForm.tsx

@@ -124,10 +124,8 @@ export default function AnyAccountForm({
               <Box mb={4}>
                 <ConnectedAppHeader
                   info={false}
-                  title={"Use Existing Address (Fork Mode)"}
-                  description={
-                    "Authenticate as any address on the forked network."
-                  }
+                  title={"Use Existing Address"}
+                  description={"Authenticate as any address on the network."}
                   flowAccountAddress={flowAccountAddress}
                   avatarUrl={avatarUrl}
                 />

components/PlusButton.tsx

@@ -23,17 +23,24 @@ const styles: SXStyles = {
     fontFamily: "inherit",
     fontWeight: "normal",
   },
+  iconSecondary: {
+    backgroundColor: "green",
+  },
 }
 
 export default function PlusButton({
   onClick,
   disabled,
   children,
+  icon,
 }: {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void
   disabled?: boolean
   children: React.ReactNode
+  icon?: "plus" | "arrow"
 }) {
+  const isArrow = icon === "arrow"
+  
   return (
     <Button
       variant="unstyled"
@@ -44,8 +51,21 @@ export default function PlusButton({
       disabled={disabled}
       data-test="plus-button"
     >
-      <div sx={styles.icon}>
-        <img src="/plus-icon.svg" />
+      <div sx={{...styles.icon, ...(isArrow ? styles.iconSecondary : {})}}>
+        {isArrow ? (
+          <span
+            sx={{
+              fontSize: "30px",
+              lineHeight: 1,
+              fontWeight: "normal",
+              color: "white",
+            }}
+          >
+            ↪
+          </span>
+        ) : (
+          <img src="/plus-icon.svg" />
+        )}
       </div>
       {children}
     </Button>