Skip to content

Commit fdfef2e

Browse files
Ali-Sdg90Ali-Sdg90
committed
feat(CalendarIntro): enhance introductory card with detailed guidance and improved layout
refactor(App): temporarily disable Header component rendering in tests refactor(styles): update calendar intro styles for better readability and consistency fix(theme): adjust main color variable for light theme
1 parent 96d4725 commit fdfef2e

6 files changed

Lines changed: 110 additions & 59 deletions

File tree

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const App = () => {
4343
>
4444
<Toastify toastifyObj={toastifyObj} />
4545

46-
<Header />
46+
{/* <Header /> */}
4747

4848
<CSCalendar
4949
setAnnouncementData={setAnnouncementData}

‎src/__tests__/App.test.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,11 @@ describe("App", () => {
6464
render(<App />);
6565
});
6666

67-
it("should render Header component", () => {
68-
render(<App />);
69-
expect(screen.getByTestId("header")).toBeInTheDocument();
70-
});
67+
// TEMPORARILY DISABLED
68+
// it("should render Header component", () => {
69+
// render(<App />);
70+
// expect(screen.getByTestId("header")).toBeInTheDocument();
71+
// });
7172

7273
it("should render Footer component", () => {
7374
render(<App />);

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

Lines changed: 48 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,57 @@
11
.calendar-intro {
2-
margin: 0 60px;
3-
border: 1px solid var(--calendar-border-color);
4-
border-radius: 10px;
5-
// background:
6-
// linear-gradient(
7-
// 115deg,
8-
// rgba(76, 205, 153, 0.12),
9-
// rgba(47, 111, 237, 0.08)
10-
// ),
11-
// var(--bg-color);
12-
background: rgba(42, 107, 237, 0.08);
13-
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
14-
direction: rtl;
2+
background: #f7f9fb;
3+
padding: 8px 16px;
4+
box-shadow: none !important;
5+
}
6+
7+
.ant-card-body {
8+
padding: 18px 24px 0 !important;
9+
}
1510

16-
.ant-card-body {
17-
padding: 10px 16px;
18-
}
11+
.calendar-intro__icon {
12+
width: 28px;
13+
height: 28px;
14+
border-radius: 50%;
15+
font-size: 14px;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
background: rgba(22, 119, 255, 0.12);
20+
color: #1677ff;
21+
margin-top: 2px;
1922
}
2023

21-
.calendar-intro__body {
22-
width: 100%;
24+
.calendar-intro__title {
25+
margin-bottom: 8px !important;
26+
font-weight: 600;
27+
font-size: 24px !important;
28+
line-height: 1.4;
2329
}
2430

2531
.calendar-intro__paragraph {
26-
margin-bottom: 2px !important;
27-
color: var(--muted-text-color, rgba(107, 114, 128, 0.9));
28-
font-size: 14px;
32+
margin-bottom: 0;
33+
font-size: 14px !important;
34+
line-height: 1.6;
35+
color: rgba(0, 0, 0, 0.75);
36+
margin: 0 !important;
37+
}
38+
39+
.calendar-intro__content {
40+
gap: 4px;
41+
}
42+
43+
.calendar-intro__list {
44+
margin: 0;
45+
padding-inline-start: 16px;
46+
font-size: 12.5px;
47+
line-height: 1.5;
48+
}
49+
50+
.calendar-intro__list li {
51+
margin-bottom: 0;
52+
}
2953

30-
a {
31-
font-weight: 600;
32-
}
54+
.calendar-intro__hint {
55+
font-size: 11.5px;
56+
margin-top: 2px;
3357
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ thead {
2222
position: sticky !important;
2323
top: 0px;
2424
z-index: 100;
25-
background-color: var(--bg-color);
25+
background-color: var(--main-color) !important;
2626

2727
th {
2828
line-height: 22px !important;

‎src/assets/scss/components/_theme.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@
44
}
55

66
[data-theme="light"] {
7-
--bg-color: white;
7+
--main-color: white;
8+
--bg-color: #f7f9fb;
89
--text-color: black;
910
--footer-bg-color: #dce6f4;
1011
--thumb-bg-color: #cacaca;
1112
--calendar-border-color: #afafaf;
1213
}
1314

1415
[data-theme="dark"] {
16+
--main-color: #1e1e1e; // check later
1517
--bg-color: #141414;
1618
--text-color: white;
1719
--footer-bg-color: #111;

‎src/components/CalendarIntro.jsx‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,62 @@
11
import React from "react";
22
import { Card, Typography, Space } from "antd";
3+
import { InfoCircleOutlined } from "@ant-design/icons";
34

45
const CalendarIntro = () => {
5-
const { Paragraph, Link } = Typography;
6+
const { Paragraph, Link, Title, Text } = Typography;
67

78
return (
89
<Card bordered={false} className="calendar-intro" dir="rtl">
9-
<Space
10-
direction="vertical"
11-
size={4}
12-
className="calendar-intro__body"
13-
>
14-
<Paragraph className="calendar-intro__paragraph">
15-
این تقویم مرجع رسمی زمان‌بندی جلسات پرسش‌وپاسخ مراحل ورود به
16-
برنامه CS Internship است و ساختار برگزاری جلسات گروه صف را
17-
در طول هفته نمایش می‌دهد.
18-
</Paragraph>
19-
<Paragraph className="calendar-intro__paragraph">
20-
برای آشنایی با فرایند ورود، می‌توانید پیام پین‌شده‌ی توضیحات
21-
کامل مسیر ورود را از اینجا مطالعه کنید:{" "}
22-
<Link
23-
href="https://t.me/c/1191433472/3799"
24-
target="_blank"
25-
rel="cs-internship-entry-process"
26-
>
27-
لینک توضیحات فرایند ورود به برنامه
28-
</Link>
29-
.
30-
</Paragraph>
31-
<Paragraph className="calendar-intro__paragraph">
32-
در تقویم، نوع و زمان هر جلسه مشخص شده است. با انتخاب هر
33-
رویداد، جزئیات آن شامل تاریخ، ساعت، عنوان جلسه و لینک حضور
34-
قابل مشاهده خواهد بود.
35-
</Paragraph>
10+
<Space align="start">
11+
<div className="calendar-intro__icon">
12+
<InfoCircleOutlined />
13+
</div>
14+
15+
<Space
16+
direction="vertical"
17+
size={8}
18+
className="calendar-intro__content"
19+
>
20+
<Title level={4} className="calendar-intro__title">
21+
تقویم جلسات گروه صف برنامه CS Internship
22+
</Title>
23+
24+
<Paragraph className="calendar-intro__paragraph">
25+
این تقویم، مرجع رسمی زمان‌بندی جلسات پرسش‌وپاسخ مراحل
26+
ورود به برنامه CS Internship است و نمای کلی ساختار
27+
برگزاری جلسات گروه صف را در طول هفته نمایش می‌دهد.
28+
</Paragraph>
29+
30+
<Paragraph className="calendar-intro__paragraph">
31+
برای آشنایی با فرایند ورود، می‌توانید{" "}
32+
<Link
33+
href="https://t.me/c/1191433472/3799"
34+
target="_blank"
35+
rel="cs-internship-entry-process"
36+
>
37+
پیام پین‌شدهٔ توضیحات کامل مسیر ورود
38+
</Link>{" "}
39+
را مطالعه کنید.
40+
</Paragraph>
41+
42+
<Paragraph className="calendar-intro__paragraph">
43+
در این تقویم، برای هر جلسه موارد زیر مشخص شده است:
44+
</Paragraph>
45+
46+
<ul className="calendar-intro__list">
47+
<li>نوع جلسه (مرحلهٔ اول، دوم، سوم یا جلسهٔ مصاحبه)</li>
48+
<li>تاریخ شمسی و میلادی و بازهٔ زمانی برگزاری</li>
49+
<li>
50+
لینک حضور در جلسه و منبع مطالعاتی مرتبط (در صورت
51+
وجود)
52+
</li>
53+
</ul>
54+
55+
<Text type="secondary" className="calendar-intro__hint">
56+
با انتخاب هر رویداد در تقویم، جزئیات کامل همان جلسه
57+
نمایش داده می‌شود.
58+
</Text>
59+
</Space>
3660
</Space>
3761
</Card>
3862
);

0 commit comments

Comments
 (0)