diff --git a/src/components/ProfileBox/ProfileBox.module.scss b/src/components/ProfileBox/ProfileBox.module.scss index 96420a311..80b06a529 100644 --- a/src/components/ProfileBox/ProfileBox.module.scss +++ b/src/components/ProfileBox/ProfileBox.module.scss @@ -1,83 +1,83 @@ @use 'src/styles/variables'; .inner { - position: relative; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 4px; - &:hover { - border: 1px solid variables.$white; - opacity: 0.8; - } + position: relative; + box-sizing: border-box; + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 4px; + &:hover { + border: 2px solid variables.$white; + opacity: 0.8; + } +} + +.selected { + border: 2px solid variables.$deep-blue !important; + border-radius: 4px; } + .wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 10px; - cursor: pointer; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: min-content; + height: min-content; + cursor: pointer; - .image { - width: 100%; - height: 100%; - } + .image { + width: 100%; + height: 100%; + } - .box { - position: relative; - width: 140px; - height: 140px; - padding: 10px; - img { - position: relative; - transition: all 0.5s ease; - } - .kids { - position: absolute; - top: 5px; - right: 5px; - color: variables.$link; - } - &:hover { - img { - transform: translate(-5px, -5px); - } - } + .box { + position: relative; + width: 140px; + height: 140px; + padding: 10px; + img { + position: relative; + transition: all 0.5s ease; } - .circle { - display: flex; - justify-content: center; - align-items: center; - // border: 1px solid rgba(255, 255, 255, 0.3); - background: #1F232C; - border: 1px solid transparent; - border-radius: 100px; + .kids { + position: absolute; + top: 5px; + right: 5px; + color: variables.$link; } - .overlay { - position: absolute; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 95%); - border: 1px solid transparent; - border-radius: 4px; + &:hover { + img { + transform: translate(-5px, -5px); + } } + } + .circle { + display: flex; + justify-content: center; + align-items: center; + // border: 1px solid rgba(255, 255, 255, 0.3); + background: #1f232c; + border: 1px solid transparent; + border-radius: 100px; + } + .overlay { + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 95%); + border: 1px solid transparent; + border-radius: 4px; + } - &:hover { - .box { - border: 1px solid variables.$white; - opacity: 0.8; - } - h2 { - opacity: 0.8; - } + &:hover { + h2 { + opacity: 0.8; } - - - + } } - diff --git a/src/components/ProfileBox/ProfileBox.tsx b/src/components/ProfileBox/ProfileBox.tsx index 206606163..72b4bd15c 100644 --- a/src/components/ProfileBox/ProfileBox.tsx +++ b/src/components/ProfileBox/ProfileBox.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import styles from './ProfileBox.module.scss'; @@ -11,12 +12,13 @@ type Props = { editMode?: boolean; onClick: () => void; onEdit: () => void; + selected?: boolean; }; -const ProfileBox = ({ name, image, adult = true, editMode = false, onClick, onEdit }: Props) => { +const ProfileBox = ({ name, image, adult = true, editMode = false, onClick, onEdit, selected = false }: Props) => { return (
-
+
{!adult && Kids} diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx index 47339b358..1075b6fbe 100644 --- a/src/components/UserMenu/UserMenu.tsx +++ b/src/components/UserMenu/UserMenu.tsx @@ -80,7 +80,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => { } /> diff --git a/src/containers/Profiles/CreateProfile.tsx b/src/containers/Profiles/CreateProfile.tsx index e10f941fc..acf73ac63 100644 --- a/src/containers/Profiles/CreateProfile.tsx +++ b/src/containers/Profiles/CreateProfile.tsx @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router'; import profileStyles from './Profiles.module.scss'; import Form from './Form'; import type { ProfileFormValues } from './types'; +import AVATARS from './avatarUrls.json'; import styles from '#src/pages/User/User.module.scss'; import { useAccountStore } from '#src/stores/AccountStore'; @@ -12,17 +13,11 @@ import type { UseFormOnSubmitHandler } from '#src/hooks/useForm'; import { createProfile } from '#src/stores/AccountController'; import { useListProfiles } from '#src/hooks/useProfiles'; -const AVATARS = [ - 'https://gravatar.com/avatar/5e62c8c13582f94b74ae21cfeb83e28a?s=400&d=robohash&r=x', - 'https://gravatar.com/avatar/a82dc2482b1ae8d9070462a37b5e19e9?s=400&d=robohash&r=x', - 'https://gravatar.com/avatar/236030198309afe28c9fce9c3ebfec3b?s=400&d=robohash&r=x', - 'https://gravatar.com/avatar/c97a042d43cc5cc28802f2bc7bf2e5ab?s=400&d=robohash&r=x', -]; - const CreateProfile = () => { const navigate = useNavigate(); const { canManageProfiles } = useAccountStore.getState(); const [fullName, setFullName] = useState(''); + const [avatarUrl, setAvatarUrl] = useState(''); useEffect(() => { if (!canManageProfiles) navigate('/'); @@ -45,7 +40,7 @@ const CreateProfile = () => { await createProfile({ name: formData.name, adult: formData.adult === 'true', - avatar_url: AVATARS[activeProfiles], + avatar_url: formData.avatar_url, }) )?.responseData; if (profile?.id) { @@ -70,12 +65,20 @@ const CreateProfile = () => {

Howdy{`${fullName && ','} ${fullName}`}

- +
-
+
); diff --git a/src/containers/Profiles/EditProfile.tsx b/src/containers/Profiles/EditProfile.tsx index 0e9aa2878..7433aea48 100644 --- a/src/containers/Profiles/EditProfile.tsx +++ b/src/containers/Profiles/EditProfile.tsx @@ -1,6 +1,8 @@ import React, { useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { useLocation, useNavigate, useParams } from 'react-router'; +import { useTranslation } from 'react-i18next'; +import classNames from 'classnames'; import profileStyles from './Profiles.module.scss'; import Form from './Form'; @@ -14,12 +16,21 @@ import Button from '#src/components/Button/Button'; import { addQueryParam } from '#src/utils/location'; import FormFeedback from '#src/components/FormFeedback/FormFeedback'; import { getProfileDetails, updateProfile } from '#src/stores/AccountController'; +import { useListProfiles } from '#src/hooks/useProfiles'; -const EditProfile = () => { - const { id } = useParams(); +type EditProfileProps = { + contained?: boolean; +}; + +const EditProfile = ({ contained = false }: EditProfileProps) => { + const params = useParams(); + const { id } = params; const location = useLocation(); const navigate = useNavigate(); const [fullName, setFullName] = useState(''); + const { t } = useTranslation('user'); + + const listProfiles = useListProfiles(); const { data, isLoading, isFetching } = useQuery(['getProfileDetails'], () => getProfileDetails({ id: id || '' }), { staleTime: 0, @@ -37,6 +48,8 @@ const EditProfile = () => { }; }, [profileDetails]); + const [selectedAvatar, setSelectedAvatar] = useState(initialValues.avatar_url); + if (!id) { navigate('/u/profiles'); } @@ -54,6 +67,7 @@ const EditProfile = () => { if (profile?.id) { setSubmitting(false); + listProfiles.refetch(); navigate('/u/profiles'); } else { setErrors({ form: 'Something went wrong. Please try again later.' }); @@ -68,23 +82,36 @@ const EditProfile = () => { if (isLoading || isFetching) return ; return ( -
-
-
-
-

Howdy{`${fullName && ','} ${fullName}`}

- +
+ {!contained && ( +
+
+
+

+ {t('profile.greeting')} + {`${fullName && ','} ${fullName}`} +

+ +
-
-
- + )} +
+
-

Delete profile

- {profileDetails?.default && The main profile cannot be deleted.} +

{t('profile.delete')}

+ {profileDetails?.default && {t('profile.delete_main')}}