From 336e6120a689c0b864a868dc70f95e4c6ffe1aa0 Mon Sep 17 00:00:00 2001
From: gregoirenovel <log@kinko.fr>
Date: Tue, 4 Apr 2017 14:37:16 +0200
Subject: [PATCH] Add the new header

---
 app/assets/images/header/logo-tps.svg       |  1 +
 app/assets/stylesheets/_constants.scss      |  2 +
 app/assets/stylesheets/header.scss          | 53 +++++++++++++++++++++
 app/views/layouts/_new_header.haml          |  7 +++
 app/views/layouts/new_application.html.haml |  1 +
 5 files changed, 64 insertions(+)
 create mode 100644 app/assets/images/header/logo-tps.svg
 create mode 100644 app/assets/stylesheets/header.scss
 create mode 100644 app/views/layouts/_new_header.haml

diff --git a/app/assets/images/header/logo-tps.svg b/app/assets/images/header/logo-tps.svg
new file mode 100644
index 000000000..fe6557db5
--- /dev/null
+++ b/app/assets/images/header/logo-tps.svg
@@ -0,0 +1 @@
+<svg width="120" height="38" viewBox="0 0 120 38" xmlns="http://www.w3.org/2000/svg"><title>C03A1FFC-B3DD-48D2-8111-A47EEA63E68F</title><g fill="none" fill-rule="evenodd"><path d="M79.856 28V13.456h-5.568v-2.544h14.28v2.544h-5.592V28h-3.12zm10.848-17.088h7.416c1.84 0 3.272.444 4.296 1.332 1.024.888 1.536 2.1 1.536 3.636s-.516 2.752-1.548 3.648c-1.032.896-2.46 1.344-4.284 1.344H93.8V28h-3.096V10.912zm7.056 7.56c1.072 0 1.884-.22 2.436-.66.552-.44.828-1.076.828-1.908 0-.848-.272-1.492-.816-1.932-.544-.44-1.36-.66-2.448-.66H93.8v5.16h3.96zm11.028 9.216c-1.144-.352-2.116-.856-2.916-1.512l1.056-2.256a9.004 9.004 0 0 0 2.604 1.38c.904.296 1.892.444 2.964.444 1.184 0 2.1-.208 2.748-.624.648-.416.972-1 .972-1.752 0-.64-.3-1.132-.9-1.476-.6-.344-1.588-.668-2.964-.972-2.144-.464-3.704-1.064-4.68-1.8-.976-.736-1.464-1.808-1.464-3.216 0-1.008.272-1.904.816-2.688.544-.784 1.316-1.4 2.316-1.848 1-.448 2.156-.672 3.468-.672 1.2 0 2.34.18 3.42.54 1.08.36 1.964.86 2.652 1.5l-1.032 2.256c-1.52-1.216-3.2-1.824-5.04-1.824-1.104 0-1.976.228-2.616.684-.64.456-.96 1.076-.96 1.86 0 .672.284 1.184.852 1.536.568.352 1.54.68 2.916.984 1.424.336 2.584.7 3.48 1.092.896.392 1.584.896 2.064 1.512s.72 1.388.72 2.316c0 1.024-.272 1.916-.816 2.676-.544.76-1.328 1.348-2.352 1.764-1.024.416-2.232.624-3.624.624-1.312 0-2.54-.176-3.684-.528z" fill="#4393F3"/><g stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M24.81 35.032a12.06 12.06 0 0 0 1.597-.658 16.934 16.934 0 0 0 2.885-1.735c6.716-4.68 14.029-13.692 14.029-13.692l-.28-.028S31.888 4.968 23.888 2.852v.012c-2-.56-3.177-.864-5.05-.864C9.455 2 2 9.612 2 19s7.686 17 17.072 17c1.984 0 3.967-.341 5.738-.968z" stroke="#4393F3"/><path d="M42.268 35.032a12.06 12.06 0 0 1-1.597-.658 16.934 16.934 0 0 1-2.885-1.735c-6.716-4.68-14.03-13.692-14.03-13.692l.13-.028S34.888 4.968 42.888 2.852v.012c2-.56 3.328-.864 5.2-.864 9.384 0 16.914 7.612 16.914 17S57.355 36 47.97 36c-1.985 0-3.93-.341-5.7-.968z" stroke="#FF5D60"/></g><path d="M0 0h122v38H0z"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/_constants.scss b/app/assets/stylesheets/_constants.scss
index 119b9eaea..1208ef340 100644
--- a/app/assets/stylesheets/_constants.scss
+++ b/app/assets/stylesheets/_constants.scss
@@ -3,3 +3,5 @@ $light-blue: #F2F6FA;
 
 // Bootstrap constants
 $font-size-base: 16px;
+
+$page-width: 1040px;
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
new file mode 100644
index 000000000..fdc9e81c8
--- /dev/null
+++ b/app/assets/stylesheets/header.scss
@@ -0,0 +1,53 @@
+@import "constants";
+@import "colors";
+@import "mixins";
+@import "typography";
+
+// FIXME: Rename when the header is generalized
+.new-header {
+  @extend %new-type;
+  height: 72px;
+  background-color: #FFFFFF;
+  // FIXME: Delete when the header is generalized
+  margin-top: -60px;
+}
+
+.header-inner-content {
+  width: $page-width;
+  margin: 0 auto;
+}
+
+.header-logo {
+  margin-top: 17px;
+}
+
+$header-login-button-height: 36px;
+$header-login-button-border-size: 1px;
+
+.header-login-button {
+  @include horizontal-padding(16px);
+
+  display: inline-block;
+  height: $header-login-button-height;
+  line-height: $header-login-button-height - (2 * $header-login-button-border-size);
+  border-radius: $header-login-button-height;
+  border: $header-login-button-border-size solid $blue;
+  color: $blue;
+  font-size: 14px;
+  margin-top: 18px;
+
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: $light-blue;
+  }
+
+  &:focus {
+    color: $blue;
+    text-decoration: none;
+  }
+
+  &:hover:focus {
+    color: #FFFFFF;
+  }
+}
diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml
new file mode 100644
index 000000000..1f9049ce7
--- /dev/null
+++ b/app/views/layouts/_new_header.haml
@@ -0,0 +1,7 @@
+.new-header
+  .header-inner-content
+    %img{ src: image_url("header/logo-tps.svg"), class: "header-logo pull-left" }
+
+    = link_to "Connexion", new_user_session_path, :class => "header-login-button pull-right"
+
+    .clear-fix
diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml
index 4241c648d..0dbeee052 100644
--- a/app/views/layouts/new_application.html.haml
+++ b/app/views/layouts/new_application.html.haml
@@ -21,6 +21,7 @@
       - else
         Env Test
 
+    = render partial: "layouts/new_header"
     = render partial: "layouts/flash_messages"
     = yield