Refresh the measurements page design a tad

oslokommune · Aug 18, 2023 · ade858e · ade858e
1 parent 9dafdb7
commit ade858e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/src/components/KpiDetails.vue b/src/components/KpiDetails.vue
@@ -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="kpi-details__description">{{ 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>
+@use '@/styles/typography';
+
+.kpi-details {
+  margin-left: 3rem;
+}
+
 .kpi-details__header {
   gap: 0.25rem;
   margin-bottom: 1rem;
@@ -167,6 +173,8 @@ export default {
 
     .title-1 {
       margin: 0;
+      font-weight: 400;
+      font-size: typography.$font-size-6;
     }
 
     @include bp('phablet-up') {
@@ -175,4 +183,8 @@ export default {
     }
   }
 }
+
+.kpi-details__description {
+  font-size: typography.$font-size-1;
+}
 </style>
diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
@@ -151,8 +151,8 @@ export default {
 
     h2 {
       flex-grow: 1;
-      font-weight: 500;
-      font-size: typography.$font-size-3;
+      font-weight: 400;
+      font-size: typography.$font-size-2;
     }
 
     span {
@@ -177,17 +177,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 +209,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
@@ -154,8 +154,8 @@ export default {
   }
 
   &__title {
-    color: var(--color-grayscale-40);
-    font-weight: 500;
+    color: var(--color-dark-blue);
+    font-weight: 400;
     font-size: typography.$font-size-1;
   }
 

diff --git a/src/components/widgets/WidgetWrapper.vue b/src/components/widgets/WidgetWrapper.vue
@@ -85,6 +85,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/typography';
+
 .widget {
   position: relative;
   display: flex;
@@ -124,5 +126,10 @@ export default {
   &--small {
     padding: 1rem;
   }
+
+  &--large h3 {
+    font-weight: 400;
+    font-size: typography.$font-size-4;
+  }
 }
 </style>