Browse Source

Maintenance: Desktop view - Standardize text leading as snug.

Dusan Vuckovic 9 months ago
parent
commit
651c4c2a8a

+ 1 - 1
app/frontend/apps/desktop/components/CommonDialog/CommonDialog.vue

@@ -91,7 +91,7 @@ onMounted(() => {
       <div class="flex items-center justify-between bg-white dark:bg-gray-500">
       <div class="flex items-center justify-between bg-white dark:bg-gray-500">
         <slot name="header">
         <slot name="header">
           <div
           <div
-            class="flex items-center gap-2 text-xl leading-6 text-gray-100 dark:text-neutral-400"
+            class="flex items-center gap-2 text-xl leading-snug text-gray-100 dark:text-neutral-400"
           >
           >
             <CommonIcon v-if="headerIcon" size="small" :name="headerIcon" />
             <CommonIcon v-if="headerIcon" size="small" :name="headerIcon" />
             <h3 :id="`${dialogId}-title`">{{ $t(headerTitle) }}</h3>
             <h3 :id="`${dialogId}-title`">{{ $t(headerTitle) }}</h3>

+ 1 - 1
app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue

@@ -61,7 +61,7 @@ const getHoverFocusStyles = (variant?: Variant) => {
       v-if="showHeaderLabel"
       v-if="showHeaderLabel"
       role="heading"
       role="heading"
       aria-level="2"
       aria-level="2"
-      class="p-2 leading-3"
+      class="p-2 leading-snug"
     >
     >
       <slot name="header">
       <slot name="header">
         <CommonLabel size="small" class="text-stone-200 dark:text-neutral-500"
         <CommonLabel size="small" class="text-stone-200 dark:text-neutral-500"

+ 1 - 1
app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue

@@ -38,7 +38,7 @@ const iconColor = computed(() => {
     :is="link ? 'CommonLink' : 'button'"
     :is="link ? 'CommonLink' : 'button'"
     :link="link"
     :link="link"
     :external="link && linkExternal"
     :external="link && linkExternal"
-    class="block cursor-pointer leading-4 hover:no-underline focus-visible:!outline-none"
+    class="block cursor-pointer leading-snug hover:no-underline focus-visible:!outline-none"
     data-test-id="popover-menu-item"
     data-test-id="popover-menu-item"
   >
   >
     <CommonLabel
     <CommonLabel

+ 5 - 1
app/frontend/apps/desktop/components/CommonTabManager/CommonTabManager.vue

@@ -83,7 +83,11 @@ onMounted(() => {
     :role="isTabMode ? 'tablist' : 'listbox'"
     :role="isTabMode ? 'tablist' : 'listbox'"
     class="relative flex w-fit items-center gap-1 rounded-full bg-blue-200 p-1 dark:bg-gray-700"
     class="relative flex w-fit items-center gap-1 rounded-full bg-blue-200 p-1 dark:bg-gray-700"
   >
   >
-    <CommonTab v-if="label" id="filter-select-label">{{ $t(label) }}</CommonTab>
+    <CommonTab v-if="label" id="filter-select-label">
+      <CommonLabel class="text-stone-200 dark:text-neutral-500" size="medium">{{
+        $t(label)
+      }}</CommonLabel>
+    </CommonTab>
 
 
     <CommonTab
     <CommonTab
       v-if="!multiple"
       v-if="!multiple"

+ 1 - 1
app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuHeader.vue

@@ -22,7 +22,7 @@ withDefaults(defineProps<Props>(), {
 <template>
 <template>
   <!--  eslint-disable vuejs-accessibility/no-static-element-interactions-->
   <!--  eslint-disable vuejs-accessibility/no-static-element-interactions-->
   <header
   <header
-    class="group/heading flex cursor-default justify-between px-0 text-base font-normal leading-5 text-stone-200 active:text-stone-200 dark:text-neutral-500 dark:active:text-neutral-500"
+    class="group/heading flex cursor-default justify-between px-0 text-base font-normal leading-snug text-stone-200 active:text-stone-200 dark:text-neutral-500 dark:active:text-neutral-500"
     :class="{ 'cursor-pointer': collapsible }"
     :class="{ 'cursor-pointer': collapsible }"
     @click="collapsible && $emit('toggle-collapsed', title)"
     @click="collapsible && $emit('toggle-collapsed', title)"
     @keydown.enter="collapsible && $emit('toggle-collapsed', title)"
     @keydown.enter="collapsible && $emit('toggle-collapsed', title)"

+ 6 - 4
app/frontend/shared/components/CommonLabel/CommonLabel.vue

@@ -15,10 +15,10 @@ const props = withDefaults(defineProps<Props>(), {
 })
 })
 
 
 const fontSizeClassMap = {
 const fontSizeClassMap = {
-  small: 'text-xs leading-4',
-  medium: 'text-sm leading-4',
-  large: 'text-base leading-5',
-  xl: 'text-xl leading-6',
+  small: 'text-xs leading-snug',
+  medium: 'text-sm leading-snug',
+  large: 'text-base leading-snug',
+  xl: 'text-xl leading-snug',
 }
 }
 
 
 const iconClassMap = {
 const iconClassMap = {
@@ -37,6 +37,7 @@ const iconClassMap = {
   >
   >
     <CommonIcon
     <CommonIcon
       v-if="prefixIcon"
       v-if="prefixIcon"
+      class="shrink-0"
       :size="iconClassMap[props.size]"
       :size="iconClassMap[props.size]"
       :name="prefixIcon"
       :name="prefixIcon"
       :class="iconColor"
       :class="iconColor"
@@ -47,6 +48,7 @@ const iconClassMap = {
 
 
     <CommonIcon
     <CommonIcon
       v-if="suffixIcon"
       v-if="suffixIcon"
+      class="shrink-0"
       :size="iconClassMap[props.size]"
       :size="iconClassMap[props.size]"
       :name="suffixIcon"
       :name="suffixIcon"
       :class="iconColor"
       :class="iconColor"