Revamp the UI of the Keywords screen

Author: abelsiqueira

src/components/Keyword.vue

@@ -1,9 +1,8 @@
 <template>
-    <div class="keyword">
-        <div class="keyword-input">
+    <div class="row q-pb-lg">
+        <div class="col">
             <q-input
                 autofocus
-                bg-color="white"
                 dense
                 outlined
                 placeholder="Type a keyword"
@@ -17,7 +16,8 @@
         </div>
         <q-btn
             class="keyword-btn"
-            color="blue"
+            color="secondary"
+            flat
             icon="ion-arrow-up"
             v-bind:aria-label="`move keyword #${index + 1} up`"
             v-bind:data-cy="'btn-move-up' + index"
@@ -26,7 +26,8 @@
         />
         <q-btn
             class="keyword-btn"
-            color="blue"
+            color="secondary"
+            flat
             icon="ion-arrow-down"
             v-bind:aria-label="`move keyword #${index + 1} down`"
             v-bind:data-cy="'btn-move-down' + index"
@@ -36,7 +37,7 @@
         <q-btn
             class="keyword-btn"
             color="negative"
-            dense
+            flat
             icon="delete"
             title="Remove"
             v-bind:aria-label="`remove keyword #${index + 1}`"
@@ -89,14 +90,6 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.keyword {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 14px;
-}
-.keyword-input {
-    flex-grow: 1.0;
-}
 .keyword-btn {
     height: 40px;
     margin-left: 10px;

src/components/ScreenKeywords.vue

@@ -3,11 +3,11 @@
         Keywords
     </h1>
 
-    <h2 class="question">
+    <p>
         What keywords describe the work?
         <InfoDialog name="keywords" />
-    </h2>
-    <div class="scroll-to-bottom-container">
+    </p>
+    <div>
         <span class="bottom" />
         <div>
             <Keyword
@@ -25,8 +25,8 @@
         </div>
     </div>
     <q-btn
-        class="q-mt-md q-mb-md"
-        color="primary"
+        class="q-mt-md q-mb-md rounded-borders"
+        color="secondary"
         data-cy="btn-add-keyword"
         no-caps
         style="width: max-content"
@@ -107,11 +107,3 @@ export default defineComponent({
     }
 })
 </script>
-<style scoped>
-.scroll-to-bottom-container {
-    display: flex;
-    flex-direction: column-reverse;
-    max-height: 450px;
-    overflow-y: auto;
-}
-</style>