From 324b306f60347bf3c187277d7313174cc4454e16 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 25 May 2022 14:27:23 +0200
Subject: [PATCH 01/18] Remove redundant col divs

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/crud/asset.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index a46afaff3..2cf9b4f59 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -118,7 +118,6 @@ <h3>Location</h3>
         </fieldset>
     </form>
 
-    <div class="col-sm-3"></div>
     <div class="sensors-asset">
 
         <h3>All sensors for this asset</h3>
@@ -155,7 +154,6 @@ <h3>All sensors for this asset</h3>
             </tbody>
         </table>
     </div>
-    <div class="col-sm-3"></div>
 
 
 </div>

From 120bf4a1a652f2fbb6681f363ae379ebc779d59d Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 25 May 2022 14:34:16 +0200
Subject: [PATCH 02/18] Add green hover effect to match red hover effect

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 4 ++++
 flexmeasures/ui/templates/crud/asset.html   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index e46295b37..a6d5bf39a 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -15,6 +15,7 @@
     --light-gray: #eeeeee;
     --gray: #bbb;
     --red: #c21431;
+    --green: #14c231;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -1137,6 +1138,9 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 
 }
 
+.header-action-button #create-asset-button:hover {
+    color: var(--green);
+}
 .header-action-button #delete-asset-button:hover {
     color: var(--red);
 }
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index 2cf9b4f59..3070a5577 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -17,7 +17,7 @@
         {% if user_is_admin %}
         <div class="col-sm-1">
             <form action="/assets/new" method="get" style="float:right">
-                <button class="btn btn-sm btn-responsive btn-success" type="submit">Create new asset</button>
+                <button id="create-asset-button" class="btn btn-sm btn-responsive btn-success" type="submit">Create new asset</button>
             </form>
         </div>
         <div class="col-sm-1">

From 28c5fb02e91d28c44c5879b8311c901c11a7475e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 25 May 2022 14:38:39 +0200
Subject: [PATCH 03/18] Improve contrast against secondary color

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index a6d5bf39a..b986f2094 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -153,7 +153,7 @@ p.error {
 }
 
 .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
-    color: var(--white) !important;
+    color: var(--black) !important;
     background-color: var(--secondary-color) !important;
 }
 

From 4a5965673de85b176b5bd1d6751f4d8d1e425a70 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 25 May 2022 14:57:17 +0200
Subject: [PATCH 04/18] Get rid of serifs in menu

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index b986f2094..ec31ac899 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -179,7 +179,7 @@ p.error {
 
 .navbar-default .navbar-nav>li>a {
     color: var(--white);
-    font: 500 14px/14px 'Poppins';
+    font: 500 14px/14px;
 }
 
 .navbar-brand {

From a7908ba7a6b043280407e3e9d3846d3246b42883 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 15:54:22 +0200
Subject: [PATCH 05/18] Improve contrast against secondary color

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index ec31ac899..d1c417d74 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -113,7 +113,7 @@ p.error {
 .flashes.alert.alert-info {
     background: var(--secondary-color);
     border: none;
-    color: var(--white);
+    color: var(--black);
     text-align: center;
     margin-top: 20px;
     text-transform: uppercase;
@@ -1352,6 +1352,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .sensors-asset td a:hover {
+    color: var(--black);
     background: var(--secondary-color);
 }
 

From 545cda53052d7dbd7d4af9893d22f0c3aedaac0e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 16:05:00 +0200
Subject: [PATCH 06/18] Use secondary color for currently selected data table
 page

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index d1c417d74..00a5c1001 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -760,8 +760,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTa
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-    color: var(--primary-hover-color) !important;
-    background: var(--primary-transparent);
+    color: var(--black) !important;
+    background: var(--secondary-color);
     box-shadow: none !important;
 }
 

From a995f0e02605a74974663e44ee2396db3376e880 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 16:05:18 +0200
Subject: [PATCH 07/18] Use secondary hover color on hover

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 00a5c1001..7df55a1ea 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -759,11 +759,16 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTa
     box-shadow: none;
 }
 
-body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
     color: var(--black) !important;
     background: var(--secondary-color);
     box-shadow: none !important;
 }
+body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+    color: var(--black) !important;
+    background: var(--secondary-hover-color);
+    box-shadow: none !important;
+}
 
 @media screen and (max-width: 640px) {
     .dataTables_wrapper .dataTables_filter {

From c02cf59d6b4f90ab49e56bda96032dd81a55f494 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 16:06:54 +0200
Subject: [PATCH 08/18] Split css lines to clarify

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 7df55a1ea..1d19ce408 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -753,7 +753,9 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .c
     color: var(--secondary-color) !important;
 }
 
-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
     color: var(--light-gray) !important;
     background: var(--gray) !important;
     box-shadow: none;

From a4b98e5a31a93a5c471a5b6a5ba8be39eb38bed5 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 17:19:03 +0200
Subject: [PATCH 09/18] Synchronize css of navigation components

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 84 +++++++++++++--------
 1 file changed, 54 insertions(+), 30 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 1d19ce408..8afba8d38 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -3,6 +3,7 @@
 */
 
 :root {
+    /* colors by name */
     --primary-color: #1a3443;
     --primary-border-color: #102029;
     --primary-hover-color: #152b38;
@@ -16,6 +17,18 @@
     --gray: #bbb;
     --red: #c21431;
     --green: #14c231;
+
+    /* colors by function */
+    --nav-default-color: var(--white);
+    --nav-default-background-color: var(--primary-color);
+    --nav-hover-color: var(--secondary-hover-color);
+    --nav-hover-background-color: var(--primary-hover-color);
+    --nav-open-color: var(--secondary-color);
+    --nav-open-background-color: var(--primary-color);
+    --nav-current-color: var(--black);
+    --nav-current-background-color: var(--secondary-color);
+    --nav-current-hover-color: var(--black);
+    --nav-current-hover-background-color: var(--secondary-hover-color);
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -147,19 +160,26 @@ p.error {
 }
 
 .navbar-default {
-    background-color: var(--primary-color);
+    background-color: var(--nav-default-background-color);
     border: none;
     z-index: 999991;
 }
 
-.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
-    color: var(--black) !important;
-    background-color: var(--secondary-color) !important;
+.navbar-default .navbar-nav>.active>a {
+    color: var(--nav-current-color) !important;
+    background-color: var(--nav-current-background-color) !important;
+}
+.navbar-default .navbar-nav>.active>a:focus,
+.navbar-default .navbar-nav>.active>a:hover {
+    color: var(--nav-current-hover-color) !important;
+    background-color: var(--nav-current-hover-background-color) !important;
 }
 
-.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
-    background-color: var(--secondary-color) !important;
-    color: var(--white) !important;
+.nav .open>a,
+.nav .open>a:focus,
+.nav .open>a:hover {
+    background-color: var(--nav-open-background-color) !important;
+    color: var(--nav-open-color) !important;
     border: none;
 }
 
@@ -167,9 +187,10 @@ p.error {
     border: none !important;
 }
 
-.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
-    color: var(--secondary-color);
-    background-color: transparent;
+.navbar-default .navbar-nav>li>a:focus,
+.navbar-default .navbar-nav>li>a:hover {
+    color: var(--nav-hover-color);
+    background-color: var(--nav-hover-background-color);
     transition: .4s;
     -webkit-transition: .4s;
     -moz-transition: .4s;
@@ -178,7 +199,7 @@ p.error {
 }
 
 .navbar-default .navbar-nav>li>a {
-    color: var(--white);
+    color: var(--nav-default-color);
     font: 500 14px/14px;
 }
 
@@ -239,26 +260,29 @@ p.error {
         -ms-transition: .3s;
         -o-transition: .3s;
     }
-    
-    .navbar-default .dropdown-menu a:hover {
-        letter-spacing: 1px;
-    }
+
 }
 
 @media (max-width: 767px) {
     .navbar-default .navbar-nav .open .dropdown-menu>li>a {
-        color: var(--white);
+        color: var(--nav-default-color);
         transition: .4s;
         -webkit-transition: .4s;
         -moz-transition: .4s;
         -ms-transition: .4s;
         -o-transition: .4s;
+    }
 }
 
-    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
-        color: var(--secondary-color);
-        background-color: transparent;
-    }
+.navbar-default .navbar-nav .open .dropdown-menu,
+.navbar-default .navbar-nav .open .dropdown-menu>li>a {
+    color: var(--nav-default-color);
+    background-color: var(--nav-default-background-color);
+}
+.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
+.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
+    color: var(--nav-hover-color);
+    background-color: var(--nav-hover-background-color);
 }
 
 #navbar-logo {
@@ -733,10 +757,10 @@ table.dataTable.no-footer {
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button {
-    color: var(--secondary-color) !important;
+    color: var(--nav-default-color) !important;
     border: none !important;
     border-radius: 4px !important;
-    background: var(--primary-color);
+    background: var(--nav-default-background-color);
     transition: .3s;
     -webkit-transition: .3s;
     -moz-transition: .3s;
@@ -749,26 +773,26 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button {
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .current):hover {
-    background: var(--primary-hover-color) !important;
-    color: var(--secondary-color) !important;
+    color: var(--nav-hover-color) !important;
+    background: var(--nav-hover-background-color) !important;
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
     color: var(--light-gray) !important;
     background: var(--gray) !important;
     box-shadow: none;
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
-    color: var(--black) !important;
-    background: var(--secondary-color);
+    color: var(--nav-current-color) !important;
+    background: var(--nav-current-background-color);
     box-shadow: none !important;
 }
 body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-    color: var(--black) !important;
-    background: var(--secondary-hover-color);
+    color: var(--nav-current-hover-color) !important;
+    background: var(--nav-current-hover-background-color);
     box-shadow: none !important;
 }
 

From aebeaebe3b67f90d2d2d8f05f37ef0df3f73f5e5 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 13 Jun 2022 17:24:38 +0200
Subject: [PATCH 10/18] Synchronize css of creation/deletion buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 18 ++++++++++++------
 flexmeasures/ui/templates/crud/asset.html   |  4 ++--
 flexmeasures/ui/templates/crud/assets.html  |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 8afba8d38..b8ffd3978 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -29,6 +29,8 @@
     --nav-current-background-color: var(--secondary-color);
     --nav-current-hover-color: var(--black);
     --nav-current-hover-background-color: var(--secondary-hover-color);
+    --create-color: var(--green);
+    --delete-color: var(--red);
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -1169,11 +1171,11 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 }
 
-.header-action-button #create-asset-button:hover {
-    color: var(--green);
+.create-button:hover {
+    color: var(--create-color);
 }
-.header-action-button #delete-asset-button:hover {
-    color: var(--red);
+.delete-button:hover {
+    color: var(--delete-color);
 }
 
 @media screen and (max-width: 767px) {
@@ -1304,15 +1306,19 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .new-asset-form input[type="submit"] {
-    background: var(--primary-color);
+    color: var(--nav-default-color);
+    background: var(--nav-default-background-color);
     border-radius: 4px;
-    color: var(--white);
     padding: 12px 35px !important;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
 }
+.new-asset-form input[type="submit"]:hover {
+    color: var(--create-color) !important;
+    background: var(--nav-hover-background-color) !important;
+}
 
 /* ---- End New asset form ---- */
 
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index 3070a5577..82d65a0ce 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -17,12 +17,12 @@
         {% if user_is_admin %}
         <div class="col-sm-1">
             <form action="/assets/new" method="get" style="float:right">
-                <button id="create-asset-button" class="btn btn-sm btn-responsive btn-success" type="submit">Create new asset</button>
+                <button class="btn btn-sm btn-responsive btn-success create-button" type="submit">Create new asset</button>
             </form>
         </div>
         <div class="col-sm-1">
             <form action="/assets/delete_with_data/{{ asset.id }}/" method="get" style="float:right">
-                <button id="delete-asset-button" class="btn btn-sm btn-responsive btn-danger" type="submit">Delete this
+                <button id="delete-asset-button" class="btn btn-sm btn-responsive btn-danger delete-button" type="submit">Delete this
                     asset</button>
             </form>
             <script>
diff --git a/flexmeasures/ui/templates/crud/assets.html b/flexmeasures/ui/templates/crud/assets.html
index 23d3878c7..cd7561dee 100644
--- a/flexmeasures/ui/templates/crud/assets.html
+++ b/flexmeasures/ui/templates/crud/assets.html
@@ -22,7 +22,7 @@ <h2>All assets owned by account {{account.name}}</h2>
                         <th class="text-right no-sort">
                             {% if user_is_admin %}
                             <form action="/assets/new" method="get">
-                                <button class="btn btn-sm btn-responsive btn-success" type="submit">Create new
+                                <button class="btn btn-sm btn-responsive btn-success create-button" type="submit">Create new
                                     asset</button>
                             </form>
                             {% endif %}

From 093104a092f90be6f66020f1f0b8c98ef24bcd73 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:00:46 +0200
Subject: [PATCH 11/18] Synchronize css of other buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 50 +++++++++++++--------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index b8ffd3978..7fe2cf5d0 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -78,6 +78,19 @@ small {
     display: inline-block;
 }
 
+button.btn {
+    color: var(--nav-default-color);
+    background: var(--nav-default-background-color);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+button.btn:hover {
+    color: var(--nav-hover-color);
+    background: var(--nav-hover-background-color);
+}
+
 form button[type="submit"] {
     background: var(--primary-color) !important;
     outline: none !important;
@@ -649,9 +662,9 @@ i.icon-wind:hover:before {
 }
 
 .leaflet-bar a {
-    background-color: var(--primary-color);
+    color: var(--nav-default-color);
+    background-color: var(--nav-default-background-color);
     border-bottom: var(--primary-border-color) 1px solid !important;
-    color: var(--white);
     transition: .4s;
     -webkit-transition: .4s;
     -moz-transition: .4s;
@@ -664,8 +677,8 @@ i.icon-wind:hover:before {
 }
 
 .leaflet-bar a:hover {
-    background-color: var(--primary-hover-color);
-    color: var(--white);
+    color: var(--nav-hover-color);
+    background-color: var(--nav-hover-background-color);
 }
 
 .leaflet-marker-popup {
@@ -674,12 +687,12 @@ i.icon-wind:hover:before {
 
 .leaflet-control-layers {
     box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-    background: var(--primary-color);
+    background: var(--nav-default-background-color);
     border-radius: 5px;
 }
 
 .leaflet-control-layers-overlays label span {
-    color: var(--white);
+    color: var(--nav-default-color);
     transition: .4s;
     -webkit-transition: .4s;
     -moz-transition: .4s;
@@ -688,7 +701,7 @@ i.icon-wind:hover:before {
 }
 
 .leaflet-control-layers-overlays label span:hover {
-    color: var(--secondary-color);
+    color: var(--nav-hover-color);
 }
 
 .leaflet-bar a.leaflet-disabled {
@@ -760,9 +773,9 @@ table.dataTable.no-footer {
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button {
     color: var(--nav-default-color) !important;
+    background: var(--nav-default-background-color);
     border: none !important;
     border-radius: 4px !important;
-    background: var(--nav-default-background-color);
     transition: .3s;
     -webkit-transition: .3s;
     -moz-transition: .3s;
@@ -779,11 +792,11 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .c
     background: var(--nav-hover-background-color) !important;
 }
 
-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
-    color: var(--light-gray) !important;
-    background: var(--gray) !important;
+    color: var(--gray) !important;
+    background: var(--light-gray) !important;
     box-shadow: none;
 }
 
@@ -1172,10 +1185,10 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .create-button:hover {
-    color: var(--create-color);
+    color: var(--create-color) !important;
 }
 .delete-button:hover {
-    color: var(--delete-color);
+    color: var(--delete-color) !important;
 }
 
 @media screen and (max-width: 767px) {
@@ -1247,7 +1260,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .asset-form button[type="submit"]:hover {
-    background: var(--secondary-color) !important;
+    color: var(--nav-hover-color);
+    background: var(--nav-hover-background-color) !important;
 }
 
 .bk-canvas {
@@ -1371,8 +1385,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 .sensors-asset td a {
     padding: 10px 20px;
-    color: var(--white);
-    background: var(--primary-color);
+    color: var(--nav-default-color);
+    background: var(--nav-default-background-color);
     white-space: nowrap;
     line-height: 14px;
     text-decoration: none;
@@ -1389,8 +1403,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .sensors-asset td a:hover {
-    color: var(--black);
-    background: var(--secondary-color);
+    color: var(--nav-hover-color);
+    background: var(--nav-hover-background-color);
 }
 
 .sensors-asset td {

From 48a6e06d5522118334fdf9b0db7ad69e88499db6 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:01:40 +0200
Subject: [PATCH 12/18] Synchronize css ordering

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 7fe2cf5d0..70f90fc41 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -139,9 +139,9 @@ p.error {
 }
 
 .flashes.alert.alert-info {
+    color: var(--black);
     background: var(--secondary-color);
     border: none;
-    color: var(--black);
     text-align: center;
     margin-top: 20px;
     text-transform: uppercase;

From 4901bea9771a1623eff7df510d2d62597c6274d9 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:06:24 +0200
Subject: [PATCH 13/18] Better contrast in timezone warning

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 70f90fc41..b1f2a4f7b 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -151,8 +151,8 @@ p.error {
 #tzwarn {
     margin-top: 20px;
     margin-bottom: 20px;
-    background: var(--secondary-transparent);
-    color: var(--secondary-hover-color);
+    color: var(--secondary-color);
+    background: var(--primary-color);
     border: none;
 }
 

From 894c844f5fa131f6f8acfb3c7374f2f9ef50f5fd Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:09:29 +0200
Subject: [PATCH 14/18] Fix alt descriptions in header and footer

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/base.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
index 06fbeec13..7d5e65041 100644
--- a/flexmeasures/ui/templates/base.html
+++ b/flexmeasures/ui/templates/base.html
@@ -73,7 +73,7 @@
                         {% if menu_logo %}
                             <img id="navbar-logo" src="{{menu_logo}}"/>
                         {% else %}
-                            <img src="https://artwork.lfenergy.org/projects/flexmeasures/horizontal/white/flexmeasures-horizontal-white.svg" alt="flex-measures"/>
+                            <img src="https://artwork.lfenergy.org/projects/flexmeasures/horizontal/white/flexmeasures-horizontal-white.svg" alt="FlexMeasures"/>
                         {% endif %}
                         </span>
                     </a>
@@ -387,7 +387,7 @@ <h3>Icons from <a href="https://www.flaticon.com/" title="Flaticon">Flaticon</a>
                 {% endblock technical_info %}
             </div>
             <div>
-                <a href="https://flexmeasures.io/"><img src="https://artwork.lfenergy.org/projects/flexmeasures/icon/white/flexmeasures-icon-white.svg" alt="flex-measures" class="footer-logo"></a>
+                <a href="https://flexmeasures.io/"><img src="https://artwork.lfenergy.org/projects/flexmeasures/icon/white/flexmeasures-icon-white.svg" alt="FlexMeasures" class="footer-logo"></a>
             </div>
         </div>
     </footer>

From 74b43aef9740a3ac7227302850fde0a582ad32e4 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:35:13 +0200
Subject: [PATCH 15/18] Synchronize styling of page titles and user action
 buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css   | 11 +----
 .../ui/templates/admin/logged_in_user.html    | 44 +++++++++----------
 flexmeasures/ui/templates/crud/assets.html    |  2 +-
 flexmeasures/ui/templates/crud/users.html     |  7 +--
 .../ui/templates/views/new_dashboard.html     |  4 --
 5 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index b1f2a4f7b..95465211b 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1436,7 +1436,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 .user-action-button {
     width: auto;
     padding-right: 0 ;
-    margin-top: 20px;
+    margin-top: 0px;
     margin-bottom: 0px;
 }
 
@@ -1453,10 +1453,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     -o-transition: .4s;
 }
 
-.user-action-button button:hover {
-    background: var(--primary-hover-color) !important;
-}
-
 @media screen and (max-width: 575.98px) {
 
     .user-action-button {
@@ -1473,10 +1469,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 /* ---- Users Page ---- */
 
-.user-overview {
-    padding-left: 15px;
-}
-
 .user-data-table {
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -1484,6 +1476,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .user-data-table>div table {
+    margin-top: 30px !important;
     box-shadow: 0 0 10px var(--primary-transparent);
     border-radius: 6px;
     -webkit-border-radius: 6px;
diff --git a/flexmeasures/ui/templates/admin/logged_in_user.html b/flexmeasures/ui/templates/admin/logged_in_user.html
index e74ab7a6c..9d89c139d 100644
--- a/flexmeasures/ui/templates/admin/logged_in_user.html
+++ b/flexmeasures/ui/templates/admin/logged_in_user.html
@@ -6,32 +6,32 @@
 
 {% block divs %}
 
-
-    <h2 class="user-overview"> Overview for logged-in user: {{ logged_in_user.username }} </h2>
-
     <div class="container-fluid">
-        <div class="row">
-        <div class="user-action-button col-sm-1">
-            <form action="/logout" method="get">
-                <button class="btn btn-sm btn-responsive btn-info" type="submit">Log out</button>
-            </form>
-        </div>
-        <div class="user-action-button col-sm-2">
-            <form action="/users/reset_password_for/{{ logged_in_user.id }}" method="get">
-                <button class="btn btn-sm btn-responsive btn-info" type="submit">Send password reset instructions</button>
-            </form>
-        </div>
-        <div class="user-action-button col-sm-9">
-            {% if user_is_admin %}
-            <form action="/users" method="get">
-                <button class="btn btn-sm btn-responsive btn-info" type="submit">List active users</button>
-            </form>
-            {% endif %}
+        <div class="row header-action-button">
+            <div class="user-action-button col-sm-1">
+                <form action="/logout" method="get">
+                    <button class="btn btn-sm btn-responsive btn-info" type="submit">Log out</button>
+                </form>
+            </div>
+            <div class="user-action-button col-sm-2">
+                <form action="/users/reset_password_for/{{ logged_in_user.id }}" method="get">
+                    <button class="btn btn-sm btn-responsive btn-info" type="submit">Send password reset instructions</button>
+                </form>
+            </div>
+            <div class="user-action-button col-sm-9">
+                {% if user_is_admin %}
+                <form action="/users" method="get">
+                    <button class="btn btn-sm btn-responsive btn-info" type="submit">List active users</button>
+                </form>
+                {% endif %}
+            </div>
         </div>
-        <div class="clearfix"></div>
 
-        <div class="user-data-table row" style="margin-top: 4em;">
+
+        <div class="user-data-table row">
             <div class="col-sm-12">
+                <h3 class="user-overview">User overview</h3>
+                <small>Logged-in user: {{ logged_in_user.username }}</small>
                 <table class="table">
                     <tbody>
                         <tr>
diff --git a/flexmeasures/ui/templates/crud/assets.html b/flexmeasures/ui/templates/crud/assets.html
index cd7561dee..3d6134b3e 100644
--- a/flexmeasures/ui/templates/crud/assets.html
+++ b/flexmeasures/ui/templates/crud/assets.html
@@ -10,7 +10,7 @@
     <div class="row">
         <div class="col-sm-12">
 
-            <h2>All assets owned by account {{account.name}}</h2>
+            <h3>All assets owned by account {{account.name}}</h3>
             <table class="table table-striped table-responsive paginate">
                 <thead>
                     <tr>
diff --git a/flexmeasures/ui/templates/crud/users.html b/flexmeasures/ui/templates/crud/users.html
index a7dc0167b..5e0bb71ad 100644
--- a/flexmeasures/ui/templates/crud/users.html
+++ b/flexmeasures/ui/templates/crud/users.html
@@ -8,10 +8,11 @@
 
     <div class="container-fluid">
 
-        <!-- a toggle for including inactive users, if wanted -->
-        <h2>All {% if not include_inactive %}active {% endif %}users</h2>
-
         <div class="row">
+            <div class="col-sm-12">
+                <!-- a toggle for including inactive users, if wanted -->
+                <h3>All {% if not include_inactive %}active {% endif %}users</h3>
+            </div>
             <form class="col-sm-12 text-right form-inline" role="form" target="" method="get" id="user-list-options">
                 <div class="checkbox">
                     <label>
diff --git a/flexmeasures/ui/templates/views/new_dashboard.html b/flexmeasures/ui/templates/views/new_dashboard.html
index e9609a3fb..8f1b689b8 100644
--- a/flexmeasures/ui/templates/views/new_dashboard.html
+++ b/flexmeasures/ui/templates/views/new_dashboard.html
@@ -9,10 +9,6 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-sm-12">
-            <h3>
-                {% if user_is_admin %}{{ FLEXMEASURES_PLATFORM_NAME }} ― asset status:
-                {% else %}Status of my assets:{% endif%}
-            </h3>
 
             <div id="mapid"></div>
 

From 0c98896a9084a69590b4d44c1ccc68f4b3ddc37f Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 10:48:01 +0200
Subject: [PATCH 16/18] Headers 1, 2 and 3 get the same font size for now (we
 had been using them inconsistently across pages)

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 95465211b..c49fa1589 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -56,7 +56,7 @@ h1 {
     }
 }
 
-h3 {
+h1, h2, h3 {
     margin: 0;
     padding-top: 10px;
     font-size: 30px;

From 304d3ea612cbe9c6ca91eca058dacba44950b905 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 14 Jun 2022 11:03:26 +0200
Subject: [PATCH 17/18] Synchronize litepicker styling

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 25 +++++++++------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index c49fa1589..d2c40bf25 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -898,15 +898,14 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     border-radius: 4px;
     border: 1px solid #ddd;
     font-size: 13px;
-    color: var(--white);
-    background: var(--primary-color);
+    color: var(--nav-default-color);
+    background: var(--nav-default-background-color);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
 }
 
-
 .container__predefined-ranges {
     padding: 20px;
     margin-right: 10px;
@@ -942,8 +941,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .litepicker .container__days .day-item.is-today {
+    color: var(--nav-current-color);
     background: var(--secondary-transparent);
-    color: var(--secondary-color);
 }
 
 .litepicker .container__days .day-item {
@@ -971,14 +970,14 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 .litepicker .container__days .day-item:hover {
     border: none;
-    background: var(--primary-transparent);
     color: var(--primary-color);
+    background: var(--primary-transparent);
 }
 
 .litepicker .container__days .day-item.is-in-range {
+    color: var(--nav-current-color);
     background-color: var(--secondary-transparent);
     border-radius: 0;
-    color: var(--primary-color);
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -ms-border-radius: 0;
@@ -994,8 +993,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .litepicker .container__days .day-item.is-end-date {
-    color: var(--primary-color);
-    background-color: var(--secondary-color);
+    color: var(--nav-current-color);
+    background-color: var(--nav-current-background-color);
     border-radius: 0 50% 50% 0;
     -webkit-border-radius: 0 50% 50% 0;
     -moz-border-radius: 0 50% 50% 0;
@@ -1004,8 +1003,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .litepicker .container__days .day-item.is-start-date {
-    color: var(--primary-color);
-    background-color: var(--secondary-color);
+    color: var(--nav-current-color);
+    background-color: var(--nav-current-background-color);
     border-radius: 50% 0 0 50%;
     -webkit-border-radius: 50% 0 0 50%;
     -moz-border-radius: 50% 0 0 50%;
@@ -1048,11 +1047,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 .litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button:hover {
     cursor: pointer;
     opacity: 1;
-    transform: translatex(5px);
-    -webkit-transform: translatex(5px);
-    -moz-transform: translatex(5px);
-    -ms-transform: translatex(5px);
-    -o-transform: translatex(5px);
+    color: var(--nav-hover-color);
 }
 
 .litepicker .container__months .month-item-header .button-next-month:hover>svg {

From beebf41e64dc057d0c2938d46e11c6b2c580b9a1 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 16 Jun 2022 09:15:10 +0200
Subject: [PATCH 18/18] Changelog entry under 0.10.1

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 documentation/changelog.rst | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 62d6036c9..04f2b1bd3 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -15,6 +15,12 @@ Bugfixes
 Infrastructure / Support
 ----------------------
 
+v0.10.1 | June XX, 2022
+===========================
+
+Bugfixes
+-----------
+* Fix some UI styling regressions in e.g. color contrast and hover effects [see `PR #441 <http://www.github.com/FlexMeasures/flexmeasures/pull/441>`_]
 
 v0.10.0 | May 08, 2022
 ===========================