Client - update user preferences display

fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="user-preferences" class="description-list">
+    <div class="preferences-section">{{ $t('user.PROFILE.INTERFACE') }}</div>
     <dl>
       <dt>{{ $t('user.PROFILE.LANGUAGE') }}:</dt>
       <dd>{{ userLanguage }}</dd>
@@ -9,6 +10,9 @@
       <dd>{{ getDateFormat(date_format, appLanguage) }}</dd>
       <dt>{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
       <dd>{{ $t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
+    </dl>
+    <div class="preferences-section">{{ $t('workouts.WORKOUT', 0) }}</div>
+    <dl>
       <dt>{{ $t('user.PROFILE.UNITS.LABEL') }}:</dt>
       <dd>
         {{
@@ -92,3 +96,17 @@
     props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'
   )
 </script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+  #user-preferences {
+    .preferences-section {
+      font-weight: bold;
+      text-transform: uppercase;
+      border-bottom: 1px solid var(--card-border-color);
+    }
+    .raw-speed-help {
+      margin-top: -$default-margin * 0.5;
+    }
+  }
+</style>

fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue

@@ -3,6 +3,9 @@
     <div class="profile-form form-box">
       <ErrorMessage :message="errorMessages" v-if="errorMessages" />
       <form @submit.prevent="updateProfile">
+        <div class="preferences-section">
+          {{ $t('user.PROFILE.INTERFACE') }}
+        </div>
         <label class="form-items">
           {{ $t('user.PROFILE.LANGUAGE') }}
           <select id="language" v-model="userForm.language" :disabled="loading">
@@ -59,6 +62,7 @@
             </label>
           </div>
         </div>
+        <div class="preferences-section">{{ $t('workouts.WORKOUT', 0) }}</div>
         <div class="form-items form-checkboxes">
           <span class="checkboxes-label">
             {{ $t('user.PROFILE.UNITS.LABEL') }}
@@ -327,6 +331,13 @@
       }
     }
 
+    .preferences-section {
+      font-weight: bold;
+      text-transform: uppercase;
+      border-bottom: 1px solid var(--card-border-color);
+      margin-bottom: $default-padding * 0.5;
+    }
+
     #language,
     #date_format {
       padding: $default-padding * 0.5;

fittrackee_client/src/components/User/UserProfileTabs.vue

@@ -74,5 +74,6 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: $default-margin * 0.5;
+    margin-bottom: $default-margin;
   }
 </style>

fittrackee_client/src/locales/en/user.json

@@ -79,6 +79,7 @@
     "ERRORED_EMAIL_UPDATE": "Please {0} to change your email address again or contact the administrator",
     "FIRST_DAY_OF_WEEK": "First day of week",
     "FIRST_NAME": "First name",
+    "INTERFACE": "Interface",
     "LANGUAGE": "Language",
     "LAST_NAME": "Last name",
     "LOCATION": "Location",

fittrackee_client/src/locales/fr/user.json

@@ -79,6 +79,7 @@
     "ERRORED_EMAIL_UPDATE": "Veuillez vous {0} pour changer de nouveau votre adresse électronique ou contacter l'administrateur",
     "FIRST_DAY_OF_WEEK": "Premier jour de la semaine",
     "FIRST_NAME": "Prénom",
+    "INTERFACE": "Interface",
     "LANGUAGE": "Langue",
     "LAST_NAME": "Nom",
     "LOCATION": "Lieu",