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] 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")}