MP-234 more mobile view fixes

Author: kkartunov

src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss

@@ -8,10 +8,6 @@
         text-align: center;
     }
 
-    :global(.body-large) {
-        font-style: italic;
-    }
-
     .wizzardWrap {
         display: flex;
         align-items: center;

src/apps/profiles/src/member-profile/about-me/AboutMe.tsx

@@ -77,7 +77,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
             <MemberRatingCard profile={props.profile} />
 
             <div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
-                <p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
+                <p className='body-main-medium'>{memberTitleTrait?.profileSelfTitle}</p>
                 {canEdit && !hasEmptyDescription && (
                     <EditMemberPropertyBtn
                         onClick={handleEditClick}

src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss

@@ -4,23 +4,12 @@
     display: flex;
     flex-direction: column;
     margin-top: $sp-8;
+    padding-bottom: $sp-4;
 
     .title {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        margin-bottom: $sp-10;
-
-        @include ltelg {
-            margin-bottom: $sp-4;
-        }
-
-        .viewAllLink {
-            text-transform: uppercase;
-            color: $turq-160;
-            font-weight: $font-weight-bold;
-            font-size: 14px;
-        }
     }
 
     .badges {
@@ -47,6 +36,7 @@
             @include ltelg {
                 padding-bottom: 0;
                 padding-left: $sp-2;
+                min-width: 100%;
             }
 
             &:hover {

src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { bind } from 'lodash'
 
 import { useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
+import { Button } from '~/libs/ui'
 
 import { MemberBadgeModal } from '../../components'
 
@@ -29,8 +30,13 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
     return memberBadges && memberBadges.count ? (
         <div className={styles.container}>
             <div className={styles.title}>
-                <h4>Community Awards & Honors</h4>
-                <Link to='badges' className={styles.viewAllLink}>View all badges</Link>
+                <Link to='badges'>
+                    <Button
+                        label='View all badges'
+                        link
+                        variant='linkblue'
+                    />
+                </Link>
             </div>
 
             <div className={styles.badges}>

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss

@@ -40,15 +40,19 @@
     .profileOuter {
         margin-top: 130px;
 
+        .profileInner {
+            width: 100%;
+        }
+
         .profileInfoWrap {
             display: grid;
             grid-template-columns: 300px 1fr;
             grid-gap: $sp-15;
             margin-bottom: $sp-13;
 
             @include ltelg {
-                grid-template-columns: 1fr;
-                gap: 0;
+                display: flex;
+                flex-direction: column;
             }
 
             .profileInfoLeft {
@@ -71,6 +75,7 @@
                 display: flex;
                 flex-direction: column;
                 margin-top: -275px;
+                z-index: 1;
 
                 @include ltelg {
                     margin-top: $sp-8;
@@ -107,7 +112,7 @@
 
 .sectionWrap {
     background-color: $tc-white;
-    padding: $sp-8 $sp-8 0;
+    padding: $sp-8 $sp-8 $sp-4;
     margin-bottom: $sp-8;
     border-radius: 16px;
 

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -44,6 +44,7 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
 
         <ContentLayout
             outerClass={styles.profileOuter}
+            innerClass={styles.profileInner}
         >
             <div className={styles.profileInfoWrap}>
                 <div className={styles.profileInfoLeft}>