fix: fix design related comments

jwplayer · Aug 3, 2023 · 08ef531 · 08ef531
1 parent 8b105d1
commit 08ef531
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 77 deletions.
diff --git a/src/components/ProfileBox/ProfileBox.module.scss b/src/components/ProfileBox/ProfileBox.module.scss
@@ -14,9 +14,29 @@ $avatar-border-radius: 50%;
   }
 }
 
+.checkmarkContainer {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  background-color: variables.$deep-blue;
+  border-radius: $avatar-border-radius;
+}
+
+.checkmark {
+  width: 16px;
+  height: 16px;
+  color: variables.$white;
+}
+
 .selected {
   border: 2px solid variables.$deep-blue !important;
   border-radius: $avatar-border-radius;
+  box-shadow: variables.$blue-dark 0 0 0 3px;
 }
 
 .wrapper {
@@ -25,18 +45,25 @@ $avatar-border-radius: 50%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 12px;
   cursor: pointer;
 
   .image {
-    width: 100%;
-    height: 100%;
+    position: relative;
+    width: 130%;
+    height: 130%;
+    border-radius: $avatar-border-radius;
   }
 
   .box {
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 140px;
     height: 140px;
     padding: 10px;
+
     img {
       position: relative;
       transition: all 0.5s ease;
@@ -139,7 +166,6 @@ $avatar-border-radius: 50%;
 
 .addProfileContainer {
   justify-content: space-between;
-  padding: 10px;
   &:hover {
     .box {
       width: 56px;

diff --git a/src/components/ProfileBox/ProfileBox.tsx b/src/components/ProfileBox/ProfileBox.tsx
@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import styles from './ProfileBox.module.scss';
 
 import Edit from '#src/icons/Edit';
+import Check from '#src/icons/Check';
 
 type Props = {
-  name: string;
+  name?: string;
   image: string;
   adult?: boolean;
   editMode?: boolean;
@@ -29,7 +30,12 @@ const ProfileBox = ({ name, image, adult = true, editMode = false, onClick, onEd
           </div>
         )}
       </div>
-      <h2 className={styles.title}>{name}</h2>
+      {name && <h2 className={styles.title}>{name}</h2>}
+      {selected && (
+        <div className={styles.checkmarkContainer}>
+          <Check className={styles.checkmark} />
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
@@ -48,11 +48,11 @@ const Root: FC = () => {
     registerCustomScreens();
   }, []);
 
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile, selectingProfile: s.selectingProfile }));
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile, selectingProfileAvatar: s.selectingProfileAvatar }));
   const profilesEnabled = useProfilesFeatureEnabled();
 
-  if (userData.user && profilesEnabled && userData.selectingProfile) {
-    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url} />;
+  if (userData.user && profilesEnabled && userData.selectingProfileAvatar !== null) {
+    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url || userData.selectingProfileAvatar} />;
   }
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -63,7 +63,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
                 <MenuButton
                   active={profile.id === currentProfile?.id}
                   small={small}
-                  onClick={() => selectProfile.mutate({ id: profile.id, navigate })}
+                  onClick={() => selectProfile.mutate({ id: profile.id, navigate, selectingProfileAvatarUrl: profile.avatar_url })}
                   label={profile.name}
                   startIcon={<ProfileCircle src={profile.avatar_url} alt={profile.name} />}
                 />

diff --git a/src/containers/Profiles/CreateProfile.tsx b/src/containers/Profiles/CreateProfile.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
-import profileStyles from './Profiles.module.scss';
 import Form from './Form';
 import type { ProfileFormValues } from './types';
 import AVATARS from './avatarUrls.json';
@@ -12,16 +11,19 @@ import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 import { createProfile } from '#src/stores/AccountController';
 import { useListProfiles, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 
 const CreateProfile = () => {
   const navigate = useNavigate();
   const profilesEnabled = useProfilesFeatureEnabled();
 
-  const [fullName, setFullName] = useState<string>('');
   const [avatarUrl, setAvatarUrl] = useState<string>(AVATARS[Math.floor(Math.random() * AVATARS.length)]);
 
   const { t } = useTranslation('user');
 
+  const breakpoint: Breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
+
   useEffect(() => {
     if (!profilesEnabled) navigate('/');
   }, [profilesEnabled, navigate]);
@@ -62,23 +64,15 @@ const CreateProfile = () => {
 
   return (
     <div className={styles.user}>
-      <div className={styles.leftColumn}>
-        <div className={styles.panel}>
-          <div className={profileStyles.avatar}>
-            <h2>{fullName ? t('profile.greeting_with_name', { name: fullName }) : t('profile.greeting')}</h2>
-            <img src={avatarUrl} />
-          </div>
-        </div>
-      </div>
       <div className={styles.mainColumn}>
         <Form
           initialValues={initialValues}
           formHandler={createProfileHandler}
-          setFullName={setFullName}
           selectedAvatar={{
             set: setAvatarUrl,
             value: avatarUrl,
           }}
+          isMobile={isMobile}
         />
       </div>
     </div>

diff --git a/src/containers/Profiles/EditProfile.tsx b/src/containers/Profiles/EditProfile.tsx
@@ -14,9 +14,9 @@ import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 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';
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 
 type EditProfileProps = {
   contained?: boolean;
@@ -27,9 +27,11 @@ const EditProfile = ({ contained = false }: EditProfileProps) => {
   const { id } = params;
   const location = useLocation();
   const navigate = useNavigate();
-  const [fullName, setFullName] = useState<string>('');
   const { t } = useTranslation('user');
 
+  const breakpoint: Breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
+
   const listProfiles = useListProfiles();
 
   const { data, isLoading, isFetching } = useQuery(['getProfileDetails'], () => getProfileDetails({ id: id || '' }), {
@@ -87,43 +89,31 @@ const EditProfile = ({ contained = false }: EditProfileProps) => {
 
   return (
     <div className={classNames(styles.user, contained && profileStyles.contained)}>
-      {!contained && (
-        <div className={styles.leftColumn}>
-          <div className={styles.panel}>
-            <div className={profileStyles.avatar}>
-              <h2>{fullName ? t('profile.greeting_with_name', { name: fullName }) : t('profile.greeting')}</h2>
-              <img src={selectedAvatar || profileDetails?.avatar_url} />
-            </div>
-          </div>
-        </div>
-      )}
       <div className={classNames(styles.mainColumn)}>
         <Form
           initialValues={initialValues}
           formHandler={updateProfileHandler}
-          setFullName={setFullName}
           selectedAvatar={{
             set: setSelectedAvatar,
             value: selectedAvatar || '',
           }}
           showCancelButton={!contained}
+          isMobile={isMobile}
         />
         <div className={styles.panel}>
           <div className={styles.panelHeader}>
             <h3>{t('profile.delete')}</h3>
           </div>
-          {profileDetails?.default ? (
-            <FormFeedback variant="info">{t('profile.delete_main')}</FormFeedback>
-          ) : (
-            <div className={profileStyles.profileInfo}>{t('profile.delete_description')}</div>
+          <div className={profileStyles.profileInfo}>{t(`profile.delete_${profileDetails?.default ? 'main' : 'description'}`)}</div>
+          {!profileDetails?.default && (
+            <Button
+              onClick={() => navigate(addQueryParam(location, 'action', 'delete-profile'))}
+              label={t('profile.delete')}
+              variant="contained"
+              color="delete"
+              fullWidth={isMobile}
+            />
           )}
-          <Button
-            onClick={() => navigate(addQueryParam(location, 'action', 'delete-profile'))}
-            label={t('profile.delete')}
-            variant="contained"
-            color="delete"
-            disabled={profileDetails?.default}
-          />
         </div>
       </div>
       <DeleteProfile />

diff --git a/src/containers/Profiles/Form.tsx b/src/containers/Profiles/Form.tsx
@@ -21,15 +21,16 @@ import { useAccountStore } from '#src/stores/AccountStore';
 type Props = {
   initialValues: ProfileFormValues;
   formHandler: UseFormOnSubmitHandler<ProfileFormValues>;
-  setFullName?: (name: string) => void;
   selectedAvatar?: {
     set: (avatarUrl: string) => void;
     value: string;
   };
   showCancelButton?: boolean;
+  showContentRating?: boolean;
+  isMobile?: boolean;
 };
 
-const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCancelButton = true }: Props) => {
+const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = true, showContentRating = false, isMobile = false }: Props) => {
   const navigate = useNavigate();
   const { t } = useTranslation('user');
   const profile = useAccountStore((s) => s.profile);
@@ -49,10 +50,6 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
     setValue('avatar_url', selectedAvatar?.value || profile?.avatar_url || '');
   }, [profile?.avatar_url, selectedAvatar?.value, setValue]);
 
-  useEffect(() => {
-    setFullName?.(values.name);
-  }, [values, setFullName]);
-
   const formLabel = values?.id ? t('profile.info') : t('profile.create');
 
   return (
@@ -65,6 +62,7 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
         <div className={profileStyles.formFields}>
           {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
           {submitting && <LoadingOverlay inline />}
+          <h2 className={profileStyles.nameHeading}>Name</h2>
           <TextField
             required
             name="name"
@@ -74,16 +72,18 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
             error={!!errors.name || !!errors.form}
             helperText={errors.name}
           />
-          <Dropdown
-            fullWidth
-            required
-            name="adult"
-            label={t('profile.content_rating')}
-            className={styles.dropdown}
-            options={options}
-            value={values?.adult?.toString() || 'true'}
-            onChange={handleChange}
-          />
+          {showContentRating && (
+            <Dropdown
+              fullWidth
+              required
+              name="adult"
+              label={t('profile.content_rating')}
+              className={styles.dropdown}
+              options={options}
+              value={values?.adult?.toString() || 'true'}
+              onChange={handleChange}
+            />
+          )}
         </div>
         <hr className={profileStyles.divider} />
         <div className={classNames(styles.panelHeader, profileStyles.noBottomBorder)}>
@@ -96,16 +96,15 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
                 onClick={() => selectedAvatar?.set(avatarUrl)}
                 selected={selectedAvatar?.value === avatarUrl}
                 key={avatarUrl}
-                name={''}
                 adult={true}
                 image={avatarUrl}
               />
             ))}
           </div>
         </div>
         <>
-          <Button type="submit" label={t('account.save')} variant="outlined" disabled={!isDirty || submitting} />
-          {showCancelButton && <Button onClick={() => navigate('/u/profiles')} label={t('account.cancel')} variant="text" />}
+          <Button type="submit" label={t('account.save')} variant="outlined" disabled={!isDirty || submitting} fullWidth={isMobile} />
+          {showCancelButton && <Button onClick={() => navigate('/u/profiles')} label={t('account.cancel')} variant="text" fullWidth={isMobile} />}
         </>
       </div>
     </form>

diff --git a/src/containers/Profiles/Profiles.module.scss b/src/containers/Profiles/Profiles.module.scss
@@ -7,9 +7,10 @@
   align-items: center;
   gap: 24px;
 }
+
 .heading {
   font-weight: bold;
-  font-size: 40px;
+  font-size: 24px;
 }
 
 .profileInfo {
@@ -19,10 +20,11 @@
   padding-bottom: 20px;
 }
 
-.paragarph {
+.paragraph {
   margin: 0;
   font-size: 36px;
 }
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -31,7 +33,14 @@
   width: 100%;
   height: 100%;
   gap: 50px;
-  padding: 0 20px;
+  padding: 80px 20px;
+  @media (max-width: 768px) {
+    padding: 80px 0;
+  }
+  @media (max-width: 330px) {
+    height: auto;
+    padding: 80px 20px;
+  }
 }
 
 .flex {
@@ -94,9 +103,22 @@
 
 .avatarsContainer {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   grid-gap: 16px;
   width: 100%;
   padding: 32px 0;
   justify-items: center;
 }
+
+.buttonContainer {
+  @media (max-width: 768px) {
+    width: 100%;
+    margin-top: auto;
+    padding: 10px;
+  }
+}
+
+.nameHeading {
+  padding-bottom: 6px;
+  font-size: 20px;
+}