From 09b0ef24dbb5d881e6771471d2eb98ae36461753 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 17 Nov 2014 10:54:40 +0100
Subject: [PATCH] add powered by Zammad

---
 app/assets/images/logotype on dark.svg        | 17 ++++
 app/assets/images/logotype.svg                |  1 -
 .../javascripts/app/views/login.jst.eco       | 98 ++++++++++---------
 app/assets/stylesheets/zammad.css.scss        | 45 +++++++--
 4 files changed, 107 insertions(+), 54 deletions(-)
 create mode 100644 app/assets/images/logotype on dark.svg
 delete mode 100644 app/assets/images/logotype.svg

diff --git a/app/assets/images/logotype on dark.svg b/app/assets/images/logotype on dark.svg
new file mode 100644
index 000000000..ec4360a20
--- /dev/null
+++ b/app/assets/images/logotype on dark.svg	
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="532px" height="96px" viewBox="0 0 532 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
+    <title>logotype on dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="on-dark" sketch:type="MSLayerGroup" transform="translate(118.500000, 41.500000) scale(1, -1) translate(-118.500000, -41.500000) translate(-294.000000, -69.000000)" fill="#FFFFFF">
+            <path d="M293.998,67.0325 L341.8405,136.03625 C343.6805,138.665 345.65175,140.505 345.65175,140.505 L345.65175,140.76875 C345.65175,140.76875 343.023,140.37375 340.39425,140.37375 L306.08925,140.37375 L306.08925,125.91625 L294.65425,125.91625 L294.65425,151.15125 L361.5555,151.15125 L361.5555,142.6075 L313.713,73.4725 C311.873,70.845 309.90175,69.00375 309.90175,69.00375 L309.90175,68.74125 C309.90175,68.74125 312.5305,69.13625 315.15925,69.13625 L351.4355,69.13625 L351.4355,84.12 L362.8705,84.12 L362.8705,58.35875 L293.998,58.35875 L293.998,67.0325 L293.998,67.0325 Z" id="path90" sketch:type="MSShapeGroup"></path>
+            <path d="M393.889375,66.638125 C405.193125,66.638125 412.159375,78.204375 412.159375,88.194375 L412.159375,90.954375 L408.873125,90.954375 C402.826875,90.954375 381.929375,90.690625 381.929375,77.941875 C381.929375,72.028125 386.265625,66.638125 393.889375,66.638125 M407.821875,99.234375 L412.028125,99.234375 L412.028125,101.731875 C412.028125,112.246875 405.981875,115.926875 397.833125,115.926875 C387.318125,115.926875 378.774375,109.486875 378.774375,109.486875 L373.648125,118.555625 C373.648125,118.555625 383.374375,126.441875 398.884375,126.441875 C415.839375,126.441875 424.776875,117.635625 424.776875,100.811875 L424.776875,71.106875 C424.776875,69.135625 425.829375,68.215625 427.668125,68.215625 L434.371875,68.215625 L434.371875,58.358125 L421.096875,58.358125 C415.181875,58.358125 412.816875,61.249375 412.816875,65.586875 L412.816875,66.508125 C412.816875,69.135625 413.341875,70.844375 413.341875,70.844375 L413.079375,70.844375 C413.079375,70.844375 407.295625,56.780625 391.129375,56.780625 C380.088125,56.780625 369.048125,63.221875 369.048125,76.890625 C369.048125,97.789375 396.780625,99.234375 407.821875,99.234375" id="path94" sketch:type="MSShapeGroup"></path>
+            <path d="M441.339375,68.215375 L451.723125,68.215375 L451.723125,112.246625 C451.723125,114.086625 450.671875,115.006625 448.830625,115.006625 L440.683125,115.006625 L440.683125,124.864125 L455.665625,124.864125 C461.316875,124.864125 464.076875,122.366625 464.076875,117.504125 L464.076875,114.086625 C464.076875,111.984125 463.683125,110.275375 463.683125,110.275375 L463.945625,110.275375 C467.231875,118.161625 476.826875,126.441625 487.604375,126.441625 C498.250625,126.441625 504.821875,121.577875 507.056875,110.800375 L507.319375,110.800375 C511.000625,119.081625 520.200625,126.441625 531.109375,126.441625 C545.830625,126.441625 552.796875,117.899125 552.796875,100.944125 L552.796875,68.215375 L563.310625,68.215375 L563.310625,58.357875 L540.046875,58.357875 L540.046875,98.184125 C540.046875,107.514125 538.339375,114.875375 528.349375,114.875375 C515.863125,114.875375 508.764375,102.126625 508.764375,88.982875 L508.764375,68.215375 L519.149375,68.215375 L519.149375,58.357875 L496.015625,58.357875 L496.015625,98.184125 C496.015625,106.857875 494.701875,114.875375 484.449375,114.875375 C471.833125,114.875375 464.471875,101.469125 464.471875,88.456625 L464.471875,68.215375 L474.986875,68.215375 L474.986875,58.357875 L441.339375,58.357875 L441.339375,68.215375 L441.339375,68.215375 Z" id="path98" sketch:type="MSShapeGroup"></path>
+            <path d="M562.26225,68.215375 L572.646,68.215375 L572.646,112.246625 C572.646,114.086625 571.59475,115.006625 569.75475,115.006625 L561.606,115.006625 L561.606,124.864125 L576.5885,124.864125 C582.23975,124.864125 584.99975,122.366625 584.99975,117.504125 L584.99975,114.086625 C584.99975,111.984125 584.606,110.275375 584.606,110.275375 L584.86975,110.275375 C588.156,118.161625 597.751,126.441625 608.5285,126.441625 C619.1735,126.441625 625.746,121.577875 627.97975,110.800375 L628.2435,110.800375 C631.9235,119.081625 641.1235,126.441625 652.03225,126.441625 C666.7535,126.441625 673.71975,117.899125 673.71975,100.944125 L673.71975,68.215375 L684.23475,68.215375 L684.23475,58.357875 L660.971,58.357875 L660.971,98.184125 C660.971,107.514125 659.26225,114.875375 649.27225,114.875375 C636.786,114.875375 629.6885,102.126625 629.6885,88.982875 L629.6885,68.215375 L640.07225,68.215375 L640.07225,58.357875 L616.93975,58.357875 L616.93975,98.184125 C616.93975,106.857875 615.62475,114.875375 605.3735,114.875375 C592.756,114.875375 585.39475,101.469125 585.39475,88.456625 L585.39475,68.215375 L595.90975,68.215375 L595.90975,58.357875 L562.26225,58.357875 L562.26225,68.215375 L562.26225,68.215375 Z" id="path102" sketch:type="MSShapeGroup"></path>
+            <path d="M713.943125,66.638125 C725.246875,66.638125 732.213125,78.204375 732.213125,88.194375 L732.213125,90.954375 L728.926875,90.954375 C722.880625,90.954375 701.983125,90.690625 701.983125,77.941875 C701.983125,72.028125 706.319375,66.638125 713.943125,66.638125 M727.875625,99.234375 L732.081875,99.234375 L732.081875,101.731875 C732.081875,112.246875 726.035625,115.926875 717.885625,115.926875 C707.371875,115.926875 698.828125,109.486875 698.828125,109.486875 L693.703125,118.555625 C693.703125,118.555625 703.428125,126.441875 718.938125,126.441875 C735.893125,126.441875 744.830625,117.635625 744.830625,100.811875 L744.830625,71.106875 C744.830625,69.135625 745.881875,68.215625 747.721875,68.215625 L754.425625,68.215625 L754.425625,58.358125 L741.150625,58.358125 C735.235625,58.358125 732.870625,61.249375 732.870625,65.586875 L732.870625,66.508125 C732.870625,69.135625 733.396875,70.844375 733.396875,70.844375 L733.133125,70.844375 C733.133125,70.844375 727.350625,56.780625 711.183125,56.780625 C700.143125,56.780625 689.101875,63.221875 689.101875,76.890625 C689.101875,97.789375 716.834375,99.234375 727.875625,99.234375" id="path106" sketch:type="MSShapeGroup"></path>
+            <path d="M784.525375,67.821 C794.382875,67.821 803.715375,74.91975 803.715375,91.47975 C803.715375,103.7035 797.536625,115.26975 784.919125,115.26975 C774.272875,115.26975 765.730375,106.726 765.730375,91.611 C765.730375,77.1535 773.484125,67.821 784.525375,67.821 M782.947875,126.441 C798.062875,126.441 803.452875,115.26975 803.452875,115.26975 L803.715375,115.26975 C803.715375,115.26975 803.320375,117.37225 803.320375,120.26475 L803.320375,141.2935 L792.279125,141.2935 L792.279125,151.15225 L816.069125,151.15225 L816.069125,71.10725 C816.069125,69.136 817.120375,68.21475 818.961625,68.21475 L825.664125,68.21475 L825.664125,58.3585 L812.389125,58.3585 C806.475375,58.3585 804.109125,61.24975 804.109125,65.58725 L804.109125,66.50725 C804.109125,68.741 804.502875,70.056 804.502875,70.056 L804.240375,70.056 C804.240375,70.056 798.851625,56.781 781.765375,56.781 C763.889125,56.781 752.717875,70.976 752.717875,91.611 C752.717875,112.77225 765.071625,126.441 782.947875,126.441" id="path110" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/logotype.svg b/app/assets/images/logotype.svg
deleted file mode 100644
index 4e29ad919..000000000
--- a/app/assets/images/logotype.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 85 16" xmlns="http://www.w3.org/2000/svg"><g fill="#f2f5f6" fill-rule="evenodd" transform="translate(0 1)"><path d="m9.306 3.843h-8.753v3.259h1.776v-1.693h3.677c.416 0 .855-.042.855-.042v.042c0 0-.271.23-.585.606l-5.828 7.06v1.337h9v-3.259h-1.776v1.691h-3.906c-.419 0-.835.021-.835.021v-.041c0 0 .271-.209.584-.584l5.787-7.06v-1.336"/><path d="m12.732 11.301c0-2.026 3.321-2.068 4.281-2.068h.524v.438c0 1.588-1.109 3.426-2.905 3.426-1.211 0-1.9-.855-1.9-1.796m2.695-7.708c-2.465 0-4.01 1.253-4.01 1.253l.815 1.441c0 0 1.357-1.023 3.03-1.023 1.297 0 2.257.586 2.257 2.255v.397h-.669c-1.755 0-6.162.23-6.162 3.553 0 2.172 1.754 3.196 3.508 3.196 2.57 0 3.49-2.236 3.49-2.236h.04c0 0-.081.272-.081.69v.146c0 .689.376 1.149 1.316 1.149h2.109v-1.568h-1.065c-.293 0-.46-.145-.46-.458v-4.721c0-2.675-1.42-4.074-4.115-4.074"/><path d="m36.493 3.593c-1.732 0-3.196 1.169-3.78 2.485h-.041c-.355-1.713-1.4-2.485-3.094-2.485-1.712 0-3.236 1.315-3.76 2.568h-.041c0 0 .064-.271.064-.605v-.544c0-.772-.439-1.169-1.338-1.169h-2.381v1.566h1.294c.291 0 .46.147.46.441v6.996h-1.65v1.568h5.347v-1.568h-1.671v-3.216c0-2.069 1.169-4.199 3.175-4.199 1.629 0 1.839 1.274 1.839 2.653v6.33h3.677v-1.568h-1.65v-3.299c0-2.091 1.127-4.116 3.113-4.116 1.587 0 1.859 1.169 1.859 2.653v6.33h3.697v-1.568h-1.671v-5.201c0-2.695-1.108-4.052-3.448-4.052"/><path d="m55.889 3.593c-1.733 0-3.196 1.169-3.781 2.485h-.041c-.355-1.713-1.401-2.485-3.094-2.485-1.712 0-3.236 1.315-3.76 2.568h-.041c0 0 .064-.271.064-.605v-.544c0-.772-.439-1.169-1.338-1.169h-2.381v1.566h1.295c.291 0 .459.147.459.441v6.996h-1.65v1.568h5.347v-1.568h-1.671v-3.216c0-2.069 1.17-4.199 3.176-4.199 1.629 0 1.839 1.274 1.839 2.653v6.33h3.676v-1.568h-1.651v-3.299c0-2.091 1.129-4.116 3.115-4.116 1.586 0 1.857 1.169 1.857 2.653v6.33h3.698v-1.568h-1.671v-5.201c0-2.695-1.108-4.052-3.447-4.052"/><path d="m63.878 11.301c0-2.026 3.32-2.068 4.282-2.068h.523v.438c0 1.588-1.108 3.426-2.904 3.426-1.211 0-1.901-.855-1.901-1.796m2.694-7.708c-2.465 0-4.01 1.253-4.01 1.253l.815 1.441c0 0 1.357-1.023 3.03-1.023 1.294 0 2.257.586 2.257 2.255v.397h-.67c-1.755 0-6.164.23-6.164 3.553 0 2.172 1.755 3.196 3.51 3.196 2.57 0 3.49-2.236 3.49-2.236h.042c0 0-.083.272-.083.69v.146c0 .689.375 1.149 1.316 1.149h2.109v-1.568h-1.065c-.294 0-.46-.145-.46-.458v-4.721c0-2.675-1.421-4.074-4.116-4.074"/><path d="m74.49 9.129c0-2.403 1.357-3.762 3.05-3.762 2 0 2.987 1.84 2.987 3.782 0 2.633-1.482 3.76-3.05 3.76-1.755 0-2.987-1.482-2.987-3.78m8-9.465h-3.781v1.567h1.756v3.343c0 .46.061.793.061.793h-.041c0 0-.855-1.774-3.26-1.774-2.841 0-4.805 2.171-4.805 5.536 0 3.279 1.776 5.536 4.616 5.536 2.719 0 3.574-2.109 3.574-2.109h.042c0 0-.062.208-.062.563v.146c0 .689.376 1.149 1.316 1.149h2.109v-1.568h-1.065c-.293 0-.46-.145-.46-.458v-12.724"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index af584f0a4..8729e8d55 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -1,55 +1,63 @@
-<div class="fullHeight vertical center justified login fit">
-  <p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
+<div class="login">
+  <div class="flex vertical centered">
+    <p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
 
-  <div class="hero-unit">
-    <img class="company-logo" src="<%= @C('image_path') + '/' + 'company-logo.png' %>" alt="<%= @C( 'product_name' ) %>">
-    <form id="login">
-      <div class="form-group">
-        <label for="username"><%- @Ti( 'Username / email' ) %></label>
-        <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
-      </div>
+    <div class="hero-unit">
+      <img class="company-logo" src="<%= @C('image_path') + '/' + 'company-logo.png' %>" alt="<%= @C( 'product_name' ) %>">
+      <form id="login">
+        <div class="form-group">
+          <label for="username"><%- @Ti( 'Username / email' ) %></label>
+          <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
+        </div>
 
-      <div class="form-group">
-        <label for="password"><%- @Ti( 'Password' ) %></label>
-        <input id="password" name="password" type="password" class="form-control"/>
-      </div>
+        <div class="form-group">
+          <label for="password"><%- @Ti( 'Password' ) %></label>
+          <input id="password" name="password" type="password" class="form-control"/>
+        </div>
 
-      <div class="form-controls">
-        <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
+        <div class="form-controls">
+          <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
 
-        <% if @C('user_lost_password'): %>
-          <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+          <% if @C('user_lost_password'): %>
+            <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+          <% end %>
+        </div>
+
+        <% if !_.isEmpty( @auth_providers ): %>
+        <div class="separator">
+          <span class="separator-text"><%- @T( 'or sign in using' ) %></span>
+        </div>
+
+        <div class="auth_providers horizontal stretch">
+          <% for auth_provider in @auth_providers: %>
+            <a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
+              <span class="<%= auth_provider.class %> provider_icon"></span>
+              <span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
+            </a>
+          <% end %>
+        </div>
         <% end %>
-      </div>
+      </form>
+    </div>
 
-      <% if !_.isEmpty( @auth_providers ): %>
-      <div class="separator">
-        <span class="separator-text"><%- @T( 'or sign in using' ) %></span>
-      </div>
-
-      <div class="auth_providers horizontal stretch">
-        <% for auth_provider in @auth_providers: %>
-          <a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
-            <span class="<%= auth_provider.class %> provider_icon"></span>
-            <span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
-          </a>
-        <% end %>
-      </div>
+    <p>
+      <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
+      <% if @C('user_lost_password'): %>
+        <%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
       <% end %>
-    </form>
+    </p>
+
+    <% if @C('user_create_account'): %>
+      <hr>
+      <p>
+        <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
+      </p>
+    <% end %>
   </div>
 
-  <p>
-    <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
-    <% if @C('user_lost_password'): %>
-      <%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
-    <% end %>
-  </p>
-
-  <% if @C('user_create_account'): %>
-    <hr>
-    <p>
-      <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
-    </p>
-  <% end %>
+  <div class="poweredBy">
+    <img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
+    <%- @T("Powered by") %>
+    <img class="logotype" src="<%= @C('image_path') + '/' + 'logotype on dark.svg' %>">
+  </div>
 </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 5fce6278e..a8123e3f8 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -808,6 +808,12 @@ textarea,
   background: hsl(234,10%,19%);
 }
 
+.login {
+  @extend .fit;
+  @extend .vertical;
+  @extend .center;
+}
+
 .login .hero-unit {
   width: 430px;
 }
@@ -822,7 +828,7 @@ textarea,
   .login p {
     margin: 10px 0;
     max-width: 400px;
-    color: hsl(210,8%,42%);
+    color: hsl(233,7%,42%);
     text-align: center;
   }
 
@@ -834,19 +840,42 @@ textarea,
   }
 
   .login p a {
-    color: hsl(210,8%,54%);
+    color: hsl(233,7%,54%);
     text-decoration: underline;
   }
 
-  .subtle-link {
-    color: rgba(0,0,0,.32);
-    text-decoration: underline;
-    @extend .u-clickable;
+.poweredBy {
+  @extend .horizontal;
+  @extend .center;
+  color: hsl(233,7%,26%);
+  padding: 20px 0 10px;
+  margin-top: auto;
+  margin-left: -14px;
+  cursor: default;
+  
+  .logo {
+    height: 40px;
+    margin-right: 8px;
+    margin-top: -11px;
   }
 
-  .subtle-link:hover {
-    color: rgba(0,0,0,.5);
+  .logotype {
+    opacity: 0.095;
+    height: 15px;
+    margin-left: 5px;
+    margin-top: -6px;
   }
+}
+
+.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;