Integrate the new design of the notice bar and the Navbar (#200)

## JIRA Ticket [DOT-7350](https://nextmediama.atlassian.net/browse/DOT-7350) ## QA Steps - [ ] `pnpm i` - [ ] `pnpm dev` ## Note Leave empty when you have nothing to say [DOT-7350]: https://youcanshop.atlassian.net/browse/DOT-7350?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
youcan-shop · Feb 14, 2023 · d32fa8c · d32fa8c
1 parent 5208410
commit d32fa8c
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 109 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liquid.format.enable": false
+}
diff --git a/assets/Truck.png b/assets/Truck.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/main.css b/assets/main.css
@@ -31,7 +31,7 @@ body {
 }
 
 .container {
-  max-width: 1124px !important;
+  max-width: 1440px !important;
   margin: 0 auto;
   padding: 0 1.5rem;
 }

diff --git a/assets/navbar.css b/assets/navbar.css
@@ -52,7 +52,7 @@
 .yc-header .yc-navbar .corner {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 24px;
 }
 .yc-header .yc-navbar .corner > * {
   display: flex;
@@ -108,7 +108,7 @@
 .yc-header .yc-navbar .menu-list {
   display: flex;
   list-style: none;
-  gap: 1rem;
+  gap: 50px;
 }
 .yc-header .yc-navbar .menu-item a {
   color: var(--yc-nav-links-color);

diff --git a/assets/notice-bar.css b/assets/notice-bar.css
@@ -1,16 +1,21 @@
 .yc-notice {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
   white-space: nowrap;
   overflow: hidden;
 }
 .yc-notice .content {
+  display: flex;
+  align-items: center;
+  padding: 8px 0 10px 0;
+  justify-content: center;
+  column-gap: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.yc-notice .content img {
+  height: 17px;
+  width: 18px;
+}
 .yc-notice.desktop {
   display: none;
 }
@@ -27,13 +32,21 @@
 }
 .yc-notice.mobile {
   display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0 12px 0;
+  gap: 12px;
   background-color: var(--yc-notice-background-color-mobile);
   height: var(--yc-notice-height-mobile);
 }
 .yc-notice.mobile .content {
   color: var(--yc-notice-text-color-mobile);
   font-size: var(--yc-notice-font-size-mobile);
 }
+.yc-notice.mobile img {
+  height: 17px;
+  width: 18px;
+}
 @media (min-width: 768px) {
   .yc-notice.mobile {
     display: none;

diff --git a/config/settings_data.json b/config/settings_data.json
@@ -1,81 +1,84 @@
 {
-  "current": {
-    "font_family": "Almarai",
-    "theme_direction": "rtl",
-    "primary_color": "#B83375FF",
-    "sections": {
-      "notice-bar": {
-        "type": "notice-bar",
-        "settings": {
-          "notice_bar_content_desktop": "<p>الشحن المجاني متاح لجميع الطلبات</p>",
-          "notice_bar_content_mobile": "<p>الشحن المجاني متاح لجميع الطلبات</p>",
-          "notice_bar_content_font_size_desktop": 12,
-          "notice_bar_content_font_size_mobile": 12,
-          "notice_bar_height_desktop": 45,
-          "notice_bar_height_mobile": 45,
-          "notice_bar_background_color_desktop": "#B83375FF",
-          "notice_bar_background_color_mobile": "#B83375FF"
-        }
-      },
-      "main-navbar": {
-        "type": "main-navbar",
-        "blocks": {
-          "block_gkk8ae6rzniqule": {
-            "type": "logo",
-            "settings": {}
-          },
-          "block_glpfko4s63fm6kj": {
-            "type": "menu",
-            "settings": {}
-          },
-          "block_gmrv273jdps9sso": {
-            "type": "search_and_cart",
-            "settings": {}
-          }
-        },
-        "order": ["block_gkk8ae6rzniqule", "block_glpfko4s63fm6kj", "block_gmrv273jdps9sso"],
-        "settings": {
-          "cart_badge_color": "#B83375FF",
-          "navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png",
-          "navbar_links_color": "#000000FF",
-          "navbar_background_color": "#FFFFFFFF",
-          "navbar_height": 107,
-          "navbar_always_on_top": true
-        }
-      },
-      "main-footer": {
-        "type": "main-footer",
-        "blocks": {
-          "block_e56ztxh3krc44so": {
-            "type": "column",
-            "settings": {
-              "block-title": "نبذة مختصرة عن متجرنا",
-              "description":
-                "<p>متجرنا متخصص في بيع مجموعة متنوعة من الملابس للرجال والنساء والأطفال.</p><p>نحن نقدم مزيجًا من الملابس الرسمية وغير الرسمية ، بدءًا من الجينز والقمصان إلى الفساتين والبدلات.</p>"
-            }
-          },
-          "block_ocqzrg651kw4tf8": {
-            "type": "copyright",
-            "settings": {
-              "copyright": "<p>جميع الحقوق محفوظة © 2023</p>",
-              "copyright_additonal_image": "image-1-2KSUTbu7UzFbGW1h5Q1sHk9sYpH.png"
+    "current": {
+        "font_family": "Almarai",
+        "theme_direction": "rtl",
+        "primary_color": "#F33520",
+        "sections": {
+            "notice-bar": {
+                "type": "notice-bar",
+                "settings": {
+                    "notice_bar_content_desktop": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
+                    "notice_bar_content_mobile": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
+                    "notice_bar_content_font_size_desktop": 13,
+                    "notice_bar_content_font_size_mobile": 12,
+                    "notice_bar_height_desktop": 45,
+                    "notice_bar_height_mobile": 45,
+                    "notice_bar_background_color_desktop": "#F33520FF",
+                    "notice_bar_background_color_mobile": "#E72E25FF"
+                }
+            },
+            "main-navbar": {
+                "type": "main-navbar",
+                "blocks": {
+                    "block_gkk8ae6rzniqule": {
+                        "type": "logo",
+                        "settings": {}
+                    },
+                    "block_glpfko4s63fm6kj": {
+                        "type": "menu",
+                        "settings": {}
+                    },
+                    "block_gmrv273jdps9sso": {
+                        "type": "search_and_cart",
+                        "settings": {}
+                    }
+                },
+                "order": [
+                    "block_gkk8ae6rzniqule",
+                    "block_glpfko4s63fm6kj",
+                    "block_gmrv273jdps9sso"
+                ],
+                "settings": {
+                    "cart_badge_color": "#B83375FF",
+                    "navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png",
+                    "navbar_links_color": "#000000FF",
+                    "navbar_background_color": "#FFFFFFFF",
+                    "navbar_height": 85,
+                    "navbar_always_on_top": true
+                }
+            },
+            "main-footer": {
+                "type": "main-footer",
+                "blocks": {
+                    "block_e56ztxh3krc44so": {
+                        "type": "column",
+                        "settings": {
+                            "block-title": "نبذة مختصرة عن متجرنا",
+                            "description": "<p>متجرنا متخصص في بيع مجموعة متنوعة من الملابس للرجال والنساء والأطفال.<\/p><p>نحن نقدم مزيجًا من الملابس الرسمية وغير الرسمية ، بدءًا من الجينز والقمصان إلى الفساتين والبدلات.<\/p>"
+                        }
+                    },
+                    "block_ocqzrg651kw4tf8": {
+                        "type": "copyright",
+                        "settings": {
+                            "copyright": "<p>جميع الحقوق محفوظة © 2023<\/p>",
+                            "copyright_additonal_image": "image-1-2KSUTbu7UzFbGW1h5Q1sHk9sYpH.png"
+                        }
+                    }
+                },
+                "order": [
+                    "block_e56ztxh3krc44so",
+                    "block_ocqzrg651kw4tf8"
+                ],
+                "settings": {
+                    "footer_background_color": "#222222FF",
+                    "footer_copyright_background": "#111111FF"
+                }
             }
-          }
         },
-        "order": [
-          "block_e56ztxh3krc44so",
-          "block_ocqzrg651kw4tf8"
-        ],
-        "settings": {
-          "footer_background_color": "#222222FF",
-          "footer_copyright_background": "#111111FF"
-        }
-      }
+        "success_color": "#1EBA54FF",
+        "error_color": "#DF1E2FFF"
     },
-    "success_color": "#1EBA54FF",
-    "error_color": "#DF1E2FFF"
-  },
-  "presets": {
-    "Default": {}
-  }
+    "presets": {
+        "Default": {}
+    }
 }
diff --git a/sections/main-navbar.liquid b/sections/main-navbar.liquid
@@ -31,7 +31,7 @@
             <a href='/'>
               <img
                 loading='lazy'
-                src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'cod-logo.png' | asset_url }} {%- endif -%}'
+                src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'logo.png' | asset_url }} {%- endif -%}'
               >
             </a>
           </div>

diff --git a/sections/notice-bar.liquid b/sections/notice-bar.liquid
@@ -1,35 +1,40 @@
 {{ 'notice-bar.css' | asset_url | stylesheet_tag }}
 
 {% style %}
-  :root {
-      /* Notice bar Desktop */
-      --yc-notice-height-desktop: {{ section.settings.notice_bar_height_desktop }}px;
-      --yc-notice-font-size-desktop: {{ section.settings.notice_bar_content_font_size_desktop }}px;
-      --yc-notice-background-color-desktop: {%- if section.settings.notice_bar_background_color_desktop %}
-        {{ section.settings.notice_bar_background_color_desktop.hex }}
-        {%- else %}  var(--yc-primary-color){%- endif %};
-      --yc-notice-text-color-desktop: {{ section.settings.notice_bar_content_text_color_desktop.hex }};
+  :root  {
+    /* Notice bar Desktop */
+    --yc-notice-height-desktop: {{ section.settings.notice_bar_height_desktop }}px;
+    --yc-notice-font-size-desktop: {{ section.settings.notice_bar_content_font_size_desktop }}px;
+    --yc-notice-background-color-desktop: {%- if section.settings.notice_bar_background_color_desktop %}
+      {{ section.settings.notice_bar_background_color_desktop.hex }}
+    {%- else %}
+      var(--yc-primary-color){%- endif %};
+    --yc-notice-text-color-desktop: {{ section.settings.notice_bar_content_text_color_desktop.hex }};
 
-      /* Notice bar Mobile */
-      --yc-notice-height-mobile: {{ section.settings.notice_bar_height_mobile }}px;
-      --yc-notice-font-size-mobile: {{ section.settings.notice_bar_content_font_size_mobile }}px;
-      --yc-notice-background-color-mobile: {%- if section.settings.notice_bar_background_color_mobile %}
-        {{ section.settings.notice_bar_background_color_mobile.hex }}
-        {%- else %}
-        var(--yc-primary-color){%- endif %};
-      --yc-notice-text-color-mobile: {{ section.settings.notice_bar_content_text_color_mobile.hex }};
-      --yc-notice-above: {{ section.settings.notice_bar_above }};
+    /* Notice bar Mobile */
+    --yc-notice-height-mobile: {{ section.settings.notice_bar_height_mobile }}px;
+    --yc-notice-font-size-mobile: {{ section.settings.notice_bar_content_font_size_mobile }}px;
+    --yc-notice-background-color-mobile: {%- if section.settings.notice_bar_background_color_mobile %}
+      {{ section.settings.notice_bar_background_color_mobile.hex }}
+    {%- else %}
+      var(--yc-primary-color){%- endif %};
+    --yc-notice-text-color-mobile: {{ section.settings.notice_bar_content_text_color_mobile.hex }};
+    --yc-notice-above: {{ section.settings.notice_bar_above }};
   }
 {% endstyle %}
 
 {%- if section.settings.notice_bar_show_desktop %}
   <div class='yc-notice desktop'>
-    <div class='content container '>{{ section.settings.notice_bar_content_desktop }}</div>
+    <div class='content container '>
+      <img src='{%- if section.settings.notice_bar_logo.src -%} {{ section.settings.notice_bar_logo.src }} {%- else -%} {{ 'Truck.png' | asset_url }} {%- endif -%}'>
+      {{ section.settings.notice_bar_content_desktop }}
+    </div>
   </div>
 {%- endif %}
 
 {%- if section.settings.notice_bar_show_mobile %}
   <div class='yc-notice mobile container'>
+    <img src='{%- if section.settings.notice_bar_logo.src -%} {{ section.settings.notice_bar_logo.src }} {%- else -%} {{ 'Truck.png' | asset_url }} {%- endif -%}'>
     <div class='content'>{{ section.settings.notice_bar_content_mobile }}</div>
   </div>
 {%- endif %}
@@ -49,6 +54,11 @@
       "label": "Content",
       "default": "Special offer: free delivery, pay on delivery, faster and order now"
     },
+    {
+      "type": "image_picker",
+      "id": "notice_bar_logo",
+      "label": "Notice bar logo"
+    },
     {
       "type": "range",
       "id": "notice_bar_height_desktop",

diff --git a/styles/navbar.scss b/styles/navbar.scss
@@ -62,7 +62,7 @@
     .corner {
       display: flex;
       align-items: center;
-      gap: 1rem;
+      gap: 24px;
 
       & > * {
         display: flex;
@@ -125,7 +125,7 @@
     .menu-list {
       display: flex;
       list-style: none;
-      gap: 1rem;
+      gap: 50px;
     }
 
     .menu-item {

diff --git a/styles/notice-bar.scss b/styles/notice-bar.scss
@@ -1,17 +1,22 @@
 @import 'helpers/mixins';
-
 .yc-notice {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
   white-space: nowrap;
   overflow: hidden;
 
   .content {
+    display: flex;
+    align-items: center;
+    padding: 8px 0 10px 0;
+    justify-content: center;
+    column-gap: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    img {
+      height: 17px;
+      width: 18px;
+    }
   }
 
   &.desktop {
@@ -31,6 +36,10 @@
 
   &.mobile {
     display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0 12px 0;
+    gap: 12px;
     background-color: var(--yc-notice-background-color-mobile);
     height: var(--yc-notice-height-mobile);
 
@@ -39,6 +48,11 @@
       font-size: var(--yc-notice-font-size-mobile);
     }
 
+    img {
+      height: 17px;
+      width: 18px;
+    }
+
     @include breakpoint('md') {
       display: none;
     }