added new admin branding (#315)

* added new admin branding

* added favicon

* Update _account_nav.html.erb

* header fixes

* [skip ci] spec fixes

Gemfile

@@ -19,7 +19,7 @@ platforms :ruby do
   elsif ENV['DB'] == 'postgres'
     gem 'pg'
   else
-    gem 'sqlite3'
+    gem 'sqlite3', '~> 1.4'
   end
 end
 

app/assets/stylesheets/spree/backend/components/_buttons.scss

@@ -1,7 +1,3 @@
-.payment-action-save {
-  @include button-variant(theme-color('success'), theme-color('success'), theme-color('success') );
-}
-
 .btn,
 .nav-pills > li > a {
   vertical-align: middle;

app/assets/stylesheets/spree/backend/components/_navbar.scss

@@ -1,3 +1,7 @@
+.dropdown-menu {
+  @extend .shadow;
+}
+
 .header {
   .navbar {
     min-height:54px;
@@ -16,13 +20,6 @@
       }
     }
 
-    #accountNav {
-      i {
-        font-size: 1.3em;
-        line-height: 1rem;
-      }
-    }
-
     #storeSwitcherDropdown {
       .dropdown-menu.show {
         min-width: 250px;

app/assets/stylesheets/spree/backend/components/_tables.scss

@@ -19,7 +19,6 @@ table.table {
 
   thead {
     th {
-      text-transform: uppercase;
       font-size: $small-font-size;
       padding: 0.5rem;
       padding-top: 14px;

app/assets/stylesheets/spree/backend/global/_variables.scss

@@ -1,8 +1,22 @@
+// https://github.com/twbs/bootstrap/blob/v4.6.2/scss/_variables.scss
+
 $theme-colors: (
-  "primary": #4C75BA,
+  "primary": #000,
 );
 
-$enable-shadows: true;
+$enable-responsive-font-sizes: true;
+$font-family-sans-serif: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-size-base:   0.813rem !default;
+$font-size-plus:   0.875rem !default;
+$font-size-sm:    0.75rem !default;
+$font-size-lg:    1rem !default;
+
+$border-radius: 0.5rem !default;
+$border-radius-sm: 0.4rem !default;
+$border-radius-lg: 0.75rem !default;
+
+$dropdown-item-padding-y:           .5rem !default;
+$dropdown-item-padding-x:           1rem !default;
 
 // https://github.com/twbs/bootstrap/issues/32019
 // we need this hotfix for sassc

app/assets/stylesheets/spree/backend/plugins/_sweetalert2_custom.scss

@@ -5,7 +5,7 @@ body.swal2-shown {
   }
   .swal2-html-container {
     text-align: left;
-    font-size: 0.9em;
+    font-size: 0.813rem !important;
 
     .alert-link {
       font-weight: 400;

app/helpers/spree/admin/base_helper.rb

@@ -286,6 +286,10 @@ def product_wysiwyg_editor_enabled?
       def taxon_wysiwyg_editor_enabled?
         Spree::Backend::Config[:taxon_wysiwyg_editor_enabled]
       end
+
+      def spree_update_available?
+        @spree_update_available ||= Spree::Admin::Updater.update_available?
+      end
     end
   end
 end

app/helpers/spree/admin/navigation_helper.rb

@@ -301,7 +301,7 @@ def wrapper_classes
       end
 
       def page_header_back_button(url)
-        link_to url, class: 'btn btn-outline-info mr-3 pr-1' do
+        link_to url, class: 'btn btn-light mr-3 pr-1' do
           svg_icon name: 'chevron-left.svg', width: 15, height: 15
         end
       end

app/helpers/spree/admin/stores_helper.rb

@@ -16,14 +16,14 @@ def stores_dropdown_values
       def store_switcher_link(store)
         if current_store.id == store.id
           classes = 'disabled bg-light'
-          icon = svg_icon name: 'circle-fill.svg', width: '18', height: '18'
+          icon = svg_icon name: 'circle-fill.svg', width: '14', height: '14'
         else
           classes = nil
-          icon = svg_icon name: 'circle.svg', width: '18', height: '18'
+          icon = svg_icon name: 'circle.svg', width: '14', height: '14'
         end
 
         link_to icon + store.unique_name, spree.admin_url(host: store.formatted_url),
-                class: "#{classes} py-3 px-4 dropdown-item rounded", id: store.code, data: { turbo: false }
+                class: "#{classes} dropdown-item", id: store.code, data: { turbo: false }
       end
     end
   end

app/models/spree/admin/actions/action.rb

@@ -3,7 +3,7 @@ module Admin
     module Actions
       class Action
         STYLE_CLASSES = {
-          ::Spree::Admin::Actions::ActionStyle::PRIMARY => 'btn-success',
+          ::Spree::Admin::Actions::ActionStyle::PRIMARY => 'btn-primary',
           ::Spree::Admin::Actions::ActionStyle::SECONDARY => 'btn-secondary',
           ::Spree::Admin::Actions::ActionStyle::LIGHT => 'btn-light'
         }

app/models/spree/admin/updater.rb

@@ -0,0 +1,35 @@
+require 'net/http'
+require 'json'
+require 'uri'
+
+module Spree
+  module Admin
+    class Updater
+      SPREE_CLOUD_UPDATES_URL = 'https://spreecloud.io/updates.json'
+
+      @updates = nil
+
+      def self.update_available?
+        fetch_updates.any?
+      end
+
+      def self.fetch_updates
+        @updates ||= Rails.cache.fetch("spree/admin/updater/fetch_updates/#{Spree.version}", expires_in: 1.day) do
+          uri = URI(SPREE_CLOUD_UPDATES_URL)
+          params = { version: Spree.version }
+          uri.query = URI.encode_www_form(params)
+
+          http = Net::HTTP.new(uri.host, uri.port)
+          http.use_ssl = uri.scheme == 'https'
+          http.open_timeout = 1 # 1s timeout for opening the connection
+          http.read_timeout = 1 # 1s timeout for reading the response
+
+          response = http.get(uri)
+          return {} unless response.is_a?(Net::HTTPSuccess)
+
+          JSON.parse(response.body)
+        end
+      end
+    end
+  end
+end

app/views/spree/admin/adjustments/_adjustments_table.html.erb

@@ -21,7 +21,7 @@
   <div class="card-footer">
     <div class="row text-center pb-0">
       <div class="col-12 col-lg-6">
-        <%= button_to Spree.t(:open_all_adjustments), open_adjustments_admin_order_path(@order), method: :put, class: "btn btn-success" %>
+        <%= button_to Spree.t(:open_all_adjustments), open_adjustments_admin_order_path(@order), method: :put, class: "btn btn-primary" %>
       </div>
       <div class="col-12 col-lg-6">
         <%= button_to Spree.t(:close_all_adjustments), close_adjustments_admin_order_path(@order), method: :put, class: "btn btn-danger" %>

app/views/spree/admin/cms_pages/_form.html.erb

@@ -16,17 +16,17 @@
 
               <span id="visibilityStatus" class="d-flex align-items-center">
                 <span class="page_hidden badge badge-pill badge-secondary <% if @cms_page.visible? %>d-none<% end %>">
-                  <%= svg_icon name: "eye-slash-fill.svg", width: '18', height: '18' %> <%= Spree.t('admin.cms.draft_mode') %>
+                  <%= svg_icon name: "eye-slash-fill.svg", width: '14', height: '14' %> <%= Spree.t('admin.cms.draft_mode') %>
                 </span>
 
                 <span class="page_visible badge badge-pill badge-primary <% if @cms_page.draft_mode? %>d-none<% end %>">
-                  <%= svg_icon name: "view.svg", width: '18', height: '18' %> <%= Spree.t('admin.cms.visible') %>
+                  <%= svg_icon name: "view.svg", width: '14', height: '14' %> <%= Spree.t('admin.cms.visible') %>
                 </span>
               </span>
             </div>
             <div class="col-auto d-flex align-items-center">
               <span class="badge badge-pill badge-secondary">
-                  <%= svg_icon name: "translate.svg", width: '18', height: '18' %> <%= locale_full_name(@cms_page.locale) %>
+                  <%= svg_icon name: "translate.svg", width: '14', height: '14' %> <%= locale_full_name(@cms_page.locale) %>
               </span>
             </div>
           </div>

app/views/spree/admin/cms_pages/_live_preview_area.html.erb

@@ -4,7 +4,7 @@
       <hr class="mt-4 hide-on-full-screen-mode">
       <div class="row">
         <div class="col d-flex justify-content-start">
-          <%= button_link_to Spree.t('admin.cms.add_new_section'), spree.new_admin_cms_page_cms_section_path(@cms_page), icon: 'add.svg', class: 'no-wrap btn btn-success align-self-center' %>
+          <%= button_link_to Spree.t('admin.cms.add_new_section'), spree.new_admin_cms_page_cms_section_path(@cms_page), icon: 'add.svg', class: 'no-wrap btn btn-primary align-self-center' %>
         </div>
         <div class="col d-none d-md-flex justify-content-end">
           <div id="LiveViewSwitcher" class="btn-group btn-group-toggle" data-toggle="buttons">

app/views/spree/admin/cms_pages/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t('admin.cms.add_new_page'), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'new_page' } %>
+  <%= button_link_to Spree.t('admin.cms.add_new_page'), new_object_url, { class: "btn-primary", icon: 'add.svg', id: 'new_page' } %>
 <% end if can?(:create, Spree::CmsPage) %>
 
 <% content_for :table_filter do %>

app/views/spree/admin/countries/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_country), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'admin_new_country' } %>
+  <%= button_link_to Spree.t(:new_country), new_object_url, { class: "btn-primary", icon: 'add.svg', id: 'admin_new_country' } %>
 <% end if can? :create, Spree::Country %>
 <div class="table-responsive border rounded bg-white">
   <table class="table" id='listing_countries' data-hook>

app/views/spree/admin/customer_returns/_return_item_decision.html.erb

@@ -40,7 +40,7 @@
           <% if show_decision %>
             <td class='actions'>
               <span class="d-flex justify-content-end">
-                <%= button_to [:admin, return_item], { class: 'with-tip display-inline btn btn-success btn-sm', params: { "return_item[acceptance_status]" => 'accepted' }, "data-action" => 'save', title: Spree.t(:accept), method: 'put' } do %>
+                <%= button_to [:admin, return_item], { class: 'with-tip display-inline btn btn-primary btn-sm', params: { "return_item[acceptance_status]" => 'accepted' }, "data-action" => 'save', title: Spree.t(:accept), method: 'put' } do %>
                   <%= Spree.t(:accept) %>
                 <% end if can?(:accept, return_item) %>
                 <%= button_to [:admin, return_item], { class: 'with-tip display-inline btn btn-danger btn-sm', params: { "return_item[acceptance_status]" => 'rejected' }, "data-action" => 'remove', title: Spree.t(:reject), method: 'put' } do %>

app/views/spree/admin/customer_returns/index.html.erb

@@ -2,7 +2,7 @@
 
 <% content_for :page_actions do %>
   <% if @order.shipments.any?(&:shipped?) && can?(:create, Spree::CustomerReturn) %>
-    <%= button_link_to Spree.t(:new_customer_return), spree.new_admin_order_customer_return_path(@order), icon: 'add.svg', class: 'btn-success' %>
+    <%= button_link_to Spree.t(:new_customer_return), spree.new_admin_order_customer_return_path(@order), icon: 'add.svg', class: 'btn-primary' %>
   <% end %>
 <% end %>
 

app/views/spree/admin/dashboard/_getting_started.html.erb

@@ -47,7 +47,7 @@
             <%= Spree.t('admin.getting_started.products_section.message_without_products') %>
             <%= link_to(Spree.t('admin.getting_started.products_section.import_message'), 'https://api.spreecommerce.org/docs/api-v2/27527143a4edf-create-a-product') %>
           </p>
-          <%= link_to_with_icon 'add.svg', Spree.t('admin.getting_started.add_products'), spree.admin_products_path, class: 'btn btn-success btn-sm mb-2' %>
+          <%= link_to_with_icon 'add.svg', Spree.t('admin.getting_started.add_products'), spree.admin_products_path, class: 'btn btn-primary btn-sm mb-2' %>
         <% end %>
       </div>
       <div class="tab-pane fade <% if @active_tab == 'shipping'%>show active<% end %>" id="list-shipping" role="tabpanel" aria-labelledby="list-shipping-list">

app/views/spree/admin/data_feeds/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t('admin.data_feeds.new_data_feed'), new_object_url, class: "btn-success", icon: 'add.svg', id: 'admin_new_data_feed_link' %>
+  <%= button_link_to Spree.t('admin.data_feeds.new_data_feed'), new_object_url, class: "btn-primary", icon: 'add.svg', id: 'admin_new_data_feed_link' %>
 <% end if can?(:create, Spree::DataFeed) %>
 
 <% if @data_feeds.present? %>

app/views/spree/admin/images/index.html.erb

@@ -47,7 +47,7 @@
         <tr id="<%= spree_dom_id image %>" data-hook="images_row">
           <td class="move-handle text-center">
             <% if can? :edit, image %>
-              <%= svg_icon name: "grip-vertical.svg", width: '18', height: '18' %>
+              <%= svg_icon name: "grip-vertical.svg", width: '14', height: '14' %>
             <% end %>
           </td>
           <td class="image text-center">

app/views/spree/admin/menus/edit.html.erb

@@ -31,7 +31,7 @@
              <h5 class="mb-0 align-self-center"><%= Spree.t('admin.navigation.menu_items', menu_name: @menu.name) %></h5>
             </div>
             <div class="col d-flex justify-content-end">
-              <%= button_link_to Spree.t('admin.navigation.add_new_item', menu: @menu.name), spree.new_admin_menu_menu_item_path(@menu), icon: 'add.svg', class: 'no-wrap btn btn-success align-self-center' %>
+              <%= button_link_to Spree.t('admin.navigation.add_new_item', menu: @menu.name), spree.new_admin_menu_menu_item_path(@menu), icon: 'add.svg', class: 'no-wrap btn btn-primary align-self-center' %>
             </div>
           </div>
         </div>

app/views/spree/admin/menus/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t('admin.navigation.add_new_menu'), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'new_menu' } %>
+  <%= button_link_to Spree.t('admin.navigation.add_new_menu'), new_object_url, { class: "btn-primary", icon: 'add.svg', id: 'new_menu' } %>
 <% end if can?(:create, Spree::Menu) %>
 
 <% content_for :table_filter do %>

app/views/spree/admin/oauth_applications/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t('admin.oauth_applications.new'), new_object_url, class: "btn-success", icon: 'add.svg', id: 'admin_new_role_link' %>
+  <%= button_link_to Spree.t('admin.oauth_applications.new'), new_object_url, class: "btn-primary", icon: 'add.svg', id: 'admin_new_role_link' %>
 <% end if can? :create, Spree::OauthApplication %>
 
   <div class="card bg-light">
@@ -33,7 +33,7 @@
                 <%= password_field_tag :password, application.uid, class: 'form-control unhide text-muted border-0 shadow-none bg-transparent', data: { password_toggle_target: 'unhide' }, readonly: true %>
                 <div class="input-group-append">
                   <%= button_tag class: 'btn btn-link rounded', data: { action: 'click->password-toggle#password' } do %>
-                    <%= svg_icon name: "view.svg", width: '18', height: '18' %>
+                    <%= svg_icon name: "view.svg", width: '14', height: '14' %>
                   <% end %>
                 </div>
               </div>

app/views/spree/admin/option_types/_option_value_fields.html.erb

@@ -1,6 +1,6 @@
 <tr class="option_value fields" id="spree_<%= dom_id(f.object) %>" data-hook="option_value">
   <td class="move-handle text-center">
-    <%= svg_icon name: "grip-vertical.svg", width: '18', height: '18' %>
+    <%= svg_icon name: "grip-vertical.svg", width: '14', height: '14' %>
     <%= f.hidden_field :id %>
   </td>
   <td class="name"><%= f.text_field :name, class: "form-control", required: true %></td>

app/views/spree/admin/option_types/edit.html.erb

@@ -40,7 +40,7 @@
             <tr>
               <td colspan="4">
                 <div id="new_add_option_value" class="d-flex" data-hook>
-                  <%= button_link_to Spree.t(:add_option_value), "javascript:;", { icon: 'add.svg', :'data-target' => "tbody#sortVert", class: 'btn-success mx-auto spree_add_fields' } %>
+                  <%= button_link_to Spree.t(:add_option_value), "javascript:;", { icon: 'add.svg', :'data-target' => "tbody#sortVert", class: 'btn-primary mx-auto spree_add_fields' } %>
                 </div>
               </td>
             </tr>

app/views/spree/admin/option_types/index.html.erb

@@ -4,7 +4,7 @@
 
 <% content_for :page_actions do %>
   <span id="new_ot_link">
-    <%= button_link_to Spree.t(:new_option_type), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'new_option_type_link' } %>
+    <%= button_link_to Spree.t(:new_option_type), new_object_url, { class: "btn-primary", icon: 'add.svg', id: 'new_option_type_link' } %>
   </span>
 <% end if can?(:create, Spree::OptionType) %>
 
@@ -26,7 +26,7 @@
       <% @option_types.each do |option_type| %>
         <tr class="spree_option_type <%= cycle('odd', 'even') %>" id="<%= spree_dom_id option_type %>" data-hook="option_row">
           <td class="move-handle text-center">
-            <%= svg_icon name: "grip-vertical.svg", width: '18', height: '18' %>
+            <%= svg_icon name: "grip-vertical.svg", width: '14', height: '14' %>
           </td>
           <td><%= option_type.name %></td>
           <td class="presentation"><%= option_type.presentation %></td>

app/views/spree/admin/orders/_channel_form.html.erb

@@ -9,7 +9,7 @@
       <% end %>
     </div>
     <div class="form-actions" data-hook="buttons">
-      <%= button Spree.t('actions.update'), 'recycle.svg', 'submit', { class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
+      <%= button Spree.t('actions.update'), 'recycle.svg', 'submit', { class: 'btn-primary', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
       <span class="or"><%= Spree.t(:or) %></span>
       <%= button_link_to Spree.t('actions.cancel'), edit_admin_order_url(order), icon: 'cancel.svg' %>
     </div>

app/views/spree/admin/orders/_line_items.html.erb

@@ -39,7 +39,7 @@
                 <span class="d-flex justify-content-center">
                   <% if can? :update, item %>
                     <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-line-item btn btn-light btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), style: 'display: none', no_text: true %>
-                    <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-line-item btn btn-success btn-sm', no_text: true, data: { :'line-item-id' => item.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none' %>
+                    <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-line-item btn btn-primary btn-sm', no_text: true, data: { :'line-item-id' => item.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none' %>
                     <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "#", class: 'edit-line-item btn btn-light btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
                     <%= link_to_with_icon 'delete.svg', Spree.t('delete'), "#", class: 'delete-line-item btn btn-danger btn-sm', data: { 'line-item-id' => item.id, action: 'remove'}, title: Spree.t('delete'), no_text: true %>
                   <% end %>