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
PalisadoesFoundation · Dec 24, 2024 · d25a795 · d25a795
1 parent 7755890
commit d25a795
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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 {