fix: add generic font fallback and replace Math.random with crypto-based ID generator

Author: linh2020

src/components/CommunityPortal/Activities/activityId/EventPageOrganizer/EventPageOrganizer.module.css

@@ -61,7 +61,7 @@
 }
 
 .statusText {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 500;
   color: black;
   font-size: 2rem;
@@ -82,15 +82,15 @@
 }
 
 .eventType {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: black;
   font-size: 1rem;
   line-height: normal;
 }
 
 .eventTitle {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 600;
   color: black;
   font-size: 39.7px;
@@ -110,15 +110,15 @@
 }
 
 .linkLabel {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: black;
   font-size: 15.9px;
   line-height: normal;
 }
 
 .linkValue {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: #008dff;
   font-size: 15.9px;
@@ -150,23 +150,23 @@
 }
 
 .detailLabelText {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: black;
   font-size: 1rem;
   line-height: 1.5rem;
 }
 
 .detailValue {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 600;
   color: black;
   font-size: 1rem;
   line-height: 1.5rem;
 }
 
 .capacityValue {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -212,7 +212,7 @@
 }
 
 .moreCountText {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: black;
   font-size: 10px;

src/components/CommunityPortal/Activities/activityId/EventPageOrganizer/sections/DescriptionSection/DescriptionSection.module.css

@@ -22,7 +22,7 @@
   resize: none;
   background-color: transparent;
   border: none;
-  font-family: 'Manrope', Helvetica;
+  font-family: 'Manrope', Helvetica, sans-serif;
   font-weight: 600;
   color: #4b5563;
   font-size: 1.5rem;

src/components/CommunityPortal/Activities/activityId/EventPageOrganizer/sections/EventStatusSection/EventStatusSection.module.css

@@ -9,7 +9,7 @@
 }
 
 .logo {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 700;
   color: white;
   font-size: 0.875rem;
@@ -44,7 +44,7 @@
 }
 
 .welcomeText {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: white;
   font-size: 0.875rem;

src/components/CommunityPortal/Activities/activityId/EventPageOrganizer/sections/ScheduleSection/ScheduleSection.module.css

@@ -14,7 +14,7 @@
 }
 
 .monthTitle {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 600;
   color: black;
   font-size: 0.875rem;
@@ -35,7 +35,7 @@
 }
 
 .weekDay {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   color: black;
   font-size: 0.875rem;
@@ -66,7 +66,7 @@
 }
 
 .dateNumber {
-  font-family: 'Inter', Helvetica;
+  font-family: 'Inter', Helvetica, sans-serif;
   font-weight: 400;
   font-size: 0.875rem;
   line-height: normal;