From b482c4215e426cff2de4b0775b409c4020b69a32 Mon Sep 17 00:00:00 2001
From: Thomas Bnt <thomasbnt@protonmail.com>
Date: Tue, 25 Oct 2022 15:11:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Added=20cursor:pointer=20to=20di?=
 =?UTF-8?q?v=20of=20badges=20and=20mt-4=20to=20btn=20(#18550)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Zerg <rajattalesra4914@gmail.com>
---
 app/assets/stylesheets/badges.scss      | 1 +
 app/views/badges/_badge_detail.html.erb | 2 +-
 app/views/users/_badges_area.html.erb   | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/badges.scss b/app/assets/stylesheets/badges.scss
index 8896d1478..c9f104902 100644
--- a/app/assets/stylesheets/badges.scss
+++ b/app/assets/stylesheets/badges.scss
@@ -2,6 +2,7 @@
   .badge-container {
     width: auto;
     background-color: white;
+    cursor: pointer;
 
     .badge-image-conatiner {
       width: auto;
diff --git a/app/views/badges/_badge_detail.html.erb b/app/views/badges/_badge_detail.html.erb
index b32cc50c7..824053244 100644
--- a/app/views/badges/_badge_detail.html.erb
+++ b/app/views/badges/_badge_detail.html.erb
@@ -10,6 +10,6 @@
       <h4 class="fw-800 fs-l color-grey-800"><%= badge.title %></h4>
       <p><%= badge.description %></p>
     </div>
-    <button class="flex flex-row items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()"><%= t("views.badges.gotit") %></button>
+    <button class="flex flex-row items-start c-btn c-btn--primary mt-4" onclick="window.Forem.closeModal()"><%= t("views.badges.gotit") %></button>
   </div>
 </div>
diff --git a/app/views/users/_badges_area.html.erb b/app/views/users/_badges_area.html.erb
index ee877d5da..95c1b0559 100644
--- a/app/views/users/_badges_area.html.erb
+++ b/app/views/users/_badges_area.html.erb
@@ -12,7 +12,7 @@
           <img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
                alt="<%= achievement.badge_title %>"
                class="mx-auto max-w-75 h-auto align-middle"
-               style="object-fit: contain; width: 100%; aspect-ratio: 1 / 1; transform: rotate(<%= rand(-10..10) %>deg);"
+               style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; transform: rotate(<%= rand(-10..10) %>deg);"
                loading="lazy" />
         </div>