From 8db25148de54183bfa1c5f6beccce220b38ef2c5 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 23 Nov 2023 00:45:06 +0100
Subject: [PATCH] Account styling in settings

---
 src/components/Avatar.tsx              | 32 ++++++++++++++++++++---
 src/components/layout/BrandPill.tsx    |  8 ++++--
 src/pages/parts/auth/LoginFormPart.tsx |  2 +-
 src/pages/settings/AccountEditPart.tsx | 36 ++++++++++++++++++++++++--
 themes/default.ts                      | 11 ++++++--
 5 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 61ad5cf7..6968dfba 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,26 +1,50 @@
+import classNames from "classnames";
+
 import { UserIcon } from "@/components/UserIcon";
 import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart";
 import { useAuthStore } from "@/stores/auth";
 
 export interface AvatarProps {
   profile: AccountProfile["profile"];
+  sizeClass?: string;
+  iconClass?: string;
 }
 
 export function Avatar(props: AvatarProps) {
   return (
     <div
-      className="h-[2em] w-[2em] rounded-full overflow-hidden flex items-center justify-center text-white"
+      className={classNames(
+        props.sizeClass,
+        "rounded-full overflow-hidden flex items-center justify-center text-white"
+      )}
       style={{
         background: `linear-gradient(to bottom right, ${props.profile.colorA}, ${props.profile.colorB})`,
       }}
     >
-      <UserIcon icon={props.profile.icon as any} />
+      <UserIcon className={props.iconClass} icon={props.profile.icon as any} />
     </div>
   );
 }
 
-export function UserAvatar() {
+export function UserAvatar(props: {
+  sizeClass?: string;
+  iconClass?: string;
+  bottom?: React.ReactNode;
+}) {
   const auth = useAuthStore();
   if (!auth.account) return null;
-  return <Avatar profile={auth.account.profile} />;
+  return (
+    <div className="relative inline-block">
+      <Avatar
+        profile={auth.account.profile}
+        sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"}
+        iconClass={props.iconClass}
+      />
+      {props.bottom ? (
+        <div className="absolute bottom-0 left-1/2 transform translate-y-1/2 -translate-x-1/2">
+          {props.bottom}
+        </div>
+      ) : null}
+    </div>
+  );
 }
diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx
index ea9fc081..929b6d18 100644
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
@@ -5,16 +6,19 @@ import { Icon, Icons } from "@/components/Icon";
 export function BrandPill(props: {
   clickable?: boolean;
   hideTextOnMobile?: boolean;
+  backgroundClass?: string;
 }) {
   const { t } = useTranslation();
 
   return (
     <div
-      className={`flex items-center space-x-2 rounded-full bg-pill-background bg-opacity-50 px-4 py-2 text-bink-600 ${
+      className={classNames(
+        "flex items-center space-x-2 rounded-full px-4 py-2 text-bink-600",
+        props.backgroundClass ?? "bg-pill-background bg-opacity-50",
         props.clickable
           ? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-400 hover:text-bink-700 active:scale-95"
           : ""
-      }`}
+      )}
     >
       <Icon className="text-xl" icon={Icons.MOVIE_WEB} />
       <span
diff --git a/src/pages/parts/auth/LoginFormPart.tsx b/src/pages/parts/auth/LoginFormPart.tsx
index 0e7027b3..6e603f0e 100644
--- a/src/pages/parts/auth/LoginFormPart.tsx
+++ b/src/pages/parts/auth/LoginFormPart.tsx
@@ -48,7 +48,7 @@ export function LoginFormPart(props: LoginFormPartProps) {
   );
 
   return (
-    <LargeCard top={<BrandPill />}>
+    <LargeCard top={<BrandPill backgroundClass="bg-[#161527]" />}>
       <LargeCardText title="Login to your account">
         Oh, you&apos;re asking for the key to my top-secret lair, also known as
         The Fortress of Wordsmithery, accessed only by reciting the sacred
diff --git a/src/pages/settings/AccountEditPart.tsx b/src/pages/settings/AccountEditPart.tsx
index d2765e30..35f9e645 100644
--- a/src/pages/settings/AccountEditPart.tsx
+++ b/src/pages/settings/AccountEditPart.tsx
@@ -1,9 +1,41 @@
+import { UserAvatar } from "@/components/Avatar";
+import { Button } from "@/components/Button";
+import { Icon, Icons } from "@/components/Icon";
 import { SettingsCard } from "@/components/layout/SettingsCard";
+import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
+import { useAuth } from "@/hooks/auth/useAuth";
 
 export function AccountEditPart() {
+  const { logout } = useAuth();
+
   return (
-    <SettingsCard className="!mt-8">
-      <p>Account editing will go here</p>
+    <SettingsCard paddingClass="px-8 py-10" className="!mt-8">
+      <div className="grid lg:grid-cols-[auto,1fr] gap-8">
+        <div>
+          <UserAvatar
+            iconClass="text-5xl"
+            sizeClass="w-32 h-32"
+            bottom={
+              <div className="text-xs flex gap-2 items-center bg-editBadge-bg text-editBadge-text hover:bg-editBadge-bgHover py-1 px-3 rounded-full cursor-pointer">
+                <Icon icon={Icons.EDIT} />
+                Edit
+              </div>
+            }
+          />
+        </div>
+        <div>
+          <div className="space-y-8 max-w-xs">
+            <AuthInputBox label="Account name" placeholder="Muad'Dib" />
+            <AuthInputBox label="Device name" placeholder="Fremen tablet" />
+            <div className="flex space-x-3">
+              <Button theme="purple">Save account</Button>
+              <Button theme="danger" onClick={logout}>
+                Log out
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
     </SettingsCard>
   );
 }
diff --git a/themes/default.ts b/themes/default.ts
index 0aee35d9..be3755ff 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -56,7 +56,7 @@ export const defaultTheme = {
         dimmed: "#926CAD",
         divider: "#262632",
         secondary: "#64647B",
-        danger: "#F46E6E"
+        danger: "#F46E6E",
       },
 
       // search bar
@@ -95,7 +95,7 @@ export const defaultTheme = {
         text: "#846D95",
         secondary: "#73739D",
         border: "#272742",
-        contentBackground: "#232337"
+        contentBackground: "#232337",
       },
 
       // Passphrase
@@ -149,6 +149,13 @@ export const defaultTheme = {
         circleText: "#9A9AC3",
       },
 
+      // About page
+      editBadge: {
+        bg: "#262632",
+        bgHover: "#343443",
+        text: "#9A9AC3",
+      },
+
       progress: {
         background: "#8787A8",
         preloaded: "#8787A8",