fix: place avatar at left

freeCodeCamp · Apr 7, 2024 · c247ef6 · c247ef6
1 parent 4e54606
commit c247ef6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 21 deletions.
diff --git a/client/src/components/profile/components/camper.css b/client/src/components/profile/components/camper.css
@@ -7,7 +7,6 @@
 
 .avatar-camper {
   display: flex;
-  justify-content: center;
 }
 
 .avatar-camper .avatar {

diff --git a/client/src/components/profile/components/camper.tsx b/client/src/components/profile/components/camper.tsx
@@ -3,12 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Col, Row } from '@freecodecamp/ui';
-
 import type { User } from '../../../redux/prop-types';
-import { AvatarRenderer } from '../../helpers';
 import Link from '../../helpers/link';
-
 import './camper.css';
 import Bio from './camper/bio';
 
@@ -42,25 +38,11 @@ function joinArray(array: string[], t: TFunction): string {
   });
 }
 
-function Camper({
-  picture,
-  yearsTopContributor,
-  isDonating
-}: CamperProps): JSX.Element {
+function Camper({ yearsTopContributor }: CamperProps): JSX.Element {
   const { t } = useTranslation();
 
   return (
     <div>
-      <Row>
-        <Col className='avatar-camper' xs={12}>
-          <AvatarRenderer
-            isDonating={isDonating}
-            isTopContributor={yearsTopContributor.length > 0}
-            picture={picture}
-          />
-        </Col>
-      </Row>
-
       <Bio />
       {yearsTopContributor.filter(Boolean).length > 0 && (
         <div>

diff --git a/client/src/components/profile/components/camper/bio/bio.tsx b/client/src/components/profile/components/camper/bio/bio.tsx
@@ -4,12 +4,14 @@ import { faCalendar, faLocation } from '@fortawesome/free-solid-svg-icons';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { Col, Row } from '@freecodecamp/ui';
 import { getLangCode } from '../../../../../../../shared/config/i18n';
 import envData from '../../../../../../config/env.json';
 import { userSelector } from '../../../../../redux/selectors';
 import { User } from '../../../../../redux/prop-types';
 import './bio.css';
 import SocialIcons from '../../social-icons';
+import { AvatarRenderer } from '../../../../helpers';
 const { clientLocale } = envData;
 const localeCode = getLangCode(clientLocale);
 function parseDate(joinDate: string, t: TFunction): string {
@@ -31,10 +33,22 @@ const Bio = () => {
     githubProfile,
     linkedin,
     twitter,
-    website
+    website,
+    isDonating,
+    yearsTopContributor,
+    picture
   } = useSelector(userSelector) as User; //using redux selectors
   return (
     <section className='flex-col padding-vertical-3 border-b'>
+      <Row>
+        <Col className='avatar-camper' xs={12}>
+          <AvatarRenderer
+            isDonating={isDonating}
+            isTopContributor={yearsTopContributor.length > 0}
+            picture={picture}
+          />
+        </Col>
+      </Row>
       <h2 className='username'>@{username}</h2>
       {name && <p className='name gray-color'>{name}</p>}
       {about && <p className='bio'>{about}</p>}