From 13b8dd04f83d80d594257ba51d4868051da8184a Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 13 Dec 2023 18:07:30 +0100
Subject: [PATCH] Client - update user preferences display

---
 .../User/ProfileDisplay/UserPreferences.vue    | 18 ++++++++++++++++++
 .../ProfileEdition/UserPreferencesEdition.vue  | 11 +++++++++++
 .../src/components/User/UserProfileTabs.vue    |  1 +
 fittrackee_client/src/locales/en/user.json     |  1 +
 fittrackee_client/src/locales/fr/user.json     |  1 +
 5 files changed, 32 insertions(+)

diff --git a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue b/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
index 90799c21..3adb34d2 100644
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
+++ b/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>
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
index a57bed2a..393f9d0f 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/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;
diff --git a/fittrackee_client/src/components/User/UserProfileTabs.vue b/fittrackee_client/src/components/User/UserProfileTabs.vue
index 60892479..5d09a6e1 100644
--- a/fittrackee_client/src/components/User/UserProfileTabs.vue
+++ b/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>
diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json
index 283d9e20..53ea8d95 100644
--- a/fittrackee_client/src/locales/en/user.json
+++ b/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",
diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json
index 0ec6c6bd..fcdf702e 100644
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/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",