profile edit - make the profile photo bigger and fix alignments

jam-ui/src/components/common/Avatar.js

@@ -23,7 +23,7 @@ const Avatar = ({ size, rounded, src, name, emoji, className, mediaClass, isExac
           </div>
         );
       } else {
-        return <img className={mediaClasses} src={src} alt="" />;
+        return <img className={mediaClasses.concat(classNames)} src={src} alt="" />;
       }
     }
 

jam-ui/src/components/page/JKEditProfile.js

@@ -16,6 +16,7 @@ import {
   getCities
 } from '../../helpers/rest';
 import JKProfileAvatarUpload from '../profile/JKProfileAvatarUpload';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 function JKEditProfile() {
   const { t } = useTranslation('profile');
@@ -448,7 +449,7 @@ function JKEditProfile() {
                       <Col md={4}>
                         <div className="d-flex align-items-center">
                           <div>
-                            <JKProfileAvatar src={currentUser.photo_url} size="s" />
+                            <JKProfileAvatar src={currentUser.photo_url} size="3xl" />
                           </div>
                           <div>
                             <a
@@ -458,6 +459,7 @@ function JKEditProfile() {
                                 toggleAvatarUpload();
                               }}
                             >
+                              <FontAwesomeIcon icon="edit" className="ml-2 mr-1" />
                               {t('change_photo')}
                             </a>
                           </div>

jam-ui/src/components/profile/JKProfileAvatar.js

@@ -4,7 +4,7 @@ import defaultAvatarUrl from '../../assets/img/team/avatar.png';
 import Avatar from '../common/Avatar';
 
 const JKProfileAvatar = (options) => {
-  const {src, ...rest} = options;
+  const {src, size, ...rest} = options;
   const avatarUrl = () => {
     if (src) {
       return src;
@@ -13,7 +13,7 @@ const JKProfileAvatar = (options) => {
     }
   };
 
-  return <Avatar src={avatarUrl()} rest />;
+  return <Avatar src={avatarUrl()} size={size} rest />;
 };
 
 JKProfileAvatar.propTypes = {

jam-ui/src/components/profile/JKProfileAvatarUpload.js

@@ -42,8 +42,8 @@ const JKProfileAvatarUpload = ({show, toggle}) => {
         <JKProfileAvatar src={currentUser.photo_url} size="5xl" />
       </div>
 
-      <div className="d-flex justify-content-center">
-        <Button color="secondary" outline className="ml-2" onClick={openFilePicker}>
+      <div className="d-flex justify-content-center mt-2">
+        <Button color="primary"  className="ml-2" onClick={openFilePicker}>
           {t('photo_modal.upload', { ns: 'profile' })}
         </Button>
         <Button color="secondary" outline className="ml-2" onClick={() => {}}>

jam-ui/src/i18n/locales/en/profile.json

@@ -11,7 +11,7 @@
   "genres": "Genres",
   "first_name": "First Name",
   "last_name": "Last Name",
-  "change_photo": "Change Photo",
+  "change_photo": "Change",
   "country": "Country",
   "state": "State/Province",
   "city": "City",

jam-ui/src/i18n/locales/es/profile.json

@@ -11,7 +11,7 @@
   "genres": "Géneros",
   "first_name": "First Name",
   "last_name": "Last Name",
-  "change_photo": "Change Photo",
+  "change_photo": "Change",
   "country": "Country",
   "state": "State/Province",
   "city": "City",