From 4e9c5479c17ee248c1c0a181d8156b3d8601adfa Mon Sep 17 00:00:00 2001
From: Ridhwana <Ridhwana.Khan16@gmail.com>
Date: Fri, 14 Apr 2023 11:01:52 +0200
Subject: [PATCH] Billboard Dropdown style updates (#19318)

* changes to the divider

* chore: update the flag icon

* chore: add a consistent width and height to all the icons in the dropdown

* chore: move widtha dn height closer to definition

* feat: make the border 1pm

* feat: add a margin to thehr

* add margin all round for hr

* chore: same 8px for all around
---
 app/assets/images/flag.svg                   |  4 ++--
 app/assets/stylesheets/widgets.scss          |  7 +++++++
 app/views/shared/_display_ad_header.html.erb | 10 ++++------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/images/flag.svg b/app/assets/images/flag.svg
index 893229783..1e638d2e1 100644
--- a/app/assets/images/flag.svg
+++ b/app/assets/images/flag.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2.16667 11.3333V16.3333H0.5V0.5H8.31833C8.47305 0.500083 8.62469 0.543236 8.75627 0.624627C8.88785 0.706018 8.99417 0.822433 9.06333 0.960833L9.66667 2.16667H14.6667C14.8877 2.16667 15.0996 2.25446 15.2559 2.41074C15.4122 2.56703 15.5 2.77899 15.5 3V12.1667C15.5 12.3877 15.4122 12.5996 15.2559 12.7559C15.0996 12.9122 14.8877 13 14.6667 13H9.34833C9.19361 12.9999 9.04197 12.9568 8.91039 12.8754C8.77882 12.794 8.67249 12.6776 8.60333 12.5392L8 11.3333H2.16667ZM2.16667 2.16667V9.66667H9.03L9.86333 11.3333H13.8333V3.83333H8.63667L7.80333 2.16667H2.16667Z" fill="#404040"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
+    <path d="M12.382 3a1 1 0 0 1 .894.553L14 5h6a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-6.382a1 1 0 0 1-.894-.553L12 16H5v6H3V3h9.382Zm-.618 2H5v9h8.236l1 2H19V7h-6.236l-1-2Z"/>
 </svg>
diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss
index 62b9f5b46..ae7ce4e27 100644
--- a/app/assets/stylesheets/widgets.scss
+++ b/app/assets/stylesheets/widgets.scss
@@ -365,3 +365,10 @@
     }
   }
 }
+
+.sponsorship-dropdown {
+  hr {
+    border: 0.5px solid var(--divider);
+    margin: 8px;
+  }
+}
diff --git a/app/views/shared/_display_ad_header.html.erb b/app/views/shared/_display_ad_header.html.erb
index f90793879..4a214902c 100644
--- a/app/views/shared/_display_ad_header.html.erb
+++ b/app/views/shared/_display_ad_header.html.erb
@@ -17,26 +17,24 @@
       <%= crayons_icon_tag("small-overflow-horizontal", class: "pointer-events-none", title: t("display_ad.menu.icon")) %>
   </button>
 
-  <div id="sponsorship-dropdown-<%= display_ad.id %>" class="crayons-dropdown right-0">
+  <div id="sponsorship-dropdown-<%= display_ad.id %>" class="crayons-dropdown sponsorship-dropdown right-0">
     <ul class="list-none m-0">
-      <% if Page.exists?(slug: "billboards") %>
         <li>
           <a class="crayons-link crayons-link--block" href='/billboards'>
-            <%= crayons_icon_tag("info", aria_hidden: true, class: "c-btn__icon") %>
+            <%= crayons_icon_tag("info", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
             <%= I18n.t("display_ad.menu.what_is_a_billboard") %>
           </a>
         </li>
-      <% end %>
       <li>
         <a class="crayons-link crayons-link--block" href='/settings/customization#sponsors'>
-          <%= crayons_icon_tag("setting", aria_hidden: true, class: "c-btn__icon") %>
+          <%= crayons_icon_tag("setting", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
           <%= I18n.t("display_ad.menu.manage_preferences") %>
         </a>
       </li>
       <hr />
       <li>
         <a class="crayons-link crayons-link--block" href="/report-abuse?billboard=<%= display_ad.id %>">
-          <%= crayons_icon_tag("flag", aria_hidden: true, class: "c-btn__icon") %>
+          <%= crayons_icon_tag("flag", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
           <%= I18n.t("display_ad.menu.report_billboard") %>
         </a>
       </li>