From 7b0f8b6011a030806d4e68c3107baedb401e59bc Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Fri, 23 Sep 2022 23:32:28 +0530
Subject: [PATCH] Design fixes for badges (#18445)

* Design fixes for badges

* Badges UI fixes

* Shifted styles to scss file

* Removed gray functionality for badge
---
 app/assets/stylesheets/badge_details.scss | 11 ++++++++
 app/assets/stylesheets/badges.scss        | 34 +++++++++--------------
 app/assets/stylesheets/crayons.scss       |  4 +++
 app/views/badges/_badge_detail.html.erb   |  3 +-
 app/views/badges/index.html.erb           |  8 ++----
 app/views/users/_badges_area.html.erb     |  2 +-
 6 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/stylesheets/badge_details.scss

diff --git a/app/assets/stylesheets/badge_details.scss b/app/assets/stylesheets/badge_details.scss
new file mode 100644
index 000000000..b3011a45a
--- /dev/null
+++ b/app/assets/stylesheets/badge_details.scss
@@ -0,0 +1,11 @@
+.badge_details {
+  img {
+    width: 192px;
+    height: 192px;
+    object-fit: contain;
+    aspect-ratio: 1 / 1;
+    background-color: #fafafa;
+    border-radius: 8px;
+    border: 1px solid #f5f5f5;
+  }
+}
diff --git a/app/assets/stylesheets/badges.scss b/app/assets/stylesheets/badges.scss
index ff423f433..8896d1478 100644
--- a/app/assets/stylesheets/badges.scss
+++ b/app/assets/stylesheets/badges.scss
@@ -1,27 +1,19 @@
 .sticker-book {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+  .badge-container {
+    width: auto;
+    background-color: white;
 
-  a {
-    height: auto;
-    width: 45%;
-    margin-bottom: 45px;
-  }
+    .badge-image-conatiner {
+      width: auto;
+      display: flex;
+      aspect-ratio: 1 / 1;
+      background-color: #f5f5f5;
 
-  .badge-image {
-    max-width: 100%;
-    left: 0;
-
-    &.unearned {
-      filter: opacity(20%) contrast(0);
-    }
-  }
-
-  @media screen and (min-width: 650px) {
-    a {
-      min-height: 200px;
-      width: 200px;
+      .badge-image {
+        object-fit: contain;
+        width: 100%;
+        aspect-ratio: 1 / 1;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss
index cdf8c9065..59ec8cb24 100644
--- a/app/assets/stylesheets/crayons.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -46,3 +46,7 @@
 @import 'components/drawer-navigation';
 
 @import 'config/generator';
+
+@import 'badge_details';
+
+@import 'badges';
diff --git a/app/views/badges/_badge_detail.html.erb b/app/views/badges/_badge_detail.html.erb
index 1056ed48b..7e9714198 100644
--- a/app/views/badges/_badge_detail.html.erb
+++ b/app/views/badges/_badge_detail.html.erb
@@ -1,6 +1,5 @@
-<div class="grid grid-cols-1 gap-1 s:gap-8 s:grid-cols-2">
+<div class="badge_details grid grid-cols-1 gap-1 s:gap-8 s:grid-cols-2">
   <img
-    style="width: 192px; height: 192px; background-color: #FAFAFA; border-radius: 8px; border: 1px solid #F5F5F5;"
     class="flex flex-row p-3"
     src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
     alt="<%= badge.title %> badge"
diff --git a/app/views/badges/index.html.erb b/app/views/badges/index.html.erb
index 30f9eaac1..9e7c354c9 100644
--- a/app/views/badges/index.html.erb
+++ b/app/views/badges/index.html.erb
@@ -9,12 +9,10 @@
     <div
       role="button"
       onclick="window.Forem.showModal({prompt: true, contentSelector: '#badge-<%= badge.id %>', overlay: true})"
-      style="width:auto; background-color: white;"
-      class="crayons-card media-card media-card--all">
-      <div style="background-color: #F5F5F5" class="p-3">
+      class="badge-container crayons-card media-card">
+      <div class="badge-image-conatiner p-3">
         <img
-          style="width: 100%; aspect-ratio:1/1;"
-          class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
+          class="badge-image"
           src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
           alt="<%= badge.title %> badge"
           title="<%= badge.title %>"
diff --git a/app/views/users/_badges_area.html.erb b/app/views/users/_badges_area.html.erb
index 174f50837..ee877d5da 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="transform: rotate(<%= rand(-10..10) %>deg);"
+               style="object-fit: contain; width: 100%; aspect-ratio: 1 / 1; transform: rotate(<%= rand(-10..10) %>deg);"
                loading="lazy" />
         </div>