From dbdbe01d6a7d55355a2451548c10633774fa1df5 Mon Sep 17 00:00:00 2001
From: Luis Ramos <luisramos0@gmail.com>
Date: Mon, 20 Apr 2020 13:23:48 +0100
Subject: [PATCH] Add new style to closed shop message

---
 .../stylesheets/darkswarm/branding.css.scss   |  1 +
 .../stylesheets/darkswarm/shop.css.scss       | 41 ++++++++++++++++++-
 .../_last_order_cycle.html.haml               |  2 -
 .../_next_order_cycle.html.haml               |  2 -
 .../shopping_shared/tabs/_shop.html.haml      | 28 ++++++++-----
 5 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss
index 743169a151..a62702e9cf 100644
--- a/app/assets/stylesheets/darkswarm/branding.css.scss
+++ b/app/assets/stylesheets/darkswarm/branding.css.scss
@@ -46,6 +46,7 @@ $grey-080: #f2f2f2;
 $grey-400: #bbb;
 $grey-500: #999;
 $grey-600: #777;
+$grey-650: #666;
 $grey-700: #555;
 $grey-800: #333;
 
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index c7c61e19f9..3a1b68153f 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -125,7 +125,44 @@
     }
   }
 
-  .shopfront_closed_message {
-    margin: 2em 0em;
+  .closed_shop_header {
+    background-color: $grey-650;
+    color: $white;
+
+    h4 {
+      color: $white;
+
+      div {
+        display: inline-block;
+      }
+    }
+
+    p {
+      line-height: 2.5rem;
+      margin-bottom: 0;
+    }
+  }
+
+  .warning_sign {
+    margin: 0 10px 0 5px;
+
+    .rectangle {
+      position: absolute;
+      top: 27px;
+      color: $grey-650;
+      width: 23px;
+      height: 23px;
+      transform: rotate(-315deg);
+      border-radius: 4px;
+      background-color: #ffffff;
+    }
+
+    strong {
+      text-align: center;
+      color: $grey-650;
+      display: block;
+      position: relative;
+      width: 23px;
+    }
   }
 }
diff --git a/app/views/shopping_shared/_last_order_cycle.html.haml b/app/views/shopping_shared/_last_order_cycle.html.haml
index 8bbe9d7411..ca474fadd6 100644
--- a/app/views/shopping_shared/_last_order_cycle.html.haml
+++ b/app/views/shopping_shared/_last_order_cycle.html.haml
@@ -1,4 +1,2 @@
 - if most_recently_closed = OrderCycle.most_recently_closed_for(@distributor)
-  (
   = t :shopping_oc_last_closed, distance_of_time: distance_of_time_in_words_to_now(most_recently_closed.orders_close_at)
-  )
diff --git a/app/views/shopping_shared/_next_order_cycle.html.haml b/app/views/shopping_shared/_next_order_cycle.html.haml
index 668493bab3..04f63fdcad 100644
--- a/app/views/shopping_shared/_next_order_cycle.html.haml
+++ b/app/views/shopping_shared/_next_order_cycle.html.haml
@@ -1,4 +1,2 @@
 - if next_oc = OrderCycle.first_opening_for(@distributor)
-  (
   = t :shopping_oc_next_open, distance_of_time: distance_of_time_in_words_to_now(next_oc.orders_open_at)
-  )
diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml
index 4edcd1c91c..44a6461932 100644
--- a/app/views/shopping_shared/tabs/_shop.html.haml
+++ b/app/views/shopping_shared/tabs/_shop.html.haml
@@ -2,22 +2,30 @@
   .order-cycle-bar.hide-for-large-up
     = render partial: "shopping_shared/order_cycles"
 
-  .row
-    .small-12.columns
-      - if no_open_order_cycles?
+  - if no_open_order_cycles?
+    .row.closed_shop_header
+      .small-12.columns
         .content
           %h4
-            %i.ofn-i_012-warning
-            = t :shopping_oc_closed
-            %small
-              %em
-                = render partial: "shopping_shared/next_order_cycle"
-                = render partial: "shopping_shared/last_order_cycle"
+            .warning_sign
+              .rectangle
+              %strong !
+            %div
+              = t :shopping_oc_closed
+          %p
+            = render partial: "shopping_shared/next_order_cycle"
+            = render partial: "shopping_shared/last_order_cycle"
+
+    .row
+      .small-12.columns
+        .content
           .shopfront_closed_message
           - if shopfront_closed_message?
             = current_distributor.preferred_shopfront_closed_message.html_safe
           - else
             = t :shopping_oc_closed_description
 
-      - unless require_customer?
+  - unless require_customer?
+    .row
+      .small-12.columns
         = render partial: "shop/products/form"