Fix UI according to review feedback:

- change color of overdue filter box
- reduce width of filters section back to 150px
- fix alignment of status boxes

Signed-off-by: Marcel Mager (INST-IOT/ESB) <Marcel.Mager@bosch-si.com>

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/FilterByStatusLayout.java

@@ -107,7 +107,7 @@ public class FilterByStatusLayout extends VerticalLayout implements Button.Click
         buttonLayout.addComponent(registered);
         buttonLayout.setComponentAlignment(registered, Alignment.MIDDLE_CENTER);
         addComponent(buttonLayout);
-        setComponentAlignment(buttonLayout, Alignment.MIDDLE_CENTER);
+        setComponentAlignment(buttonLayout, Alignment.MIDDLE_LEFT);
 
         final HorizontalLayout overdueLayout = new HorizontalLayout();
         final Label overdueLabel = new LabelBuilder().name(i18n.get("label.filter.by.overdue")).buildLabel();
@@ -117,6 +117,7 @@ public class FilterByStatusLayout extends VerticalLayout implements Button.Click
         overdueLayout.addComponent(overdueLabel);
         overdueLayout.setComponentAlignment(overdueLabel, Alignment.MIDDLE_LEFT);
         addComponent(overdueLayout);
+        setComponentAlignment(overdueLayout, Alignment.MIDDLE_LEFT);
 
     }
 

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/utils/SPUIDefinitions.java

@@ -413,7 +413,7 @@ public final class SPUIDefinitions {
     /**
      * Filter by type layout width.
      */
-    public static final float FILTER_BY_TYPE_WIDTH = 190.0F;
+    public static final float FILTER_BY_TYPE_WIDTH = 150.0F;
 
     /**
      * Confirmation jukebox type.

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/filter-status.scss

@@ -14,9 +14,11 @@
   $in-sync-color: $signal-green-color;
   $pending-color: $signal-yellow-color;
   $error-color:   $signal-red-color;
-  $overdue-color: $signal-black-color;
   $registered-color: $signal-light-blue-color;
   
+  //Overdue filter button color
+  $overdue-color: $signal-dark-blue-color;
+
   //Filter by status buttons group alignment
   .target-status-filters {
     @include space-btwn-tag-buttons;

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss

@@ -105,6 +105,7 @@ $status-unknown-color: #d5d5d5;
 $signal-green-color: #6eb553;
 $signal-yellow-color: #ff0;
 $signal-light-blue-color: #3085cb;
+$signal-dark-blue-color: #26547a;
 $signal-red-color: #f00;
 $signal-black-color: #000;
 $signal-orange-color: #ffa500;

hawkbit-ui/src/main/resources/messages.properties

@@ -158,7 +158,7 @@ label.target.id = Controller Id :
 label.target.ip = Controller IP : 
 label.target.security.token = Security token :   
 label.filter.by.status = Filter by Status
-label.filter.by.overdue = Filter by Overdue State
+label.filter.by.overdue = Filter by Overdue
 label.target.controller.attrs = <b>Controller attributes</b>
 label.target.lastpolldate = Last poll :
 label.no.tag.assigned = NO TAG

hawkbit-ui/src/main/resources/messages_de.properties

@@ -157,7 +157,7 @@ label.target.id = Controller Id :
 label.target.ip = Controller IP : 
 label.target.security.token = Security token : 
 label.filter.by.status = Filter by Status
-label.filter.by.overdue = Filter by Overdue State
+label.filter.by.overdue = Filter by Overdue
 label.target.controller.attrs = <b>Controller attributes</b>
 label.target.lastpolldate = Last poll :
 label.no.tag.assigned = NO TAG

hawkbit-ui/src/main/resources/messages_en.properties

@@ -157,7 +157,7 @@ label.target.id = Controller Id :
 label.target.ip = Controller IP : 
 label.target.security.token = Security token :   
 label.filter.by.status = Filter by Status
-label.filter.by.overdue = Filter by Overdue State
+label.filter.by.overdue = Filter by Overdue
 label.target.controller.attrs = <b>Controller attributes</b>
 label.target.lastpolldate = Last poll :
 label.no.tag.assigned = NO TAG