From 1d3c849187412999c2881417339d20f4aec105a0 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 17 Nov 2015 12:10:04 +0100
Subject: [PATCH] admin pages: add page-content and style containing labels

---
 .../app/views/agent_ticket_create.jst.eco     |  58 +++----
 .../views/agent_ticket_view/content.jst.eco   |   4 +-
 .../app/views/calendar/index.jst.eco          | 141 +++++++++---------
 .../app/views/channel/chat.jst.eco            |   3 +-
 .../app/views/channel/form.jst.eco            |   2 +-
 .../app/views/customer_ticket_create.jst.eco  |  29 ++--
 .../app/views/generic/admin/index.jst.eco     |   4 +-
 .../views/generic/admin_level2/index.jst.eco  |   5 +-
 .../app/views/generic/tabs.jst.eco            |  14 +-
 .../javascripts/app/views/maintenance.jst.eco |  45 +++---
 .../app/views/object_manager/index.jst.eco    |  66 ++++----
 .../javascripts/app/views/package.jst.eco     |  70 ++++-----
 .../app/views/profile/avatar.jst.eco          |   2 +-
 .../profile/calendar_subscriptions.jst.eco    |  80 +++++-----
 .../app/views/profile/devices.jst.eco         |   2 +-
 .../app/views/profile/language.jst.eco        |  12 +-
 .../app/views/profile/linked_accounts.jst.eco |  20 +--
 .../app/views/profile/notification.jst.eco    |   2 +-
 .../app/views/profile/password.jst.eco        |  10 +-
 .../javascripts/app/views/report/main.jst.eco |   2 +-
 .../javascripts/app/views/session.jst.eco     |  50 ++++---
 .../app/views/settings/item.jst.eco           |   2 +-
 .../javascripts/app/views/sla/index.jst.eco   |  82 +++++-----
 .../app/views/translation/index.jst.eco       |   6 +-
 app/assets/javascripts/app/views/user.jst.eco |  29 ++--
 app/assets/stylesheets/bootstrap.css          |  22 ---
 app/assets/stylesheets/zammad.scss            |  38 +++--
 27 files changed, 419 insertions(+), 381 deletions(-)

diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
index 8555ca362..1f4804fc9 100644
--- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
@@ -6,41 +6,43 @@
           <h1><%- @T( @head ) %></h1>
         </div>
 
-        <ul class="tabs type-tabs">
+        <div class="page-content">
+          <ul class="tabs type-tabs">
 
-          <li class="tab u-textTruncate" data-type="phone-in">
-            <%- @Icon('received-calls', 'tab-icon') %>
-            <%- @T('Received Call') %>
-          </li>
+            <li class="tab u-textTruncate" data-type="phone-in">
+              <%- @Icon('received-calls', 'tab-icon') %>
+              <%- @T('Received Call') %>
+            </li>
 
-          <li class="tab u-textTruncate" data-type="phone-out">
-            <%- @Icon('outbound-calls', 'tab-icon') %>
-            <%- @T('Outbound Call') %>
-          </li>
+            <li class="tab u-textTruncate" data-type="phone-out">
+              <%- @Icon('outbound-calls', 'tab-icon') %>
+              <%- @T('Outbound Call') %>
+            </li>
 
-         <li class="tab u-textTruncate" data-type="email-out">
-            <%- @Icon('email', 'tab-icon') %>
-            <%- @T('Send Email') %>
-          </li>
-        </ul>
+           <li class="tab u-textTruncate" data-type="email-out">
+              <%- @Icon('email', 'tab-icon') %>
+              <%- @T('Send Email') %>
+            </li>
+          </ul>
 
-        <form role="form" class="ticket-create">
-          <input type="hidden" name="formSenderType"/>
-          <input type="hidden" name="form_id" value="<%= @form_id %>"/>
+          <form role="form" class="ticket-create">
+            <input type="hidden" name="formSenderType"/>
+            <input type="hidden" name="form_id" value="<%= @form_id %>"/>
 
-          <div class="ticket-form-top"></div>
-          <div class="article-form-top"></div>
+            <div class="ticket-form-top"></div>
+            <div class="article-form-top"></div>
 
-          <div class="formset-inset">
-            <div class="ticket-form-middle horizontal two-columns"></div>
-            <div class="ticket-form-bottom"></div>
-          </div>
+            <div class="formset-inset">
+              <div class="ticket-form-middle horizontal two-columns"></div>
+              <div class="ticket-form-bottom"></div>
+            </div>
 
-          <div class="form-controls">
-            <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
-            <button type="submit" class="btn btn--success js-submit align-right"><%- @T('Create') %></button>
-          </div>
-        </form>
+            <div class="form-controls">
+              <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
+              <button type="submit" class="btn btn--success js-submit align-right"><%- @T('Create') %></button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco
index 2e3ca8602..23fdcbf1c 100644
--- a/app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco
@@ -18,4 +18,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
\ No newline at end of file
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/calendar/index.jst.eco b/app/assets/javascripts/app/views/calendar/index.jst.eco
index 2d892a25f..53045e8c6 100644
--- a/app/assets/javascripts/app/views/calendar/index.jst.eco
+++ b/app/assets/javascripts/app/views/calendar/index.jst.eco
@@ -10,77 +10,80 @@
     <a class="btn btn--success js-new"><%- @T('New Calendar') %></a>
   </div>
 </div>
+<div class="page-content">
+  <% if _.isEmpty(@calendars): %>
+  <div class="page-description">
+    <%- @description %>
+  </div>
+  <% end %>
 
-<% if _.isEmpty(@calendars): %>
-<%- @description %>
-<% end %>
-
-<% for calendar in @calendars: %>
-<div class="action" data-id="<%- calendar.id %>">
-  <div class="action-flow action-flow--row">
-    <div class="action-row">
-      <div class="action-flow action-flow--noWrap">
-        <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @T('Last sync at') %>: <%= @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
-          <% if calendar.last_log: %>
-            <%- @Icon('status', 'error inline') %>
-          <% else: %>
-            <%- @Icon('status', 'ok inline') %>
-          <% end %></span><% end %> <%= calendar.name %></h2>
-        <% if calendar.default: %>
-          <div class="action-label">Default</div>
-        <% end %>
+  <% for calendar in @calendars: %>
+  <div class="action" data-id="<%- calendar.id %>">
+    <div class="action-flow action-flow--row">
+      <div class="action-row">
+        <div class="action-flow action-flow--noWrap">
+          <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @T('Last sync at') %>: <%= @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
+            <% if calendar.last_log: %>
+              <%- @Icon('status', 'error inline') %>
+            <% else: %>
+              <%- @Icon('status', 'ok inline') %>
+            <% end %></span><% end %> <%= calendar.name %></h2>
+          <% if calendar.default: %>
+            <div class="action-label">Default</div>
+          <% end %>
+        </div>
+      </div>
+      <% if calendar.last_log: %><div class="action-row"><div class="alert alert--danger"><%= calendar.last_log %></div></div><% end %>
+      <div class="action-row">
+        <div class="label"><%- @T('Time zone') %></div> <%= calendar.timezone %>
+      </div>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Business Hours') %></div>
+        <table class="table table-fluid">
+          <tr>
+            <td><%- @T('Monday') %></td><td><% if !calendar.business_hours['mon'].active || _.isEmpty(calendar.business_hours['mon'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['mon'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Tuesday') %></td><td><% if !calendar.business_hours['tue'].active || _.isEmpty(calendar.business_hours['tue'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['tue'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Wednesday') %></td><td><% if !calendar.business_hours['wed'].active || _.isEmpty(calendar.business_hours['wed'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['wed'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Thursday') %></td><td><% if !calendar.business_hours['thu'].active || _.isEmpty(calendar.business_hours['thu'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['thu'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Friday') %></td><td><% if !calendar.business_hours['fri'].active || _.isEmpty(calendar.business_hours['fri'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['fri'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Saturday') %></td><td><% if !calendar.business_hours['sat'].active || _.isEmpty(calendar.business_hours['sat'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sat'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Sunday') %></td><td><% if !calendar.business_hours['sun'].active || _.isEmpty(calendar.business_hours['sun'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sun'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+        </table>
+      </div>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Holidays') %></div>
+        <table class="table">
+          <% if _.isEmpty(calendar.public_holidays_preview): %>-<% end %>
+          <% for holiday, meta of calendar.public_holidays_preview: %>
+            <tr <% if !meta.active: %>class="is-inactive"<% end %>>
+              <td style="width: 96px"><%- @Tdate(holiday) %>
+              <td><%= meta.summary %>
+          <% end %>
+        </table>
       </div>
     </div>
-    <% if calendar.last_log: %><div class="action-row"><div class="alert alert--danger"><%= calendar.last_log %></div></div><% end %>
-    <div class="action-row">
-      <div class="label"><%- @T('Time zone') %></div> <%= calendar.timezone %>
-    </div>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Business Hours') %></div>
-      <table class="table table-fluid">
-        <tr>
-          <td><%- @T('Monday') %></td><td><% if !calendar.business_hours['mon'].active || _.isEmpty(calendar.business_hours['mon'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['mon'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Tuesday') %></td><td><% if !calendar.business_hours['tue'].active || _.isEmpty(calendar.business_hours['tue'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['tue'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Wednesday') %></td><td><% if !calendar.business_hours['wed'].active || _.isEmpty(calendar.business_hours['wed'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['wed'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Thursday') %></td><td><% if !calendar.business_hours['thu'].active || _.isEmpty(calendar.business_hours['thu'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['thu'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Friday') %></td><td><% if !calendar.business_hours['fri'].active || _.isEmpty(calendar.business_hours['fri'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['fri'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Saturday') %></td><td><% if !calendar.business_hours['sat'].active || _.isEmpty(calendar.business_hours['sat'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sat'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Sunday') %></td><td><% if !calendar.business_hours['sun'].active || _.isEmpty(calendar.business_hours['sun'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sun'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-      </table>
-    </div>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Holidays') %></div>
-      <table class="table">
-        <% if _.isEmpty(calendar.public_holidays_preview): %>-<% end %>
-        <% for holiday, meta of calendar.public_holidays_preview: %>
-          <tr <% if !meta.active: %>class="is-inactive"<% end %>>
-            <td style="width: 96px"><%- @Tdate(holiday) %>
-            <td><%= meta.summary %>
-        <% end %>
-      </table>
+    <div class="action-controls">
+      <% if !calendar.default: %>
+        <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
+        <div class="sla-toggle btn btn--secondary js-default"><%- @T('Set as Default') %></div>
+      <% else: %>
+        <div class="btn btn--danger btn--secondary is-disabled"><%- @T('Delete') %></div>
+      <% end %>
+      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
     </div>
   </div>
-  <div class="action-controls">
-    <% if !calendar.default: %>
-      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
-      <div class="sla-toggle btn btn--secondary js-default"><%- @T('Set as Default') %></div>
-    <% else: %>
-      <div class="btn btn--danger btn--secondary is-disabled"><%- @T('Delete') %></div>
-    <% end %>
-    <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
-  </div>
-</div>
-<% end %>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
index 70517e9e1..c54cd54fd 100644
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -3,7 +3,7 @@
     <h1><%- @T('Chat Widget') %></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
   
   <h2><%- @T('Designer') %></h2>
@@ -197,6 +197,5 @@ $(function() {
     </tbody>
   </table>
 <% end %>
-  <hr>
 
 </div>
diff --git a/app/assets/javascripts/app/views/channel/form.jst.eco b/app/assets/javascripts/app/views/channel/form.jst.eco
index f1ebeca6f..7df684320 100644
--- a/app/assets/javascripts/app/views/channel/form.jst.eco
+++ b/app/assets/javascripts/app/views/channel/form.jst.eco
@@ -3,7 +3,7 @@
     <h1><%- @T('Form') %> <small></small></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
 
   <div class="js-settings"></div>
diff --git a/app/assets/javascripts/app/views/customer_ticket_create.jst.eco b/app/assets/javascripts/app/views/customer_ticket_create.jst.eco
index 48a2ad89b..7dfbee9be 100644
--- a/app/assets/javascripts/app/views/customer_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/customer_ticket_create.jst.eco
@@ -6,24 +6,25 @@
           <h1><%- @T( 'New Ticket' ) %></h1>
         </div>
 
-        <form role="form" class="ticket-create">
-          <input type="hidden" name="form_id" value="<%= @form_id %>"/>
+        <div class="page-content">
+          <form role="form" class="ticket-create">
+            <input type="hidden" name="form_id" value="<%= @form_id %>"/>
 
-          <div class="ticket-form-top"></div>
-          <div class="article-form-top"></div>
+            <div class="ticket-form-top"></div>
+            <div class="article-form-top"></div>
 
-          <div class="formset-inset">
-            <div class="ticket-form-middle horizontal two-columns"></div>
-            <div class="ticket-form-bottom"></div>
-          </div>
+            <div class="formset-inset">
+              <div class="ticket-form-middle horizontal two-columns"></div>
+              <div class="ticket-form-bottom"></div>
+            </div>
 
 
-          <div class="form-controls">
-            <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-            <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
-          </div>
-        </form>
-
+            <div class="form-controls">
+              <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+              <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/generic/admin/index.jst.eco b/app/assets/javascripts/app/views/generic/admin/index.jst.eco
index 69c72e481..25b61658b 100644
--- a/app/assets/javascripts/app/views/generic/admin/index.jst.eco
+++ b/app/assets/javascripts/app/views/generic/admin/index.jst.eco
@@ -14,4 +14,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
\ No newline at end of file
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco b/app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco
index 6afe7eb7d..8a5e25c5c 100644
--- a/app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco
+++ b/app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco
@@ -16,6 +16,7 @@
       <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
     </div>
   </div>
-  <div class="nav-tab-content"></div>
-
+  <div class="page-content">
+    <div class="nav-tab-content"></div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/tabs.jst.eco b/app/assets/javascripts/app/views/generic/tabs.jst.eco
index da97ce037..089c06bb0 100644
--- a/app/assets/javascripts/app/views/generic/tabs.jst.eco
+++ b/app/assets/javascripts/app/views/generic/tabs.jst.eco
@@ -3,9 +3,11 @@
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
 </div>
-<ul class="nav nav-tabs" role="tablist">
-  <% for tab in @tabs: %>
-    <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
-  <% end %>
-</ul>
-<div class="tab-content"></div>
\ No newline at end of file
+<div class="page-content">
+  <ul class="nav nav-tabs" role="tablist">
+    <% for tab in @tabs: %>
+      <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
+    <% end %>
+  </ul>
+  <div class="tab-content"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/maintenance.jst.eco b/app/assets/javascripts/app/views/maintenance.jst.eco
index 665cc55c3..d9f083ca6 100644
--- a/app/assets/javascripts/app/views/maintenance.jst.eco
+++ b/app/assets/javascripts/app/views/maintenance.jst.eco
@@ -1,21 +1,30 @@
-<div class="page-header-title">
-  <h1><%- @T('Maintenance Message') %><small></small></h1>
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T('Maintenance Message') %><small></small></h1>
+  </div>
 </div>
-<form id="maintenanceForm">
-  <div class="form-group">
-    <label for="maintenance-title"><%- @T('Title') %></label>
-    <div class="controls">
-      <input type="text" id="maintenance-title" name="head" class="form-control" required>
+<div class="page-content">
+  <form id="maintenanceForm">
+    <div class="form-group">
+      <label for="maintenance-title"><%- @T('Title') %></label>
+      <div class="controls">
+        <input type="text" id="maintenance-title" name="head" class="form-control" required>
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label for="maintenance-message"><%- @T('Message') %></label>
-    <div class="controls">
-    <textarea id="maintenance-message" name="message" class="form-control" rows="8" required></textarea>
+    <div class="form-group">
+      <label for="maintenance-message"><%- @T('Message') %></label>
+      <div class="controls">
+      <textarea id="maintenance-message" name="message" class="form-control" rows="8" required></textarea>
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label><input name="reload" type="checkbox" value="1"> <%- @T('Reload application') %></label>
-  </div>
-  <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
-</form>
\ No newline at end of file
+    <div class="form-group">
+      <label class="inline-label checkbox-replacement">
+        <input name="reload" type="checkbox" value="1">
+        <%- @Icon('checkbox', 'icon-unchecked') %>
+        <%- @Icon('checkbox-checked', 'icon-checked') %>
+        <span class="label-text"><%- @T('Reload application') %></span>
+      </label>
+    </div>
+    <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/object_manager/index.jst.eco b/app/assets/javascripts/app/views/object_manager/index.jst.eco
index 36a9157bc..6d0e45a53 100644
--- a/app/assets/javascripts/app/views/object_manager/index.jst.eco
+++ b/app/assets/javascripts/app/views/object_manager/index.jst.eco
@@ -7,37 +7,39 @@
     <a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
   </div>
 </div>
-<div class="box box--message">
-  <h2>Database Update required</h2>
-  <p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
-  <div class="box-controls">
-    <div class="btn btn--text btn--secondary js-discard">Discard Changes</div>
-    <div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
-  </div>
-</div>
-<div class="box box--message">
-  <div class="box-progress">
-    <div class="box-progress-title"><%- @T('Updating Database') %></div>
-    <div class="box-progress-body">
-      <progress max="100" value="50"></progress>
+<div class="page-content">
+  <div class="box box--message">
+    <h2>Database Update required</h2>
+    <p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
+    <div class="box-controls">
+      <div class="btn btn--text btn--secondary js-discard">Discard Changes</div>
+      <div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
     </div>
   </div>
-</div>
-<table class="table table-striped table-hover is-disabled">
-  <thead>
-    <tr>
-      <th class=""><%- @T('Display') %></th>
-      <th class=""><%- @T('Name') %></th>
-      <th class=""><%- @T('Type') %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% for item in @items: %>
-    <tr class="<% if item.active is false: %>is-inactive<% end %> js-edit u-clickable" data-id="<%- item.id %>">
-      <td><%= item.display %></td>
-      <td><%= item.name %></td>
-      <td><%= item.data_type %></td>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
\ No newline at end of file
+  <div class="box box--message">
+    <div class="box-progress">
+      <div class="box-progress-title"><%- @T('Updating Database') %></div>
+      <div class="box-progress-body">
+        <progress max="100" value="50"></progress>
+      </div>
+    </div>
+  </div>
+  <table class="table table-striped table-hover is-disabled">
+    <thead>
+      <tr>
+        <th class=""><%- @T('Display') %></th>
+        <th class=""><%- @T('Name') %></th>
+        <th class=""><%- @T('Type') %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% for item in @items: %>
+      <tr class="<% if item.active is false: %>is-inactive<% end %> js-edit u-clickable" data-id="<%- item.id %>">
+        <td><%= item.display %></td>
+        <td><%= item.name %></td>
+        <td><%= item.data_type %></td>
+      </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/package.jst.eco b/app/assets/javascripts/app/views/package.jst.eco
index 094049bec..73818b1ad 100644
--- a/app/assets/javascripts/app/views/package.jst.eco
+++ b/app/assets/javascripts/app/views/package.jst.eco
@@ -2,38 +2,40 @@
   <h1><%- @T( 'Package' ) %> <small><%- @T( 'Management' ) %></small></h1>
 </div>
 
-<!--
-<ul class="nav nav-tabs nav-stacked">
-  <li class=""><a data-type="" ><%- @T( 'Installed' ) %></a></li>
-  <li class=""><a data-type="" ><%- @T( 'Store' ) %></a></li>
-</ul>
--->
-<p>
-  <form action="<%= App.Config.get('api_path') %>/packages" method="post" enctype="multipart/form-data" class="horizontal center">
-    <input type="file" name="file_upload"/>
-    <button class="align-right btn btn--primary" type="submit"><%- @T('Install Package') %></button>
-  </form>
-</p>
+<div class="page-content">
+  <!--
+  <ul class="nav nav-tabs nav-stacked">
+    <li class=""><a data-type="" ><%- @T( 'Installed' ) %></a></li>
+    <li class=""><a data-type="" ><%- @T( 'Store' ) %></a></li>
+  </ul>
+  -->
+  <p>
+    <form action="<%= App.Config.get('api_path') %>/packages" method="post" enctype="multipart/form-data" class="horizontal center">
+      <input type="file" name="file_upload"/>
+      <button class="align-right btn btn--primary" type="submit"><%- @T('Install Package') %></button>
+    </form>
+  </p>
 
-<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th><%- @T('Name') %></th>
-      <th><%- @T('Version') %></th>
-      <th><%- @T('Vendor') %></th>
-      <th><%- @T('State') %></th>
-      <th><%- @T('Action') %></th>
-    </tr>
-  </thead>
-  <tbody>
-  <% for item in @packages: %>
-    <tr data-id="<%= item.id %>">
-      <td><%= item.name %></td>
-      <td><%= item.version %></td>
-      <td><a href="<%- item.url %>" target="_blank"><%= item.vendor %></a></td>
-      <td><%- @T(item.state) %></td>
-      <td><% for action in item.action: %><a href="#" class="action" data-type="<%= action %>"><%- @T(action) %></a><br/><% end %></td>
-    </tr>
-  <% end %>
-  </tbody>
-</table>
\ No newline at end of file
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <th><%- @T('Name') %></th>
+        <th><%- @T('Version') %></th>
+        <th><%- @T('Vendor') %></th>
+        <th><%- @T('State') %></th>
+        <th><%- @T('Action') %></th>
+      </tr>
+    </thead>
+    <tbody>
+    <% for item in @packages: %>
+      <tr data-id="<%= item.id %>">
+        <td><%= item.name %></td>
+        <td><%= item.version %></td>
+        <td><a href="<%- item.url %>" target="_blank"><%= item.vendor %></a></td>
+        <td><%- @T(item.state) %></td>
+        <td><% for action in item.action: %><a href="#" class="action" data-type="<%= action %>"><%- @T(action) %></a><br/><% end %></td>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/avatar.jst.eco b/app/assets/javascripts/app/views/profile/avatar.jst.eco
index 7b80d3110..5fb0042ae 100644
--- a/app/assets/javascripts/app/views/profile/avatar.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar.jst.eco
@@ -9,7 +9,7 @@
     <div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
   </div>
 </div>
-<div class="avatar-gallery">
+<div class="page-content avatar-gallery">
   <% for avatar in @avatars: %>
   <div class="avatar-holder">
     <% if avatar.initial: %>
diff --git a/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco b/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco
index 3127bda9e..76e86cbea 100644
--- a/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco
+++ b/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco
@@ -3,45 +3,47 @@
     <h1><%= @T('Calendar') %></h1>
   </div>
 </div>
-<h2><%= @T('Ticket Subscriptions') %></h2>
+<div class="page-content">
+  <h2><%= @T('Ticket Subscriptions') %></h2>
 
-<p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
+  <p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
 
-<h3><%= @T('URL') %></h3>
-<input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
+  <h3><%= @T('URL') %></h3>
+  <input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
 
-<h3><%= @T('Subscription Settings') %></h3>
-<table class="settings-list">
-  <thead>
-    <tr>
-      <th style="white-space: nowrap;"><%= @T('Status Type') %>
-      <th colspan="2"><%= @T('Options') %>
-      <th width="100%"><%= @T('Direct URL') %>
-    </tr>
-  </thead>
-  <tbody>
-    <% for stateType, options of @preferences: %>
-    <tr>
-      <td style="text-transform: capitalize">
-        <%= @translationTable[stateType] %>
-      <td>
-        <label class="inline-label checkbox-replacement">
-          <input type="checkbox" name="<%= stateType %>/own"<%= if options.own then ' checked' %>>
-          <%- @Icon('checkbox', 'icon-unchecked') %>
-          <%- @Icon('checkbox-checked', 'icon-checked') %>
-          <span class="label-text"><%= @T('own tickets') %></span>
-        </label>
-      <td>
-        <label class="inline-label checkbox-replacement">
-          <input type="checkbox" name="<%= stateType %>/not_assigned"<%= if options.not_assigned then ' checked' %>>
-          <%- @Icon('checkbox', 'icon-unchecked') %>
-          <%- @Icon('checkbox-checked', 'icon-checked') %>
-          <span class="label-text"><%= @T('not assigned tickets') %></span>
-        </label>
-      <td>
-        <div class="btn btn--table btn--text js-showLink"><%= @T('Show') %></div>
-        <input class="form-control form-control--borderless js-select is-hidden" readonly value="<%= @baseurl %>/ical/tickets/<%= stateType %>">
-    </tr>
-    <% end %>
-  </tbody>
-</table>
\ No newline at end of file
+  <h3><%= @T('Subscription Settings') %></h3>
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th style="white-space: nowrap;"><%= @T('Status Type') %>
+        <th colspan="2"><%= @T('Options') %>
+        <th width="100%"><%= @T('Direct URL') %>
+      </tr>
+    </thead>
+    <tbody>
+      <% for stateType, options of @preferences: %>
+      <tr>
+        <td style="text-transform: capitalize">
+          <%= @translationTable[stateType] %>
+        <td>
+          <label class="inline-label checkbox-replacement">
+            <input type="checkbox" name="<%= stateType %>/own"<%= if options.own then ' checked' %>>
+            <%- @Icon('checkbox', 'icon-unchecked') %>
+            <%- @Icon('checkbox-checked', 'icon-checked') %>
+            <span class="label-text"><%= @T('own tickets') %></span>
+          </label>
+        <td>
+          <label class="inline-label checkbox-replacement">
+            <input type="checkbox" name="<%= stateType %>/not_assigned"<%= if options.not_assigned then ' checked' %>>
+            <%- @Icon('checkbox', 'icon-unchecked') %>
+            <%- @Icon('checkbox-checked', 'icon-checked') %>
+            <span class="label-text"><%= @T('not assigned tickets') %></span>
+          </label>
+        <td>
+          <div class="btn btn--table btn--text js-showLink"><%= @T('Show') %></div>
+          <input class="form-control form-control--borderless js-select is-hidden" readonly value="<%= @baseurl %>/ical/tickets/<%= stateType %>">
+      </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/devices.jst.eco b/app/assets/javascripts/app/views/profile/devices.jst.eco
index 6611d1d3c..f15162bb2 100644
--- a/app/assets/javascripts/app/views/profile/devices.jst.eco
+++ b/app/assets/javascripts/app/views/profile/devices.jst.eco
@@ -2,7 +2,7 @@
   <div class="page-header-title"><h1><%- @T( 'Devices' ) %></h1></div>
 </div>
 
-<form>
+<form class="page-content">
 
   <p><%- @T('All computers and browsers that have access to your Zammad appear here.') %></p>
 
diff --git a/app/assets/javascripts/app/views/profile/language.jst.eco b/app/assets/javascripts/app/views/profile/language.jst.eco
index 49e2d3379..efa08d7ec 100644
--- a/app/assets/javascripts/app/views/profile/language.jst.eco
+++ b/app/assets/javascripts/app/views/profile/language.jst.eco
@@ -3,8 +3,10 @@
     <h1><%- @T( 'Language' ) %></h1>
   </div>
 </div>
-<p><%- @T( 'Change your language.' ) %></p>
-<form class="settings-entry horizontal end">
-  <div class="form-item language_item flex"></div>
-  <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
-</form>
\ No newline at end of file
+<div class="page-content">
+  <p><%- @T( 'Change your language.' ) %></p>
+  <form class="settings-entry horizontal end">
+    <div class="form-item language_item flex"></div>
+    <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/linked_accounts.jst.eco b/app/assets/javascripts/app/views/profile/linked_accounts.jst.eco
index 7e540bb7c..8db0bb0c8 100644
--- a/app/assets/javascripts/app/views/profile/linked_accounts.jst.eco
+++ b/app/assets/javascripts/app/views/profile/linked_accounts.jst.eco
@@ -3,12 +3,14 @@
     <h1><%- @T( 'Link Accounts' ) %></h1>
   </div>
 </div>
-<ul>
-  <% for auth_provider in @auth_providers: %>
-    <li> <%- @T( auth_provider.name ) %>
-      <% if !@user['accounts'] || !@user['accounts'][auth_provider.key]: %><a href="<%= auth_provider.url %>"><%- @T('Add') %></a>
-      <% else: %>"<%= @user['accounts'][auth_provider.key]['username'] %>" <a href="#" data-uid="<%= @user['accounts'][auth_provider.key]['uid'] %>" data-provider="<%= auth_provider.key %>" class="js-remove"><%- @T('remove') %></a>
-      <% end %>
-    </li>
-  <% end %>
-</ul>
\ No newline at end of file
+<div class="page-content">
+  <ul>
+    <% for auth_provider in @auth_providers: %>
+      <li> <%- @T( auth_provider.name ) %>
+        <% if !@user['accounts'] || !@user['accounts'][auth_provider.key]: %><a href="<%= auth_provider.url %>"><%- @T('Add') %></a>
+        <% else: %>"<%= @user['accounts'][auth_provider.key]['username'] %>" <a href="#" data-uid="<%= @user['accounts'][auth_provider.key]['uid'] %>" data-provider="<%= auth_provider.key %>" class="js-remove"><%- @T('remove') %></a>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/notification.jst.eco b/app/assets/javascripts/app/views/profile/notification.jst.eco
index 4e55fed73..58e6be734 100644
--- a/app/assets/javascripts/app/views/profile/notification.jst.eco
+++ b/app/assets/javascripts/app/views/profile/notification.jst.eco
@@ -2,7 +2,7 @@
   <div class="page-header-title"><h1><%- @T( 'Notifications' ) %></h1></div>
 </div>
 
-<form>
+<form div class="page-content">
 
   <h3><%- @T( 'Matrix' ) %></h3>
 
diff --git a/app/assets/javascripts/app/views/profile/password.jst.eco b/app/assets/javascripts/app/views/profile/password.jst.eco
index 9311531dd..57265fc07 100644
--- a/app/assets/javascripts/app/views/profile/password.jst.eco
+++ b/app/assets/javascripts/app/views/profile/password.jst.eco
@@ -3,7 +3,9 @@
     <h1><%- @T( 'Change your password' ) %></h1>
   </div>
 </div>
-<form class="settings-entry">
-  <div class="password_item"></div>
-  <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
-</form>
\ No newline at end of file
+<div class="page-content">
+  <form class="settings-entry">
+    <div class="password_item"></div>
+    <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/report/main.jst.eco b/app/assets/javascripts/app/views/report/main.jst.eco
index 4adf5fd60..4d5f9b2db 100644
--- a/app/assets/javascripts/app/views/report/main.jst.eco
+++ b/app/assets/javascripts/app/views/report/main.jst.eco
@@ -11,7 +11,7 @@
 
     <div class="page-main">
       <div class="js-timeRangePicker"></div>
-      <div class="page-content">
+      <div class="well">
 
         <div id="placeholder" class="" style="height:350px;"></div>
         <span class=" muted" id="download-chart" style="font-size: 8px;"></span>
diff --git a/app/assets/javascripts/app/views/session.jst.eco b/app/assets/javascripts/app/views/session.jst.eco
index 9135b1192..329769440 100644
--- a/app/assets/javascripts/app/views/session.jst.eco
+++ b/app/assets/javascripts/app/views/session.jst.eco
@@ -1,27 +1,29 @@
 <div class="page-header-title">
   <h1><%- @T('Sessions') %><small></small></h1>
 </div>
-<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th><%- @T('User') %></th>
-      <th><%- @T('Browser') %></th>
-      <th><%- @T('Location') %></th>
-      <th><%- @T('Age') %></th>
-      <th><%- @T('Update') %></th>
-      <th><%- @T('Action') %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% for session in @sessions: %>
-    <tr>
-      <td><% if session.data.user: %><%= session.data.user.displayName() %><% end %></td>
-      <td title="<%= session.data.user_agent %>"><%= session.data.user_agent %></td>
-      <td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td>
-      <td><%- @humanTime(session.created_at) %></td>
-      <td><%- @humanTime(session.updated_at) %></td>
-      <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a></td>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
\ No newline at end of file
+<div class="page-content">
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <th><%- @T('User') %></th>
+        <th><%- @T('Browser') %></th>
+        <th><%- @T('Location') %></th>
+        <th><%- @T('Age') %></th>
+        <th><%- @T('Update') %></th>
+        <th><%- @T('Action') %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% for session in @sessions: %>
+      <tr>
+        <td><% if session.data.user: %><%= session.data.user.displayName() %><% end %></td>
+        <td title="<%= session.data.user_agent %>"><%= session.data.user_agent %></td>
+        <td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td>
+        <td><%- @humanTime(session.created_at) %></td>
+        <td><%- @humanTime(session.updated_at) %></td>
+        <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a></td>
+      </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/settings/item.jst.eco b/app/assets/javascripts/app/views/settings/item.jst.eco
index 41518a5b7..b4b72d923 100644
--- a/app/assets/javascripts/app/views/settings/item.jst.eco
+++ b/app/assets/javascripts/app/views/settings/item.jst.eco
@@ -1,6 +1,6 @@
 <form class="settings-entry" id="<%= @setting.name %>">
   <h2><%- @T( @setting.title ) %></h2>
-  <p><%- @RichText( @setting.description ) %></p>
+  <p class="help-text"><%- @RichText( @setting.description ) %></p>
   <div class="horizontal end">
     <div class="form-item flex"></div>
     <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
diff --git a/app/assets/javascripts/app/views/sla/index.jst.eco b/app/assets/javascripts/app/views/sla/index.jst.eco
index f7093eb3c..2f7adce89 100644
--- a/app/assets/javascripts/app/views/sla/index.jst.eco
+++ b/app/assets/javascripts/app/views/sla/index.jst.eco
@@ -11,46 +11,50 @@
   </div>
 </div>
 
-<% if _.isEmpty(@slas): %>
-<%- @description %>
-<% end %>
+<div class="page-content">
+  <% if _.isEmpty(@slas): %>
+  <div class="page-description">
+    <%- @description %>
+  </div>
+  <% end %>
 
-<% for sla in @slas: %>
-<div class="action" data-id="<%- sla.id %>">
-  <div class="action-flow action-flow--row">
-    <div class="action-row">
-      <h2><%= sla.name %></h2>
-    </div>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Filter') %></div>
-      <% for rule in sla.rules: %>
-        <%- rule %><br>
-      <% end %>
-    </div>
-    <%- @Icon('arrow-right', 'action-flow-icon') %>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Escalation Times') %></div>
-      <% if sla.first_response_time: %>
-        <%- sla.first_response_time_in_text %> <%- @T('hours') %> - <%- @T('First Response Time') %>
-      <% end %>
-      <% if sla.update_time: %>
+  <% for sla in @slas: %>
+  <div class="action" data-id="<%- sla.id %>">
+    <div class="action-flow action-flow--row">
+      <div class="action-row">
+        <h2><%= sla.name %></h2>
+      </div>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Filter') %></div>
+        <% for rule in sla.rules: %>
+          <%- rule %><br>
+        <% end %>
+      </div>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Escalation Times') %></div>
+        <% if sla.first_response_time: %>
+          <%- sla.first_response_time_in_text %> <%- @T('hours') %> - <%- @T('First Response Time') %>
+        <% end %>
+        <% if sla.update_time: %>
+          <br>
+          <%- sla.update_time_in_text %> <%- @T('hours') %> - <%- @T('Update Time') %>
+        <% end %>
+        <% if sla.solution_time: %>
+          <br>
+          <%- sla.solution_time_in_text %> <%- @T('hours') %> - <%- @T('Solution Time') %>
+        <% end %>
         <br>
-        <%- sla.update_time_in_text %> <%- @T('hours') %> - <%- @T('Update Time') %>
-      <% end %>
-      <% if sla.solution_time: %>
-        <br>
-        <%- sla.solution_time_in_text %> <%- @T('hours') %> - <%- @T('Solution Time') %>
-      <% end %>
-      <br>
+      </div>
+    </div>
+    <div class="action-block">
+      <div class="label"><%- @T('Calendar') %></div>
+      <%= sla.calendar.displayName() %>
+    </div>
+    <div class="action-controls">
+      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
+      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
     </div>
   </div>
-  <div class="action-block">
-    <div class="label"><%- @T('Calendar') %></div>
-    <%= sla.calendar.displayName() %>
-  </div>
-  <div class="action-controls">
-    <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
-    <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
-  </div>
-</div>
-<% end %>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/translation/index.jst.eco b/app/assets/javascripts/app/views/translation/index.jst.eco
index 77c2a1684..ec2b63a9a 100644
--- a/app/assets/javascripts/app/views/translation/index.jst.eco
+++ b/app/assets/javascripts/app/views/translation/index.jst.eco
@@ -9,5 +9,7 @@
     <div class="language"></div>
   </div>
 </div>
-<div class="js-ToDo"></div>
-<div class="js-List"></div>
\ No newline at end of file
+<div class="page-content">
+  <div class="js-ToDo"></div>
+  <div class="js-List"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/user.jst.eco b/app/assets/javascripts/app/views/user.jst.eco
index 4b5ca7c41..749c7c019 100644
--- a/app/assets/javascripts/app/views/user.jst.eco
+++ b/app/assets/javascripts/app/views/user.jst.eco
@@ -10,19 +10,20 @@
     <% end %>
   </div>
 </div>
-
-<div class="searchfield">
-  <%- @Icon('magnifier') %>
-  <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
-</div>
-
-<div class="userSearch horizontal">
-  <div class="userSearch-label"><%- @T('Roles') %>:</div>
-  <div class="tabs tabs-wide">
-    <% for role in @roles: %>
-      <div class="tab" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
-    <% end %>
+<div class="page-content">
+  <div class="searchfield">
+    <%- @Icon('magnifier') %>
+    <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
   </div>
-</div>
 
-<div class="table-overview"></div>
\ No newline at end of file
+  <div class="userSearch horizontal">
+    <div class="userSearch-label"><%- @T('Roles') %>:</div>
+    <div class="tabs tabs-wide">
+      <% for role in @roles: %>
+        <div class="tab" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="table-overview"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
index 11bade091..846daf1d7 100644
--- a/app/assets/stylesheets/bootstrap.css
+++ b/app/assets/stylesheets/bootstrap.css
@@ -4168,28 +4168,6 @@ a.list-group-item-danger.active:focus {
 .embed-responsive.embed-responsive-4by3 {
   padding-bottom: 75%;
 }
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-}
-.well blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, .15);
-}
-.well-lg {
-  padding: 24px;
-  border-radius: 6px;
-}
-.well-sm {
-  padding: 9px;
-  border-radius: 3px;
-}
 .close {
   float: right;
   font-size: 21px;
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 747aa16b1..d08f03b64 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -40,7 +40,7 @@ use {
 }
 
 p {
-  margin: 14px 0;
+  margin: 12px 0;
 
   &.subtle {
     color: hsl(60,1%,74%);
@@ -1793,6 +1793,21 @@ kbd {
   }
 }
 
+.page-content {
+  label,
+  .label {
+    color: hsl(197,18%,70%);
+  }
+  .help-text,
+  .help-block {
+    color: hsl(198,19%,72%);
+  }
+}
+
+.page-description p {
+  color: initial;
+}
+
 .page-body--two-column {
   display: flex;
 }
@@ -1810,13 +1825,6 @@ kbd {
   flex: 1;
 }
 
-.page-content {
-  background: white;
-  border: 1px solid hsl(240,3%,92%);
-  border-radius: 3px;
-  padding: 10px;
-}
-
 .page-loading {
   min-height: 500px;
   display: flex;
@@ -1845,7 +1853,7 @@ kbd {
 }
 
 .help-block:not(:empty) {
-  margin: 6px 2px 10px;
+  margin: 8px 2px 10px;
 }
 
 /* replace music icon with attachment */
@@ -2497,6 +2505,13 @@ footer {
   color: #999999;
 }
 
+.well {
+  background: white;
+  border: 1px solid hsl(240,3%,92%);
+  border-radius: 3px;
+  padding: 10px;
+}
+
 .well-muted {
   background-color: whiteSmoke;
   border: 1px solid #eee;
@@ -6588,6 +6603,10 @@ output {
     color: hsl(198,18%,72%);
   }
 
+  .inline-label {
+    color: inherit;
+  }
+
   .btn--table {
     margin: 0;
   }
@@ -7417,7 +7436,6 @@ output {
   .tab {
     height: 39px;
     padding-top: 11px;
-    color: hsl(199,18%,72%);
     
     &.is-selected {
       background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));