Replace header with toolbar

2 files changed, 19 insertions, 13 deletions

diff --git a/web/app.css b/web/app.css
index 60a84bb..d99324a 100644
--- a/web/app.css
+++ b/web/app.css
@@ -16,6 +16,10 @@ body.x-border-layout-ct, div.x-border-layout-ct {
     background-color: #bbbbbb !important;
 }
 
+.x-toolbar-default {
+    background-color: #f5f5f5 !important;
+}
+
 .x-tree-icon {
     display: none !important;
 }
diff --git a/web/app/view/State.js b/web/app/view/State.js
index 681428f..593c5e6 100644
--- a/web/app/view/State.js
+++ b/web/app/view/State.js
@@ -26,20 +26,22 @@ Ext.define('Traccar.view.State', {
     controller: 'state',
     store: 'Attributes',
 
-    header: {
-        xtype: 'header',
-        title: Strings.stateTitle,
+    tbar: {
         items: [{
-                xtype: 'tbfill'
-            }, {
-                xtype: 'button',
-                disabled: true,
-                handler: 'onAliasEditClick',
-                reference: 'aliasEditButton',
-                glyph: 'xf040@FontAwesome',
-                tooltip: Strings.sharedEdit,
-                tooltipType: 'title'
-            }]
+            xtype: 'tbtext',
+            html: Strings.stateTitle,
+            baseCls: 'x-panel-header-title-default'
+        }, {
+            xtype: 'tbfill'
+        }, {
+            xtype: 'button',
+            disabled: true,
+            handler: 'onAliasEditClick',
+            reference: 'aliasEditButton',
+            glyph: 'xf040@FontAwesome',
+            tooltip: Strings.sharedEdit,
+            tooltipType: 'title'
+        }]
     },
 
     listeners: {