Skip to content

Commit bfdfe2e

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Update text colors across various components to ensure visibility on dark backgrounds
1 parent 695b954 commit bfdfe2e

File tree

3 files changed

+78
-13
lines changed

3 files changed

+78
-13
lines changed

‎src/App.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,55 @@ h1, h2, h3, h4, h5, h6 {
4343
color: #1a237e !important;
4444
}
4545

46+
/* Force White Text on Blue Gradient Backgrounds (All Pages) */
47+
.page-header h1,
48+
.page-header h2,
49+
.page-header h3,
50+
.page-header h4,
51+
.page-header h5,
52+
.page-header h6,
53+
.page-header p {
54+
color: white !important;
55+
}
56+
57+
.card-header h1,
58+
.card-header h2,
59+
.card-header h3,
60+
.card-header h4,
61+
.card-header h5,
62+
.card-header h6,
63+
.card-header p {
64+
color: white !important;
65+
}
66+
67+
/* Modal Headers with Blue Background */
68+
.modal-header h1,
69+
.modal-header h2,
70+
.modal-header h3,
71+
.modal-header h4,
72+
.modal-header h5,
73+
.modal-header h6,
74+
.modal-header .modal-title {
75+
color: white !important;
76+
}
77+
78+
/* Table Headers with Blue Gradient Background */
79+
thead[style*="linear-gradient"] th,
80+
thead[style*="background: linear-gradient"] th {
81+
color: white !important;
82+
}
83+
84+
/* Specific override for any element with inline style containing linear-gradient background */
85+
div[style*="linear-gradient"] h1,
86+
div[style*="linear-gradient"] h2,
87+
div[style*="linear-gradient"] h3,
88+
div[style*="linear-gradient"] h4,
89+
div[style*="linear-gradient"] h5,
90+
div[style*="linear-gradient"] h6,
91+
div[style*="linear-gradient"] p {
92+
color: white !important;
93+
}
94+
4695
/* Clean Sidebar */
4796
.sidebar {
4897
width: 250px;

‎src/index.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,22 @@ body {
5555
color: #1a237e !important;
5656
}
5757

58+
/* Override: Card headers with blue background need white text */
59+
.card-header[style*="linear-gradient"] h1,
60+
.card-header[style*="linear-gradient"] h2,
61+
.card-header[style*="linear-gradient"] h3,
62+
.card-header[style*="linear-gradient"] h4,
63+
.card-header[style*="linear-gradient"] h5,
64+
.card-header[style*="linear-gradient"] h6,
65+
.card-header[style*="background: linear-gradient"] h1,
66+
.card-header[style*="background: linear-gradient"] h2,
67+
.card-header[style*="background: linear-gradient"] h3,
68+
.card-header[style*="background: linear-gradient"] h4,
69+
.card-header[style*="background: linear-gradient"] h5,
70+
.card-header[style*="background: linear-gradient"] h6 {
71+
color: white !important;
72+
}
73+
5874
/* Make paragraph text visible on dark background */
5975
.content-wrapper > p,
6076
.content-wrapper > div > p {

‎src/pages/Hotels.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,11 @@ const Hotels = () => {
108108
flex: 1,
109109
marginRight: '1rem'
110110
}}>
111-
<h2 style={{ color: 'white', fontWeight: '700', marginBottom: '0.5rem' }}>
111+
<h2 style={{ color: 'white !important', fontWeight: '700', marginBottom: '0.5rem' }}>
112112
<FaBuilding className="me-2" />
113113
Hotel Branches
114114
</h2>
115-
<p style={{ marginBottom: 0, color: 'rgba(255, 255, 255, 0.9)' }}>Manage SkyNest Hotels locations across Sri Lanka</p>
115+
<p style={{ marginBottom: 0, color: 'rgba(255, 255, 255, 0.9) !important' }}>Manage SkyNest Hotels locations across Sri Lanka</p>
116116
</div>
117117
<Button
118118
onClick={() => handleShowModal('add')}
@@ -168,7 +168,7 @@ const Hotels = () => {
168168
padding: '1.5rem'
169169
}}>
170170
<div className="d-flex justify-content-between align-items-center">
171-
<h5 className="mb-0" style={{ color: 'white', fontWeight: '600' }}>
171+
<h5 className="mb-0" style={{ color: 'white !important', fontWeight: '600' }}>
172172
<FaBuilding className="me-2" />
173173
{hotel.name}
174174
</h5>
@@ -279,7 +279,7 @@ const Hotels = () => {
279279
borderRadius: '1rem 1rem 0 0',
280280
padding: '1.5rem'
281281
}}>
282-
<h5 className="mb-0" style={{ color: 'white', fontWeight: '700' }}>Hotel Branches Summary</h5>
282+
<h5 className="mb-0" style={{ color: 'white !important', fontWeight: '700' }}>Hotel Branches Summary</h5>
283283
</Card.Header>
284284
<Card.Body>
285285
<Table responsive striped hover>
@@ -288,14 +288,14 @@ const Hotels = () => {
288288
borderBottom: '2px solid #0d47a1'
289289
}}>
290290
<tr>
291-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Hotel Name</th>
292-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Location</th>
293-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Manager</th>
294-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Total Rooms</th>
295-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Available</th>
296-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Occupancy</th>
297-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Status</th>
298-
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
291+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Hotel Name</th>
292+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Location</th>
293+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Manager</th>
294+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Total Rooms</th>
295+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Available</th>
296+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Occupancy</th>
297+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Status</th>
298+
<th style={{ padding: '16px', fontWeight: '600', color: 'white !important', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
299299
</tr>
300300
</thead>
301301
<tbody>
@@ -352,7 +352,7 @@ const Hotels = () => {
352352
color: 'white',
353353
border: 'none'
354354
}}>
355-
<Modal.Title style={{ color: 'white', fontWeight: '600' }}>
355+
<Modal.Title style={{ color: 'white !important', fontWeight: '600' }}>
356356
{modalType === 'add' && 'Add New Hotel Branch'}
357357
{modalType === 'edit' && 'Edit Hotel Branch'}
358358
{modalType === 'view' && 'Hotel Branch Details'}

0 commit comments

Comments
 (0)