From 3080889d26d1f0edf8f8ab3a7d809a202dcac1f1 Mon Sep 17 00:00:00 2001
From: Felix Claessen <30658763+flix6x@users.noreply.github.com>
Date: Thu, 16 Jun 2022 09:25:29 +0200
Subject: [PATCH] Backport #441: Fix UI regressions from 0.10.0 (#441)

Fix some UI styling regressions in e.g. color contrast and hover effects.

* Remove redundant col divs

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Add green hover effect to match red hover effect

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Improve contrast against secondary color

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Get rid of serifs in menu

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Improve contrast against secondary color

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Use secondary color for currently selected data table page

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Use secondary hover color on hover

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Split css lines to clarify

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize css of navigation components

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize css of creation/deletion buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize css of other buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize css ordering

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Better contrast in timezone warning

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Fix alt descriptions in header and footer

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize styling of page titles and user action buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>

* 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>

* Synchronize litepicker styling

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Changelog entry under 0.10.1

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 documentation/changelog.rst                   |   6 +
 flexmeasures/ui/static/css/flexmeasures.css   | 192 +++++++++++-------
 .../ui/templates/admin/logged_in_user.html    |  44 ++--
 flexmeasures/ui/templates/base.html           |   4 +-
 flexmeasures/ui/templates/crud/asset.html     |   6 +-
 flexmeasures/ui/templates/crud/assets.html    |   4 +-
 flexmeasures/ui/templates/crud/users.html     |   7 +-
 .../ui/templates/views/new_dashboard.html     |   4 -
 8 files changed, 156 insertions(+), 111 deletions(-)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 5c4e15688..5ccb1d837 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -2,6 +2,12 @@
 FlexMeasures Changelog
 **********************
 
+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
 ===========================
diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 8c318ca09..f8448958d 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;
@@ -15,6 +16,21 @@
     --light-gray: #eeeeee;
     --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);
+    --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');
@@ -40,7 +56,7 @@ h1 {
     }
 }
 
-h3 {
+h1, h2, h3 {
     margin: 0;
     padding-top: 10px;
     font-size: 30px;
@@ -62,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;
@@ -110,9 +139,9 @@ p.error {
 }
 
 .flashes.alert.alert-info {
+    color: var(--black);
     background: var(--secondary-color);
     border: none;
-    color: var(--white);
     text-align: center;
     margin-top: 20px;
     text-transform: uppercase;
@@ -122,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;
 }
 
@@ -146,19 +175,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(--white) !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;
 }
 
@@ -166,9 +202,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;
@@ -177,8 +214,8 @@ p.error {
 }
 
 .navbar-default .navbar-nav>li>a {
-    color: var(--white);
-    font: 500 14px/14px 'Poppins';
+    color: var(--nav-default-color);
+    font: 500 14px/14px;
 }
 
 .navbar-brand {
@@ -238,26 +275,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 {
@@ -622,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;
@@ -637,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 {
@@ -647,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;
@@ -661,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 {
@@ -732,10 +772,10 @@ table.dataTable.no-footer {
 }
 
 body .dataTables_wrapper .dataTables_paginate .paginate_button {
-    color: var(--secondary-color) !important;
+    color: var(--nav-default-color) !important;
+    background: var(--nav-default-background-color);
     border: none !important;
     border-radius: 4px !important;
-    background: var(--primary-color);
     transition: .3s;
     -webkit-transition: .3s;
     -moz-transition: .3s;
@@ -748,19 +788,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, .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;
+.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(--gray) !important;
+    background: var(--light-gray) !important;
     box-shadow: none;
 }
 
-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);
+body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
+    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(--nav-current-hover-color) !important;
+    background: var(--nav-current-hover-background-color);
     box-shadow: none !important;
 }
 
@@ -851,15 +898,14 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
     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;
@@ -895,8 +941,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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 {
@@ -924,14 +970,14 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 
 .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;
@@ -947,8 +993,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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;
@@ -957,8 +1003,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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%;
@@ -1001,11 +1047,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 .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 {
@@ -1130,8 +1172,11 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 
 }
 
-.header-action-button #delete-asset-button:hover {
-    color: var(--red);
+.create-button:hover {
+    color: var(--create-color) !important;
+}
+.delete-button:hover {
+    color: var(--delete-color) !important;
 }
 
 @media screen and (max-width: 767px) {
@@ -1203,7 +1248,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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 {
@@ -1262,15 +1308,19 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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 ---- */
 
@@ -1323,8 +1373,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 
 .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;
@@ -1341,7 +1391,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .sensors-asset td a:hover {
-    background: var(--secondary-color);
+    color: var(--nav-hover-color);
+    background: var(--nav-hover-background-color);
 }
 
 .sensors-asset td {
@@ -1373,7 +1424,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 .user-action-button {
     width: auto;
     padding-right: 0 ;
-    margin-top: 20px;
+    margin-top: 0px;
     margin-bottom: 0px;
 }
 
@@ -1390,10 +1441,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
     -o-transition: .4s;
 }
 
-.user-action-button button:hover {
-    background: var(--primary-hover-color) !important;
-}
-
 @media screen and (max-width: 575.98px) {
 
     .user-action-button {
@@ -1410,10 +1457,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 
 /* ---- Users Page ---- */
 
-.user-overview {
-    padding-left: 15px;
-}
-
 .user-data-table {
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -1421,6 +1464,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .da
 }
 
 .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/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>
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index a46afaff3..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 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>
@@ -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>
diff --git a/flexmeasures/ui/templates/crud/assets.html b/flexmeasures/ui/templates/crud/assets.html
index 23d3878c7..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>
@@ -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 %}
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>