From 65db49831d111df123f19307668f8ce5c550b925 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 26 Jun 2015 11:47:28 +0200
Subject: [PATCH] create button layout ref and split subtle button into
 "btn--text btn--secondary" (darker) and "btn--text btn--subtle" (lighter)

---
 .../controllers/agent_ticket_create.js.coffee |  3 +-
 .../app/controllers/layout_ref.js.coffee      | 12 +++
 .../app/views/agent_ticket_create.jst.eco     |  8 +-
 .../app/views/agent_ticket_view/bulk.jst.eco  |  2 +-
 .../app/views/agent_user_create.jst.eco       |  2 +-
 .../app/views/customer_ticket_create.jst.eco  |  4 +-
 .../app/views/getting_started/admin.jst.eco   |  2 +-
 .../app/views/getting_started/channel.jst.eco |  2 +-
 .../app/views/getting_started/email.jst.eco   |  6 +-
 .../email_pre_configured.jst.eco              |  2 +-
 .../app/views/import/index.jst.eco            |  2 +-
 .../javascripts/app/views/import/otrs.jst.eco |  6 +-
 .../app/views/layout_ref/buttons.jst.eco      | 57 +++++++++++
 .../views/layout_ref/import_wizard.jst.eco    |  6 +-
 .../app/views/layout_ref/index.jst.eco        |  1 +
 .../app/views/layout_ref/local_modal.jst.eco  |  2 +-
 .../app/views/layout_ref/setup.jst.eco        | 16 ++--
 .../app/views/layout_ref/sla_modal.jst.eco    |  2 +-
 .../javascripts/app/views/login.jst.eco       |  4 +-
 .../javascripts/app/views/modal.jst.eco       |  2 +-
 .../app/views/object_manager/index.jst.eco    |  2 +-
 .../app/views/password/reset.jst.eco          |  4 +-
 .../app/views/password/reset_change.jst.eco   |  4 +-
 .../app/views/password/reset_failed.jst.eco   |  2 +-
 .../javascripts/app/views/signup.jst.eco      |  4 +-
 app/assets/stylesheets/zammad.css.scss        | 95 +++++++++++--------
 26 files changed, 167 insertions(+), 85 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/layout_ref/buttons.jst.eco

diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
index 7e2659eaa..7397f770e 100644
--- a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
+++ b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
@@ -5,8 +5,7 @@ class App.TicketCreate extends App.Controller
   events:
     'click .type-tabs .tab': 'changeFormType'
     'submit form':           'submit'
-    'click .submit':         'submit'
-    'click .cancel':         'cancel'
+    'click .js-cancel':      'cancel'
 
   constructor: (params) ->
     super
diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 7de2b4b98..2eaba6877 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1501,4 +1501,16 @@ class calendarSubscriptionsRef extends App.ControllerContent
 App.Config.set( 'layout_ref/calendar_subscriptions', calendarSubscriptionsRef, 'Routes' )
 
 
+class ButtonsRef extends App.ControllerContent
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/buttons')
+
+App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
+
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
\ No newline at end of file
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 5212a9fe2..90686b7df 100644
--- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
@@ -36,9 +36,9 @@
             <div class="ticket-form-bottom"></div>
           </div>
 
-          <div class="form-actions horizontal">
-            <a class="subtle-link standalone cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
-            <button type="submit" class="btn btn--success submit align-right"><%- @T('Create') %></button>
+          <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 align-right"><%- @T('Create') %></button>
           </div>
         </form>
       </div>
@@ -147,7 +147,7 @@
             </ul>
             <div class="horizontal">
               <button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
-              <a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
+              <a class="btn btn--text btn--secondary js-cancel align-right u-clickable"><%- @T('Cancel') %></a>
             </div>
           </form>
         </div>
diff --git a/app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
index 831b3129c..b99d8558b 100644
--- a/app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
@@ -8,7 +8,7 @@
     <div class="horizontal">
       <div id="form-ticket-bulk-typeVisibility" class="form-inline"></div>
       <div class="bulkAction-controls align-right">
-        <a class="subtle-link standalone js-cancel"><%- @T( 'Go Back' ) %></a>
+        <a class="btn btn--text btn--secondary js-cancel"><%- @T( 'Go Back' ) %></a>
         <input type="submit" class="btn btn--primary js-submit" value="<%- @T('Update') %>">
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/agent_user_create.jst.eco b/app/assets/javascripts/app/views/agent_user_create.jst.eco
index 00d2373b6..08d301a53 100644
--- a/app/assets/javascripts/app/views/agent_user_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_user_create.jst.eco
@@ -9,7 +9,7 @@
     </div>
     <div class="modal-body" id="form-user"></div>
     <div class="modal-footer">
-      <a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+      <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>
   </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 3d03a2f98..f88259c99 100644
--- a/app/assets/javascripts/app/views/customer_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/customer_ticket_create.jst.eco
@@ -17,8 +17,8 @@
           </div>
 
 
-          <div class="form-actions horizontal">
-            <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+          <div class="form-controls">
+            <a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
             <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
           </div>
         </form>
diff --git a/app/assets/javascripts/app/views/getting_started/admin.jst.eco b/app/assets/javascripts/app/views/getting_started/admin.jst.eco
index 7d68644af..a1bdfc4ad 100644
--- a/app/assets/javascripts/app/views/getting_started/admin.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/admin.jst.eco
@@ -5,7 +5,7 @@
       <h2><%- @T('Administrator Account') %></h2>
       <div class="wizard-body vertical justified js-admin-form"></div>
       <div class="wizard-controls center">
-        <a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
         <button class="btn btn--success align-right"><%- @T( 'Create' ) %></button>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/getting_started/channel.jst.eco b/app/assets/javascripts/app/views/getting_started/channel.jst.eco
index d45621c90..1ecb28a2c 100644
--- a/app/assets/javascripts/app/views/getting_started/channel.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/channel.jst.eco
@@ -17,7 +17,7 @@
         </div>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
         <a class="btn align-right" href="#getting_started/finish"><%- @T( 'Skip' ) %></a>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/getting_started/email.jst.eco b/app/assets/javascripts/app/views/getting_started/email.jst.eco
index 4aa2995a5..ffcf4a432 100644
--- a/app/assets/javascripts/app/views/getting_started/email.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/email.jst.eco
@@ -22,7 +22,7 @@
         </fieldset>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" href="#getting_started/channel"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#getting_started/channel"><%- @T('Go Back') %></a>
         <button class="btn btn--primary align-right"><%- @T( 'Connect' ) %></button>
       </div>
     </div>
@@ -70,7 +70,7 @@
         <div class="base-inbound-settings"></div>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
         <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
       </div>
     </div>
@@ -85,7 +85,7 @@
         <div class="base-outbound-settings"></div>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
         <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco b/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
index 1b6fa7c23..f88cd561f 100644
--- a/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
@@ -13,7 +13,7 @@
         <p class="help-block help-block--center"><%- @T('If you want to use more email adresses, you can configure them later.') %></p>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
         <a class="btn align-right" href="#getting_started/finish"><%- @T( 'Finish' ) %></a>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/import/index.jst.eco b/app/assets/javascripts/app/views/import/index.jst.eco
index f02019027..12cdbf8fa 100644
--- a/app/assets/javascripts/app/views/import/index.jst.eco
+++ b/app/assets/javascripts/app/views/import/index.jst.eco
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/import/otrs.jst.eco b/app/assets/javascripts/app/views/import/otrs.jst.eco
index a789ba295..0b00f7d8e 100644
--- a/app/assets/javascripts/app/views/import/otrs.jst.eco
+++ b/app/assets/javascripts/app/views/import/otrs.jst.eco
@@ -9,7 +9,7 @@
         </p>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
       </div>
     </div>
     <div class="wizard-slide vertical hide" data-slide="otrs-plugin">
@@ -21,7 +21,7 @@
         <a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
         <div class="btn btn--primary align-right hide js-otrs-link"><%- @T('Next') %></div>
       </div>
     </div>
@@ -45,7 +45,7 @@
         </div>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
+        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
         <div class="btn btn--primary align-right hide js-migration-start" data-target="otrs-start-migration"><%- @T('Migrate OTRS Data') %></div>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco b/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
new file mode 100644
index 000000000..2ca8bab23
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
@@ -0,0 +1,57 @@
+<div class="main flex">
+  <h1>Buttons</h1>
+
+  <h2>Normal Buttons</h2>
+  <h3>Default</h3>
+  <div class="btn">Default Button</div>
+  <div class="btn btn--slim">Slim Button</div>
+  <div class="btn is-disabled">Disabled Button</div>
+
+  <h3>Primary</h3>
+  <div class="btn btn--primary">Primary Button</div>
+  <div class="btn btn--secondary">Secondary Button</div>
+
+  <h3>Positive</h3>
+  <div class="btn btn--positive">Positive Button</div>
+  <div class="btn btn--positive btn--secondary">Positive Secondary Button</div>
+
+  <h3>Dangerous</h3>
+  <div class="btn btn--danger">Dangerous Button</div>
+  <div class="btn btn--danger btn--secondary">Dangerous Secondary Button</div>
+
+  <h3>Split</h3>
+  <div class="horizontal">
+    <div class="btn btn--split--first">Split First Button</div>
+    <div class="btn btn--split">Split Button</div>
+    <div class="btn btn--split--last">Split Last Button</div>
+  </div>
+
+
+
+  <h2>Text Buttons</h2>
+
+  <h3>Default</h3>
+  <div class="btn btn--text">Text Button</div>
+  <div class="btn btn--secondary btn--text">Secondary Text Button</div>
+
+  <h3>Positive</h3>
+  <div class="btn btn--positive btn--text">Positive Text Button</div>
+
+  <h3>Dangerous</h3>
+  <div class="btn btn--danger btn--text">Dangerous Text Button</div>
+
+  <h3>Subtle</h3>
+  <div class="btn btn--text btn--secondary">Subtle Button</div>
+
+  <h2>Action Buttons</h2>
+
+  <h3>Default</h3>
+  <div class="btn btn--action">Action Button</div>
+
+  <h3>Split</h3>
+  <div class="horizontal">
+    <div class="btn btn--action btn--split--first">Split First</div>
+    <div class="btn btn--action btn--split">Split</div>
+    <div class="btn btn--action btn--split--last">Split Last</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
index 250a9529a..0b27828a7 100644
--- a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
@@ -16,7 +16,7 @@
         </p>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" data-target="home">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
       </div>
     </div>
     <div class="wizard-slide hide" data-slide="otrs-plugin">
@@ -29,7 +29,7 @@
           <svg class="icon-download"><use xlink:href="#icon-download" /></svg>  Personal Migration Plugin</a>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" data-target="home">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
         <div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
       </div>
     </div>
@@ -52,7 +52,7 @@
         </div>
       </div>
       <div class="wizard-controls horizontal center">
-        <a class="subtle-link" data-target="otrs-plugin">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="otrs-plugin">Go Back</a>
         <div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
       </div>
     </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
index facb2a3e4..483020575 100644
--- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
@@ -4,6 +4,7 @@
 
 
   <ul>
+    <li><a href="#layout_ref/buttons">👇👉👈👆 All the Buttons</a></li>
     <li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li>
     <li><a href="#layout_ref/search_select">Searchable Select</a></li>
     <li><a href="#layout_ref/schedulers">Schedulers</a></li>
diff --git a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
index bb894677f..3dff17cd1 100644
--- a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
@@ -290,7 +290,7 @@
             </fieldset>
           </div>
           <div class="modal-footer">
-            <a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
+            <a class="btn btn--text btn--subtle js-cancel" href="#/">Cancel & Go Back</a>
             <button type="submit" class="btn btn--success js-submit align-right">Update & Back</button>
           </div>
         </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/setup.jst.eco b/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
index 91835b5a4..e4258bc26 100644
--- a/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
@@ -41,7 +41,7 @@
         </fieldset>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" data-target="home">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
         <div class="btn btn--success align-right" data-target="company">Create</div>
       </div>
     </div>
@@ -67,7 +67,7 @@
         </fieldset>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" data-target="home">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
         <div class="btn btn--primary align-right" data-target="channels">Next</div>
       </div>
     </div>
@@ -91,7 +91,7 @@
         </div>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" data-target="company">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="company">Go Back</a>
         <div class="btn align-right" data-target="agent">Skip</div>
       </div>
     </div>
@@ -115,7 +115,7 @@
       </div>
       <div class="wizard-controls center">
         <div class="btn" data-target="channels">Cancel</div>
-        <a class="subtle-link align-right" data-target="channels">Go Back</a>
+        <a class="btn btn--text btn--secondary align-right" data-target="channels">Go Back</a>
         <div class="btn btn--primary" data-target="emailCheck">Connect</div>
       </div>
     </div>
@@ -161,7 +161,7 @@
       </div>
       <div class="wizard-controls center">
         <div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div>
-        <a class="subtle-link align-right" data-target="emailStart">Go Back</a>
+        <a class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</a>
         <div class="btn btn--primary" data-target="inboundCheck">Connect</div>
       </div>
     </div>
@@ -195,8 +195,8 @@
         </fieldset>
       </div>
       <div class="wizard-controls center">
-        <div class="btn btn--subtle js-cancelChannelSetup" data-target="channels">Cancel</div>
-        <div class="btn btn--subtle align-right" data-target="emailStart">Go Back</div>
+        <div class="btn btn--text btn--secondary js-cancelChannelSetup" data-target="channels">Cancel</div>
+        <div class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</div>
         <div class="btn btn--primary" data-target="outboundCheck">Connect</div>
       </div>
     </div>
@@ -263,7 +263,7 @@
         </fieldset>
       </div>
       <div class="wizard-controls center">
-        <a class="subtle-link" data-target="moreChannels">Go Back</a>
+        <a class="btn btn--text btn--secondary" data-target="moreChannels">Go Back</a>
         <div class="btn btn--primary align-right" data-target="setupFinished">Continue</div>
         <div class="btn btn--success js-inviteAgent">Invite</div>
       </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
index 5dd2b5af4..bac83fa89 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
@@ -180,7 +180,7 @@
 </div>
 
 <h2>Schedule</h2>
-<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
+<h3>Business Hours <span class="subtitle">in European Central Time (<a class="btn btn--text btn--subtle" href="#">change</a>)</span></h3>
 <table class="settings-list settings-list--toggleColumn">
   <thead>
     <tr>
diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index 3924d5bc0..46afc8241 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -24,11 +24,11 @@
             <label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
           </div>
 
-          <div class="form-controls">
+          <div class="form-controls horizontal">
             <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
 
             <% if @C('user_lost_password'): %>
-              <a href="#password_reset" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+              <a href="#password_reset" class="btn btn--text btn--secondary align-right"><%- @T( 'Forgot password?' ) %></a>
             <% end %>
           </div>
 
diff --git a/app/assets/javascripts/app/views/modal.jst.eco b/app/assets/javascripts/app/views/modal.jst.eco
index 3783e4784..f3d616901 100644
--- a/app/assets/javascripts/app/views/modal.jst.eco
+++ b/app/assets/javascripts/app/views/modal.jst.eco
@@ -23,7 +23,7 @@
       <div class="modal-footer">
   <% if @cancel: %>
         <div class="modal-leftFooter">
-          <a class="subtle-link standalone js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+          <a class="btn btn--text btn--subtle js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
         </div>
   <% end %>
   <% for button in @centerButtons: %>
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 43c487e20..36a9157bc 100644
--- a/app/assets/javascripts/app/views/object_manager/index.jst.eco
+++ b/app/assets/javascripts/app/views/object_manager/index.jst.eco
@@ -11,7 +11,7 @@
   <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="subtle-link standalone js-discard">Discard Changes</div>
+    <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>
diff --git a/app/assets/javascripts/app/views/password/reset.jst.eco b/app/assets/javascripts/app/views/password/reset.jst.eco
index 7ec97d400..abe4cb693 100644
--- a/app/assets/javascripts/app/views/password/reset.jst.eco
+++ b/app/assets/javascripts/app/views/password/reset.jst.eco
@@ -10,8 +10,8 @@
         <form class="form-password">
           <div class="form-password-item"></div>
           <div class="form-controls">
-            <a class="subtle-link standalone pull-left cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
-            <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
+            <a class="btn btn--text btn--subtle cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
+            <button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
           </div>
         </form>
       <% end %>
diff --git a/app/assets/javascripts/app/views/password/reset_change.jst.eco b/app/assets/javascripts/app/views/password/reset_change.jst.eco
index f8961dabb..a048eff32 100644
--- a/app/assets/javascripts/app/views/password/reset_change.jst.eco
+++ b/app/assets/javascripts/app/views/password/reset_change.jst.eco
@@ -4,8 +4,8 @@
     <form>
       <div class="form-password-change"></div>
       <div class="form-controls">
-        <a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-        <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
+        <a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+        <button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
       </div>
     </form>
   </div>
diff --git a/app/assets/javascripts/app/views/password/reset_failed.jst.eco b/app/assets/javascripts/app/views/password/reset_failed.jst.eco
index 29662121b..83c9f5dc5 100644
--- a/app/assets/javascripts/app/views/password/reset_failed.jst.eco
+++ b/app/assets/javascripts/app/views/password/reset_failed.jst.eco
@@ -3,7 +3,7 @@
     <div class="hero-unit fullscreen-body">
       <h2><%- @T( @head ) %><small></small></h2>
       <p><%- @message %></p>
-      <a href="#password_reset" class="subtle retry">&raquo; <%- @T('try again') %> &laquo;</a>
+      <a href="#password_reset" class="btn btn--text btn--secondary retry">&raquo; <%- @T('try again') %> &laquo;</a>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/signup.jst.eco b/app/assets/javascripts/app/views/signup.jst.eco
index a7e095378..4b5d84ae1 100644
--- a/app/assets/javascripts/app/views/signup.jst.eco
+++ b/app/assets/javascripts/app/views/signup.jst.eco
@@ -4,8 +4,8 @@
       <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
       <form>
         <div class="form-controls">
-          <a class="subtle-link standalone pull-left" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
+          <a class="btn btn--text btn--subtle" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
+          <button class="btn btn--primary submit align-right"><%- @T( 'Create my account' ) %></button>
         </div>
       </form>
     </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 038a81cdb..71bd3480b 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -317,7 +317,7 @@ span[data-tooltip]:hover:before {
     text-transform: uppercase;
     color: hsl(0,0%,60%);
     font-size: 12px;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.05em;
     height: 31px;
     padding: 6px 11px !important;
     display: inline-flex;
@@ -356,10 +356,13 @@ span[data-tooltip]:hover:before {
       background: hsl(145,51%,35%);
     }
 
-    &.btn--secondary,
-    &.btn--secondary:active {
+    &.btn--secondary {
       background: white;
       color: hsl(145,51%,45%);
+      
+      &:active {
+        background: hsl(0,0%,98%);
+      }
     }
   }
 
@@ -370,10 +373,13 @@ span[data-tooltip]:hover:before {
       background: hsl(0,65%,45%);
     }
 
-    &.btn--secondary,
-    &.btn--secondary:active {
+    &.btn--secondary {
       background: white;
       color: hsl(0,65%,55%);
+      
+      &:active {
+        background: hsl(0,0%,98%);
+      }
     }
   }
 
@@ -385,29 +391,44 @@ span[data-tooltip]:hover:before {
     background: none;
     vertical-align: baseline;
     &:active {
-      color: hsl(203,65%,45%);
-    }
-  }
-
-  &.btn--subtle {
-    padding-left: 0;
-    padding-right: 0;
-    border: none;
-    color: rgba(0,0,0,.32);
-    text-decoration: underline;
-    background: none;
-    @extend .u-clickable;
-    
-    &:active {
-      color: rgba(0,0,0,.42);
-    }
-    
-    &:hover {
-      color: rgba(0,0,0,.5);
+      color: hsl(203,65%,40%);
     }
 
-    + .btn:not(.align-right) {
-      margin-left: 20px;
+    &.btn--secondary {
+      color: hsl(0,0%,68%);
+      text-decoration: underline;
+      
+      &:active {
+        color: hsl(0,0%,53%);
+      }
+    }
+
+    &.btn--positive {
+      color: hsl(145,51%,45%);
+      
+      &:active {
+        color: hsl(145,51%,30%);
+        background: none;
+      }
+    }
+
+    &.btn--danger {
+      color: hsl(0,65%,55%);
+      
+      &:active {
+        color: hsl(0,65%,40%);
+        background: none;
+      }
+    }
+
+    &.btn--subtle {
+      text-decoration: underline;
+      letter-spacing: 0.04em;
+      color: hsl(0,0%,85%);
+      
+      &:active {
+        color: hsl(0,0%,75%);
+      }
     }
   }
 
@@ -418,7 +439,7 @@ span[data-tooltip]:hover:before {
   &.btn--split--last {
     border-radius: 0;
     border-left: none;
-    margin-left: 0;
+    margin-left: 0 !important;
   }
   &.btn--split--last {
     border-radius: 0 3px 3px 0;
@@ -433,7 +454,6 @@ span[data-tooltip]:hover:before {
   margin-left: auto;
 }
 
-.subtle-link.align-right ~ .btn,
 .btn.align-right ~ .btn {
   margin-left: 15px;
 }
@@ -1345,16 +1365,6 @@ kbd {
   display: inline-block;
 }
 
-.subtle-link {
-  color: rgba(0,0,0,.32);
-  text-decoration: underline;
-  @extend .u-clickable;
-}
-
-.subtle-link:hover {
-  color: rgba(0,0,0,.5);
-}
-
 ol.tabs {
   list-style: decimal inside;
 }
@@ -1588,7 +1598,13 @@ form {
 
 .form-controls {
   @extend .clearfix;
+  display: flex;
+  align-items: center;
   margin-top: 10px;
+  
+  .btn + .btn:not(.align-right) {
+    margin-left: 20px;
+  }
 }
 
 form a.standalone {
@@ -3944,9 +3960,6 @@ footer {
   .newTicket .form-control:not(:focus):not(.focus) {
     border-color: hsl(0,0%,90%);
   }
-  .newTicket .subtle-link {
-    color: hsl(0,0%,89%);
-  }
   .newTicket .article-form-top {
     margin-top: 15px;
   }