Merge pull request #839 from oslokommune/measurements-design-refresh

Refresh the measurements page design a tad
oslokommune · Aug 25, 2023 · 2caa251 · 2caa251
2 parents 9dafdb7 + ead169f
commit 2caa251
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/src/components/KpiDetails.vue b/src/components/KpiDetails.vue
@@ -2,7 +2,7 @@
   <div class="kpi-details">
     <header class="kpi-details__header">
       <div>
-        <h2 class="title-1">{{ kpi.name }}</h2>
+        <h2 class="pkt-txt-30">{{ kpi.name }}</h2>
         <pkt-button
           v-if="hasEditRights"
           skin="tertiary"
@@ -13,7 +13,7 @@
           {{ $t('kpi.newValue') }}
         </pkt-button>
       </div>
-      <p v-if="kpi.description" class="description">{{ kpi.description }}</p>
+      <p v-if="kpi.description" class="pkt-txt-14-light">{{ kpi.description }}</p>
     </header>
 
     <widget-kpi-progress-graph :kpi="kpi" :progress="progress" :goals="goals" />
@@ -152,6 +152,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@include bp('laptop-up') {
+  .kpi-details {
+    margin-left: 3rem;
+  }
+}
+
 .kpi-details__header {
   gap: 0.25rem;
   margin-bottom: 1rem;
@@ -165,7 +171,7 @@ export default {
       white-space: nowrap;
     }
 
-    .title-1 {
+    h2 {
       margin: 0;
     }
 

diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="['kpi-widget-group', { 'kpi-widget-group--compact': compact }]">
     <div class="kpi-widget-group__title">
-      <h2>{{ title }}</h2>
+      <h2 class="pkt-txt-16">{{ title }}</h2>
       <template v-if="!compact">
         <span v-if="selectedPeriod.startDate && selectedPeriod.endDate">
           {{ $t('general.period') }}: {{ periodDates(selectedPeriod) }}
@@ -151,8 +151,6 @@ export default {
 
     h2 {
       flex-grow: 1;
-      font-weight: 500;
-      font-size: typography.$font-size-3;
     }
 
     span {
@@ -177,17 +175,20 @@ export default {
         border-color: var(--color-white);
       }
 
-      ::v-deep .widget__header h3 {
+      ::v-deep .widget__header h3,
+      ::v-deep .period-trend-tag__value {
         color: var(--color-hover);
       }
     }
 
     .kpi-card-widget {
       &:hover {
         background: var(--color-gray-light);
+        border-color: var(--color-gray);
 
         ::v-deep {
-          .widget__header h3 {
+          .widget__header h3,
+          .period-trend-tag__value {
             color: var(--color-hover);
           }
 
@@ -206,7 +207,7 @@ export default {
   }
 
   &--compact {
-    gap: 0.5rem;
+    gap: 0.125rem;
     margin-bottom: 1rem;
 
     .kpi-widget-group__title h2 {

diff --git a/src/components/widgets/PeriodTrendTag.vue b/src/components/widgets/PeriodTrendTag.vue
@@ -126,7 +126,7 @@ export default {
   gap: 0.5rem;
   align-items: center;
   justify-content: space-around;
-  font-weight: 500;
+  font-weight: 400;
   white-space: nowrap;
 
   @include bp('phablet-up') {

diff --git a/src/components/widgets/WidgetKpiProgressStats.vue b/src/components/widgets/WidgetKpiProgressStats.vue
@@ -2,7 +2,7 @@
   <widget>
     <div class="progressStatistics">
       <div>
-        <span class="progressStatistics__title">
+        <span class="progressStatistics__title pkt-txt-14">
           <template v-if="latestProgressRecord">
             {{
               $t('kpi.latestValueTitle', {
@@ -22,7 +22,7 @@
       </div>
 
       <div v-if="goal">
-        <span class="progressStatistics__title">
+        <span class="progressStatistics__title pkt-txt-14">
           {{
             $t('kpi.goals.goalTitle', {
               formattedDateRange: formatDateRange(goal.fromDate, goal.toDate),
@@ -154,9 +154,7 @@ export default {
   }
 
   &__title {
-    color: var(--color-grayscale-40);
-    font-weight: 500;
-    font-size: typography.$font-size-1;
+    color: var(--color-dark-blue);
   }
 
   &__value {

diff --git a/src/components/widgets/WidgetWrapper.vue b/src/components/widgets/WidgetWrapper.vue
@@ -14,7 +14,7 @@
     >
       <slot v-if="$slots.header" name="header" />
       <template v-else>
-        <h3 :class="size === 'small' ? 'pkt-txt-16-medium' : 'pkt-txt-18-medium'">
+        <h3 :class="size === 'small' ? 'pkt-txt-16' : 'pkt-txt-20'">
           {{ title }}
         </h3>
         <div v-if="$slots['title-actions']" class="widget__actions">