refactor css for OrganizationDashboard screen, closes PalisadoesFound…

…ation#2513
devender18 · Dec 2, 2024 · f91866d · f91866d
1 parent f9e10b8
commit f91866d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -31,7 +31,7 @@ import type {
   InterfaceQueryOrganizationsListObject,
   InterfaceVolunteerRank,
 } from 'utils/interfaces';
-import styles from './OrganizationDashboard.module.css';
+import styles from '../../../src/style/app.module.css';
 import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
 
 /**

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -556,6 +556,42 @@ hr {
   flex-direction: column;
 }
 
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+  padding-top: 0;
+  max-height: 570px;
+  overflow-y: scroll;
+  width: 100%;
+  max-width: 400px;
+}
+
+.cardBody .emptyContainer {
+  display: flex;
+  height: 180px;
+  justify-content: center;
+  align-items: center;
+}
+
+.cardBody .rankings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 35px;
+}
+
 @media (max-width: 1020px) {
   .btnsContainer {
     flex-direction: column;