Merge pull request #11977 from drummer83/my_pr-11936

Fixes minor styling issues of admin and admin v3 in the dashboard

app/views/spree/admin/overview/_enterprises.html.haml

@@ -2,12 +2,12 @@
   = render 'enterprises_header'
 
   - if @enterprises.empty?
-    %div.sixteen.columns.alpha.list-item.red
+    %div.sixteen.columns.alpha.list-item.warning
       %span.text.fifteen.columns.alpha
         = t "spree_admin_enterprises_none_text"
       %span.one.columns.omega
         %span.icon-remove-sign
-    %a.sixteen.columns.alpha.button.bottom.red{ href: "#{main_app.new_admin_enterprise_path}" }
+    %a.sixteen.columns.alpha.button.bottom.warning{ href: "#{main_app.new_admin_enterprise_path}" }
       = t "spree_admin_enterprises_none_create_a_new_enterprise"
       %span.icon-arrow-right
 
@@ -27,6 +27,6 @@
     %div.sixteen.columns.alpha.list
       = render partial: 'enterprise_row', collection: @enterprises, as: :enterprise
 
-    %a.sixteen.columns.alpha.button.bottom.blue{ href: "#{main_app.admin_enterprises_path}" }
+    %a.sixteen.columns.alpha.button.bottom{ href: "#{main_app.admin_enterprises_path}" }
       = t "spree_admin_overview_enterprises_footer"
       %span.icon-arrow-right

app/views/spree/admin/overview/_enterprises_header.html.haml

@@ -1,9 +1,9 @@
-%div.header.sixteen.columns.alpha{ :class => "#{@enterprises.count > 0 ? "" : "red"}"}
+%div.header.sixteen.columns.alpha{ :class => "#{@enterprises.count > 0 ? "" : "warning"}"}
   %h3.thirteen.columns.alpha
     = t "spree_admin_overview_enterprises_header"
   - if @enterprises.any?
     - if spree_current_user.can_own_more_enterprises?
-      %a.three.columns.omega.icon-plus.button.blue.white-bottom{ href: "#{main_app.new_admin_enterprise_path}" }
+      %a.three.columns.omega.icon-plus.button.white-bottom{ href: "#{main_app.new_admin_enterprise_path}" }
         = t "spree_admin_enterprises_create_new"
   - else
     %a{ "ofn-with-tip" => t('.ofn_with_tip') }

app/views/spree/admin/overview/_order_cycles.html.haml

@@ -1,11 +1,11 @@
-- color_class = @order_cycle_count > 0 ? "blue" : "orange"
-- icon_class = @order_cycle_count > 0 ? "icon-ok-sign" : "icon-warning-sign"
+- color_class = "warning" unless @order_cycle_count.positive?
+- icon_class = @order_cycle_count.positive? ? "icon-ok-sign" : "icon-warning-sign"
 %div.dashboard_item.seven.columns.omega#order_cycles
   %div.header.sixteen.columns.alpha{class: color_class}
     %h3.ten.columns.alpha
       = t ".order_cycles"
-    - if @order_cycle_count > 0
-      %a.six.columns.omega.icon-plus.button.blue{ href: main_app.new_admin_order_cycle_path }
+    - if @order_cycle_count.positive?
+      %a.six.columns.omega.icon-plus.button{ href: main_app.new_admin_order_cycle_path }
         = t "spree_admin_enterprises_create_new"
     - else
       %a{ "ofn-with-tip" => t(".order_cycles_tip") }
@@ -13,9 +13,9 @@
   %div.sixteen.columns.alpha.list
     %div.sixteen.columns.alpha.list-item{class: color_class}
       %span.thirteen.columns.alpha
-        = t('.you_have_active', count: @order_cycle_count)
+        = t(".you_have_active", count: @order_cycle_count)
       %span.three.columns.omega
         %span{class: icon_class}
-    %a.sixteen.columns.alpha.button.bottom{ href: main_app.admin_order_cycles_path, class: color_class }
-      = t ".manage_order_cycles"
-      %span.icon-arrow-right
+  %a.sixteen.columns.alpha.button.bottom{ href: main_app.admin_order_cycles_path, class: color_class }
+    = t ".manage_order_cycles"
+    %span.icon-arrow-right

app/views/spree/admin/overview/_products.html.haml

@@ -1,29 +1,26 @@
+- color_class = "warning" unless @product_count.positive?
+- icon_class = @product_count.positive? ? "icon-ok-sign" : "icon-remove-sign"
 %div.dashboard_item.seven.columns.alpha#products
-  %div.header.sixteen.columns.alpha{ :class => "#{@product_count > 0 ? "" : "red"}"}
+  %div.header.sixteen.columns.alpha{class: color_class}
     %h3.ten.columns.alpha
       = t "products"
-    - if @product_count > 0
-      %a.six.columns.omega.icon-plus.button.blue{ href: "#{new_admin_product_path}" }
+    - if @product_count.positive?
+      %a.six.columns.omega.icon-plus.button{ href: new_admin_product_path }
         = t "spree_admin_enterprises_create_new"
     - else
       %a{ "ofn-with-tip" => t(".products_tip") }
         = t "admin.whats_this"
   %div.sixteen.columns.alpha.list
-    - if @product_count > 0
-      %div.sixteen.columns.alpha.list-item
-        %span.thirteen.columns.alpha
-          = t(".active_products", count: @product_count )
-        %span.three.columns.omega
-          %span.icon-ok-sign
-      %a.sixteen.columns.alpha.button.bottom.blue{ href: "#{admin_products_path}" }
-        = t "spree_admin_enterprises_producers_manage_products"
-        %span.icon-arrow-right
-    - else
-      %div.sixteen.columns.alpha.list-item.red
-        %span.thirteen.columns.alpha
-          = t(".active_products", count: @product_count )
-        %span.three.columns.omega
-          %span.icon-remove-sign
-      %a.sixteen.columns.alpha.button.bottom.red{ href: "#{new_admin_product_path}" }
-        = t "spree_admin_enterprises_create_new_product"
-        %span.icon-arrow-right
+    %div.sixteen.columns.alpha.list-item{class: color_class}
+      %span.thirteen.columns.alpha
+        = t(".active_products", count: @product_count)
+      %span.three.columns.omega
+        %span{class: icon_class}
+  - if @product_count.positive?
+    %a.sixteen.columns.alpha.button.bottom{ href: admin_products_path, class: color_class }
+      = t "spree_admin_enterprises_producers_manage_products"
+      %span.icon-arrow-right
+  - else
+    %a.sixteen.columns.alpha.button.bottom{ href: new_admin_product_path, class: color_class }
+      = t "spree_admin_enterprises_create_new_product"
+      %span.icon-arrow-right

app/webpacker/css/admin/dashboard_item.scss

@@ -18,7 +18,7 @@ div.dashboard_item {
       background-color: $spree-green;
     }
 
-    &.red {
+    &.warning {
       background-color: $color-warning;
     }
 
@@ -39,7 +39,7 @@ div.dashboard_item {
       bottom: 5px;
     }
 
-    &.red {
+    &.warning {
       border-color: $color-warning;
       border-width: 3px;
 
@@ -101,6 +101,10 @@ div.dashboard_item {
     max-height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   .list-title {
@@ -121,7 +125,7 @@ div.dashboard_item {
   .list-item {
     border: solid $spree-blue;
     border-width: 0px 1px 0px 1px;
-    height: 38px;
+    height: 41px;
 
     span.alpha {
       font-weight: bold;
@@ -160,13 +164,13 @@ div.dashboard_item {
       border: solid $color-warning;
     }
 
-    &.red {
+    &.warning {
       color: $color-warning;
       border: solid $color-warning;
     }
 
     &.orange,
-    &.red {
+    &.warning {
       border-width: 0px 3px 0px 3px;
     }
 
@@ -224,7 +228,7 @@ div.dashboard_item {
       background-color: $spree-blue;
     }
 
-    &.red {
+    &.warning {
       background-color: $color-warning;
     }
 

app/webpacker/css/admin_v3/dashboard/dashboard_item.scss

@@ -14,15 +14,7 @@ div.dashboard_item {
     padding: 0px 6px;
     border-radius: 10px;
 
-    &.green {
-      background-color: $spree-green;
-    }
-
-    &.red {
-      background-color: $color-warning;
-    }
-
-    &.orange {
+    &.warning {
       background-color: $color-warning;
     }
   }
@@ -39,16 +31,7 @@ div.dashboard_item {
       bottom: 5px;
     }
 
-    &.red {
-      border-color: $color-warning;
-      border-width: 3px;
-
-      h3 {
-        color: $color-warning;
-      }
-    }
-
-    &.orange {
+    &.warning {
       border-color: $color-warning;
       border-width: 3px;
 
@@ -102,6 +85,10 @@ div.dashboard_item {
     max-height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
+
+    &:focus {
+      outline: thin dotted;
+    }
   }
 
   .list-title {
@@ -122,7 +109,7 @@ div.dashboard_item {
   .list-item {
     border: solid $spree-blue;
     border-width: 0px 1px 0px 1px;
-    height: 38px;
+    height: 41px;
 
     span.alpha {
       font-weight: bold;
@@ -156,18 +143,9 @@ div.dashboard_item {
       font-size: 30px;
     }
 
-    &.orange {
+    &.warning {
       color: $color-warning;
       border: solid $color-warning;
-    }
-
-    &.red {
-      color: $color-warning;
-      border: solid $color-warning;
-    }
-
-    &.orange,
-    &.red {
       border-width: 0px 3px 0px 3px;
     }
 
@@ -200,13 +178,6 @@ div.dashboard_item {
         .icon-ok-sign {
           color: #fff;
         }
-
-        .text-icon {
-          &.green {
-            color: $spree-green;
-            background-color: #fff;
-          }
-        }
       }
     }
   }
@@ -217,20 +188,19 @@ div.dashboard_item {
     font-weight: bold;
     text-align: center;
 
-    &.orange {
+    &.warning {
       background-color: $color-warning;
-    }
+      border-color: $color-warning;
 
-    &.blue {
-      background-color: $spree-blue;
-    }
+      &:focus {
+        border-color: $color-btn-hover-bg;
+      }
 
-    &.red {
-      background-color: $color-warning;
     }
 
     &:hover {
       background-color: $color-btn-hover-bg;
+      border-color: $color-btn-hover-bg;
     }
 
     &.bottom {