From acfd34a60b9acdcc6009d18db75dab6a70ae959d Mon Sep 17 00:00:00 2001
From: Astrid <github@astrid.exposed>
Date: Sat, 6 Jan 2024 16:01:31 +0100
Subject: [PATCH 1/2] Add profile picture preview

---
 src/pages/parts/settings/ProfileEditModal.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/pages/parts/settings/ProfileEditModal.tsx b/src/pages/parts/settings/ProfileEditModal.tsx
index 58322e72..efa6ca32 100644
--- a/src/pages/parts/settings/ProfileEditModal.tsx
+++ b/src/pages/parts/settings/ProfileEditModal.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 
+import { Avatar } from "@/components/Avatar";
 import { Button } from "@/components/buttons/Button";
 import { ColorPicker } from "@/components/form/ColorPicker";
 import { IconPicker } from "@/components/form/IconPicker";
@@ -24,9 +25,20 @@ export function ProfileEditModal(props: ProfileEditModalProps) {
   return (
     <Modal id={props.id}>
       <ModalCard>
-        <Heading2 className="!mt-0">
-          {t("settings.account.profile.title")}
-        </Heading2>
+        <div className="flex justify-between items-center mb-9">
+          <Heading2 className="!mt-0 !mb-0">
+            {t("settings.account.profile.title")}
+          </Heading2>
+          <Avatar
+            profile={{
+              colorA: props.colorA,
+              colorB: props.colorB,
+              icon: props.userIcon,
+            }}
+            iconClass="text-2xl"
+            sizeClass="w-12 h-12"
+          />
+        </div>
         <div className="space-y-6">
           <ColorPicker
             label={t("settings.account.profile.firstColor")}

From 24e3cc739ce4f8f090ab72a6ab5e82af44474670 Mon Sep 17 00:00:00 2001
From: Astrid <github@astrid.exposed>
Date: Sat, 6 Jan 2024 16:12:15 +0100
Subject: [PATCH 2/2] add register avatar preview

---
 src/pages/parts/auth/AccountCreatePart.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/parts/auth/AccountCreatePart.tsx b/src/pages/parts/auth/AccountCreatePart.tsx
index 1c4bd34d..674a3be6 100644
--- a/src/pages/parts/auth/AccountCreatePart.tsx
+++ b/src/pages/parts/auth/AccountCreatePart.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { Avatar } from "@/components/Avatar";
 import { Button } from "@/components/buttons/Button";
 import { ColorPicker, initialColor } from "@/components/form/ColorPicker";
 import { IconPicker, initialIcon } from "@/components/form/IconPicker";
@@ -55,7 +56,13 @@ export function AccountCreatePart(props: AccountCreatePartProps) {
   return (
     <LargeCard>
       <LargeCardText
-        icon={<Icon icon={Icons.USER} />}
+        icon={
+          <Avatar
+            profile={{ colorA, colorB, icon: userIcon }}
+            iconClass="text-3xl"
+            sizeClass="w-16 h-16"
+          />
+        }
         title={t("auth.register.information.title") ?? undefined}
       >
         {t("auth.register.information.header")}