shopify_app 14.4.2 → 16.0.0

data/app/views/shopify_app/partials/_button_styles.html.erb

@@ -1,6 +1,5 @@
 <style>
   .Polaris-Button {
-    fill:#637381;
     position:relative;
     display:-webkit-inline-box;
     display:-ms-inline-flexbox;
@@ -15,12 +14,14 @@
     min-width:3.6rem;
     margin:0;
     padding:0.7rem 1.6rem;
-    background:linear-gradient(to bottom, white, #f9fafb);
-    border:1px solid #c4cdd5;
-    box-shadow:0 1px 0 0 rgba(22, 29, 37, 0.05);
-    border-radius:3px;
+    background-color:#ffffff;
+    border:1px solid #babfc3;
+    border-top-color: #c9cccf;
+    border-bottom-color: #babfc4;
+    box-shadow:0 1px 0 0 rgba(0, 0, 0, 0.05);
+    border-radius:4px;
     line-height:1;
-    color:#212b36;
+    color:#202223;
     text-align:center;
     cursor:pointer;
     -webkit-user-select:none;
@@ -29,30 +30,44 @@
     user-select:none;
     text-decoration:none;
     transition-property:background, border, box-shadow;
-    transition-duration:200ms;
+    transition-duration:100ms;
     transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1);
   }
 
   .Polaris-Button:hover {
-    background:linear-gradient(to bottom, #f9fafb, #f4f6f8);
-    border-color:#c4cdd5;
+    background-color:#f6f6f7;
   }
 
   .Polaris-Button:focus {
-    border-color:#5c6ac4;
     outline:0;
-    box-shadow:0 0 0 1px #5c6ac4;
+  }
+
+  .Polaris-Button:focus:after {
+    box-shadow:0 0 0 .2rem #448fff;
+  }
+
+  .Polaris-Button:after {
+    content:'';
+    position:absolute;
+    z-index:1;
+    top:-.2rem;
+    right:-.2rem;
+    bottom:-.2rem;
+    left:-.2rem;
+    display:block;
+    pointer-events:none;
+    box-shadow:0 0 0 -.2rem #448fff;
+    transition:box-shadow 100ms cubic-bezier(0.64, 0, 0.35, 1);
+    border-radius:5px;
   }
 
   .Polaris-Button:active {
-    background:linear-gradient(to bottom, #f4f6f8, #f4f6f8);
-    border-color:#c4cdd5;
-    box-shadow:0 0 0 0 transparent, inset 0 1px 1px 0 rgba(99, 115, 129, 0.1), inset 0 1px 4px 0 rgba(99, 115, 129, 0.2);
+    background-color:#f1f2f3);
   }
 
   .Polaris-Button__Content {
-    font-size:1.5rem;
-    font-weight:400;
+    font-size:1.4rem;
+    font-weight:500;
     line-height:1.6rem;
     text-transform:initial;
     letter-spacing:initial;
@@ -70,35 +85,25 @@
     min-height:1px;
   }
 
-  @media (min-width: 40em) {
-    .Polaris-Button__Content {
-      font-size:1.4rem;
-    }
-  }
-
   .Polaris-Button--primary {
-    background:linear-gradient(to bottom, #6371c7, #5563c1);
-    border-color:#3f4eae;
-    box-shadow:inset 0 1px 0 0 #6774c8, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 0 0 transparent;
+    background-color:#008060;
+    border-color:transparent;
+    border-width:0;
     color:white;
-    fill:white;
   }
 
   .Polaris-Button--primary:hover {
-    background:linear-gradient(to bottom, #5c6ac4, #4959bd);
-    border-color:#3f4eae;
+    background-color:#006e52;
+    border-color:transparent;
     color:white;
-    text-decoration:none;
   }
 
-  .Polaris-Button--primary:focus {
-    border-color:#202e78;
-    box-shadow:inset 0 1px 0 0 #6f7bcb, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 0 1px #202e78;
+  .Polaris-Button--primary:active {
+    background-color:#005e46;
+    border-color:transparent;
   }
 
-  .Polaris-Button--primary:active {
-    background:linear-gradient(to bottom, #3f4eae, #3f4eae);
-    border-color:#38469b;
-    box-shadow:inset 0 0 0 0 transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 1px 0 #38469b;
+  .Polaris-Button--sizeLarge {
+    padding:1.1rem 2.4rem;
   }
 </style>

data/app/views/shopify_app/partials/_card_styles.html.erb

@@ -11,7 +11,7 @@
 
   @media (min-width: 30.625em) {
     .Polaris-Card {
-      border-radius:3px;
+      border-radius:8px;
     }
   }
 
@@ -24,10 +24,10 @@
   }
 
   .Polaris-Card__Section + .Polaris-Card__Section {
-    border-top:1px solid #dfe3e8;
+    border-top:.1rem solid #e4e5e7;
   }
 
   .Polaris-Card__Section--subdued {
-    background-color:#f9fafb;
+    background-color:#fafbfb;
   }
 </style>

data/app/views/shopify_app/partials/_empty_state_styles.html.erb

@@ -11,8 +11,8 @@
     -ms-flex-align:center;
     align-items:center;
     width:100%;
-    margin:2rem auto 0 auto;
-    padding:2rem 0;
+    margin:0 auto;
+    padding:2rem 0 6rem;
     max-width:99.8rem;
   }
 
@@ -24,33 +24,22 @@
   }
 
   .Polaris-EmptyState__Section {
-    position:relative;
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;
     -webkit-box-orient:vertical;
-    -webkit-box-direction:normal;
-    -ms-flex-direction:column;
-    flex-direction:column;
+    -webkit-box-direction:reverse;
+    -ms-flex-direction:column-reverse;
+    flex-direction:column-reverse;
     -webkit-box-flex:1;
     -ms-flex:1 1 auto;
     flex:1 1 auto;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
     width:100%;
   }
 
-  @media (min-width: 46.5em) {
-    .Polaris-EmptyState__Section {
-      left:2rem;
-      -webkit-box-orient:horizontal;
-      -webkit-box-direction:normal;
-      -ms-flex-direction:row;
-      flex-direction:row;
-      -webkit-box-align:center;
-      -ms-flex-align:center;
-      align-items:center;
-    }
-  }
-
   .Polaris-EmptyState__ImageContainer,
   .Polaris-EmptyState__DetailsContainer {
     -webkit-box-flex:1;
@@ -58,6 +47,7 @@
     flex:1 1 auto;
     padding:0;
     margin:0; 
+    text-align:center;
   }
 
   @media (min-width: 46.5em) {
@@ -68,37 +58,32 @@
     }
   }
 
-  @media (max-width: 30.625em) {
-    .Polaris-EmptyState__ImageContainer,
-    .Polaris-EmptyState__DetailsContainer {
-      overflow-x:hidden;
-    }
-  }
-
   .Polaris-EmptyState__Details {
-    position:relative;
-    z-index:10;
-    padding:0 1.6rem;
-    width:33.6rem;
-  }
-
-  @media (min-width: 30.625em) {
-    .Polaris-EmptyState__Details {
-      padding:0;
-    }
+    max-width:40rem;
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display: flex;
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:column;
+    flex-direction: column;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items: center;
   }
 
   .Polaris-EmptyState__Content {
-    font-size:1.6rem;
+    margin-top: 1.6rem;
+    font-size:1.5rem;
     font-weight:400;
-    line-height:2.4rem;
-    color:#637381;
+    line-height:2rem;
+    color:#6d7175;
+    padding-bottom: .8rem;
   }
 
   @media (min-width: 40em) {
     .Polaris-EmptyState__Content {
-      font-size:2rem;
-      line-height:2.8rem;
+      font-size:1.4rem;
     }
   }
 
@@ -107,23 +92,7 @@
   }
 
   .Polaris-EmptyState__Image {
-    display: none;
-  }
-
-  @media (min-width: 30.625em) {
-    .Polaris-EmptyState__Image {
-      display: block;
-      margin-left:-60%;
-      margin-top:-30%;
-      width:200%;
-    }
-  }
-
-  @media (min-width: 46.5em) {
-    .Polaris-EmptyState__Image {
-      margin-top:0;
-      margin-left:-90%;
-      width:200%;
-    } 
+    margin: 0;
+    width: auto;
   }
 </style>

data/app/views/shopify_app/partials/_form_styles.html.erb

@@ -0,0 +1,56 @@
+<style>
+  .Polaris-Label {
+    margin-bottom:.4rem;
+  }
+
+  .Polaris-Label__Text {
+    -webkit-tap-highlight-color:transparent;
+  }
+
+  .Polaris-TextField {
+    position:relative;
+    margin-bottom:1.6rem;
+  }
+
+  .Polaris-TextField--InlineError {
+    margin-bottom:.4rem;
+  }
+
+  .Polaris-TextField__Input {
+    width:100%;
+    padding:.5rem 1.2rem;
+    border:1px solid #c9cccf;
+    border-top-color:#aeb4b9;
+    border-radius:4px;
+    box-shadow:none;
+    line-height:2.4rem;
+  }
+
+  .Polaris-TextField__Input:focus {
+    outline:none;
+  }
+
+  .Polaris-TextField__Backdrop:after {
+    content:'';
+    position:absolute;
+    z-index:1;
+    top:-.2rem;
+    right:-.2rem;
+    bottom:-.2rem;
+    left:-.2rem;
+    display:block;
+    pointer-events:none;
+    box-shadow:0 0 0 -.2rem #448fff;
+    transition:box-shadow .1s cubic-bezier(0.64, 0, 0.35, 1);
+    border-radius:5px;
+  }
+
+  .Polaris-TextField__Input:focus~.Polaris-TextField__Backdrop:after {
+    box-shadow:0 0 0 .2rem #448fff;
+  }
+
+ .Polaris-InlineError {
+   color:#d72c0d;
+   margin-bottom:1.6rem;
+ }
+</style>

data/app/views/shopify_app/partials/_layout_styles.html.erb

@@ -35,7 +35,7 @@
     min-height:100%;
     margin:0;
     padding:0;
-    background-color:#f4f6f8;
+    background-color:#f6f6f7;
   }
 
   *,
@@ -61,6 +61,10 @@
     max-width:99.8rem;
   }
 
+  .Polaris-Page--InstallApp {
+    max-width: 70rem;
+  }
+
   @media (min-width: 30.625em) {
     .Polaris-Page {
       padding:0 2rem;
@@ -73,6 +77,7 @@
   }
 
   .Polaris-Page__Content {
+    width: 100%;
     margin:2rem 0;
   }
 
@@ -158,6 +163,16 @@
     justify-content:flex-end;
   }
 
+  .Polaris-Stack--distributionTrailingCustomSpacing {
+    margin-right:2rem;
+  }
+
+  @media (min-width: 30.625em) {
+    .Polaris-Stack--distributionTrailingCustomSpacing {
+      margin-right:0;
+    }
+  }
+
   .Polaris-Stack--vertical {
     -webkit-box-orient:vertical;
     -webkit-box-direction:normal;

data/app/views/shopify_app/partials/_typography_styles.html.erb

@@ -16,16 +16,16 @@
     margin:0;
   }
 
-  .Polaris-DisplayText--sizeMedium {
-    font-size:2.1rem;
+  .Polaris-DisplayText--sizeSmall {
+    font-size:1.6rem;
     font-weight:400;
-    line-height:2.8rem;
+    line-height:2.4rem;
   }
 
   @media (min-width: 40em) {
-    .Polaris-DisplayText--sizeMedium {
-      font-size:2.6rem;
-      line-height:3.2rem;
+    .Polaris-DisplayText--sizeSmall {
+      font-size:2rem;
+      line-height:2.8rem;
     }
   }
 

data/app/views/shopify_app/sessions/enable_cookies.html.erb

@@ -52,7 +52,7 @@
                 </div>
               </div>
               <div class="Polaris-Stack__Item">
-                <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+                <div class="Polaris-Stack Polaris-Stack--distributionTrailing Polaris-Stack--distributionTrailingCustomSpacing">
                   <div class="Polaris-Stack__Item">
                     <button type="button" class="Polaris-Button Polaris-Button--primary" id="AcceptCookies">
                       <span class="Polaris-Button__Content"><span><%= I18n.t('enable_cookies_action') %></span></span>

data/app/views/shopify_app/sessions/new.html.erb

@@ -5,119 +5,47 @@
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <style>
-    * {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    body {
-      padding: 2.5em 0;
-      color: #212b37;
-      font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
-    }
-
-    .container {
-      width: 100%;
-      text-align: center;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    @media screen and (min-width: 510px) {
-      .container {
-        width: 510px;
-      }
-    }
-
-    .title {
-      font-size: 1.5em;
-      margin: 2em auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      word-break: break-all;
-    }
-
-    .subtitle {
-      font-size: 0.8em;
-      font-weight: 500;
-      color: #64737f;
-      line-height: 2em;
-    }
-
-    .error {
-      line-height: 1em;
-      padding: 0.5em;
-      color: red;
-    }
-
-    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;
-      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;
-    }
-
-    button.marketing-button:focus {
-      box-shadow: 0 0 0.1875em 0.1875em rgba(94,110,191,0.5);
-      background-color: #223274;
-      color: #fff;
-    }
-  </style>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/card_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
+  <%= render 'shopify_app/partials/form_styles' %>
 </head>
 <body>
-
   <main class="container" role="main">
-    <% application_name = ShopifyApp.configuration.application_name %>
-    <h3 class="title">
-      <%= 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_tag login_path do %>
-      <% if flash[:error] %>
-        <div class="error"><%= flash[:error] %></div>
-      <% end %>
-      <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="marketing-input">
-      <button type="submit" class="marketing-button">Install</button>
-    <% end %>
+    <div class="Polaris-Page Polaris-Page--InstallApp">
+      <div class="Polaris-Page__Content">
+        <div class="Polaris-Layout">
+          <div class="Polaris-Layout__Section">
+            <div class="Polaris-Card">
+              <div class="Polaris-Card__Header">
+                <% application_name = ShopifyApp.configuration.application_name %>
+                <h1 class="Polaris-Heading">
+                  <%= application_name.presence || 'Shopify App – Installation' %>
+                </h1>
+              </div>
+              <div class="Polaris-Card__Section">
+                <%= form_tag login_path do %>
+                  <div class="Polaris-Label">
+                    <label class="Polaris-Label__Text" for="shop">Enter your shop domain to log in or install this app.</label>
+                  </div>
+                  <div class="Polaris-TextField <%= 'Polaris-TextField--InlineError' if flash[:error]%>">
+                    <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="Polaris-TextField__Input">
+                    <div class="Polaris-TextField__Backdrop"></div>
+                  </div>
+                  <% if flash[:error] %>
+                    <div class="Polaris-InlineError"><%= flash[:error] %></div>
+                  <% end %>
+                  <button type="submit" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
+                    <span class="Polaris-Button__Content"><span>Install app</span>
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
-
 </body>
 </html>