Refactor CSS in src/components/EventManagement/EventAttendance/EventS…

…tatistics.tsx (#2993)
PalisadoesFoundation · Dec 28, 2024 · 21687ee · 21687ee
1 parent 8e8cd3c
commit 21687ee
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 34 deletions.
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -30,6 +30,7 @@ import type {
   InterfaceEvent,
   InterfaceRecurringEvent,
 } from './InterfaceEvents';
+import styles from '../../../style/app.module.css';
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -376,34 +377,25 @@ export const AttendanceStatisticsModal: React.FC<
         id="pdf-content"
       >
         <div
-          className="w-100 d-flex justify-content-end align-baseline position-absolute"
-          style={{ top: '10px', right: '15px', zIndex: 1 }}
+          className={`${styles.positionedTopRight} w-100 d-flex justify-content-end align-baseline position-absolute`}
         ></div>
         <div className="w-100 border border-success d-flex flex-row rounded">
           {isEventRecurring ? (
             <div
-              className="text-success position-relative pt-4 align-items-center justify-content-center w-50 border-right-1 border-success"
-              style={{ borderRight: '1px solid green' }}
+              className={`${styles.borderRightGreen} text-success position-relative pt-4 align-items-center justify-content-center w-50 border-right-1 border-success`}
             >
               <Line
                 data={chartData}
                 options={chartOptions}
-                style={{ paddingBottom: '30px' }}
+                className={`${styles.paddingBottom30}`}
               />
               <div
-                className="px-1 border border-success w-30"
-                style={{
-                  position: 'absolute',
-                  right: 0,
-                  top: 0,
-                  borderBottomLeftRadius: 8,
-                }}
+                className={`${styles.topRightCorner} px-1 border border-success w-30`}
               >
                 <p className="text-black">Trends</p>
               </div>
               <div
-                className="d-flex position-absolute bottom-1 end-50 translate-middle-y"
-                style={{ paddingBottom: '2.0rem' }}
+                className={`${styles.paddingBottom2Rem} d-flex position-absolute bottom-1 end-50 translate-middle-y`}
                 role="navigation"
                 aria-label="Chart page navigation"
               >
@@ -455,23 +447,13 @@ export const AttendanceStatisticsModal: React.FC<
             </div>
           ) : (
             <div
-              className="text-success position-relative d-flex align-items-center justify-content-center w-50 border-right-1 border-success"
-              style={{ borderRight: '1px solid green' }}
+              className={`${styles.borderRightGreen} text-success position-relative d-flex align-items-center justify-content-center w-50 border-right-1 border-success`}
             >
-              <h1
-                className="font-weight-bold"
-                style={{ fontSize: 80, fontWeight: 40 }}
-              >
+              <h1 className={`${styles.largeBoldText} font-weight-bold`}>
                 {statistics.totalMembers}
               </h1>
               <div
-                className="px-1 border border-success"
-                style={{
-                  position: 'absolute',
-                  right: 0,
-                  bottom: 0,
-                  borderTopLeftRadius: 12,
-                }}
+                className={`${styles.bottomRightCorner} px-1 border border-success`}
               >
                 <p className="text-black">Attendance Count</p>
               </div>
@@ -530,13 +512,7 @@ export const AttendanceStatisticsModal: React.FC<
               }}
             />
             <div
-              className="px-1 border border-success"
-              style={{
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                borderBottomRightRadius: 8,
-              }}
+              className={`${styles.topLeftCorner} px-1 border border-success`}
             >
               <p className="text-black">Demography</p>
             </div>

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -3481,3 +3481,40 @@ button[data-testid='createPostBtn'] {
     opacity: 1;
   }
 }
+
+.attendance-modal .borderRightGreen {
+  border-right: 1px solid green;
+}
+.attendance-modal .positionedTopRight {
+  top: 10px;
+  right: 15px;
+  z-index: 1;
+}
+.attendance-modal .topRightCorner {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-bottom-left-radius: 8px;
+}
+.attendance-modal .bottomRightCorner {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  border-top-left-radius: 12px;
+}
+.attendance-modal .topLeftCorner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-bottom-right-radius: 8px;
+}
+.attendance-modal .largeBoldText {
+  font-size: 80px;
+  font-weight: 400;
+}
+.attendance-modal .paddingBottom30 {
+  padding-bottom: 30px;
+}
+.attendance-modal .paddingBottom2Rem {
+  padding-bottom: 2rem;
+}