style: Small visual adjustments for Text2Text record card (#1632)

This PR changes the button alignment and position of the score, button styles and text.

Closes #1138

(cherry picked from commit bd9be09)

frontend/assets/scss/abstract/placeholders/_placeholders.scss

@@ -145,7 +145,7 @@
   border: 0;
   &:hover,
   &:focus {
-      text-decoration: underline;
+      text-decoration: none;
       background: none;
   }
 }

frontend/components/core/ReButton.vue

@@ -279,10 +279,14 @@ export default {
 .button-clear {
   @extend %button;
   @extend %clear;
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    color: $font-dark-color;
+  border-radius: $border-radius;
+  padding: 0.5em;
+  transition: all 0.2s ease;
+  @include font-size(14px);
+  background: none;
+  &:hover {
+    transition: all 0.2s ease;
+    background: palette(grey, bg);
   }
   &--small {
     @extend %button;

frontend/components/text2text/results/Text2TextContentEditable.vue

@@ -16,10 +16,10 @@
       v-if="editionMode && annotationEnabled && editableText"
       class="content__edit__buttons"
     >
+      <re-button class="button-primary" @click="annotate">Save</re-button>
       <re-button class="button-primary--outline" @click="$emit('back')"
         >Back</re-button
       >
-      <re-button class="button-primary" @click="annotate">Save</re-button>
     </div>
   </span>
 </template>
@@ -134,7 +134,7 @@ $marginRight: 200px;
     &__buttons {
       margin: 2.5em 200px 0 auto;
       display: flex;
-      justify-content: flex-end;
+      justify-content: flex-start;
       .re-button {
         margin-bottom: 0;
         &:last-child {

frontend/components/text2text/results/Text2TextList.vue

@@ -20,7 +20,7 @@
     <div
       :class="[
         'content',
-        hasAnnotationAndPredictions ? 'content--separator' : null,
+        'content--separator',
         !annotationEnabled
           ? 'content--exploration-mode'
           : 'content--annotation-mode',
@@ -66,7 +66,10 @@
           <div v-if="itemNumber === index" class="content__sentences">
             <div class="content__group">
               <p v-if="!editionMode" class="content__sentences__title">
-                {{ sentencesOrigin }}
+                {{ sentencesOrigin
+                }}<span v-if="showScore" class="content__score"
+                  >: {{ sentence.score | percent }}
+                </span>
               </p>
               <re-button
                 v-if="hasAnnotationAndPredictions && !editionMode"
@@ -96,8 +99,24 @@
             />
             <div v-if="!editionMode" class="content__footer">
               <template v-if="sentencesOrigin === 'Prediction'">
-                <div v-if="showScore" class="content__score">
-                  Score: {{ sentence.score | percent }}
+                <div v-if="annotationEnabled" class="content__actions-buttons">
+                  <re-button
+                    v-if="allowValidation"
+                    class="button-primary"
+                    @click="onAnnotate(visibleSentence)"
+                    >Validate</re-button
+                  >
+                  <re-button
+                    v-if="sentences.length"
+                    :class="[
+                      'edit',
+                      allowValidation
+                        ? 'button-primary--outline'
+                        : 'button-primary',
+                    ]"
+                    @click="edit"
+                    >Edit</re-button
+                  >
                 </div>
                 <div v-if="sentences.length" class="content__nav-buttons">
                   <a
@@ -107,8 +126,8 @@
                   >
                     <svgicon
                       name="chevron-left"
-                      width="8"
-                      height="8"
+                      width="12"
+                      height="12"
                       color="#4C4EA3"
                     />
                   </a>
@@ -122,32 +141,13 @@
                   >
                     <svgicon
                       name="chevron-right"
-                      width="8"
-                      height="8"
+                      width="12"
+                      height="12"
                       color="#4C4EA3"
                     />
                   </a>
                 </div>
               </template>
-              <div v-if="annotationEnabled" class="content__actions-buttons">
-                <re-button
-                  v-if="sentences.length"
-                  :class="[
-                    'edit',
-                    allowValidation
-                      ? 'button-primary--outline'
-                      : 'button-primary',
-                  ]"
-                  @click="edit"
-                  >Edit</re-button
-                >
-                <re-button
-                  v-if="allowValidation"
-                  class="button-primary"
-                  @click="onAnnotate(visibleSentence)"
-                  >Validate</re-button
-                >
-              </div>
             </div>
           </div>
         </span>
@@ -435,13 +435,13 @@ export default {
     flex-direction: column;
     min-height: 140px;
     &__title {
-      @include font-size(13px);
+      @include font-size(14px);
       color: palette(grey, medium);
       margin: 0;
     }
   }
   &__score {
-    @include font-size(13px);
+    @include font-size(15px);
     margin-right: 0;
     min-width: 33%;
     color: palette(grey, medium);
@@ -459,18 +459,12 @@ export default {
     align-items: center;
     margin-bottom: 0.5em;
     .button-clear {
-      @include font-size(13px);
       margin: auto 0 auto auto;
-      color: palette(grey, dark);
-      transition: opacity 0.3s ease-in-out 0.2s;
-      &:hover {
-        color: darken(palette(grey, dark), 10%);
-      }
     }
   }
   &__actions-buttons {
-    margin-right: 0;
-    margin-left: auto;
+    margin-right: auto;
+    margin-left: 0;
     display: flex;
     .edit {
       opacity: 0;
@@ -489,13 +483,13 @@ export default {
     }
   }
   &__nav-buttons {
-    @include font-size(13px);
+    @include font-size(14px);
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 33%;
-    margin-right: auto;
-    margin-left: 0;
+    margin-right: 33%;
+    margin-left: auto;
     color: palette(grey, medium);
     a {
       height: 20px;