Skip to content

Commit 9bfa78f

Browse files
SammanBaidyaSammanBaidya
committed
fix: requested changes
1 parent b055563 commit 9bfa78f

2 files changed

Lines changed: 202 additions & 162 deletions

File tree

‎src/components/CommunityPortal/Activities/RescheduleEvent.css‎

Lines changed: 121 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,169 @@
1+
/* Page wrapper */
12
.reschedule-page {
23
text-align: center;
3-
margin-top: 100px;
44
position: relative;
5+
height: 100%;
56
}
67

8+
/* Buttons */
79
.reschedule-button {
810
padding: 10px 20px;
911
font-size: 16px;
10-
background-color: #007FFF;
12+
background-color: #007fff;
1113
color: white;
1214
border: none;
1315
cursor: pointer;
1416
border-radius: 5px;
1517
}
16-
1718
.reschedule-button:hover {
18-
background-color: #0066CC; /* Darker shade for hover effect */
19+
background-color: #0066cc;
20+
}
21+
.btn-dark-mode {
22+
background-color: #34495e;
23+
color: #ecf0f1;
24+
border: 1px solid #ecf0f1;
25+
}
26+
.btn-dark-mode:hover {
27+
background-color: #2c3e50;
28+
}
29+
.btn-primary {
30+
background-color: #0066cc;
31+
color: white;
32+
border: none;
33+
}
34+
.btn-primary:disabled {
35+
background-color: #ccc;
36+
color: #666;
37+
cursor: not-allowed;
38+
}
39+
.btn-cancel-dark {
40+
background: transparent;
41+
color: #ecf0f1;
42+
border: 1px solid #ecf0f1;
1943
}
2044

21-
/* ----- FIXED MODAL STYLES BELOW ----- */
22-
.modal {
23-
display: flex !important;
24-
opacity: 1 !important;
25-
visibility: visible !important;
26-
z-index: 9999 !important;
27-
position: relative !important;
45+
/* Modal backdrop */
46+
.modal-backdrop {
47+
position: fixed;
2848
top: 0;
29-
transform: translateX(1%);
30-
/* background-color: rgba(0, 0, 0, 0.5); */
49+
left: 0;
50+
width: 100vw;
51+
height: 100vh;
52+
background: rgba(20, 20, 20, 0.8) !important;
53+
display: flex;
54+
align-items: flex-start; /* align at top */
3155
justify-content: center;
32-
align-items: center;
33-
width:min-content;
34-
height: 200%;
35-
56+
padding-top: 5%;
57+
z-index: 9999;
58+
}
59+
.modal-backdrop.dark {
60+
background: rgba(20, 20, 20, 0.8);
3661
}
3762

38-
/* Ensure Event Name stays on one line */
39-
.event-container {
63+
/* Modal card */
64+
.modal-content {
65+
position: relative;
66+
background: #fff;
67+
padding: 20px;
68+
border-radius: 8px;
69+
width: 600px;
70+
max-width: 90%;
4071
display: flex;
41-
flex-direction: column;
42-
align-items: flex-start; /* Left-align everything */
43-
padding-right: 20px;
72+
flex-direction: row;
73+
align-items: center;
74+
gap: 20px;
75+
}
76+
.modal-content.dark {
77+
background: #2c3e50;
78+
color: #ecf0f1;
4479
}
4580

46-
/* Stack Time, Location, and Link below each other */
47-
.event-details-header h3 {
48-
margin-bottom: 5px; /* Space between title and details */
81+
/* Close “×” */
82+
.modal-close-btn {
83+
position: absolute;
84+
top: 8px;
85+
right: 12px;
86+
background: transparent;
87+
border: none;
88+
font-size: 1.4rem;
89+
line-height: 1;
90+
cursor: pointer;
91+
color: inherit;
4992
}
5093

51-
.event-details {
94+
/* Event container */
95+
.event-container {
5296
display: flex;
53-
flex-direction: column; /* Stack details vertically */
54-
gap: 5px; /* Add space between each detail */
55-
text-align: justify;
97+
flex-direction: column;
98+
flex: 1;
5699
}
57-
58-
.event-details p {
59-
margin: 0;
100+
.event-container.dark h3,
101+
.event-container.dark p {
102+
color: #ecf0f1;
60103
}
61-
62-
.confirm-date-button{
63-
background-color: #0066CC ;
104+
.modal-title {
105+
margin-bottom: 10px;
64106
}
65-
66-
67-
.modal-content {
107+
.event-details {
68108
display: flex;
69-
flex-direction: row; /* Place event details and DatePicker side by side */
70-
align-items: center; /* Align items vertically in the center */
71-
justify-content: space-between; /* Ensure spacing between elements */
72-
padding: 20px;
73-
width: 600px; /* Increase modal width to fit both sections */
74-
max-width: 90%;
109+
flex-direction: column;
110+
gap: 8px;
111+
text-align: left;
75112
}
76113

114+
/* Time dropdown */
115+
.time-dropdown {
116+
margin-left: 5px;
117+
padding: 4px;
118+
}
119+
.time-dropdown-dark {
120+
background: #34495e;
121+
color: #ecf0f1;
122+
border: 1px solid #ecf0f1;
123+
}
77124

78-
/* Apply centering on DatePicker container */
125+
/* DatePicker side */
79126
.datepicker-container {
80127
display: flex;
81-
justify-content: center;
128+
flex-direction: column;
82129
align-items: center;
83-
/* width: 100%;
84-
padding: 0; */
130+
justify-content: flex-start;
85131
flex: 1;
86132
}
87-
.modal button {
88-
margin: 10px;
89-
padding: 8px 16px;
90-
border: none;
91-
cursor: pointer;
92-
border-radius: 4px;
93-
}
94-
95-
.modal button:first-of-type {
96-
background: #007bff;
97-
color: white;
133+
.reschedule-text {
134+
margin-bottom: 8px;
98135
}
99136

100-
.modal button:last-of-type {
101-
background: #ccc;
137+
/* Confirmation buttons */
138+
.confirmation-buttons {
139+
margin-top: 16px;
140+
display: flex;
141+
gap: 10px;
102142
}
103143

104-
.react-datepicker {
105-
width: 100% !important;
106-
max-width: 350px !important;
107-
/* text-align: center !important;
108-
margin: 0 auto !important; */
144+
/* DatePicker dark theme overrides */
145+
.react-datepicker.dark {
146+
background: #2c3e50;
147+
color: #ecf0f1;
109148
}
110-
111-
.react-datepicker__month-container {
112-
display: block !important; /* Ensures the month container stacks vertically */
113-
width: 100% !important; /* Full width */
149+
.react-datepicker.dark .react-datepicker__header {
150+
background: #34495e;
151+
border-bottom: 1px solid #2c3e50;
114152
}
115-
116-
.react-datepicker-wrapper {
117-
display: flex !important;
118-
justify-content: center !important;
119-
width: 100% !important;
120-
background-color: transparent; /* This removes the white background */
153+
.react-datepicker.dark .react-datepicker__day--selected {
154+
background-color: #2980b9;
121155
}
122-
.react-datepicker__input-container {
123-
display: flex;
124-
justify-content: center;
125-
width: 100%;
156+
.reschedule-button:disabled {
157+
background-color: #ccc;
158+
color: #666;
159+
cursor: not-allowed;
160+
opacity: 0.7;
126161
}
127162

128-
.datepicker-wrapper {
129-
width: auto;
130-
max-width: 350px; /* Set the max width for DatePicker */
131-
margin: 0 ; /* Center wrapper */
132-
display: block;
133-
text-decoration-color: black;
163+
/* Dark‐mode disabled state */
164+
.reschedule-button.btn-dark-mode:disabled {
165+
background-color: #555;
166+
color: #999;
167+
cursor: not-allowed;
168+
opacity: 0.7;
134169
}
135-
136-
137-
138-
h2{
139-
color: black;
140-
font-weight: lighter;
141-
font: 1em sans-serif;
142-
font-size: x-small;
143-
}

0 commit comments

Comments
 (0)