fix: prepare bulk and shortcuts QA (argilla-io#4434)

- [x] Show preselected submit button - [x] Make disable state more evident - [x] lighten active colors for buttons - [x] Move record status to the right - [x] Remove buttons area border - [x] Remove title from button
kcentric · Dec 20, 2023 · f1d5d93 · f1d5d93
1 parent 0a07577
commit f1d5d93
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 31 deletions.
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -115,6 +115,16 @@ $discarded-color: palette(grey, 500);
 $pending-color: palette(brown);
 $draft-color: palette(turquoise);
 
+$submitted-color-medium: #92a8fc;
+$discarded-color-medium: #cbcbcb;
+$pending-color-medium: #fbc27d;
+$draft-color-medium: #93d9e3;
+
+$submitted-color-light: #b3c4ff;
+$discarded-color-light: #e0dddd;
+$pending-color-light: #fdebd9;
+$draft-color-light: #b2e6ee;
+
 // Fonts
 //-----------
 $primary-font-family: "Inter", "Helvetica", "Arial", sans-serif;

diff --git a/frontend/components/feedback-task/container/fields/RecordFieldsAndSimilarity.vue b/frontend/components/feedback-task/container/fields/RecordFieldsAndSimilarity.vue
@@ -15,7 +15,6 @@
       <div class="fields__header">
         <div class="fields__header--left"></div>
         <div class="fields__header--right">
-          <RecordStatus :recordStatus="record.status" />
           <SimilarityScorePercentage
             v-if="
               recordCriteria.isFilteringBySimilarity && record.score.percentage
@@ -31,6 +30,7 @@
             :recordCriteria="recordCriteria"
             :recordId="record.id"
           />
+          <RecordStatus :recordStatus="record.status" />
         </div></div
     ></RecordFields>
   </div>

diff --git a/frontend/components/feedback-task/container/questions/QuestionsForm.component.vue b/frontend/components/feedback-task/container/questions/QuestionsForm.component.vue
@@ -33,7 +33,6 @@
           type="button"
           class="button--discard"
           :class="isDiscarding ? '--button--discarding' : null"
-          :title="$t('shortcuts.questions_form.discard')"
           @on-click="onDiscard"
         >
           <span class="button__shortcuts" v-text="'⌫'" /><span
@@ -44,11 +43,6 @@
           type="button"
           class="button--draft"
           :class="isDraftSaving ? '--button--saving-draft' : null"
-          :title="
-            $platform.isMac
-              ? $t('shortcuts.questions_form.draft_mac')
-              : $t('shortcuts.questions_form.draft')
-          "
           @on-click="onSaveDraft"
         >
           <span class="button__shortcuts-group"
@@ -63,12 +57,13 @@
         <BaseButton
           type="submit"
           class="button--submit"
-          :class="isSubmitting ? '--button--submitting' : null"
+          :class="[
+            isSubmitting ? '--button--submitting' : null,
+            isDiscarding || isDraftSaving ? '--button--remove-bg' : null,
+          ]"
           :disabled="isSubmitButtonDisabled"
           :title="
-            isSubmitButtonDisabled
-              ? $t('to_submit_complete_required')
-              : $t('shortcuts.questions_form.submit')
+            isSubmitButtonDisabled ? $t('to_submit_complete_required') : null
           "
           @on-click="onSubmit"
         >
@@ -315,13 +310,12 @@ export default {
     justify-content: space-between;
     align-items: center;
     border-radius: $border-radius-m;
-    border: 1px solid #c6d1ff;
-    background: #f5f7ff;
-    transition: border-color 0.35s ease;
+    background: #f0f2fa;
     container-type: inline-size;
     &:hover {
-      border-color: transparent;
-      transition: border-color 0.35s ease;
+      .button--submit:not(:hover) {
+        background: transparent;
+      }
     }
   }
 }
@@ -361,44 +355,49 @@ export default {
     min-height: $base-space * 6;
     border-radius: $border-radius-m - 1;
     padding: $base-space * 2 $base-space;
-    &:hover,
-    &.--button--discarding {
+    &:hover {
       color: $black-87;
     }
     &:disabled {
-      opacity: 0.7;
       pointer-events: visible;
       cursor: not-allowed;
     }
   }
   &--submit {
+    background: $submitted-color-light;
+    &[disabled] {
+      opacity: 0.5;
+    }
     &:hover:not([disabled]) {
-      background: #b3c4ff;
+      background: darken($submitted-color-light, 2%);
     }
     &:active:not([disabled]),
     &.--button--submitting,
     &.--button--submitting:hover {
-      background: $submitted-color;
+      background: $submitted-color-medium;
+    }
+    &.--button--remove-bg {
+      background: transparent;
     }
   }
   &--draft {
     &:hover:not([disabled]) {
-      background: #b2e6ee;
+      background: $draft-color-light;
     }
     &:active:not([disabled]),
     &.--button--saving-draft,
     &.--button--saving-draft:hover {
-      background: $draft-color;
+      background: $draft-color-medium;
     }
   }
   &--discard {
     &:hover:not([disabled]) {
-      background: #e0dddd;
+      background: $discarded-color-light;
     }
     &:active:not([disabled]),
     &.--button--discarding,
     &.--button--discarding:hover {
-      background: $discarded-color;
+      background: $discarded-color-medium;
     }
   }
 }

diff --git a/frontend/translation/en.json b/frontend/translation/en.json
@@ -18,12 +18,6 @@
     "pagination": {
       "go_to_previous_record": "Previous (←)",
       "go_to_next_record": "Next (→)"
-    },
-    "questions_form": {
-      "draft_mac": "Save as draft (⌘ cmd + s)",
-      "draft": "Save as draft (ctrl + s)",
-      "discard": "Discard (⌫ backspace)",
-      "submit": "Submit (↵ enter)"
     }
   },
   "questions_form": {