From d25a79508b5e6236f611cddcf6bf22d45fb17f4e Mon Sep 17 00:00:00 2001
From: Pranav Nathe <93403830+pranavnathe@users.noreply.github.com>
Date: Tue, 24 Dec 2024 21:39:23 +0530
Subject: [PATCH] fix: #2508 Refactor CSS files in src/screens/Leaderboard
 (#2776)

* fix: Refactor CSS files in src/screens/Leaderboard #2508

* fix: resolve syntax error caused by missing closing brace
---
 src/screens/Leaderboard/Leaderboard.tsx |  4 ++--
 src/style/app.module.css                | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/screens/Leaderboard/Leaderboard.tsx b/src/screens/Leaderboard/Leaderboard.tsx
index c5ad7a2efe..e0ea513e9c 100644
--- a/src/screens/Leaderboard/Leaderboard.tsx
+++ b/src/screens/Leaderboard/Leaderboard.tsx
@@ -14,7 +14,7 @@ import silver from 'assets/images/silver.png';
 import bronze from 'assets/images/bronze.png';
 
 import type { InterfaceVolunteerRank } from 'utils/interfaces';
-import styles from '../OrganizationActionItems/OrganizationActionItems.module.css';
+import styles from '../../style/app.module.css';
 import Loader from 'components/Loader/Loader';
 import {
   DataGrid,
@@ -200,7 +200,7 @@ function leaderboard(): JSX.Element {
                   <Avatar
                     key={_id + '1'}
                     containerStyle={styles.imageContainer}
-                    avatarStyle={styles.TableImage}
+                    avatarStyle={styles.TableImageSmall}
                     name={firstName + ' ' + lastName}
                     alt={firstName + ' ' + lastName}
                   />
diff --git a/src/style/app.module.css b/src/style/app.module.css
index af2469c6e8..02a014ea83 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -12,6 +12,7 @@
   --search-button-bg: #a8c7fa;
   --search-button-border: #555555;
   --table-image-size: 50px;
+  --table-image-small-size: 25px;
   --bs-primary: #0056b3;
   --bs-white: #fff;
   --table-head-bg: var(--bs-primary, blue);
@@ -1594,6 +1595,26 @@ form > input {
   }
 }
 
+/* * Refortoring css for Leaderboard */
+
+.TableImageSmall {
+  object-fit: cover;
+  width: var(--table-image-small-size);
+  height: var(--table-image-small-size);
+  border-radius: 100%;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+}
 /* CSS Refactor for OrgPost */
 
 .btnsContainerOrgPost {