feat(Header): update header title to reflect new calendar name in Persian

feat(CalendarIntro): remove unused title and badge elements for cleaner rendering
refactor(CSCalendar): simplify Flex component structure for better layout
style(CalendarIntro): adjust paragraph margin and font weight for improved readability
style(EventPopup): enhance link styling and add transition effects for better user experience

Author: Ali-Sdg90

src/__tests__/components/Header.test.jsx

@@ -29,7 +29,11 @@ describe("Header", () => {
 
     it("should render title text", () => {
         render(<Header />);
-        expect(screen.getByText("CS-Queue-Calendar")).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                "تقویم جلسات گروه صف برنامه CS Internship"
+            )
+        ).toBeInTheDocument();
     });
 
     it("should have dashes on both sides", () => {
@@ -57,7 +61,9 @@ describe("Header", () => {
     it("should render title with correct styling", () => {
         const { container } = render(<Header />);
         const title = container.querySelector("h1");
-        expect(title).toHaveTextContent("CS-Queue-Calendar");
+        expect(title).toHaveTextContent(
+            "تقویم جلسات گروه صف برنامه CS Internship"
+        );
     });
 
     it("should call window.open when first dash is clicked", () => {

src/assets/scss/components/_calendar-intro.scss

@@ -1,5 +1,5 @@
 .calendar-intro {
-    margin: 0 52px 4px;
+    margin: 0 60px;
     border: 1px solid var(--calendar-border-color);
     border-radius: 12px;
     background:
@@ -21,31 +21,13 @@
     width: 100%;
 }
 
-.calendar-intro__badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 10px;
-    border-radius: 999px;
-    background: rgba(47, 111, 237, 0.14);
-    color: var(--text-color);
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.2px;
-}
-
-.calendar-intro__title {
-    margin: 2px 0 0 !important;
-    color: var(--text-color) !important;
-}
-
 .calendar-intro__paragraph {
-    margin-bottom: 4px !important;
+    margin-bottom: 2px !important;
     color: var(--muted-text-color, rgba(107, 114, 128, 0.9));
     font-size: 14px;
-    line-height: 1.65;
+    line-height: 18px;
 
     a {
-        font-weight: 700;
+        font-weight: 600;
     }
 }

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

@@ -231,17 +231,8 @@
     }
 
     .event-popup__link {
-        color: #1677ff;
-        text-decoration: none;
+        font-size: 13px;
         font-weight: 600;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-
-        &:hover {
-            color: #165bad;
-            text-decoration: underline;
-        }
     }
 
     .event-popup__footer {
@@ -292,4 +283,8 @@
 
 .calendar-event-creator .ant-btn {
     padding: 0 30px;
+    transition:
+        background-color 0.25s,
+        color 0.25s,
+        border-color 0.25s !important;
 }

src/assets/scss/index.scss

@@ -18,7 +18,7 @@
 body {
     height: 100vh !important;
     height: 100svh !important;
-    overflow-y: hidden;
+    // overflow-y: hidden; TODO: Handle this
     min-width: 780px;
     background-color: var(--bg-color);
     color: var(--text-color);

src/components/CSCalendar.jsx

@@ -303,7 +303,7 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
     }, [value, yearMonth]);
 
     return (
-        <Flex justify="space-between" vertical className="calendar-section">
+        <Flex vertical className="calendar-section">
             <CalendarIntro />
 
             <Calendar

src/components/CalendarIntro.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Card, Typography, Space } from "antd";
 
 const CalendarIntro = () => {
-    const { Title, Paragraph, Link, Text } = Typography;
+    const { Paragraph, Link } = Typography;
 
     return (
         <Card bordered={false} className="calendar-intro" dir="rtl">
@@ -11,10 +11,6 @@ const CalendarIntro = () => {
                 size={4}
                 className="calendar-intro__body"
             >
-                <Text className="calendar-intro__badge">راهنمای تقویم</Text>
-                <Title level={4} className="calendar-intro__title">
-                    تقویم رسمی جلسات پرسش‌وپاسخ
-                </Title>
                 <Paragraph className="calendar-intro__paragraph">
                     این تقویم، مرجع رسمی زمان‌بندی جلسات پرسش‌وپاسخ مراحل ورود
                     به برنامه CS Internship است و ساختار برگزاری جلسات گروه صف

src/components/Header.jsx

@@ -38,7 +38,9 @@ const Header = () => {
                 >
                     -
                 </div>
-                <div className={"header-title"}>CS-Queue-Calendar</div>
+                <div className={"header-title"} dir="rtl">
+                    تقویم جلسات گروه صف برنامه CS Internship
+                </div>
                 <div
                     className={!EEClicked[1] ? "header-ICARUS" : ""}
                     onClick={() => clickOnEE(1)}