better headers

src/components/user_card/user_card.scss

@@ -7,10 +7,16 @@
   h4 {
     line-height: 2;
     display: flex;
-    padding: 0 1.0em;
+  }
 
-    span {
-      flex: 1;
+  h3 {
+    padding-left: 0.6em;
+    margin-bottom: 0;
+
+    .button-default {
+      font-size: 1rem;
+      line-height: 2;
+      padding: 0 0.6em;
     }
   }
 

src/components/user_card/user_card.vue

@@ -334,7 +334,7 @@
       </div>
     </div>
     <template v-if="editable">
-      <h4>{{ $t('settings.user_preferences') }}</h4>
+      <h3>{{ $t('settings.user_preferences') }}</h3>
       <p
         v-if="role === 'admin' || role === 'moderator'"
         class="user-card-setting"
@@ -413,10 +413,11 @@
         />
       </div>
     </div>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.bio') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingBio = !editingBio"
@@ -427,7 +428,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingBio">
       <RichContent
         v-if="!hideBio"
@@ -456,10 +457,11 @@
         </template>
       </EmojiInput>
     </template>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingFields = !editingFields"
@@ -470,7 +472,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingFields">
       <div
         v-if="!hideBio && user.fields_html && user.fields_html.length > 0"

src/i18n/en.json

@@ -396,7 +396,7 @@
     "save": "Save changes",
     "reset": "Reset changes",
     "security": "Security",
-    "toggle_edit": "Toggle edit",
+    "toggle_edit": "Edit",
     "change_banner": "Change banner",
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",