Small tweaks and cleanup related to the UI revamp

Author: abelsiqueira

src/components/DownloadButton.vue

@@ -1,6 +1,7 @@
 <template>
     <q-btn
         aria-label="Download CITATION.cff"
+        class="rounded-borders"
         color="primary"
         data-cy="btn-download"
         download="CITATION.cff"
@@ -10,14 +11,12 @@
         no-caps
         type="a"
         v-bind:href="downloadUrl"
-        v-bind:class="q.platform.is.mobile ? 'full-width' : ''"
     />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useCffstr } from 'src/store/cffstr'
-import { useQuasar } from 'quasar'
 
 const toDownloadUrl = (body: string) => {
     return `data:text/vnd.yaml,${encodeURIComponent(body)}`
@@ -27,9 +26,7 @@ export default defineComponent({
     name: 'DownloadButton',
     setup () {
         const { cffstr } = useCffstr()
-        const q = useQuasar()
         return {
-            q,
             downloadUrl: computed(() => toDownloadUrl(cffstr.value))
         }
     }

src/components/Error404.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
         <div>
-            <div style="font-size: 30vh">
+            <h1>
                 404
-            </div>
-            <div
-                class="text-h2"
+            </h1>
+            <h2
+
                 style="opacity:.4"
             >
                 Oops. Nothing here...
-            </div>
+            </h2>
 
             <q-btn
                 class="q-mt-xl"

src/components/InfoDialog.vue

@@ -16,7 +16,7 @@
         v-model="showDialog"
     >
         <q-card
-            class="window-width help-dialog"
+            class="window-width"
         >
             <q-card-section class="row items-center q-pb-none">
                 <h2>
@@ -101,22 +101,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-.help-dialog {
-    background-color: var(--fgcolor, lightslategray);
-}
-h2 {
-    font-size: 2rem;
-    line-height: normal;
-    margin-top: 12px;
-    margin-bottom: 7px;
-    letter-spacing: normal;
-}
-h3 {
-    font-size: 1.25rem;
-    line-height: normal;
-    margin: 0px;
-    letter-spacing: normal;
-}
-</style>

src/components/ScreenAbstract.vue

@@ -6,7 +6,6 @@
     <q-input
         aria-label="Abstract/Description of the work. Press tab to reach help button."
         autogrow
-        bg-color="white"
         data-cy="input-abstract"
         input-style="min-height: 100px; max-height: 444px"
         label="Abstract/Description"
@@ -41,6 +40,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-</style>

src/components/ScreenFinish.vue

@@ -15,40 +15,34 @@
     <div v-if="isValidCFF">
         <p
             v-if="!showAdvanced"
-            class="finish-paragraph"
         >
             You now have a minimal CITATION.cff file. Use the buttons below to download your CITATION.cff file, continue adding more properties, or reset the form.
         </p>
         <p
             v-else
-            class="finish-paragraph"
         >
             Use the buttons below to download your CITATION.cff file, or reset the form to start over.
         </p>
-        <p class="finish-paragraph">
+        <p>
             Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
         </p>
-        <div class="row">
-            <DownloadButton class="col-4 q-ma-lg" />
+        <div class="row q-gutter-md justify-center">
+            <DownloadButton />
             <q-btn
                 v-if="!showAdvanced"
-                class="col-4 q-ma-lg"
-                color="primary"
+                class="rounded-borders bg-primary text-white"
                 data-cy="btn-add-more"
                 icon="workspace_premium"
-                label="Add more"
+                label="Add more fields"
                 no-caps
                 size="xl"
                 to="/identifiers"
                 v-on:click="setupAdvanced"
-                v-bind:class="q.platform.is.mobile ? 'full-width' : ''"
             />
         </div>
-        <div class="row">
+        <div class="row justify-center">
             <q-btn
-                class="q-mt-md q-mb-md"
-                color=""
-                text-color="red"
+                class="q-mt-md q-mb-md rounded-borders bg-secondary text-white"
                 icon="refresh"
                 label="Reset form"
                 no-caps
@@ -57,15 +51,15 @@
         </div>
     </div>
     <div v-else>
-        <p class="finish-paragraph">
+        <p>
             Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
         </p>
     </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import DownloadButton from 'components/DownloadButton.vue'
+import DownloadButton from 'src/components/DownloadButton.vue'
 import { useApp } from 'src/store/app'
 import { useCff } from 'src/store/cff'
 import { useQuasar } from 'quasar'
@@ -95,7 +89,6 @@ export default defineComponent({
                 })
             },
             isValidCFF: computed(() => errors.value.length === 0),
-            q,
             setupAdvanced: async () => {
                 setShowAdvanced(true)
                 await setStepName('identifiers')
@@ -105,11 +98,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-.row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center
-}
-</style>

src/components/ScreenLicense.vue

@@ -5,7 +5,6 @@
 
     <q-select
         aria-label="License. Press tab to reach help button."
-        bg-color="white"
         data-cy="select-license"
         label="License"
         clearable
@@ -74,6 +73,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-</style>

src/components/ScreenRelatedResources.vue

@@ -5,7 +5,6 @@
 
     <q-input
         aria-label="Code repository. Press tab to reach help button."
-        bg-color="white"
         data-cy="input-repository-code"
         label="Code repository"
         outlined
@@ -22,7 +21,6 @@
 
     <q-input
         aria-label="Webiste/Landing page. Press tab to reach help button."
-        bg-color="white"
         data-cy="input-url"
         label="Website/Landing page"
         outlined
@@ -39,7 +37,6 @@
 
     <q-input
         aria-label="Other repository. Press tab to reach help button."
-        bg-color="white"
         data-cy="input-repository"
         label="Other repository"
         outlined
@@ -56,7 +53,6 @@
 
     <q-input
         aria-label="Artifact repository. Press tab to reach help button."
-        bg-color="white"
         data-cy="input-repository-artifact"
         label="Artifact repository"
         outlined
@@ -131,6 +127,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-</style>

src/components/ScreenStart.vue

@@ -7,9 +7,7 @@
         class="q-mb-md"
         role="radiogroup"
     >
-        <legend
-            class="question"
-        >
+        <legend>
             Type of the work
             <InfoDialog name="type" />
         </legend>
@@ -27,7 +25,6 @@
         </label>
     </fieldset>
     <q-input
-        bg-color="white"
         data-cy="input-title"
         outlined
         standout
@@ -44,7 +41,6 @@
     </q-input>
     <q-input
         aria-label="`Title of the ${ type }. Press tab to reach help button.`"
-        bg-color="white"
         data-cy="input-message"
         label="Personalized message. Leave blank to use default"
         outlined
@@ -120,9 +116,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-.dropdown {
-    height: 100%;
-}
-</style>

src/components/ScreenVersionSpecific.vue

@@ -6,7 +6,6 @@
     <div class="q-gutter-md">
         <q-input
             aria-label="Commit identifier. Press tab to reach help button."
-            bg-color="white"
             data-cy="input-commit"
             label="Commit identifier"
             outlined
@@ -21,7 +20,6 @@
 
         <q-input
             aria-label="Version. Press tab to reach help button."
-            bg-color="white"
             data-cy="input-version"
             label="Version"
             outlined
@@ -36,14 +34,12 @@
 
         <q-input
             aria-label="Release date. Press tab to reach help button."
-            bg-color="white"
             hint="Format: YYYY-MM-DD"
             data-cy="input-date-released"
             label="Release date"
             mask="####-##-##"
             outlined
             standout
-            style="width: 33.33%"
             today-btn="true"
             v-bind:model-value="dateReleased"
             v-bind:error="dateReleasedErrors.length > 0"
@@ -123,6 +119,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped>
-</style>

src/components/Stepper.vue

@@ -3,12 +3,11 @@
         <q-stepper
             animated
             class="transparent"
+            done-color="primary"
             error-color="negative"
-            error-icon="warning"
+            inactive-color="grey-7"
             flat
             header-nav
-            inactive-color="primary"
-            inactive-icon=""
             v-bind:model-value="stepName"
             vertical
         >