fix: pr comments

public/locales/en/user.json

@@ -1,6 +1,7 @@
 {
   "account": {
     "about_you": "Profile info",
+    "add_profile": "Add profile",
     "cancel": "Cancel",
     "confirm_password": "Confirm password",
     "continue": "Continue",
@@ -39,12 +40,14 @@
     "firstname": "First name",
     "hide_password": "Hide password",
     "lastname": "Last name",
+    "manage_profiles": "Manage profiles",
     "password": "Password",
     "save": "Save",
     "security": "Password",
     "terms_and_tracking": "Legal & Marketing",
     "update_consents": "Update consents",
-    "view_password": "View password"
+    "view_password": "View password",
+    "who_is_watching": "Who’s watching?"
   },
   "favorites": {
     "clear": "Clear favorites",

public/locales/es/user.json

@@ -1,6 +1,7 @@
 {
   "account": {
     "about_you": "Información de perfil",
+    "add_profile": "Añadir perfil",
     "cancel": "Cancelar",
     "confirm_password": "Confirmar contraseña",
     "continue": "Continuar",
@@ -39,12 +40,14 @@
     "firstname": "Nombre",
     "hide_password": "Ocultar contraseña",
     "lastname": "Apellido",
+    "manage_profiles": "Administrar perfiles",
     "password": "Contraseña",
     "save": "Guardar",
     "security": "Contraseña",
     "terms_and_tracking": "Jurídico y marketing",
     "update_consents": "Actualizar consentimientos",
-    "view_password": "Ver contraseña"
+    "view_password": "Ver contraseña",
+    "who_is_watching": "¿Quién está mirando?"
   },
   "favorites": {
     "clear": "Borrar favoritos",

src/components/ProfileBox/AddNewProfile.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import styles from './ProfileBox.module.scss';
 
@@ -7,6 +8,7 @@ type Props = {
 };
 
 const AddNewProfile = ({ onClick }: Props) => {
+  const { t } = useTranslation('user');
   return (
     <div onClick={onClick} className={styles.wrapper}>
       <div className={`${styles.box} ${styles.circle}`}>
@@ -17,7 +19,7 @@ const AddNewProfile = ({ onClick }: Props) => {
           />
         </svg>
       </div>
-      <h2 className={styles.title}>Add profile</h2>
+      <h2 className={styles.title}>{t('account.add_profile')}</h2>
     </div>
   );
 };

src/components/ProfileBox/ProfileBox.module.scss

@@ -1,9 +1,11 @@
 @use 'src/styles/variables';
 
+$avatar-size: 75px;
+
 .inner {
     position: relative;
     border: 2px solid rgba(95, 114, 152);
-    border-radius: 74px;
+    border-radius:$avatar-size;
     &:hover {
         border: 1px solid variables.$white;
         opacity: 0.8;
@@ -48,9 +50,8 @@
         display: flex;
         justify-content: center;
         align-items: center;        
-        // border: 1px solid rgba(255, 255, 255, 0.3);
         border: 1px solid white;
-        border-radius: 75px;
+        border-radius: $avatar-size;
     }
     .overlay {
         position: absolute;
@@ -63,7 +64,7 @@
         height: 100%;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 95%);
         border: 1px solid transparent;
-        border-radius: 75px;
+        border-radius: $avatar-size;
     }
 
      &:hover {

src/containers/Profiles/Profiles.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery } from 'react-query';
 import shallow from 'zustand/shallow';
+import { useTranslation } from 'react-i18next';
 
 import styles from './Profiles.module.scss';
 
@@ -26,7 +27,7 @@ type Props = {
 
 const Profiles = ({ editMode = false }: Props) => {
   const navigate = useNavigate();
-
+  const { t } = useTranslation('user');
   const { canManageProfiles, loading } = useAccountStore(({ canManageProfiles, loading }) => ({ canManageProfiles, loading }), shallow);
 
   useEffect(() => {
@@ -79,7 +80,7 @@ const Profiles = ({ editMode = false }: Props) => {
           <h2 className={styles.heading}>Create your profile</h2>
         </div>
       ) : (
-        <h2 className={styles.heading}>Who’s watching?</h2>
+        <h2 className={styles.heading}>{t('account.who_is_watching')}</h2>
       )}
       <div className={styles.flex}>
         {data?.responseData.collection?.map((profile: Profile) => (
@@ -98,7 +99,7 @@ const Profiles = ({ editMode = false }: Props) => {
       {activeProfiles > 0 && (
         <>
           {!editMode ? (
-            <Button onClick={() => navigate('/u/profiles/edit')} label="Manage profiles" variant="outlined" size="large" />
+            <Button onClick={() => navigate('/u/profiles/edit')} label={t('account.manage_profiles')} variant="outlined" size="large" />
           ) : (
             <Button onClick={() => navigate('/u/profiles')} label="Done" variant="outlined" size="large" />
           )}