From b491f1d02c73525f9e6bb049091e4606c8e4e978 Mon Sep 17 00:00:00 2001
From: Derek Meulmeester <derek.meulmeester@shopify.com>
Date: Sat, 16 Sep 2017 09:25:15 -0400
Subject: [PATCH] Update CSS to match polaris

---
 app/views/shopify_app/sessions/new.html.erb | 171 +++++++++++++-------
 1 file changed, 111 insertions(+), 60 deletions(-)
diff --git a/app/views/shopify_app/sessions/new.html.erb b/app/views/shopify_app/sessions/new.html.erb
index 98f5286bc..802650e7b 100644
--- a/app/views/shopify_app/sessions/new.html.erb
+++ b/app/views/shopify_app/sessions/new.html.erb
@@ -3,92 +3,143 @@
 <head>
   <title>Shopify App — Installation</title>
 
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <style>
-    html, body { padding: 0; margin: 0; }
+    * {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
 
     body {
-      font-family: "ProximaNovaLight", "Helvetica Neue", Helvetica, Arial, sans-serif;
-      background-color: #f2f7fa;
+      padding: 2.5em 0;
+      color: #212b37;
+      font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
     }
 
-    h1 {
-      font-weight: 300;
-      font-size: 40px;
-      margin-bottom: 10px;
+    header {
+      text-align: center;
     }
 
-    .subhead {
-      font-size: 17px;
-      line-height: 32px;
-      font-weight: 300;
-      color: #969A9C;
+    .logo {
+      font-size: 1.5em;
     }
 
-    input {
-      width: 300px;
-      height: 50px;
-      padding: 10px;
-      border: 1px solid #479CCf;
-      color: #575757;
-      background-color: #ffffff;
-      box-sizing: border-box;
-      border-radius: 4px 0 0 4px;
-      font-size: 18px;
-      float: left;
+    .logo > svg {
+      width: 170px;
+      margin: 0 auto;
     }
 
-    button {
-      color: #ffffff;
-      background-color: #3793cb;
-      width: 100px;
-      height: 50px;
-      padding: 10px 20px 10px 20px;
-      box-sizing: border-box;
-      border: none;
-      text-shadow: 0 1px 0 #3188bc;
-      font-size: 18px;
-      cursor: pointer;
-      border-radius: 0 4px 4px 0;
-      float: right;
+    .container {
+      width: 100%;
+      text-align: center;
+      margin-left: auto;
+      margin-right: auto;
     }
 
-    button:hover {
-      background-color: #479CCf;
+    @media screen and (min-width: 530px) {
+      .container {
+        width: 530px;
+      }
     }
 
-    form {
-      display: block;
+    .title {
+      font-size: 1.5em;
+      margin: 2em auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      word-break: break-all;
     }
 
-    .container {
+    .title > img {
+      margin-right: 10px;
+      min-width: 48px;
+      border-radius: 3px;
+    }
+
+    .subtitle {
+      font-size: 0.8em;
+      font-weight: 500;
+      color: #64737f;
+      line-height: 2em;
+    }
+
+    input.marketing-input {
+      width: 100%;
+      height: 52px;
+      padding: 0 15px;
+      box-shadow: 0 0 0 1px #ddd;
+      border: 0;
+      border-radius: 5px;
+      background-color: #fff;
+      font-size: 1em;
+      margin-bottom: 15px;
+    }
+
+    input.marketing-input:focus {
+      color: #000;
+      outline: 0;
+      box-shadow: 0 0 0 2px #5e6ebf;
+    }
+
+    button.marketing-button {
+      display: inline-block;
+      width: 100%;
+      padding: 1.0625em 1.875em;
+      background-color: #5e6ebf;
+      color: #fff;
+      font-weight: 700;
+      font-size: 1em;
       text-align: center;
-      margin-top: 100px;
-      padding: 20px;
+      outline: none;
+      border: 0 solid transparent;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    button.marketing-button:hover {
+      background: linear-gradient(to bottom, #5c6ac4, #4959bd);
+      border-color: #3f4eae;
     }
 
-    .container__form {
-      width: 400px;
-      margin: auto;
+    button.marketing-button:focus {
+      box-shadow: 0 0 0.1875em 0.1875em rgba(94,110,191,0.5);
+      background-color: #223274;
+      color: #fff;
     }
   </style>
 </head>
 <body>
 
+  <header role="banner">
+    <a href="https://www.shopify.com/partners" target="_blank" rel="noopener noreferrer" class="logo">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 857 143"><title>Shopify Partners logo</title>
+        <path fill="#231F20" d="M547.6 54.7c-7.9 0-15.4 5.1-20.7 13.3h-.2l1.9-12h-5.1c-.7 5.5-1.9 12.6-3.3 20.5l-11.9 63.4h5.3l4.7-25.7h.2c2.2 1.2 6.1 2.6 11.9 2.6 19 0 32.7-22.6 32.7-42.7 0-9.8-4.3-19.4-15.5-19.4zM530.8 112c-4.8 0-8.8-1.2-11.5-3.3l3.8-20.5c3.3-18 14.4-28.8 22.8-28.8 8.8 0 11.5 7.9 11.5 15 .1 15.3-10.8 37.6-26.6 37.6zm37.8-13.4c0 10.7 5.5 18.1 14.5 18.1 7.8 0 15.4-4.1 22.2-17.2h.2c-.9 6.7-1.6 12.4-1.5 16h5.2c-.2-6.3.5-15.9 2.6-27l6.3-32c-3.1-1.1-7.8-1.7-12-1.7-22.9-.1-37.5 23.5-37.5 43.8zm39.2-16.5C604.9 97.5 594 112 584.4 112c-8.1 0-10.3-6.9-10.2-14.8.1-18.7 13.5-37.8 30.6-37.8 3.7 0 5.8.4 7.2.9l-4.2 21.8zM637.2 69h-.2c.7-5.2 1.2-9.2 1.6-13h-4.8c-.5 5.2-1.4 11.9-2.9 19.5l-7.6 40.1h5.3l5.7-30.3c2.5-13 11.2-24.8 19-24.8.9 0 1.5 0 2 .1l1.1-5.7c-.6 0-1.5-.1-2.2-.1-7.4-.1-13.4 6.2-17 14.2zm35.7 42.9c-3.7 0-5.3-2.1-5.3-5.6 0-3.2.5-6.3 1.2-10.3l6.6-35.5h14l1-4.6h-14l2.6-13-6 2.4-2 10.7h-8.7l-.9 4.6h8.6l-6.7 35.5c-1 4.6-1.4 7.7-1.4 10.9 0 5 2.7 9.7 9.8 9.7 2.1 0 4.2-.4 5.8-.9l-.4-4.3c-.9.3-2.2.4-4.2.4zM724 54.7c-8.2 0-15.6 4.7-20.8 13.4h-.2l1.7-12.2h-5.1c-.5 4.6-1.2 10.4-2.6 17.5l-7.9 42h5.3l5.8-31.6c2.6-14.4 13.9-24.3 21.8-24.3 7.3 0 9.8 4.5 9.8 10.7 0 3.1-.4 6-.9 8.7l-6.9 36.6h5.3l6.8-36.6c.6-3.2 1.1-6.2 1.1-9.2.1-11.3-7.3-15-13.2-15zm51 0c-17 0-29 22.4-29 39.6 0 11.4 4.8 22.3 18.7 22.3 7.4 0 13.1-2.4 16.2-4.5l-1.6-4.2c-2.7 1.6-7.2 4-13.8 4-6.3 0-10.9-3.3-13-10-1.2-4.3-1.1-12.2-.5-14.9 19.5.1 36.8-4.1 36.8-19.2.1-6.8-4-13.1-13.8-13.1zm8.3 13.3c0 11.8-14.9 14.4-30.4 14.3 3.7-12.9 11.9-22.8 21.1-22.8 5.6 0 9.3 3 9.3 8.4v.1zm40.6-7.5l1.1-5.7c-.6 0-1.5-.1-2.2-.1-7.4 0-13.4 6.3-17 14.3h-.2c.7-5.2 1.2-9.2 1.6-13h-4.8c-.5 5.2-1.4 11.9-2.9 19.5l-7.6 40.1h5.3l5.7-30.3c2.5-13 11.2-24.8 19-24.8.9-.1 1.5-.1 2 0zm22.4-1.1c3.5 0 6.6 1.4 8.4 2.5l2-4.6c-1.7-1.4-5.7-2.6-9.8-2.6-10.5 0-18.1 7.6-18.1 16.9 0 5.6 3.2 10.9 9.2 14.8 5.6 3.6 8.1 7.2 8.1 13.1 0 6.8-5.3 12.4-13.1 12.4-4.3 0-8.3-1.7-10.4-3.3l-2.1 4.5c2 1.6 6.7 3.6 12 3.6 10.3 0 19.1-6.6 19.1-18.6 0-6.1-3.5-11.5-9.2-15.4-4.8-3.3-8.1-6.4-8.1-12 0-6.2 4.8-11.3 12-11.3zM173 79.4c-4.3-2.3-6.5-4.3-6.5-7 0-3.4 3.1-5.6 7.9-5.6 5.6 0 10.6 2.3 10.6 2.3l3.9-12s-3.6-2.8-14.2-2.8c-14.8 0-25 8.5-25 20.4 0 6.8 4.8 11.9 11.2 15.6 5.2 2.9 7 5 7 8.1 0 3.2-2.6 5.8-7.4 5.8-7.1 0-13.9-3.7-13.9-3.7l-4.2 12s6.2 4.2 16.7 4.2c15.2 0 26.2-7.5 26.2-21-.2-7.4-5.7-12.5-12.3-16.3zm60.7-25.3c-7.5 0-13.4 3.6-17.9 9l-.2-.1 6.5-34h-16.9l-16.5 86.6h16.9l5.6-29.6c2.2-11.2 8-18.1 13.4-18.1 3.8 0 5.3 2.6 5.3 6.3 0 2.3-.2 5.2-.7 7.5l-6.4 33.9h16.9l6.6-35c.7-3.7 1.2-8.1 1.2-11.1 0-9.6-5-15.4-13.8-15.4zm52.1 0c-20.4 0-33.9 18.4-33.9 38.9 0 13.1 8.1 23.7 23.3 23.7 20 0 33.5-17.9 33.5-38.9.1-12.2-7-23.7-22.9-23.7zm-8.3 49.6c-5.8 0-8.2-4.9-8.2-11.1 0-9.7 5-25.5 14.2-25.5 6 0 8 5.2 8 10.2 0 10.4-5 26.4-14 26.4zm74.7-49.6c-11.4 0-17.9 10.1-17.9 10.1h-.2l1-9.1h-15c-.7 6.1-2.1 15.5-3.4 22.5l-11.8 62h16.9l4.7-25.1h.4s3.5 2.2 9.9 2.2c19.9 0 32.9-20.4 32.9-41-.1-11.4-5.1-21.6-17.5-21.6zm-16.3 49.8c-4.4 0-7-2.5-7-2.5l2.8-15.8c2-10.6 7.5-17.6 13.4-17.6 5.2 0 6.8 4.8 6.8 9.3 0 11-6.5 26.6-16 26.6zm57.9-74.1c-5.4 0-9.7 4.3-9.7 9.8 0 5 3.2 8.5 8 8.5h.2c5.3 0 9.8-3.6 9.9-9.8.1-5-3.3-8.5-8.4-8.5zm-23.7 85.7H387l11.6-60.1h-17.1m60.2-.1h-11.8l.6-2.8c1-5.8 4.4-10.9 10.1-10.9 3 0 5.4.9 5.4.9l3.3-13.3s-2.9-1.5-9.2-1.5c-6 0-12 1.7-16.6 5.6-5.8 4.9-8.5 12-9.8 19.2l-.5 2.8h-7.9l-2.5 12.8h7.9l-9 47.4h16.9l9-47.4h11.7l2.4-12.8zm25.4 41.4h-.3c-.3-4.7-4.2-41.3-4.2-41.3h-17.8l10.2 55.1c.2 1.2.1 2-.4 2.8-2 3.8-5.3 7.5-9.2 10.2-3.2 2.3-6.8 3.8-9.6 4.8l4.7 14.4c3.4-.7 10.6-3.6 16.6-9.2 7.7-7.2 14.9-18.4 22.2-33.6l20.8-44.5h-17.7s-10.6 26.7-15.3 41.3z"></path>
+        <path fill="#95BF46" d="M107.5 27.1c-.1-.7-.7-1.1-1.2-1.1s-11.2-.8-11.2-.8-7.4-7.4-8.3-8.2c-.8-.8-2.4-.6-3-.4-.1 0-1.6.5-4.2 1.3C77.1 10.7 72.7 4.2 65 4.2h-.7C62.1 1.3 59.4 0 57 0 39 0 30.4 22.5 27.7 33.9c-7 2.2-12 3.7-12.6 3.9-3.9 1.2-4 1.3-4.5 5C10.2 45.6 0 124.5 0 124.5l79.5 14.9 43.1-9.3c.2-.1-15-102.3-15.1-103zm-32.3-7.9c-2 .6-4.3 1.3-6.7 2.1v-1.5c0-4.4-.6-8-1.6-10.9 4 .5 6.6 5 8.3 10.3zM62 9.8c1.1 2.8 1.8 6.7 1.8 12.1v.8c-4.4 1.4-9.1 2.8-13.9 4.3C52.6 16.7 57.6 11.7 62 9.8zm-5.4-5.1c.8 0 1.6.3 2.3.8C53.1 8.2 47 15 44.3 28.7c-3.8 1.2-7.5 2.3-11 3.4C36.4 21.7 43.7 4.7 56.6 4.7z"></path>
+        <path fill="#5F8E3E" d="M106.3 25.9c-.5 0-11.2-.8-11.2-.8s-7.4-7.4-8.3-8.2c-.3-.3-.7-.5-1.1-.5l-6 123 43.1-9.3s-15.1-102.3-15.2-103c-.2-.7-.8-1.1-1.3-1.2z"></path>
+        <path fill="#FFF" d="M65 49.7l-5.3 15.8S55 63 49.3 63c-8.4 0-8.8 5.3-8.8 6.6 0 7.2 18.8 10 18.8 26.9 0 13.3-8.4 21.9-19.8 21.9-13.7 0-20.6-8.5-20.6-8.5l3.7-12.1s7.2 6.2 13.2 6.2c4 0 5.6-3.1 5.6-5.4 0-9.4-15.4-9.8-15.4-25.3 0-13 9.3-25.6 28.2-25.6 7.2 0 10.8 2 10.8 2z"></path>
+      </svg>
+    </a>
+  </header>
+
   <main class="container" role="main">
-    <header>
-      <% application_name = ShopifyApp.configuration.application_name %>
-      <h1><%= application_name.presence || 'Shopify App – Installation' %></h1>
-      <p class="subhead">
-        <label for="shop">Enter your shop domain to log in or install this app.</label>
-      </p>
-    </header>
-
-    <div class="container__form">
-      <form method="GET" action="login">
-        <input type="text" name="shop" id="shop" placeholder="example.myshopify.com"/>
-        <button type="submit">Install</button>
-      </form>
-    </div>
+    <% api_key = ShopifyApp.configuration.api_key %>
+    <% application_name = ShopifyApp.configuration.application_name %>
+    <h3 class="title">
+      <%= image_tag "//cdn.shopify.com/s/files/applications/#{api_key}.png", size: '48', alt: 'Application logo' %>
+      <%= application_name.presence || 'Shopify App – Installation' %>
+    </h3>
+    <p class="subtitle">
+      <label for="shop">Enter your shop domain to log in or install this app.</label>
+    </p>
+
+    <form method="GET" action="login" accept-charset="UTF-8" method="post">
+      <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="marketing-input">
+      <button name="button" type="submit" class="marketing-button">Install</button>
+    </form>
   </main>
 
 </body>
