pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Merge pull request #730 from robertsspaceindustries/dev
Add profile picture preview
authored by
William Oldham
and committed by
GitHub
d13eb07b
88bc1aa6
+23
-4
+8
-1
src/pages/parts/auth/AccountCreatePart.tsx
+8
-1
src/pages/parts/auth/AccountCreatePart.tsx
···
1
1
import { useCallback, useState } from "react";
2
2
import { useTranslation } from "react-i18next";
3
3
4
+
import { Avatar } from "@/components/Avatar";
4
5
import { Button } from "@/components/buttons/Button";
5
6
import { ColorPicker, initialColor } from "@/components/form/ColorPicker";
6
7
import { IconPicker, initialIcon } from "@/components/form/IconPicker";
···
55
56
return (
56
57
<LargeCard>
57
58
<LargeCardText
58
-
icon={<Icon icon={Icons.USER} />}
59
+
icon={
60
+
<Avatar
61
+
profile={{ colorA, colorB, icon: userIcon }}
62
+
iconClass="text-3xl"
63
+
sizeClass="w-16 h-16"
64
+
/>
65
+
}
59
66
title={t("auth.register.information.title") ?? undefined}
60
67
>
61
68
{t("auth.register.information.header")}
+15
-3
src/pages/parts/settings/ProfileEditModal.tsx
+15
-3
src/pages/parts/settings/ProfileEditModal.tsx
···
1
1
import { useTranslation } from "react-i18next";
2
2
3
+
import { Avatar } from "@/components/Avatar";
3
4
import { Button } from "@/components/buttons/Button";
4
5
import { ColorPicker } from "@/components/form/ColorPicker";
5
6
import { IconPicker } from "@/components/form/IconPicker";
···
24
25
return (
25
26
<Modal id={props.id}>
26
27
<ModalCard>
27
-
<Heading2 className="!mt-0">
28
-
{t("settings.account.profile.title")}
29
-
</Heading2>
28
+
<div className="flex justify-between items-center mb-9">
29
+
<Heading2 className="!mt-0 !mb-0">
30
+
{t("settings.account.profile.title")}
31
+
</Heading2>
32
+
<Avatar
33
+
profile={{
34
+
colorA: props.colorA,
35
+
colorB: props.colorB,
36
+
icon: props.userIcon,
37
+
}}
38
+
iconClass="text-2xl"
39
+
sizeClass="w-12 h-12"
40
+
/>
41
+
</div>
30
42
<div className="space-y-6">
31
43
<ColorPicker
32
44
label={t("settings.account.profile.firstColor")}