fix: fix too small font sizes (#1856)

This pull request: - updates the text size so there is no text smaller than 16px on the site Closes #1834
MESH-Research · Jul 10, 2023 · 6427642 · 6427642
1 parent 7b1d821
commit 6427642
Show file tree

Hide file tree

Showing 18 changed files with 70 additions and 53 deletions.
diff --git a/client/src/components/AppHeader.vue b/client/src/components/AppHeader.vue
@@ -17,7 +17,9 @@
           <h1 class="q-ma-none text-h4 site-title">
             {{ $t("header.site_title") }}
           </h1>
-          <small class="site-subtitle">{{ $t("header.site_subtitle") }}</small>
+          <small class="site-subtitle text-body1">{{
+            $t("header.site_subtitle")
+          }}</small>
         </div>
       </router-link>
       <q-space />

diff --git a/client/src/components/SubmissionTable.vue b/client/src/components/SubmissionTable.vue
@@ -16,9 +16,7 @@
           <h3 class="q-my-none">
             {{ $t(title) }}
             <q-icon name="info">
-              <q-tooltip class="text-body1">{{
-                $t(tooltip)
-              }}</q-tooltip>
+              <q-tooltip>{{ $t(tooltip) }}</q-tooltip>
             </q-icon>
           </h3>
 

diff --git a/client/src/components/SubmissionTableActions.vue b/client/src/components/SubmissionTableActions.vue
@@ -40,7 +40,6 @@
           v-if="cannotAccessSubmission(submission)"
           anchor="top middle"
           self="bottom middle"
-          class="text-body1"
           data-cy="cannot_access_submission_tooltip"
         >
           {{ $t("submissions.action.review.no_access") }}
@@ -65,7 +64,6 @@
           v-if="cannotAccessSubmission(submission)"
           anchor="top middle"
           self="bottom middle"
-          class="text-body1"
           data-cy="cannot_access_submission_tooltip"
         >
           {{ $t("submissions.action.view_details.no_access") }}
@@ -92,12 +90,11 @@
           anchor="top middle"
           self="bottom middle"
           :offset="[10, 10]"
-          class="text-body1"
           data-cy="cannot_change_submission_status_tooltip"
         >
           {{
             $t(
-              `submissions.action.change_status.no_access.${submission.status}`
+              `submissions.action.change_status.no_access.${submission.status}`,
             )
           }}
         </q-tooltip>
@@ -194,7 +191,6 @@
           anchor="top middle"
           self="bottom middle"
           :offset="[10, 10]"
-          class="text-body1"
           data-cy="cannot_export_submission_tooltip"
         >
           {{ $t(`export.disabled.by_role`) }}
@@ -204,7 +200,6 @@
           anchor="top middle"
           self="bottom middle"
           :offset="[10, 10]"
-          class="text-body1"
           data-cy="cannot_export_submission_tooltip"
         >
           {{ $t(`export.disabled.by_state`) }}

diff --git a/client/src/components/atoms/FormSectionHeader.vue b/client/src/components/atoms/FormSectionHeader.vue
@@ -3,19 +3,15 @@
     class="bg-secondary text-white q-mx-md"
     :class="{ 'q-py-sm': !firstSection }"
   >
-    <div :class="headerClass"><slot></slot></div>
+    <div><slot></slot></div>
   </q-card-section>
 </template>
 
 <script setup>
-import { computed } from "vue"
-const props = defineProps({
+defineProps({
   firstSection: {
     type: Boolean,
     default: false,
   },
 })
-const headerClass = computed(() => {
-  return props.firstSection ? "text-h4" : "text-subtitle2"
-})
 </script>
diff --git a/client/src/components/atoms/SubmissionContent.vue b/client/src/components/atoms/SubmissionContent.vue
@@ -24,7 +24,7 @@
       </div>
       <div>
         <q-btn
-        :aria-label="$t(`submissions.style_controls.increase`)"
+          :aria-label="$t(`submissions.style_controls.increase`)"
           data-cy="increase_font"
           round
           flat
@@ -116,7 +116,7 @@ watch(
   () => $q.dark.isActive,
   () => {
     darkModeValue.value = $q.dark.isActive
-  }
+  },
 )
 
 function toggleDarkMode() {
@@ -194,7 +194,7 @@ const annotations = computed(() =>
         active: id === activeComment.value?.id,
         click: onAnnotationClick,
       }))
-    : []
+    : [],
 )
 
 const editor = new Editor({

diff --git a/client/src/components/atoms/SubmissionExportButton.vue b/client/src/components/atoms/SubmissionExportButton.vue
@@ -8,10 +8,10 @@
     >
     </q-btn>
     <q-icon name="info" size="sm" class="q-ml-sm">
-      <q-tooltip v-if="isDisabledByRole" class="text-body1">{{
+      <q-tooltip v-if="isDisabledByRole">{{
         $t(`export.disabled.by_role`)
       }}</q-tooltip>
-      <q-tooltip v-else-if="isDisabledByState" class="text-body1">{{
+      <q-tooltip v-else-if="isDisabledByState">{{
         $t(`export.disabled.by_state`)
       }}</q-tooltip>
     </q-icon>

diff --git a/client/src/components/atoms/SubmissionToolbar.vue b/client/src/components/atoms/SubmissionToolbar.vue
@@ -138,10 +138,10 @@
         class="q-ma-xs cursor-not-allowed"
         style="opacity: 0.5"
       >
-        <q-tooltip v-if="isDisabledByRole" class="text-body1">{{
+        <q-tooltip v-if="isDisabledByRole">{{
           $t(`export.disabled.by_role`)
         }}</q-tooltip>
-        <q-tooltip v-else-if="isDisabledByState" class="text-body1">{{
+        <q-tooltip v-else-if="isDisabledByState">{{
           $t(`export.disabled.by_state`)
         }}</q-tooltip>
       </q-icon>
@@ -158,9 +158,7 @@
           params: { id: submission.id },
         }"
       >
-        <q-tooltip class="text-body1">{{
-          $t(`export.call_to_action`)
-        }}</q-tooltip>
+        <q-tooltip>{{ $t(`export.call_to_action`) }}</q-tooltip>
       </q-btn>
       <q-btn
         :aria-label="$t('submission.toolbar.toggle_annotation_highlights')"
@@ -170,7 +168,7 @@
         icon="power_input"
         @click="toggleAnnotationHighlights"
       >
-        <q-tooltip class="text-body1 text-center" max-width="100px">{{
+        <q-tooltip class="text-center" max-width="100px">{{
           $t("submission.toolbar.toggle_annotation_highlights")
         }}</q-tooltip>
       </q-btn>
@@ -183,7 +181,7 @@
         data-cy="toggleInlineCommentsButton"
         @click="toggleCommentDrawer"
       >
-        <q-tooltip class="text-body1 text-center" max-width="100px">{{
+        <q-tooltip class="text-center" max-width="100px">{{
           $t("submission.toolbar.toggle_inline_comments")
         }}</q-tooltip>
       </q-btn>

diff --git a/client/src/components/atoms/UserListItem.vue b/client/src/components/atoms/UserListItem.vue
@@ -27,7 +27,6 @@
           <q-tooltip
             anchor="top middle"
             self="center middle"
-            class="text-subtitle2"
             >{{ $t("submissions.reinvite.tooltip") }}</q-tooltip
           >
         </q-btn>

diff --git a/client/src/components/forms/NewPasswordInput.vue b/client/src/components/forms/NewPasswordInput.vue
@@ -106,9 +106,6 @@ const score = computed(() => {
 .q-field--with-bottom
   padding-bottom: 40px
 
-.password-details
-  font-size: 12px
-
 .q-chip
   margin: 0
 

diff --git a/client/src/components/molecules/NotificationPopup.vue b/client/src/components/molecules/NotificationPopup.vue
@@ -50,10 +50,12 @@
           />
         </q-list>
         <q-btn-group class="notification-button-group" spread>
-          <q-btn to="/feed">{{ $t("notifications.view_more") }}</q-btn>
-          <q-btn data-cy="dismiss_all_notifications" @click="dismissAll">{{
-            $t("notifications.dismiss_all")
-          }}</q-btn>
+          <q-btn to="/feed">
+            {{ $t("notifications.view_more") }}
+          </q-btn>
+          <q-btn data-cy="dismiss_all_notifications" @click="dismissAll">
+            {{ $t("notifications.dismiss_all") }}</q-btn
+          >
         </q-btn-group>
       </div>
     </q-popup-proxy>
@@ -88,7 +90,7 @@ const { mutate: markAllNotificationsRead } = useMutation(
   MARK_ALL_NOTIFICATIONS_READ,
   {
     refetchQueries: ["currentUserNotifications"],
-  }
+  },
 )
 const dismissAll = async () => {
   await markAllNotificationsRead()

diff --git a/client/src/css/app.sass b/client/src/css/app.sass
@@ -6,6 +6,9 @@
 html
     font-family: "Atkinson"
 
+body
+    font-size: $typography-font-size
+
 .alert
     background-color: #eee
     border-radius: 4px
@@ -72,6 +75,30 @@ a[target="_blank"]::after
         .q-field__control
             height: auto
 
+
+.block,
+.q-banner__content
+.q-breadcrumbs,
+.q-btn__content,
+.q-chip__content,
+.q-field,
+.q-field__messages,
+.q-field__native,
+.q-item__label,
+.q-item__label--caption,
+.q-item__section--main,
+.q-pagination__middle .q-btn,
+.q-table tbody td,
+.q-table__bottom-item,
+.q-toggle__label,
+.q-tooltip,
+.text-caption,
+th.text-center,
+th.text-left,
+th.text-right
+    font-size: $typography-font-size
+
+
 // ----------
 // Light Mode
 // ----------

diff --git a/client/src/css/quasar.variables.sass b/client/src/css/quasar.variables.sass
@@ -52,3 +52,4 @@ $h5: (size: 0.75rem,  line-height: 2rem,     letter-spacing: normal,    weight:
 $h6: (size: 0.5rem,   line-height: 2rem,     letter-spacing: normal,    weight: 500) !default
 
 $typography-font-family : Atkinson, sans-serif
+$typography-font-size   : 16px
diff --git a/client/src/layouts/Account/AccountLayout.vue b/client/src/layouts/Account/AccountLayout.vue
@@ -6,19 +6,17 @@
           <q-card-section
             class="col-sm-12 col-xs-12 flex flex-center avatar-profile-block q-mt-none"
           >
-            <avatar-block
-              avatar-size="80px"
-              :user="currentUser"
-              class="text-center"
-            />
+            <avatar-block avatar-size="80px" :user="currentUser" />
           </q-card-section>
           <q-card-section class="col-sm-12 col-xs-12 q-mt-md q-pa-none">
             <collapse-menu :items="items" />
           </q-card-section>
           <q-card-section class="col-sm-12 col-xs-12 q-mt-md q-pa-none">
             <q-list role="list">
               <q-item>
-                <q-item-section> {{ $t(`account.submissions_created`) }} </q-item-section>
+                <q-item-section>
+                  {{ $t(`account.submissions_created`) }}
+                </q-item-section>
                 <q-item-section
                   avatar
                   class="text-primary text-bold user-stats"
@@ -27,7 +25,9 @@
                 </q-item-section>
               </q-item>
               <q-item>
-                <q-item-section> {{ $t(`account.submissions_reviewed`) }} </q-item-section>
+                <q-item-section>
+                  {{ $t(`account.submissions_reviewed`) }}
+                </q-item-section>
                 <q-item-section
                   avatar
                   class="text-primary text-bold user-stats"
@@ -37,7 +37,9 @@
               </q-item>
               <q-item clickable class="light-grey">
                 <q-item-section avatar><q-icon name="launch" /></q-item-section>
-                <q-item-section> {{ $t(`account.preview_link`) }} </q-item-section>
+                <q-item-section>
+                  {{ $t(`account.preview_link`) }}
+                </q-item-section>
               </q-item>
             </q-list>
           </q-card-section>
@@ -55,7 +57,7 @@ import AvatarBlock from "src/components/molecules/AvatarBlock.vue"
 import CollapseMenu from "src/components/molecules/CollapseMenu.vue"
 import { useCurrentUser } from "src/use/user"
 import { useI18n } from "vue-i18n"
-const { t } = useI18n() 
+const { t } = useI18n()
 
 const items = [
   {

diff --git a/client/src/pages/LoginPage.vue b/client/src/pages/LoginPage.vue
@@ -3,7 +3,7 @@
     <q-card style="width: 400px" square>
       <q-form @submit="handleSubmit()">
         <q-card-section class="accent q-pa-sm">
-          <h1 class="text-h5 text-white">{{ $t(`auth.login`) }}</h1>
+          <h1 class="text-h4 text-white">{{ $t(`auth.login`) }}</h1>
         </q-card-section>
         <q-card-section class="q-pa-lg">
           <fieldset class="q-px-sm q-pt-md q-gutter-y-lg q-pb-lg">

diff --git a/client/src/pages/Publication/Setup/UsersPage.vue b/client/src/pages/Publication/Setup/UsersPage.vue
@@ -15,7 +15,7 @@
       </template>
       {{ $t("publication.setup_pages.problems.no_admin") }}
     </q-banner>
-    <div class="column q-gutter-md q-mb-md">
+    <div class="column q-gutter-md q-mb-lg">
       <assigned-publication-users
         data-cy="admins_list"
         role-group="publication_admins"

diff --git a/client/src/pages/RegisterPage.vue b/client/src/pages/RegisterPage.vue
@@ -3,7 +3,7 @@
     <q-card style="width: 400px">
       <q-form autofocus @submit="handleSubmit">
         <q-card-section class="accent">
-          <h1 class="text-h5 text-white q-my-xs">
+          <h1 class="text-h4 text-white q-my-xs">
             {{ $t("auth.register") }}
           </h1>
         </q-card-section>

diff --git a/client/src/pages/SubmissionContent.vue b/client/src/pages/SubmissionContent.vue
@@ -207,7 +207,7 @@ const uploadOpts = {
 }
 const { mutate: updateContentWithFile } = useMutation(
   UPDATE_SUBMISSION_CONTENT_WITH_FILE,
-  uploadOpts
+  uploadOpts,
 )
 async function submitUpload() {
   try {

diff --git a/client/src/pages/SubmissionsPage.vue b/client/src/pages/SubmissionsPage.vue
@@ -28,7 +28,7 @@
 
           <q-icon name="info">
             <q-tooltip class="q-pa-none">
-              <q-card class="bg-grey-8 text-body1 q-pa-md">
+              <q-card class="bg-grey-8 q-pa-md">
                 <strong>{{ $t(`submissions.new.tooltip.question`) }}</strong>
                 <p>{{ $t(`submissions.new.tooltip.answer`) }}</p>
                 <ul class="q-ma-none">
@@ -122,7 +122,7 @@ const pubsOptions = computed(() => {
 const submitter_submissions = computed(() =>
   submissions.value.filter(function (submission) {
     return submission.my_role == "submitter"
-  })
+  }),
 )
 const latest_comments = computed(() => {
   let comments = submitter_submissions.value.map((submission) => {
@@ -170,7 +170,7 @@ const latest_comments = computed(() => {
       .flat()
     return [].concat.apply(
       [],
-      [inline, inline_replies, overall, overall_replies]
+      [inline, inline_replies, overall, overall_replies],
     )
   })
   return comments