feat: selecting profiles

src/components/ProfileBox/AddNewProfile.tsx

@@ -17,7 +17,7 @@ const AddNewProfile = ({ onClick }: Props) => {
           />
         </svg>
       </div>
-      <h2 className={styles.title}>Add new</h2>
+      <h2 className={styles.title}>Add profile</h2>
     </div>
   );
 };

src/components/ProfileBox/ProfileBox.module.scss

@@ -2,8 +2,8 @@
 
 .inner {
     position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
+    border: 2px solid rgba(95, 114, 152);
+    border-radius: 74px;
     &:hover {
         border: 1px solid variables.$white;
         opacity: 0.8;
@@ -27,7 +27,7 @@
         position: relative;
         width: 140px;
         height: 140px;
-        padding: 10px;
+        padding: 25px;
         img {
             position: relative;
             transition: all 0.5s ease;
@@ -49,9 +49,8 @@
         justify-content: center;
         align-items: center;        
         // border: 1px solid rgba(255, 255, 255, 0.3);
-        background: #1F232C;
-        border: 1px solid transparent;
-        border-radius: 100px;
+        border: 1px solid white;
+        border-radius: 75px;
     }
     .overlay {
         position: absolute;
@@ -64,12 +63,13 @@
         height: 100%;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 95%);
         border: 1px solid transparent;
-        border-radius: 4px;
+        border-radius: 75px;
     }
 
      &:hover {
         .box {
             border: 1px solid variables.$white;
+            border-radius: 50%;
             opacity: 0.8;
         }
         h2 {

src/containers/Profiles/Profiles.tsx

@@ -79,7 +79,7 @@ const Profiles = ({ editMode = false }: Props) => {
           <h2 className={styles.heading}>Create your profile</h2>
         </div>
       ) : (
-        <h2 className={styles.heading}>{!editMode ? 'Who’s watching?' : 'Manage profiles'}</h2>
+        <h2 className={styles.heading}>Who’s watching?</h2>
       )}
       <div className={styles.flex}>
         {data?.responseData.collection?.map((profile: Profile) => (
@@ -93,12 +93,12 @@ const Profiles = ({ editMode = false }: Props) => {
             image={profile.avatar_url}
           />
         ))}
-        {canAddNew && !editMode && <AddNewProfile onClick={() => navigate('/u/profiles/create')} />}
+        {canAddNew && <AddNewProfile onClick={() => navigate('/u/profiles/create')} />}
       </div>
       {activeProfiles > 0 && (
         <>
           {!editMode ? (
-            <Button onClick={() => navigate('/u/profiles/edit')} label="Edit profiles" variant="outlined" size="large" />
+            <Button onClick={() => navigate('/u/profiles/edit')} label="Manage profiles" variant="outlined" size="large" />
           ) : (
             <Button onClick={() => navigate('/u/profiles')} label="Done" variant="outlined" size="large" />
           )}