Merge pull request #15956 from edx/HarryRein/LEARNER-2485-profile-issues

LEARNER-2485: Fix styling issues on learner profile.

lms/static/sass/features/_learner-profile.scss

@@ -325,8 +325,8 @@
                 margin: 0 $baseline/2;
 
                 .social-links {
+                    @include padding($baseline/4, 0, 0, $baseline/4);
                     font-size: 2rem;
-                    padding-top: $baseline/4;
 
                     & > span {
                         color: $gray-l4;
@@ -348,33 +348,34 @@
                 }
 
                 .u-field {
-                    @extend %t-weight4;
+                    font-weight: $font-semibold;
                     @include padding(0, 0, 0, 3px);
                     color: $base-font-color;
                     margin-top: $baseline/5;
 
                     .u-field-value, .u-field-title {
-                        @extend %t-weight4;
+                        font-weight: 500;
                         width: calc(100% - 40px);
+                        color: $lightest-base-font-color;
                     }
 
                     .u-field-value-readonly {
-                        @extend %t-weight3;
                         font-family: $sans-serif;
                         color: $darkest-base-font-color;
                     }
 
-                    .u-field-title {
-                        color: $lightest-base-font-color;
-                        display: block;
-                    }
-
                     &.u-field-dropdown {
                         position: relative;
 
                         &:not(.editable-never) {
                             cursor: pointer;
                         }
+                    }
+
+                    &:not(.u-field-readonly) {
+                        &.u-field-value {
+                            @extend %t-weight3;
+                        }
 
                         &:not(:last-child) {
                             padding-bottom: $baseline/4;

openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js

@@ -118,6 +118,9 @@
                         fieldView.delegateEvents();
                     }
 
+                    // Clear existing content in user profile card
+                    this.$('.profile-section-one-fields').html('');
+
                     // Do not show name when in limited mode or no name has been set
                     if (this.showFullProfile() && this.options.accountSettingsModel.get('name')) {
                         this.$('.profile-section-one-fields').append(this.options.nameFieldView.render().el);

openedx/features/learner_profile/templates/learner_profile/learner_profile.html

@@ -53,11 +53,10 @@ from openedx.core.djangolib.markup import HTML
                     </div>
                 </div>
                 <div class="wrapper-profile-section-container-two is-hidden">
+                    <div class="wrapper-profile-bio"></div>
                     % if achievements_fragment:
                         ${HTML(achievements_fragment.body_html())}
                     % endif
-                    <div class="wrapper-profile-bio">
-                    </div>
                 </div>
             </div>
         </div>