refactor(EventPopup): simplify event title display and adjust layout for better readability

style(CSCalendar): update stage tag background color and add tooltip styles

Author: Ali-Sdg90

src/assets/scss/components/_cs-calendar.scss

@@ -145,3 +145,21 @@ thead {
         justify-content: center;
     }
 }
+
+.ant-picker-cell:not(.ant-picker-cell-in-view) {
+    .stage-tag {
+        background-color: #5d6ef5 !important;
+    }
+}
+
+.tooltip-style {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px 4px;
+
+    div {
+        font-size: 13px;
+        line-height: 19px;
+    }
+}

src/assets/scss/components/_event-popup.scss

@@ -100,7 +100,10 @@
         box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
         padding: 18px 20px;
         color: var(--text-color);
-        font-size: 14px;
+        font-size: 13px;
+        font-family: inherit;
+        line-height: 1.55;
+        letter-spacing: 0.01em;
         direction: rtl;
         overflow: hidden;
         border: 1px solid rgba(0, 0, 0, 0.06);
@@ -131,7 +134,7 @@
         align-items: center;
         justify-content: space-between;
         gap: 12px;
-        margin-bottom: 14px;
+        margin-bottom: 16px;
     }
     .event-popup__subtitle {
         font-size: 12px;
@@ -150,7 +153,7 @@
         min-width: 0;
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
     }
     .event-popup__color-dot {
         width: 14px;
@@ -161,7 +164,8 @@
     }
     .event-popup__header-title {
         font-weight: 700;
-        font-size: 15px;
+        font-size: 14px;
+        letter-spacing: 0.01em;
         line-height: 1.1;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -212,6 +216,8 @@
         min-width: 96px;
         color: rgba(0, 0, 0, 0.58);
         font-weight: 700;
+        font-size: 12.5px;
+        line-height: 1.45;
         text-align: right;
         letter-spacing: 0.2px;
         flex: 0 0 auto;
@@ -221,6 +227,7 @@
         flex: 1 1 auto;
         word-break: break-word;
         color: rgba(0, 0, 0, 0.86);
+        letter-spacing: 0.01em;
     }
 
     .event-popup__link {
@@ -253,6 +260,7 @@
     .event-popup__label.small {
         min-width: 60px;
         font-weight: 600;
+        font-size: 12px;
         color: rgba(0, 0, 0, 0.55);
     }
 
@@ -264,7 +272,7 @@
     .event-popup__creator {
         margin-top: 14px;
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
     }
 
     @media (max-width: 420px) {
@@ -281,3 +289,7 @@
         }
     }
 }
+
+.calendar-event-creator .ant-btn {
+    padding: 0 30px;
+}

src/components/CSCalendar.jsx

@@ -93,7 +93,7 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
 
         const stageLabel =
             (event &&
-                (event.stage ||
+                (event.title ||
                     (event.title &&
                         (event.title.match(/مرحله\s*[^\s]+/)?.[0] ||
                             event.title.replace(/^جلسه\s*/u, ""))) ||

src/components/EventPopup.jsx

@@ -134,7 +134,7 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
                             />
                         )}
                         <div className="event-popup__header-title">
-                            {event?.stage || event?.title || "جزئیات جلسه"}
+                            {event?.title || "جزئیات جلسه"}
                         </div>
                     </div>
                 </div>
@@ -192,12 +192,10 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
                     </>
                 )}
 
-                <div className="event-popup__footer">
-                    <div className="event-popup__meta">
-                        <div className="event-popup__label small">زمان</div>
-                        <div className="event-popup__value small">
-                            {event?.time || "ساعت ۱۸:۰۰ تا ۱۹:۰۰"}
-                        </div>
+                <div className="event-popup__row">
+                    <div className="event-popup__label">زمان</div>
+                    <div className="event-popup__value">
+                        {event?.time || "ساعت ۱۸:۰۰ تا ۱۹:۰۰"}
                     </div>
                 </div>
 

src/constants/events.js

@@ -1,7 +1,6 @@
 export const events = [
     {
         title: "جلسه مرحله سوم",
-        stage: "مرحله سوم",
         color: "#3BB273",
         fullName: "پرسش‌وپاسخ داکیومنت فرآیند‌های برنامه CS Internship",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748521847152?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",
@@ -10,7 +9,6 @@ export const events = [
     },
     {
         title: "جلسه مرحله دوم",
-        stage: "مرحله دوم",
         color: "#5D6EF5",
         fullName: "پرسش‌وپاسخ فیلم معرفی برنامه‌ CS Internship",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748521728714?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",
@@ -19,14 +17,12 @@ export const events = [
     },
     {
         title: "جلسه مصاحبه",
-        stage: "مصاحبه",
         color: "#FFB020",
         fullName: "جلسه مصاحبه ورود به برنامه",
         link: "",
     },
     {
         title: "جلسه مرحله اول",
-        stage: "مرحله اول",
         color: "#F35E7F",
         fullName: "پرسش‌وپاسخ داکیومنت CS Internship Overview",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748716646151?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",