Merge pull request #730 from robertsspaceindustries/dev

Add profile picture preview

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

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