From d6b79c35c9ca2c79f804b064db3e29c21a801793 Mon Sep 17 00:00:00 2001
From: Aulon Mujaj <aulon.mujaj@gmail.com>
Date: Wed, 29 Dec 2021 12:56:44 +0100
Subject: [PATCH 1/5] Update CODE_OF_CONDUCT.md

---
 CODE_OF_CONDUCT.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index d639937c8..c5abe0326 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at aulon.mujaj@origo.oslo.kommune.no. All
+reported by contacting the project team at dataspeilet@oslo.kommune.no. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

From b9fa6fe850f402d79be905b8fb49ce50915def61 Mon Sep 17 00:00:00 2001
From: Aulon Mujaj <aulon.mujaj@gmail.com>
Date: Thu, 30 Dec 2021 11:45:32 +0100
Subject: [PATCH 2/5] fix(design): fixed hover colors, theme colors on line
 charts and header title disappearing

---
 CHANGELOG.md                              |  9 +++
 src/components/ActionBar.vue              |  3 +-
 src/components/KeyResultRow.vue           |  7 ++-
 src/components/KpiLink.vue                |  3 +-
 src/components/Navigation/SiteHeader.vue  | 76 +++++++++++++++++++++--
 src/components/Navigation/SiteSidebar.vue | 27 ++++----
 src/components/widgets/WidgetAdmin.vue    |  4 +-
 src/components/widgets/WidgetWeights.vue  |  5 +-
 src/styles/_alerts.scss                   |  1 +
 src/styles/_buttons.scss                  |  2 +-
 src/styles/_forms.scss                    |  3 +
 src/styles/_miller.scss                   |  2 +-
 src/styles/_tabs.scss                     |  8 +--
 src/styles/_widgets.scss                  |  5 +-
 src/styles/main.scss                      | 14 +++--
 src/styles/ods/ods-forms.scss             |  2 +
 src/util/LineChart/index.js               | 15 +++--
 src/util/LineChart/linechart-helpers.js   | 35 +++++++++--
 src/views/Home.vue                        | 24 +++----
 src/views/ItemAdmin/ItemAdminKPI.vue      |  2 +-
 src/views/ItemAdmin/ItemAdminWrapper.vue  |  8 +--
 src/views/KeyResultHome.vue               | 45 ++++++++++++--
 src/views/KpiHome.vue                     | 17 ++---
 src/views/Login.vue                       |  2 +-
 24 files changed, 236 insertions(+), 83 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32e1f4802..b353137c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. The format
 
 ## [UNRELEASED]
 
+### Changes
+
+- Use the only blue hover color the Oslo design system has to offer on both green and blue themes
+- Line chart changes colors together with the theme
+
+### Fixed
+
+- Header title disappeared when opening the side drawer
+
 ## [2.7.0] 2021-12-29
 
 OKR-tracker has been redesigned!
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index f999c4489..5281c1348 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -58,7 +58,7 @@ export default {
 
 .action-bar__period-dates {
   margin-bottom: 1.5rem;
-  color: var(--color-grey-700);
+  color: var(--color-primary);
   font-size: 0.9em;
 
   @media screen and (min-width: bp(s)) {
@@ -68,6 +68,7 @@ export default {
 }
 
 .action-bar__view {
+  color: var(--color-primary);
   font-weight: 500;
   background: none;
   border: none;
diff --git a/src/components/KeyResultRow.vue b/src/components/KeyResultRow.vue
index 1f19e8d30..bae40a735 100644
--- a/src/components/KeyResultRow.vue
+++ b/src/components/KeyResultRow.vue
@@ -132,7 +132,8 @@ export default {
   background-color: var(--color-secondary-light);
 
   &:hover {
-    background-color: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background-color: var(--color-hover);
   }
 }
 
@@ -142,7 +143,7 @@ export default {
 
 .keyResult__info--header {
   height: 100%;
-  color: var(--color-grey-800);
+  color: var(--color-text);
   text-decoration: none;
 }
 
@@ -165,7 +166,7 @@ export default {
   }
 
   &:hover {
-    background-color: var(--color-primary-dark);
+    background-color: var(--color-hover);
     cursor: pointer;
   }
 }
diff --git a/src/components/KpiLink.vue b/src/components/KpiLink.vue
index 6d9e50e5b..233fd3938 100644
--- a/src/components/KpiLink.vue
+++ b/src/components/KpiLink.vue
@@ -71,7 +71,8 @@ export default {
   background: var(--color-secondary-light);
 
   &:hover {
-    background: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
   }
 
   &.disabled {
diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
index cf334666a..cdc9a7af9 100644
--- a/src/components/Navigation/SiteHeader.vue
+++ b/src/components/Navigation/SiteHeader.vue
@@ -1,8 +1,13 @@
 <template>
   <header class="header">
+    <sidebar-navigation :is-open="sidebarOpen" @hide="hideSidebar" />
     <div class="siteHeader-container">
-      <sidebar-navigation />
-
+      <a href="#" role="menuitem" class="header__nav-button" :class="{ 'is-open': sidebarOpen }" @click="sidebarOpen = true">
+        <div class="header__nav-icon" role="presentation">
+          <span class="sidebar__button"></span> <span class="sidebar__button"></span>
+          <span class="sidebar__button"></span> <span class="sidebar__button"></span>
+        </div>
+      </a>
       <div v-if="title" class="title">
         <h1 class="title__name">
           {{ title }}
@@ -47,6 +52,7 @@ export default {
     showProfileIcon: true,
     sidebarOpen: false,
     showProfileModal: false,
+    isOpen: false,
   }),
 
   metaInfo() {
@@ -95,8 +101,8 @@ export default {
   methods: {
     ...mapActions(['reset_state', 'setLoading', 'setActiveOrganization']),
 
-    hideSidebar() {
-      this.sidebarOpen = !this.sidebarOpen;
+    hideSidebar(event) {
+      this.sidebarOpen = event;
     },
 
     openProfileModal() {
@@ -159,4 +165,66 @@ $header-height: 4em;
   margin-right: 0.3em;
   font-size: 1.5rem;
 }
+
+
+.header__nav-button {
+  width: $header-height;
+  height: $header-height;
+  background-color: var(--color-primary);
+  border-radius: 50%;
+  cursor: pointer;
+
+  &.is-open {
+    span {
+      &:nth-child(1),
+      &:nth-child(4) {
+        opacity: 0;
+        transition: transform 1.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
+      }
+      &:nth-child(2) {
+        transform: translateY(1em) rotate(45deg);
+        transition: transform 1.4s ease-in-out 0.4s, opacity 0.4s ease-in-out 0.4s;
+      }
+      &:nth-child(3) {
+        transform: translateY(1em) rotate(-45deg);
+        transition: transform 1.4s ease-in-out 0.4s, opacity 0.4s ease-in-out 0.4s;
+      }
+    }
+  }
+}
+
+.header__nav-icon {
+  position: relative;
+  width: 100%;
+  padding: 1em;
+
+  $bar-height: 0.15em;
+  $center: 1em - math.div($bar-height, 2);
+  span {
+    position: absolute;
+    top: $center;
+    left: 1.25em;
+    display: block;
+    width: 1.5em;
+    height: $bar-height;
+    background: var(--color-text-secondary);
+    border-radius: 0.075em;
+    transform-origin: 50% 50%;
+
+    &:nth-child(1) {
+      transform: translateY($center - 0.35em) rotate(0deg);
+      transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s;
+    }
+    &:nth-child(2),
+    &:nth-child(3) {
+      transform: translateY(1em) rotate(0deg);
+      transition: transform 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
+    }
+    &:nth-child(4) {
+      transform: translateY($center + 0.35em + $bar-height) rotate(0deg);
+      transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s;
+    }
+  }
+}
+
 </style>
diff --git a/src/components/Navigation/SiteSidebar.vue b/src/components/Navigation/SiteSidebar.vue
index 8c0c15486..9bb7e96c0 100644
--- a/src/components/Navigation/SiteSidebar.vue
+++ b/src/components/Navigation/SiteSidebar.vue
@@ -1,12 +1,5 @@
 <template>
-  <div :class="{ 'overlay': isOpen }"  @click.self="hideSidebar">
-    <a href="#" role="menuitem" class="header__nav-button" :class="{ 'is-open': isOpen }" @click.stop="hideSidebar">
-      <div class="header__nav-icon" role="presentation">
-        <span class="sidebar__button"></span> <span class="sidebar__button"></span>
-        <span class="sidebar__button"></span> <span class="sidebar__button"></span>
-      </div>
-    </a>
-
+  <div :class="{ overlay: isOpen }" @click.self="hideSidebar">
     <transition name="slide">
       <aside v-if="isOpen" class="sidebar">
         <div class="sidebar__content">
@@ -111,8 +104,14 @@ export default {
     OsloLogo,
   },
 
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   data: () => ({
-    isOpen: false,
     isCollapsed: false,
     appVersion: __APP_VERSION__, // eslint-disable-line no-undef
   }),
@@ -129,7 +128,7 @@ export default {
   watch: {
     $route: {
       handler() {
-        this.isOpen = false;
+        this.$emit('hide', false);
       },
     },
 
@@ -168,7 +167,7 @@ export default {
     },
 
     hideSidebar() {
-      this.isOpen = !this.isOpen;
+      this.$emit('hide', false);
     },
   },
 };
@@ -239,7 +238,7 @@ $header-height: 4em;
   display: flex;
   flex-direction: row;
   width: calc(100vw - 4rem);
-  max-width: 29rem;
+  max-width: 36rem;
   height: 100vh;
 }
 
@@ -275,7 +274,7 @@ $header-height: 4em;
 
   &.is-open {
     z-index: 250;
-    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 30%);
+    box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);
     transition: transform 0.5s ease-in-out, background-color 0.3s, box-shadow 0.3s;
 
     span {
@@ -305,7 +304,7 @@ $header-height: 4em;
 
 .slide-enter,
 .slide-leave-to {
-  left: -400px;
+  left: -504px;
 }
 
 .sidebar__group {
diff --git a/src/components/widgets/WidgetAdmin.vue b/src/components/widgets/WidgetAdmin.vue
index 0f9ebdeac..815ecab02 100644
--- a/src/components/widgets/WidgetAdmin.vue
+++ b/src/components/widgets/WidgetAdmin.vue
@@ -130,8 +130,8 @@ export default {
   cursor: pointer;
 
   &:hover {
-    color: var(--color-text);
-    background-color: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background-color: var(--color-hover);
   }
 }
 
diff --git a/src/components/widgets/WidgetWeights.vue b/src/components/widgets/WidgetWeights.vue
index eb30bc912..90f61ae7f 100644
--- a/src/components/widgets/WidgetWeights.vue
+++ b/src/components/widgets/WidgetWeights.vue
@@ -125,8 +125,9 @@ export default {
   border: 1px solid var(--color-secondary-light);
 
   &:hover {
-    background: var(--color-secondary);
-    border: 1px solid var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
+    border: 1px solid var(--color-hover);
   }
 }
 </style>
diff --git a/src/styles/_alerts.scss b/src/styles/_alerts.scss
index 46e901b4e..f6cf737e5 100644
--- a/src/styles/_alerts.scss
+++ b/src/styles/_alerts.scss
@@ -8,6 +8,7 @@ $borderRadius: 1.5px;
   margin: 0.5rem 0 1rem;
   padding: 1rem;
   overflow: hidden;
+  color: var(--color-text);
   background: rgba(var(--color-grey-100-rgb), 0.1);
   border-radius: $borderRadius;
   box-shadow: 0 1px 3px rgba(var(--color-grey-500-rgb), 0.2), 0 3px 12px rgba(var(--color-grey-500-rgb), 0.05);
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 80c9cd3e9..baf4021e0 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -47,7 +47,7 @@
   background: var(--color-primary);
 
   &:hover {
-    background-color: var(--color-primary-dark);
+    background-color: var(--color-hover);
   }
 }
 
diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
index c1ccda58e..90794f5f9 100644
--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -27,6 +27,7 @@ textarea {
 .form-label {
   display: block;
   margin-bottom: 0.25rem;
+  color: var(--color-text);
 }
 
 .form-field {
@@ -61,6 +62,7 @@ textarea {
   display: block;
   margin-top: -0.25rem;
   margin-bottom: 0.25rem;
+  color: var(--color-text);
   font-size: 0.85rem;
 }
 
@@ -177,4 +179,5 @@ textarea {
   align-items: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  color: var(--color-text);
 }
diff --git a/src/styles/_miller.scss b/src/styles/_miller.scss
index 9b03cb8f5..84e927911 100644
--- a/src/styles/_miller.scss
+++ b/src/styles/_miller.scss
@@ -4,7 +4,7 @@
   min-width: 100%;
   height: 100%;
   overflow-x: scroll;
-  color: var(--color-black);
+  color: var(--color-text);
   background: rgba(var(--color-border-rgb), 0.075);
 
   &__container {
diff --git a/src/styles/_tabs.scss b/src/styles/_tabs.scss
index a24b53714..202b332bc 100644
--- a/src/styles/_tabs.scss
+++ b/src/styles/_tabs.scss
@@ -13,8 +13,8 @@
     right: 0;
     bottom: 4px;
     left: 0;
-    height: 1px;
-    background: var(--color-black);
+    height: 2px;
+    background: var(--color-primary);
     content: '';
   }
 
@@ -39,13 +39,13 @@
 .tab {
   position: relative;
   display: block;
-  margin: 0 0.5rem 0.5rem 0;
+  margin: 0 0.5rem 0 0;
   padding: 0.7rem 1rem;
   color: var(--color-text);
   font-weight: 500;
   white-space: nowrap;
   text-decoration: none;
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-dark);
   border: 0;
   border-bottom: 2px solid transparent;
   cursor: pointer;
diff --git a/src/styles/_widgets.scss b/src/styles/_widgets.scss
index f144000bb..b1b43f2bb 100644
--- a/src/styles/_widgets.scss
+++ b/src/styles/_widgets.scss
@@ -5,6 +5,7 @@
   align-self: start;
   width: 100%;
   margin-bottom: 0.5rem;
+  color: var(--color-text);
   background: var(--color-white);
 }
 
@@ -146,8 +147,8 @@
   }
 
   &:hover {
-    color: var(--color-text);
-    background: var(--color-secondary);
+    color: var(--color-text-secondary);
+    background: var(--color-hover);
 
     & > .fa-chevron-left {
       margin-right: 2rem;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2c2514d5d..e9a123e66 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -161,6 +161,7 @@ body.using-mouse :focus {
   --color-blue-light: #b3f5ff;
   --color-blue-light-2: #b2d2d8;
   --color-purple: #292858;
+  --color-purple-medium: #4A72A1;
   --color-purple-dark: #1F42AA;
   --color-yellow: #f8c66b;
   --color-yellow-dark: #ba944fff;
@@ -172,13 +173,14 @@ body.using-mouse :focus {
   --color-beige-dark: #d0bfae;
 
   --color-green: #42f8b6;
-  --color-green-medium-dark: #366763;
+  --color-green-medium-dark: #207354;
   --color-green-dark: #044b45;
   --color-green-dark-2: #023834;
   --color-green-light: #c7f7c9;
 
   --color-bg: #f3f3f3;
   --color-border: #dae3e5;
+  --color-bg-dark: #E6E6E6E6;
 
   --color-grey-50: #f7f7f7;
   --color-grey-100: #e1e1e6;
@@ -213,27 +215,29 @@ body.using-mouse :focus {
 }
 
 [data-theme='green'] {
-  --color-text: var(--color-black);
+  --color-text: var(--color-green-dark);
   --color-text-secondary: var(--color-white);
   --color-primary: var(--color-green-dark);
-  --color-primary-dark: var(--color-green-dark-2);
   --color-secondary: var(--color-green);
+  --color-primary-dark: var(--color-purple-dark);
   --color-secondary-light: var(--color-green-light);
   --color-tertiary: var(--color-green-dark);
   --color-progress-background: var(--color-green-medium-dark);
+  --color-hover: var(--color-purple-dark);
 
   --color-primary-rgb: var(--color-green-dark);
 }
 
 [data-theme='blue'] {
-  --color-text: var(--color-black);
+  --color-text: var(--color-purple);
   --color-text-secondary: var(--color-white);
   --color-primary: var(--color-purple);
   --color-primary-dark: var(--color-purple-dark);
   --color-secondary: var(--color-blue);
   --color-secondary-light: var(--color-blue-light);
   --color-tertiary: var(--color-purple);
-  --color-progress-background: var(--color-grey-550);
+  --color-progress-background: var(--color-purple-medium);
+  --color-hover: var(--color-purple-dark);
 
   --color-primary-rgb: var(--color-purple-rgb);
 }
diff --git a/src/styles/ods/ods-forms.scss b/src/styles/ods/ods-forms.scss
index 612c734e2..9aa1aebf0 100644
--- a/src/styles/ods/ods-forms.scss
+++ b/src/styles/ods/ods-forms.scss
@@ -4,7 +4,9 @@ $-checkbox-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
 
 .ods-form {
   &-group {
+
     margin-bottom: 0.6rem;
+    color: var(--color-text);
     cursor: pointer;
 
     &:focus-within {
diff --git a/src/util/LineChart/index.js b/src/util/LineChart/index.js
index c3ca833ba..252b2e6cd 100644
--- a/src/util/LineChart/index.js
+++ b/src/util/LineChart/index.js
@@ -3,9 +3,9 @@ import { scaleTime, scaleLinear } from 'd3-scale';
 import { extent, max, min } from 'd3-array';
 import { line, area } from 'd3-shape';
 import { axisLeft, axisBottom } from 'd3-axis';
-import "d3-transition";
+import 'd3-transition';
 import kpiTypes from '@/config/kpiTypes';
-import { initSvg, resize } from './linechart-helpers';
+import { initSvg, resize, styleValueLine, styleGradientStop, styleGradientStart } from './linechart-helpers';
 
 const formatValue = (value, item) => {
   if (item && item.type) {
@@ -15,10 +15,11 @@ const formatValue = (value, item) => {
 };
 
 export default class LineChart {
-  constructor(svgElement) {
+  constructor(svgElement, { colorMode }) {
     if (!svgElement) {
       throw new Error('svg not defined');
     }
+    this.colorMode = colorMode || 'blue';
 
     select(svgElement).selectAll('*').remove();
 
@@ -39,7 +40,9 @@ export default class LineChart {
       .y((d) => this.y(d.value));
   }
 
-  render(obj, period, progressionList, item) {
+  render({ obj, period, progressionList, item, colorMode }) {
+    console.log('render: ', colorMode);
+    this.colorMode = colorMode;
     this.period = period;
     this.obj = obj;
 
@@ -103,5 +106,9 @@ export default class LineChart {
     this.valueArea.datum(data).transition().attr('d', this.area);
 
     this.valueLine.datum(data).transition().attr('d', this.line);
+    this.valueLine.call(styleValueLine.bind(this));
+
+    this.gradient.select('#start').call(styleGradientStart.bind(this));
+    this.gradient.select('#stop').call(styleGradientStop.bind(this));
   }
 }
diff --git a/src/util/LineChart/linechart-helpers.js b/src/util/LineChart/linechart-helpers.js
index 1eac32d01..c9181f090 100644
--- a/src/util/LineChart/linechart-helpers.js
+++ b/src/util/LineChart/linechart-helpers.js
@@ -6,6 +6,19 @@ const colors = {
   yellow: '#F9C66B',
 };
 
+export const colors2 = {
+  blue: {
+    gradientStart: '#2A2859',
+    gradientStop: '#2A2859',
+    line: '#2A2859',
+  },
+  green: {
+    gradientStart: '#034b45',
+    gradientStop: '#034b45',
+    line: '#034b45',
+  },
+};
+
 export function initSvg(svg) {
   this.svg = svg;
 
@@ -17,12 +30,14 @@ export function initSvg(svg) {
 
   this.valueArea = this.canvas.append('path').call(styleArea);
 
+  console.log('init1: ', this.colorMode);
+
   this.yAxis = this.canvas.append('g').classed('axis y', true);
-  this.valueLine = this.canvas.append('path').call(styleValueLine);
+  this.valueLine = this.canvas.append('path').call(styleValueLine.bind(this));
   this.target = this.canvas.append('line').classed('target', true);
   this.today = this.canvas.append('line').classed('today', true).attr('stroke', 'black').attr('stroke-opacity', 0.2);
 
-  const gradient = this.svg
+  this.gradient = this.svg
     .append('defs')
     .append('linearGradient')
     .attr('id', 'areaGradient')
@@ -31,12 +46,20 @@ export function initSvg(svg) {
     .attr('y1', '0%')
     .attr('y2', '100%');
 
-  gradient.append('stop').attr('offset', '0%').attr('style', `stop-color:${colors.purple};stop-opacity:1;`);
-  gradient.append('stop').attr('offset', '100%').attr('style', `stop-color:${colors.purple};stop-opacity:0;`);
+  this.gradient.append('stop').attr('id', 'start').call(styleGradientStart.bind(this));
+  this.gradient.append('stop').attr('id', 'stop').call(styleGradientStop.bind(this));
+}
+
+export function styleGradientStart(el) {
+  el.attr('offset', '0%').attr('style', `stop-color:${colors2[this.colorMode].gradientStart};stop-opacity:1;`);
+}
+
+export function styleGradientStop(el) {
+  el.attr('offset', '100%').attr('style', `stop-color:${colors2[this.colorMode].gradientStop};stop-opacity:0;`);
 }
 
-function styleValueLine(el) {
-  el.classed('valueLine', true).attr('fill', 'none').attr('stroke', colors.purple).attr('stroke-width', 3);
+export function styleValueLine(el) {
+  el.classed('valueLine', true).attr('fill', 'none').attr('stroke', colors2[this.colorMode].line).attr('stroke-width', 3);
 }
 
 function styleArea(el) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 92d5c9335..104f98cbe 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -37,7 +37,9 @@
                       :checked="getCollapse('department', dept.slug)"
                       @click="toggle('department', dept.slug)"
                     />
-                    <label class="ods-form-label" :for="dept.id">{{ dept.name }}</label>
+                    <label class="ods-form-label" :for="dept.id">
+                      {{ dept.name }}
+                    </label>
                   </div>
                 </li>
               </ul>
@@ -55,14 +57,16 @@
         <li v-if="getCollapse('organization', org.slug)" :key="org.id" class="tree">
           <item-row :data="org" class="tree__organization" type="organization"></item-row>
           <ul>
-            <li v-for="dept in org.children" :key="dept.id" class="card">
-              <item-row :data="dept" type="department"></item-row>
-              <ul v-if="getCollapse('department', dept.slug)">
-                <li v-for="prod in dept.children" :key="prod.id">
-                  <item-row :data="prod" type="product"></item-row>
-                </li>
-              </ul>
-            </li>
+            <template v-for="dept in org.children">
+              <li v-if="getCollapse('department', dept.slug)" :key="dept.id" class="card">
+                <item-row :data="dept" type="department"></item-row>
+                <ul>
+                  <li v-for="prod in dept.children" :key="prod.id">
+                    <item-row :data="prod" type="product"></item-row>
+                  </li>
+                </ul>
+              </li>
+            </template>
           </ul>
         </li>
       </template>
@@ -170,8 +174,6 @@ export default {
 }
 
 .card {
-  border-bottom: 3px solid var(--color-bg);
-
   &:last-child {
     border-bottom: none;
   }
diff --git a/src/views/ItemAdmin/ItemAdminKPI.vue b/src/views/ItemAdmin/ItemAdminKPI.vue
index 9087883b7..008578e64 100644
--- a/src/views/ItemAdmin/ItemAdminKPI.vue
+++ b/src/views/ItemAdmin/ItemAdminKPI.vue
@@ -50,7 +50,7 @@
         </template>
 
         <template v-if="!localKpi.api">
-          <h3 class="title-2">{{ $t('kpi.sheetsDetails') }}</h3>
+          <h3 class="title-2" style="color: var(--color-text)">{{ $t('kpi.sheetsDetails') }}</h3>
 
           <form-component
             v-model="localKpi.sheetId"
diff --git a/src/views/ItemAdmin/ItemAdminWrapper.vue b/src/views/ItemAdmin/ItemAdminWrapper.vue
index a881f98b5..fa9c7d8bf 100644
--- a/src/views/ItemAdmin/ItemAdminWrapper.vue
+++ b/src/views/ItemAdmin/ItemAdminWrapper.vue
@@ -13,7 +13,7 @@
           v-tooltip.right="$t('tooltip.navigateToItem', { item: activeItem.name })"
           class="tab--right"
         >
-          <router-link class="tab" :to="{ name: 'ItemHome', params: { slug: activeItem.slug } }" exact>
+          <router-link class="tab tab--right" :to="{ name: 'ItemHome', params: { slug: activeItem.slug } }" exact>
             <i class="tab__icon fa fa-arrow-right" />
             <span class="tab__name">{{ activeItem.name }}</span>
           </router-link>
@@ -69,11 +69,7 @@ export default {
 }
 
 .tab--right {
-  display: none;
-
-  @media screen and (min-width: bp(xs)) {
-    display: block;
-  }
+  background: var(--color-bg);
 }
 
 .tabs {
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index 0297f5eac..a231996fe 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -259,7 +259,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeKeyResult', 'activePeriod', 'user', 'activeItem', 'previousUrl']),
+    ...mapState(['activeKeyResult', 'activePeriod', 'user', 'activeItem', 'previousUrl', 'theme']),
     ...mapGetters(['hasEditRights', 'allowedToEditPeriod']),
 
     hasComments() {
@@ -277,27 +277,60 @@ export default {
       immediate: true,
       async handler(keyResult) {
         if (!keyResult) return;
+        console.log(this.theme);
         this.isLoading = true;
         await this.$bind('progress', db.collection(`keyResults/${keyResult.id}/progress`).orderBy('timestamp', 'desc'));
         this.isLoading = false;
         this.value = keyResult.currentValue || keyResult.startValue || 0;
-        this.graph = new LineChart(this.$refs.graph);
-        this.graph.render(this.activeKeyResult, this.activePeriod, this.progress);
+        console.log(this.theme);
+        this.graph = new LineChart(this.$refs.graph, { colorMode: this.theme });
+        this.graph.render({
+          obj: this.activeKeyResult,
+          period: this.activePeriod,
+          progressionList: this.progress,
+          colorMode: this.theme,
+        });
       },
     },
+
     progress() {
       if (this.graph) {
-        this.graph.render(this.activeKeyResult, this.activePeriod, this.progress);
+        console.log(this.theme);
+        this.graph.render({
+          obj: this.activeKeyResult,
+          period: this.activePeriod,
+          progressionList: this.progress,
+          colorMode: this.theme,
+        });
       }
     },
+
+    theme: {
+      immediate: true,
+      handler() {
+        if (!this.graph) return;
+        console.log('watch: ', this.theme);
+        this.graph.render({
+          obj: this.activeKeyResult,
+          period: this.activePeriod,
+          progressionList: this.progress,
+          colorMode: this.theme,
+        });
+      },
+    },
   },
 
   mounted() {
     if (!this.$refs.graph) return;
     if (!this.activeKeyResult) return;
 
-    this.graph = new LineChart(this.$refs.graph);
-    this.graph.render(this.activeKeyResult, this.activePeriod, this.progress);
+    this.graph = new LineChart(this.$refs.graph, { colorMode: this.theme });
+    this.graph.render({
+      obj: this.activeKeyResult,
+      period: this.activePeriod,
+      progressionList: this.progress,
+      colorMode: this.theme,
+    });
   },
 
   methods: {
diff --git a/src/views/KpiHome.vue b/src/views/KpiHome.vue
index 54f0dcca7..1dde6e191 100644
--- a/src/views/KpiHome.vue
+++ b/src/views/KpiHome.vue
@@ -134,7 +134,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeKpi', 'activeItem']),
+    ...mapState(['activeKpi', 'activeItem', 'theme']),
     ...mapGetters(['hasEditRights']),
 
     limitedProgress() {
@@ -158,7 +158,7 @@ export default {
 
   mounted() {
     if (this.$refs.graph) {
-      this.graph = new LineChart(this.$refs.graph);
+      this.graph = new LineChart(this.$refs.graph, { colorMode: this.theme });
     }
 
     if (this.$route.query.startDate && this.$route.query.endDate) {
@@ -185,18 +185,19 @@ export default {
       const [startDate, endDate] = extent(this.filteredProgress.map(({ timestamp }) => timestamp));
 
       if (!this.graph || !startValue === undefined || !targetValue === undefined) return;
-      this.graph.render(
-        {
+      this.graph.render({
+        obj: {
           startValue,
           targetValue,
         },
-        {
+        period: {
           endDate: this.isFiltered ? endDate : new Date(),
           startDate,
         },
-        this.filteredProgress,
-        this.activeKpi
-      );
+        progressionList: this.filteredProgress,
+        item: this.activeKpi,
+        theme: this.theme,
+      });
     },
 
     filterProgress() {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 1fa8a0d25..d06c42848 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -185,7 +185,7 @@ export default {
 .error {
   margin: 1.5rem 0;
   padding: 1em 1.5em;
-  color: var(--color-black);
+  color: var(--color-text);
   background: rgba(var(--color-red-rgb), 0.25);
   border: 1px solid var(--color-red);
   border-radius: 2px;

From 992f930dd0d6c28cf4cca2a8e9aee850bc740922 Mon Sep 17 00:00:00 2001
From: Aulon Mujaj <aulon.mujaj@gmail.com>
Date: Thu, 30 Dec 2021 11:47:14 +0100
Subject: [PATCH 3/5] chore: release 2.7.1

---
 CHANGELOG.md                            |  2 ++
 package-lock.json                       |  2 +-
 package.json                            |  2 +-
 src/util/LineChart/linechart-helpers.js | 14 ++++----------
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b353137c8..abcb6cf6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. The format
 
 ## [UNRELEASED]
 
+## [2.7.1] 2021-12-30
+
 ### Changes
 
 - Use the only blue hover color the Oslo design system has to offer on both green and blue themes
diff --git a/package-lock.json b/package-lock.json
index 844bca0fe..5e8b1fc30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "okr-tracker",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 9ce896e08..bb26e306d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "okr-tracker",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "private": true,
   "scripts": {
     "dev": "firebase emulators:start --import=./mock_data & vite",
diff --git a/src/util/LineChart/linechart-helpers.js b/src/util/LineChart/linechart-helpers.js
index c9181f090..56cc00437 100644
--- a/src/util/LineChart/linechart-helpers.js
+++ b/src/util/LineChart/linechart-helpers.js
@@ -1,12 +1,6 @@
 const padding = { left: 60, top: 20, right: 10, bottom: 20 };
 
-const colors = {
-  purple: '#2A2859',
-  grey: '#F2F2F2',
-  yellow: '#F9C66B',
-};
-
-export const colors2 = {
+export const colors = {
   blue: {
     gradientStart: '#2A2859',
     gradientStop: '#2A2859',
@@ -51,15 +45,15 @@ export function initSvg(svg) {
 }
 
 export function styleGradientStart(el) {
-  el.attr('offset', '0%').attr('style', `stop-color:${colors2[this.colorMode].gradientStart};stop-opacity:1;`);
+  el.attr('offset', '0%').attr('style', `stop-color:${colors[this.colorMode].gradientStart};stop-opacity:1;`);
 }
 
 export function styleGradientStop(el) {
-  el.attr('offset', '100%').attr('style', `stop-color:${colors2[this.colorMode].gradientStop};stop-opacity:0;`);
+  el.attr('offset', '100%').attr('style', `stop-color:${colors[this.colorMode].gradientStop};stop-opacity:0;`);
 }
 
 export function styleValueLine(el) {
-  el.classed('valueLine', true).attr('fill', 'none').attr('stroke', colors2[this.colorMode].line).attr('stroke-width', 3);
+  el.classed('valueLine', true).attr('fill', 'none').attr('stroke', colors[this.colorMode].line).attr('stroke-width', 3);
 }
 
 function styleArea(el) {

From 3bd7ce1899c083f686124796c683aa9b4fc1bab1 Mon Sep 17 00:00:00 2001
From: Aulon Mujaj <aulon.mujaj@gmail.com>
Date: Thu, 30 Dec 2021 11:48:13 +0100
Subject: [PATCH 4/5] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index abcb6cf6c..9203855a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. The format
 
 ### Changes
 
+- All text colors follow the chosen theme
 - Use the only blue hover color the Oslo design system has to offer on both green and blue themes
 - Line chart changes colors together with the theme
 

From d201e27d0b54082a7fc3ecedfaf6e0ce1678895f Mon Sep 17 00:00:00 2001
From: Aulon Mujaj <aulon.mujaj@gmail.com>
Date: Thu, 30 Dec 2021 11:54:07 +0100
Subject: [PATCH 5/5] fix: remove console logs

---
 src/util/LineChart/index.js             | 1 -
 src/util/LineChart/linechart-helpers.js | 2 --
 src/views/KeyResultHome.vue             | 4 ----
 3 files changed, 7 deletions(-)

diff --git a/src/util/LineChart/index.js b/src/util/LineChart/index.js
index 252b2e6cd..809d0f55d 100644
--- a/src/util/LineChart/index.js
+++ b/src/util/LineChart/index.js
@@ -41,7 +41,6 @@ export default class LineChart {
   }
 
   render({ obj, period, progressionList, item, colorMode }) {
-    console.log('render: ', colorMode);
     this.colorMode = colorMode;
     this.period = period;
     this.obj = obj;
diff --git a/src/util/LineChart/linechart-helpers.js b/src/util/LineChart/linechart-helpers.js
index 56cc00437..54ec754b4 100644
--- a/src/util/LineChart/linechart-helpers.js
+++ b/src/util/LineChart/linechart-helpers.js
@@ -24,8 +24,6 @@ export function initSvg(svg) {
 
   this.valueArea = this.canvas.append('path').call(styleArea);
 
-  console.log('init1: ', this.colorMode);
-
   this.yAxis = this.canvas.append('g').classed('axis y', true);
   this.valueLine = this.canvas.append('path').call(styleValueLine.bind(this));
   this.target = this.canvas.append('line').classed('target', true);
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index a231996fe..cc6348f6d 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -277,12 +277,10 @@ export default {
       immediate: true,
       async handler(keyResult) {
         if (!keyResult) return;
-        console.log(this.theme);
         this.isLoading = true;
         await this.$bind('progress', db.collection(`keyResults/${keyResult.id}/progress`).orderBy('timestamp', 'desc'));
         this.isLoading = false;
         this.value = keyResult.currentValue || keyResult.startValue || 0;
-        console.log(this.theme);
         this.graph = new LineChart(this.$refs.graph, { colorMode: this.theme });
         this.graph.render({
           obj: this.activeKeyResult,
@@ -295,7 +293,6 @@ export default {
 
     progress() {
       if (this.graph) {
-        console.log(this.theme);
         this.graph.render({
           obj: this.activeKeyResult,
           period: this.activePeriod,
@@ -309,7 +306,6 @@ export default {
       immediate: true,
       handler() {
         if (!this.graph) return;
-        console.log('watch: ', this.theme);
         this.graph.render({
           obj: this.activeKeyResult,
           period: this.activePeriod,