@dative-gpi/foundation-shared-components 1.0.17 → 1.0.19

package/components/FSButton.vue

@@ -2,11 +2,9 @@
   <FSClickable
     v-if="$props.variant !== 'icon'"
     :editable="$props.editable"
-    :padding="$props.padding"
+    :padding="padding"
     :variant="$props.variant"
-    :height="$props.height"
     :color="$props.color"
-    :width="$props.width"
     :load="$props.load"
     :href="$props.href"
     :to="$props.to"
@@ -15,7 +13,7 @@
     v-bind="$attrs"
   >
     <FSRow
-      v-if="$props.axis === 'horizontal'"
+      v-if="$props.direction === 'row'"
       align="center-center"
       width="fill"
       :wrap="false"
@@ -166,7 +164,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -178,6 +176,12 @@ import FSIcon from "./FSIcon.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
+const PADDING_ICON_ONLY = "7px";
+const PADDING_LABEL_ONLY = ["9px 16px", "9px 12px"];
+const PADDING_ICON_LABEL = ["7px 16px", "7px 12px"];
+
+const DEFAULT_PADDING = PADDING_ICON_LABEL;
+
 export default defineComponent({
   name: "FSButton",
   components: {
@@ -188,20 +192,10 @@ export default defineComponent({
     FSRow
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => ["40px", "36px"]
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "fit-content"
-    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "0 16px"
+      default: DEFAULT_PADDING
     },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
@@ -236,17 +230,17 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
-      default: "l"
+      default: () => ["24", "20"]
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "standard"
     },
-    axis: {
-      type: String as PropType<"horizontal" | "vertical">,
+    direction: {
+      type: String as PropType<"row" | "column">,
       required: false,
-      default: "horizontal"
+      default: "row"
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -271,6 +265,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
+    const slots = useSlots();
 
     const style = computed((): StyleValue => {
       if (!props.editable) {
@@ -314,6 +309,27 @@ export default defineComponent({
       }
     });
 
+    const padding = computed(() => {
+      if(props.padding !== DEFAULT_PADDING){
+        return props.padding;
+      }
+
+      const hasIcon = props.prependIcon || props.appendIcon || props.icon
+        || !!slots.prepend || !!slots.append;
+      
+      const hasLabel = props.label || !!slots.default;
+
+      if(!hasLabel && hasIcon){
+        return PADDING_ICON_ONLY;
+      }
+      else if(hasLabel && !hasIcon)
+      {
+        return PADDING_LABEL_ONLY;
+      }
+
+      return DEFAULT_PADDING;
+    })
+
     const onClick = (event: MouseEvent) => {
       if (!props.to && !props.href && props.editable && !props.load) {
         emit("click", event);
@@ -325,6 +341,7 @@ export default defineComponent({
       loadColor,
       colors,
       style,
+      padding,
       onClick
     };
   }

package/components/FSCheckbox.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-checkbox-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSDivider.vue

@@ -59,7 +59,7 @@ export default defineComponent({
       default: "100%"
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLabel.vue

@@ -35,7 +35,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLink.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLoader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -70,7 +70,7 @@ export default defineComponent({
         case "text-body"     :
         case "text-button"   : return isMobileSized.value ? "14px" : "16px";
         case "text-overline" :
-        case "text-underline": return "16px";
+        case "text-overline": return "16px";
       }
     });
 

package/components/FSRadio.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-radio-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -54,7 +54,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-slider-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSpan.vue

@@ -24,7 +24,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSSwitch.vue

@@ -36,7 +36,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-switch-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSText.vue

@@ -25,7 +25,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/buttons/FSButtonAddMini.vue

@@ -1,7 +1,6 @@
 <template>
   <FSButton
     prependIcon="mdi-plus-circle-outline"
-    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCancelMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-cancel"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonDuplicateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEditMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonFileMini.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <FSButton
-      padding="0 7px"
+      
       :prependIcon="$props.icon"
       :color="ColorEnum.Light"
       @click="onClick"

package/components/buttons/FSButtonNextMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-right"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPreviousMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-left"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedoMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-redo-variant"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemoveMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-delete-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSaveMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-save-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearchMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-magnify"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndoMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-undo-variant"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonValidateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-check"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/fields/FSBaseField.vue

@@ -48,7 +48,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-base-field-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/views/FSEntityHeader.vue

@@ -14,9 +14,9 @@
         :height="imageSize"
         :wrap="false"
       >
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
+        <FSImageUI
+          v-if="$props.imageSource"
+          :source="$props.imageSource"
           :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
@@ -136,9 +136,9 @@
         :height="imageSize"
         :wrap="false"
       >
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
+        <FSImageUI
+          v-if="$props.imageSource"
+          :source="$props.imageSource"
           :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
@@ -220,7 +220,7 @@ import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-componen
 import FSBreadcrumbs from "../FSBreadcrumbs.vue";
 import FSSlideGroup from "../FSSlideGroup.vue";
 import FSIconCard from "../FSIconCard.vue";
-import FSImage from "../FSImage.vue";
+import FSImageUI from "../FSImageUI.vue";
 import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
 import FSCol from "../FSCol.vue";
@@ -232,14 +232,14 @@ export default defineComponent({
     FSBreadcrumbs,
     FSSlideGroup,
     FSIconCard,
-    FSImage,
+    FSImageUI,
     FSIcon,
     FSText,
     FSCol,
     FSRow
   },
   props: {
-    imageId: {
+    imageSource: {
       type: String as PropType<string | null>,
       required: false,
       default: null

package/components/views/FSEntityView.vue

@@ -1,147 +1,36 @@
 <template>
-  <FSSkeletonView>
-    <template
-      #header
-    >
-      <FSEntityHeader
-        ref="headerRef"
-        :breadcrumbs="$props.breadcrumbs"
-        :description="$props.description"
-        :subtitle="$props.subtitle"
-        :imageId="$props.imageId"
-        :title="$props.title"
-        :light="lightHeader"
-        :icon="$props.icon"
-        :color="$props.color"
-        :iconBackgroundColors="$props.iconBackgroundColors"
-        :imageCover="$props.imageCover"
-      >
-        <template
-          #title-append
-        >
-          <slot
-            name="title-append"
-          />
-        </template>
-        <template
-          #toolbar
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </template>
-      </FSEntityHeader>
-    </template>
-    <template
-      #default
-    >
-      <!-- <FSFadeOut
-        padding="0 8px 0 0"
-        :height="height"
-        @scroll="onScroll"
-      > -->
-      <slot
-        name="default"
-      />
-      <!-- </FSFadeOut> -->
-    </template>
-  </FSSkeletonView>
+  <FSEntityViewUI
+    :imageSource="source"
+    v-bind="$attrs"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import FSEntityHeader from "./FSEntityHeader.vue";
-import FSSkeletonView from "./FSSkeletonView.vue";
-// import FSFadeOut from "../FSFadeOut.vue";
+import FSEntityViewUI from "./FSEntityViewUI.vue";
 
 export default defineComponent({
   name: "FSEntityView",
   components: {
-    FSEntityHeader,
-    FSSkeletonView
-    // FSFadeOut
+    FSEntityViewUI
   },
   props: {
     imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
-    },
-    imageCover: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    icon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    color : {
-      type: Object as PropType<ColorEnum | null>,
-      required: false,
-      default: null
-    },
-    iconBackgroundColors: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    subtitle: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<FSBreadcrumbItem[]>,
-      required: false,
-      default: () => []
     }
   },
-  setup() {
-    const { isExtraSmall, windowHeight } = useBreakpoints();
-    const { slots } = useSlots();
-
-    const headerRef = ref<HTMLElement | null>(null);
-
-    const lightHeader = ref(false);
-
-    const height = computed((): string => {
-      let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
-
-      return `${windowHeight.value - other}px`;
+  setup(props) {
+    const source = computed(() => {
+      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
     });
 
-    // const onScroll = (event: any): void => {
-    //   if (event.onTop) {
-    //     lightHeader.value = false;
-    //   }
-    //   else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
-    //     lightHeader.value = true;
-    //   }
-    // };
-
     return {
-      lightHeader,
-      headerRef,
-      height,
-      slots
-      // onScroll
+      source
     };
   }
 });

package/components/views/FSEntityViewUI.vue

@@ -0,0 +1,148 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSEntityHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :description="$props.description"
+        :subtitle="$props.subtitle"
+        :imageSource="$props.imageSource"
+        :title="$props.title"
+        :light="lightHeader"
+        :icon="$props.icon"
+        :color="$props.color"
+        :iconBackgroundColors="$props.iconBackgroundColors"
+        :imageCover="$props.imageCover"
+      >
+        <template
+          #title-append
+        >
+          <slot
+            name="title-append"
+          />
+        </template>
+        <template
+          #toolbar
+          v-if="slots['toolbar']"
+        >
+          <slot
+            name="toolbar"
+          />
+        </template>
+      </FSEntityHeader>
+    </template>
+    <template
+      #default
+    >
+      <!-- <FSFadeOut
+        padding="0 8px 0 0"
+        :height="height"
+        @scroll="onScroll"
+      > -->
+      <slot
+        name="default"
+      />
+      <!-- </FSFadeOut> -->
+    </template>
+  </FSSkeletonView>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSEntityHeader from "./FSEntityHeader.vue";
+import FSSkeletonView from "./FSSkeletonView.vue";
+// import FSFadeOut from "../FSFadeOut.vue";
+
+export default defineComponent({
+  name: "FSEntityViewUI",
+  components: {
+    FSEntityHeader,
+    FSSkeletonView
+    // FSFadeOut
+  },
+  props: {
+    imageSource: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color : {
+      type: Object as PropType<ColorEnum | null>,
+      required: false,
+      default: null
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup() {
+    const { isExtraSmall, windowHeight } = useBreakpoints();
+    const { slots } = useSlots();
+
+    const headerRef = ref<HTMLElement | null>(null);
+
+    const lightHeader = ref(false);
+
+    const height = computed((): string => {
+      let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
+
+      return `${windowHeight.value - other}px`;
+    });
+
+    // const onScroll = (event: any): void => {
+    //   if (event.onTop) {
+    //     lightHeader.value = false;
+    //   }
+    //   else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
+    //     lightHeader.value = true;
+    //   }
+    // };
+
+    return {
+      lightHeader,
+      headerRef,
+      height,
+      slots
+      // onScroll
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.17",
-    "@dative-gpi/foundation-shared-services": "1.0.17"
+    "@dative-gpi/foundation-shared-domain": "1.0.19",
+    "@dative-gpi/foundation-shared-services": "1.0.19"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "83f8eb02faf9ad8eb20422e4f02a5da6ec46e2d2"
+  "gitHead": "83051b0eadf10f38806ce7a4ab9f9adfcc1bb32e"
 }

package/styles/globals/text_fonts.scss

@@ -14,9 +14,9 @@
     }
 
     @include mobile {
-        font-size: 29px !important;
+        font-size: 28px !important;
         line-height: 32px !important;
-        letter-spacing: -1.45px !important;
+        letter-spacing: -1.4px !important;
     }
 }
 
@@ -26,9 +26,9 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 27px !important;
+        font-size: 26px !important;
         line-height: 32px !important;
-        letter-spacing: -0.81px !important;
+        letter-spacing: -0.78px !important;
     }
 
     @include mobile {
@@ -44,34 +44,16 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 21px !important;
+        font-size: 20px !important;
         line-height: 24px !important;
-        letter-spacing: -0.63px !important;
+        letter-spacing: -0.6px !important;
     }
 
     @include mobile {
-        font-size: 17px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.51px !important;
-    }
-}
-
-.text-h4 {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-
-    @include web {
         font-size: 16px !important;
         line-height: 20px !important;
         letter-spacing: -0.48px !important;
     }
-
-    @include mobile {
-        font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.41px !important;
-    }
 }
 
 .text-body {
@@ -82,14 +64,14 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
         font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
+        line-height: 16px !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
@@ -101,52 +83,32 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
-        font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
-    }
-}
-
-.text-overline {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    text-transform: none !important;
-
-    @include web {
-        font-weight: 600 !important;
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
-    }
-
-    @include mobile {
-        font-weight: 500 !important;
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
-.text-underline {
+.text-overline {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;
-    font-weight: 500 !important;
     text-transform: none !important;
+    font-weight: 600 !important;
 
     @include web {
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
+        letter-spacing: 0 !important;
     }
 
     @include mobile {
         font-size: 10px !important;
         line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: 0 !important;
     }
 }