shopify_app 14.4.4 → 17.0.0

data/app/assets/images/storage_access.svg

@@ -1,2 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 1920 1080" version="1.1" viewBox="0 0 1920 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="1345 330.75 1345 437.24 1224.7 437.24 1224.7 676.56 873.52 676.56 874.04 643.85 1203.2 330.23" fill="#fff"/><path d="m1095.7 677.54c-18.553 0.074-37.107 0.163-55.66 0.126-18.553 0.056-37.107-0.188-55.66-0.233l-13.915-0.063-13.915 0.044-27.83 0.094c-18.553 0.128-37.107-5e-3 -55.66-0.056l-1.266-3e-3 3e-3 -1.259 0.047-22.532-0.093-22.532-0.068-11.266 6e-3 -11.266 0.019-22.532h2.703l0.111 22.532c0.053 7.511 0.06 15.022 0.038 22.532l-0.094 45.065-1.407-1.407c18.553 7e-3 37.107-0.041 55.66 0.086l27.83 0.131 13.915 0.066 13.915-0.028c18.553-8e-3 37.107-0.151 55.66-0.019 18.553 0.099 37.107 0.049 55.66-0.181v2.701z" fill="#0C1238"/><path d="m1225 677.54c-9.24 0.123-18.48 0.187-27.72 0.077l-13.86-0.213c-2.31-0.051-4.62-0.023-6.93 1e-3l-6.93 0.062c-9.24 0.156-18.48 0.076-27.72-0.054-2.31-0.034-4.62 1e-3 -6.93 2e-3l-6.93 0.121c-4.62 0.062-9.24-2e-3 -13.86 3e-3v-2.703c4.62-0.048 9.24-0.165 13.86-0.157l6.93 0.025c2.31 0.027 4.62 0.088 6.93 0.076 9.24-0.024 18.48-0.031 27.72 0.145 4.62 0.038 9.24 0.163 13.86 0.126l13.86-0.081c4.62-0.04 9.24 0.088 13.86 0.101 2.31 0.047 4.62-0.048 6.93-0.065 2.31-0.026 4.62-0.07 6.93-0.169v2.703z" fill="#0C1238"/><path d="m871.68 561.78l-0.13-115.72 0.07-115.72 1e-3 -1.414 1.411 3e-3 117.9 0.228 117.9-0.138 58.951-0.061 58.951 0.072 117.9 0.09 1.218 1e-3 4e-3 1.221 0.156 53.426-0.026 53.426h-2.703l-0.154-53.426 0.04-53.426 1.466 1.466-235.8-0.148-117.9-0.193-117.9 0.087 1.212-1.212-0.084 115.72c-0.058 19.286 0.032 38.573 0.074 57.859l0.15 57.859h-2.705z" fill="#0C1238"/><g fill="#E6E8F0"><circle cx="891.37" cy="344.49" r="6.812"/><circle cx="912.86" cy="345.01" r="6.812"/><circle cx="934.34" cy="345.54" r="6.812"/><path d="m1202.7 352.87h-186.64c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h186.64c0.552 0 1 0.448 1 1v11.624c0 0.552-0.448 1-1 1z" stroke="#F0F3F5" stroke-miterlimit="10"/><rect x="1288.6" y="339.25" width="17.816" height="13.624"/><path d="m1327.4 352.87h-15.816c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h15.816c0.552 0 1 0.448 1 1v11.624c0 0.552-0.447 1-1 1z"/></g><g fill="none" stroke="#8891EA" stroke-miterlimit="10" stroke-width="8"><path d="m1098.3 576.8c-24.295 0-43.99-19.695-43.99-43.99v-29.485c0-2.209 1.791-4 4-4h79.98c2.209 0 4 1.791 4 4v29.485c0 24.295-19.695 43.99-43.99 43.99z"/><path d="m1066 499.33v-12.41c0-17.804 14.433-32.237 32.237-32.237s32.237 14.433 32.237 32.237v12.41"/></g><circle cx="1098.3" cy="529.08" r="8.966" fill="#8891EA"/><line x1="1098.3" x2="1098.3" y1="529.08" y2="546.68" fill="#fff" stroke="#8891EA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/><polygon points="1416.1 676.19 1358 748.57 1416.1 749.77 1225 749.77 1225 659.42 1416.1 437.19" fill="#fff"/><path d="m1415.2 497.07l-0.12-59.83 1.472 1.472-95.89-0.052-47.945-0.135c-15.982-0.023-31.963-0.14-47.945-0.085l1.2-1.2 0.139 78.077c0.086 26.026 4e-3 52.052-0.039 78.077l-0.076 78.077c0.056 26.026 0.201 52.052 0.145 78.077l-1.368-1.368 38.25 0.017v2.703l-38.251 0.1-1.444 4e-3 -6e-3 -1.454c-0.102-26.026-0.045-52.052-0.026-78.077l0.068-78.077 0.067-78.077 0.191-78.077 3e-3 -1.15h1.147l47.945-0.013 47.945-0.051 95.89 0.089 1.121 1e-3 4e-3 1.125 0.226 59.83h-2.703z" fill="#0C1238"/><path d="m1417.9 518.33c0.051 19.268 0.165 38.536 0.128 57.804l-0.022 28.902-0.134 28.902-0.134 28.902 0.061 28.902 0.087 28.902 0.046 14.451-0.034 14.451-3e-3 1.353-1.347-3e-3c-22.64-0.042-45.28-0.192-67.919-0.118l-33.96 0.144-33.96-0.025v-2.703l33.96-0.143 33.96 0.01c11.32 0.049 22.64 0.1 33.96 0.078l33.96-2e-3 -1.409 1.409c-0.03-19.268 0.125-38.536 0.178-57.804l0.103-28.902-0.051-28.902-0.051-28.902 0.081-28.902c0.128-19.268-0.116-38.536-0.204-57.804h2.704z" fill="#0C1238"/><path d="m1400.3 458.72h-160.44c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h160.44c0.552 0 1 0.448 1 1v11.624c0 0.552-0.448 1-1 1z" fill="#E6E8F0" stroke="#F0F3F5" stroke-miterlimit="10"/><path d="m1238.5 467.44c13.587-0.084 27.173-0.121 40.76-0.055l20.38 0.141c6.793 0.061 13.587-0.03 20.38-0.038 13.587-0.116 27.173-0.022 40.76 0.038 6.793 0.029 13.587-0.022 20.38-0.082 6.793-0.046 13.587 0 20.38-5e-3v1.802c-13.587 0.111-27.173 0.144-40.76 0.036-13.587 2e-3 -27.173 0.027-40.76-0.09-6.793-0.025-13.587-0.117-20.38-0.088l-20.38 0.054c-6.793 0.022-13.587-0.048-20.38-0.067-6.793-7e-3 -13.587 0.107-20.38 0.154v-1.8z" fill="#E6E8F0"/><path d="m891.69 362.56c36.392-0.084 72.784-0.121 109.18-0.055l54.588 0.141c18.196 0.062 36.392-0.034 54.588-0.043l218.35-0.043v1.802c-36.392 0.111-72.784 0.144-109.18 0.036l-109.18-0.09-54.588-0.088-54.588 0.054-54.588-0.067-54.588 0.154v-1.801z" fill="#E6E8F0"/><g fill="none" stroke="#8891EA" stroke-miterlimit="10" stroke-width="6"><path d="m1320.6 638.41c-17.878 0-32.371-14.493-32.371-32.371v-21.697c0-1.626 1.318-2.943 2.943-2.943h58.854c1.626 0 2.943 1.318 2.943 2.943v21.697c1e-3 17.878-14.491 32.371-32.369 32.371z"/><path d="m1296.9 581.4v-9.132c0-13.101 10.62-23.722 23.722-23.722 13.101 0 23.722 10.621 23.722 23.722v9.132"/></g><circle cx="1320.6" cy="604.5" r="5.88" fill="#8891EA"/><line x1="1320.6" x2="1320.6" y1="603.3" y2="616.25" fill="#fff" stroke="#8891EA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><path d="m966.35 697.36l-0.029 13.745c-0.01 1.145 0.011 2.291-0.023 3.436l-0.124 3.436c-0.103 2.291 0.022 4.582 0.121 6.872l-1.912-1.912c10.168-0.857 20.337-0.478 30.505-0.36 5.084 0.104 10.168 0.133 15.252 0.178 5.084 6e-3 10.168 0.199 15.252 0.287l7.626 0.168 7.626 0.264c2.542 0.09 5.084 0.032 7.626 0.023 2.542-0.035 5.084 0.047 7.626 0.065 10.168 0.377 20.337-0.052 30.505 0.201l7.626 0.04c2.542 6e-3 5.084-0.283 7.626-0.394 5.084-0.14 10.168-0.184 15.252-0.268 5.084-0.072 10.168-0.071 15.252-0.204 2.542-0.07 5.084-0.088 7.626-0.118 2.542-0.019 5.084 0.1 7.626 0.143 10.168 0.462 20.337-0.303 30.505 0.192 2.542 0.145 5.084 0.163 7.626 0.139 2.542 0 5.084-0.038 7.626-0.099l15.252-0.314v3.936l-15.252 0.106c-5.084 0.024-10.168 0.012-15.252 0.3-10.168 0.483-20.337-0.281-30.505-0.213-20.337-1.165-40.673 0.704-61.01-0.137-2.542 0.117-5.084 0.33-7.626 0.382-2.542 0.092-5.084 0.173-7.626-0.018s-5.084-0.219-7.626-0.183c-2.542-2e-3 -5.084 0.099-7.626 0.081-2.542-0.027-5.084 0.026-7.626-0.066-1.271-0.039-2.542-0.079-3.813-0.09-1.271-0.022-2.542-0.05-3.813 0.018-2.542 0.097-5.084 0.355-7.626 0.327-1.271-0.037-2.542-0.06-3.813-0.12l-3.813-0.238c-2.542-0.162-5.084-0.324-7.626-0.268-2.542 0.109-5.084-0.092-7.626-0.222-2.542-0.112-5.084-0.326-7.626-0.371-2.542-0.094-5.084-0.061-7.626-0.038-5.084 0.101-10.168 0.266-15.252 0.414-2.542 0.071-5.084 0.122-7.626 0.123l-7.626-0.19-1.598-0.04 0.032-1.527c0.047-2.291 0.153-4.582 9e-3 -6.872l-0.162-3.436c-0.047-1.145-0.04-2.291-0.062-3.436l-0.186-13.745h3.934z" fill="#E6E8F0"/><path d="m1434.8 722.88l16.096 0.019 8.048 0.01c2.683 0.018 5.365-0.029 8.048 0.05l-1.89 1.89c0.07-3.44 0.218-6.88 0.086-10.32l-0.312-10.32c-0.261-6.88-0.364-13.76-0.339-20.639l0.314-41.279c0.052-6.88 0.033-13.76 0.144-20.639l0.275-20.639c0.057-6.88 0.274-13.76 0.375-20.639 0.058-6.88-0.069-13.76 0.033-20.639l0.226-20.639-0.071-10.32-0.046-5.16 0.032-5.16 0.11-20.639c0.012-3.44 0.045-6.88-0.068-10.32-0.149-3.44-0.261-6.88-0.361-10.32l-0.328-41.279c-0.074-6.88-0.188-13.76-0.211-20.639 0.028-6.88 0.177-13.76 0.261-20.639l1.77 1.77c-4.37-0.095-8.74 1e-3 -13.111 1e-3l-13.111 0.063c-4.37 1e-3 -8.74 0.084-13.111 0.016l-13.111-0.231c-4.37-0.118-8.74-0.058-13.111-0.055-4.37-4e-3 -8.74 0.077-13.111 0.113l-26.221 0.29v-3.936l26.221-0.107 13.111-0.052c4.37-0.026 8.74 2e-3 13.111-0.14l13.111-0.262c4.37-0.066 8.74 0.04 13.111 0.051l26.221 0.283 2.211 0.024-0.016 2.172c-0.049 6.88-0.045 13.76-0.139 20.639-0.152 6.88-0.325 13.76-0.304 20.639l0.499 41.279c-0.024 1.72-0.037 3.44-0.138 5.16l-0.297 5.16c-0.137 3.44-0.045 6.88 0.01 10.32 0.12 6.88 0.479 13.76 0.59 20.639 0.273 6.88-0.127 13.76-0.227 20.639-0.014 6.88 0.146 13.76 0.091 20.639 0.051 6.88-0.202 13.76-0.162 20.639 0.04 3.44 0.226 6.88 0.324 10.32 0.061 3.44 4e-3 6.88-0.082 10.32l-0.356 10.32c-0.047 1.72-0.141 3.44-0.149 5.16l2e-3 5.16c-0.012 1.72 0.032 3.44-0.026 5.16l-0.164 5.16-0.335 10.32c-0.306 13.76 0.065 27.519 0.289 41.279 0.074 3.44 0.091 6.88 0.13 10.32 0.059 3.44-0.071 6.88-0.098 10.32l-0.153 10.32c-0.053 1.72 0.021 3.44 0.049 5.16l0.139 5.16 0.044 1.627-1.73 0.06c-2.683 0.093-5.365 0.065-8.048 0.1l-8.048 0.061-16.096 0.121v-3.941z" fill="#E6E8F0"/></svg>
+<svg width="140" height="140" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M79 55a9 9 0 00-18 0v8h18v-8zm6 8v-8a15 15 0 00-30 0v8h-5a2 2 0 00-2 2v20a15 15 0 0015 15h14a15 15 0 0015-15V65a2 2 0 00-2-2h-5zM70 90a3 3 0 01-3-3V75a3 3 0 116 0v12a3 3 0 01-3 3z" fill="#8C9196"/></svg>

data/app/controllers/concerns/shopify_app/ensure_authenticated_links.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShopifyApp
+  module EnsureAuthenticatedLinks
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :redirect_to_splash_page, if: :missing_expected_jwt?
+    end
+
+    private
+
+    def redirect_to_splash_page
+      splash_page_path = root_path(return_to: request.fullpath, shop: current_shopify_domain)
+      redirect_to(splash_page_path)
+    end
+
+    def missing_expected_jwt?
+      jwt_shopify_domain.blank?
+    end
+  end
+end

data/app/controllers/shopify_app/callback_controller.rb

@@ -30,16 +30,12 @@ module ShopifyApp
     end
 
     def respond_with_user_token_flow
-      Rails.logger.debug("[ShopifyApp::CallbackController] Redirecting for user token...")
       redirect_to(login_url_with_optional_shop)
     end
 
     def store_access_token_and_build_session
       if native_browser_request?
-        Rails.logger.debug("[ShopifyApp::CallbackController] Not a JWT request. Resetting session options...")
         reset_session_options
-      else
-        Rails.logger.debug("[ShopifyApp::CallbackController] JWT request detected. Setting shopify session...")
       end
       set_shopify_session
     end
@@ -62,10 +58,8 @@ module ShopifyApp
 
     def respond_with_error
       if jwt_request?
-        Rails.logger.debug("[ShopifyApp::CallbackController] Invalid JWT auth detected.")
         head(:unauthorized)
       else
-        Rails.logger.debug("[ShopifyApp::CallbackController] Invalid non JWT auth detected.")
         flash[:error] = I18n.t('could_not_log_in')
         redirect_to(login_url_with_optional_shop)
       end

data/app/controllers/shopify_app/sessions_controller.rb

@@ -10,19 +10,14 @@ module ShopifyApp
     end
 
     def new
-      if sanitized_shop_name.present?
-        Rails.logger.debug("[ShopifyApp::SessionsController] Sanitized shop name present. Authenticating...")
-        authenticate
-      end
+      authenticate if sanitized_shop_name.present?
     end
 
     def create
-      Rails.logger.debug("[ShopifyApp::SessionsController] Authenticating...")
       authenticate
     end
 
     def enable_cookies
-      Rails.logger.debug("[ShopifyApp::SessionsController] Enabling cookies...")
       return unless validate_shop_presence
 
       render(:enable_cookies, layout: false, locals: {
@@ -45,7 +40,6 @@ module ShopifyApp
     end
 
     def granted_storage_access
-      Rails.logger.debug("[ShopifyApp::SessionsController] Granted storage access.")
       return unless validate_shop_presence
 
       session['shopify.granted_storage_access'] = true
@@ -56,7 +50,6 @@ module ShopifyApp
     end
 
     def destroy
-      Rails.logger.debug("[ShopifyApp::SessionsController] Resetting session.")
       reset_session
       flash[:notice] = I18n.t('.logged_out')
       redirect_to(login_url_with_optional_shop)
@@ -73,23 +66,18 @@ module ShopifyApp
       set_user_tokens_option
 
       if user_agent_can_partition_cookies
-        Rails.logger.debug("[ShopifyApp::SessionsController] Authenticating with partitioning...")
         authenticate_with_partitioning
       else
-        Rails.logger.debug("[ShopifyApp::SessionsController] Authenticating normally...")
         authenticate_normally
       end
     end
 
     def authenticate_normally
       if request_storage_access?
-        Rails.logger.debug("[ShopifyApp::SessionsController] Redirecting to request storage access...")
         redirect_to_request_storage_access
       elsif authenticate_in_context?
-        Rails.logger.debug("[ShopifyApp::SessionsController] Authenticating in context...")
         authenticate_in_context
       else
-        Rails.logger.debug("[ShopifyApp::SessionsController] Authenticating at top level...")
         authenticate_at_top_level
       end
     end
@@ -107,7 +95,6 @@ module ShopifyApp
     # rubocop:disable Lint/SuppressedException
     def set_user_tokens_option
       if shop_session.blank?
-        Rails.logger.debug("[ShopifyApp::SessionsController] Shop session is blank.")
         session[:user_tokens] = false
         return
       end
@@ -130,7 +117,6 @@ module ShopifyApp
     def validate_shop_presence
       @shop = sanitized_shop_name
       unless @shop
-        Rails.logger.debug("[ShopifyApp::SessionsController] Invalid shop detected.")
         render_invalid_shop_error
         return false
       end

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>