🚀 Refactor and improve user setting fields (#4642)

argilla-io · Mar 11, 2024 · c6f8c6e · c6f8c6e
1 parent 853ff20
commit c6f8c6e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/frontend/components/commons/edition-user-info/EditionUserInfo.component.vue b/frontend/components/commons/edition-user-info/EditionUserInfo.component.vue
@@ -7,28 +7,35 @@
       <BaseBadge class="--capitalized" :text="userInfo.role" />
     </div>
 
-    <div class="form-group user-first_name">
-      <h2 class="--heading5 --medium description__title">Username</h2>
+    <div class="form-group">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.fields.userName')"
+      />
       <p class="--body1 description__text" v-text="userInfo.username" />
     </div>
 
-    <div class="form-group user-first_name">
-      <h2 class="--heading5 --medium description__title">Name</h2>
+    <div class="form-group">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.fields.firstName')"
+      />
       <p class="--body1 description__text" v-text="userInfo.first_name" />
     </div>
 
-    <div class="form-group user-last_name">
-      <h2 class="--heading5 --medium description__title">Surname</h2>
-      <p
-        class="--body1 description__text"
-        v-if="userInfo.last_name"
-        v-text="userInfo.last_name"
+    <div class="form-group">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.fields.lastName')"
       />
-      <p class="--body1 description__text" v-else>-</p>
+      <p class="--body1 description__text" v-text="userInfo.last_name" />
     </div>
 
     <div class="form-group">
-      <h2 class="--heading5 --medium description__title">Workspaces</h2>
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.fields.workspaces')"
+      />
       <div class="workspaces" v-if="userInfo.workspaces.length">
         <BaseBadge
           v-for="workspace in userInfo.workspaces"
@@ -82,20 +89,6 @@ export default {
   padding-bottom: 0;
 }
 
-.user-first_name {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-last_name {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-username {
-  @include font-size(16px);
-}
-
 .description {
   &__title {
     margin-top: 0;

diff --git a/frontend/layouts/HeaderAndTopAndTwoColumns.vue b/frontend/layouts/HeaderAndTopAndTwoColumns.vue
@@ -47,9 +47,19 @@ export default {
 }
 .top {
   grid-area: 2 / 2 / 3 / 5;
+
+  @include media("<tablet") {
+    grid-area: 2 / 1 / 3 / 6;
+    padding-inline: 2em;
+  }
 }
 .left {
   grid-area: 3 / 2 / 6 / 4;
+
+  @include media("<tablet") {
+    grid-area: 3 / 1 / 6 / 6;
+    padding-inline: 2em;
+  }
 }
 .right {
   grid-area: 3 / 4 / 6 / 5;

diff --git a/frontend/translation/en.js b/frontend/translation/en.js
@@ -27,6 +27,12 @@ export default {
   },
   userSettings: {
     title: "My settings",
+    fields: {
+      userName: "Username",
+      firstName: "Name",
+      lastName: "Surname",
+      workspaces: "Workspaces",
+    },
   },
   settings: {
     title: "Dataset settings",