Skip to content

Commit 8a92a09

Browse files
jmfarook7jmfarook7
authored
Merge pull request #2 from SyncfusionExamples/EJ2-932442-theme
932442: Theme updated
2 parents b4bbc75 + 713178d commit 8a92a09

File tree

4 files changed

+150
-94
lines changed

4 files changed

+150
-94
lines changed

‎Hotel-booking-App/public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<!-- <link href="https://cdn.syncfusion.com/ej2/23.1.40/material.css" rel="stylesheet"> -->
6+
<link href="https://cdn.syncfusion.com/ej2/28.1.37/tailwind3-dark.css" rel="stylesheet">
7+
<link href="https://cdn.syncfusion.com/ej2/28.1.37/ej2-icons/styles/tailwind3-dark.css" rel="stylesheet" />
78
</head>
89

910
<body>

‎Hotel-booking-App/src/HotelBookApp.css‎

Lines changed: 86 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body {
1+
.e-hotel-book {
22
margin: 0;
33
font-family: "Segoe UI";
44
font-weight: 400;
@@ -16,10 +16,10 @@ body {
1616
}
1717

1818
.e-title-bar {
19-
background-color: #ffffff;
19+
background-color: #111827;
2020
padding: 20px 32px;
2121
box-shadow: none;
22-
border-bottom: 3px solid #aedbf9 !important;
22+
border-bottom: 3px solid #6366f1 !important;
2323
display: flex;
2424
align-items: center;
2525
}
@@ -38,9 +38,9 @@ body {
3838
}
3939

4040
.e-menu-button::before {
41-
content: "\e94c";
42-
color: #333;
43-
font-size: 17px;
41+
content: "\e721";
42+
color: #ffffff;
43+
font-size: 20px;
4444
font-family: "e-icons";
4545
cursor: pointer;
4646
}
@@ -55,16 +55,16 @@ body {
5555
}
5656

5757
.e-side-bar-close-button::before {
58-
content: "\e7a7";
59-
color: #333;
60-
font-size: 17px;
58+
content: "\e7e7";
59+
color: #ffffff;
60+
font-size: 20px;
6161
font-family: "e-icons";
6262
margin-left: 15px;
6363
cursor: pointer;
6464
}
6565

6666
.e-side-bar-operation-container {
67-
background-color: #ffffff;
67+
background-color: #111827;
6868
width: 260px;
6969
}
7070

@@ -83,13 +83,13 @@ body {
8383
.e-line-separator,
8484
.e-data-line-separator {
8585
width: 95%;
86-
background-color: #EAEAEA;
86+
background-color: #ffffff;
8787
padding: 1px 0px;
8888
margin: 10px auto;
8989
}
9090

9191
.e-app-container {
92-
background-color: #F0F4F6;
92+
background-color: #31353e;
9393
width: 100%;
9494
}
9595

@@ -126,14 +126,14 @@ body {
126126

127127
.e-title-text {
128128
font-weight: 600;
129-
color: #333333;
129+
color: #ffffff;
130130
}
131131

132132
.e-header-text {
133133
text-align: center;
134134
padding: 10px;
135135
font-weight: 600;
136-
color: #333333;
136+
color: #ffffff;
137137
}
138138

139139
.e-headercell .e-header-text {
@@ -142,16 +142,41 @@ body {
142142

143143
.e-semi-header-text {
144144
font-weight: 600;
145-
color: #333333;
145+
color: #ffffff;
146+
}
147+
148+
.e-semi-title-header-text {
149+
font-weight: 200;
150+
color: #ffffff;
146151
}
147152

148153
.e-semi-bold-header-text {
154+
font-weight: 700;
155+
color: #22d3ee;
156+
font-size: 24px;
157+
}
158+
159+
.e-semi-bold-title-header-text {
149160
font-weight: 600;
150-
color: #333333;
161+
color: #ffffff;
162+
}
163+
164+
.e-rowcell.e-grid-hotel-name {
165+
font-weight: 700;
166+
font-size: 18px;
167+
}
168+
169+
.e-rowcell.e-grid-room-name {
170+
font-weight: 600;
171+
font-size: 17px;
172+
}
173+
174+
.e-rowcell.e-grid-date {
175+
font-weight: 500;
151176
}
152177

153178
.e-light-blue-border-bottom {
154-
border-bottom: 3px solid #e0f2fe !important;
179+
border-bottom: 3px solid #6366f1 !important;
155180
}
156181

157182
.templateRow td {
@@ -160,14 +185,14 @@ body {
160185

161186
.e-rowtemplate-border-applier {
162187
box-shadow: none;
163-
border: 1px solid #EAEAEA !important;
188+
border: 1px solid #ffffff !important;
164189
}
165190

166191
.e-room-not-available-cover {
167192
position: absolute;
168193
width: calc(100% - 2px);
169194
height: 100%;
170-
background-color: #f2f2f2;
195+
background-color: #4b5563;
171196
opacity: 0.5;
172197
z-index: 1000;
173198
}
@@ -214,17 +239,23 @@ body {
214239
padding-right: 15px;
215240
}
216241

242+
.normal-text-color {
243+
color: #e5e7eb;
244+
}
245+
246+
.normal-hint-text-color {
247+
color: #9ca3af;
248+
}
249+
217250
.e-map-text-spacer {
218251
margin-left: 10px;
219252
}
220253

221254
.e-map-text-styler {
222-
color: #008ae6;
223255
cursor: pointer;
224256
}
225257

226258
.e-address-text-styler {
227-
color: #008ae6;
228259
text-decoration: underline;
229260
}
230261

@@ -237,6 +268,13 @@ body {
237268
padding-bottom: 0px;
238269
}
239270

271+
.e-custom-rating-color.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon {
272+
background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value));
273+
-webkit-background-clip: text;
274+
-webkit-text-fill-color: transparent;
275+
-webkit-text-stroke: 1px #ffa600;
276+
}
277+
240278
.e-rating-container .e-rating-item-container {
241279
font-size: 16px;
242280
}
@@ -272,7 +310,8 @@ body {
272310

273311
.e-cost-styler {
274312
font-weight: 600;
275-
color: #333333;
313+
color: #ffffff;
314+
font-size: 24px;
276315
}
277316

278317
.e-book-button {
@@ -293,7 +332,7 @@ body {
293332
}
294333

295334
.e-details-container {
296-
background-color: #F0F4F6;
335+
background-color: #31353e;
297336
padding-top: 30px;
298337
}
299338

@@ -325,10 +364,10 @@ body {
325364
}
326365

327366
.e-back-button::before {
328-
content: "\e610";
367+
content: "\e773";
329368
color: black;
330369
padding: 5px;
331-
font-size: 17px;
370+
font-size: 20px;
332371
font-family: "e-icons";
333372
margin: 10px;
334373
cursor: pointer;
@@ -352,22 +391,23 @@ body {
352391

353392
.e-details-info-container {
354393
display: flex;
355-
background-color: #ffffff;
394+
background-color: #111827;
356395
margin-top: 30px;
357396
}
358397

359398
.e-booking-details-container {
360-
width: 100%;
361-
border-left: 5px solid #F0F4F6 !important;
362-
border-right: 5px solid #F0F4F6 !important;
399+
flex: 3;
400+
border-left: 5px solid #31353e !important;
401+
border-right: 5px solid #31353e !important;
363402
}
364403

365404
.e-booking-details-separator {
366405
padding: 10px 15px;
367406
}
368407

369408
.e-hotel-details-container {
370-
border-right: 5px solid #F0F4F6 !important;
409+
flex: 1;
410+
border-right: 5px solid #31353e !important;
371411
}
372412

373413
.e-hotel-details-side-bar-separator {
@@ -396,23 +436,21 @@ body {
396436
padding-left: 0px;
397437
}
398438

399-
.e-chip.e-outline {
400-
margin-left: 0px;
439+
.e-chip.e-info {
440+
margin: 6px 6px 0px 0px;
401441
}
402442

403-
@import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';
404-
@import '../node_modules/@syncfusion/ej2-buttons/styles/fabric.css';
405-
@import '../node_modules/@syncfusion/ej2-calendars/styles/fabric.css';
406-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fabric.css';
407-
@import '../node_modules/@syncfusion/ej2-inputs/styles/fabric.css';
408-
@import '../node_modules/@syncfusion/ej2-navigations/styles/fabric.css';
409-
@import '../node_modules/@syncfusion/ej2-popups/styles/fabric.css';
410-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fabric.css';
411-
@import "../node_modules/@syncfusion/ej2-react-grids/styles/fabric.css";
412-
@import "../node_modules/@syncfusion/ej2-icons/styles/fabric.css";
413-
@import "../node_modules/@syncfusion/ej2-lists/styles/fabric.css";
414-
@import '../node_modules/@syncfusion/ej2-notifications/styles/fabric.css';
443+
@media only screen and (max-width: 1120px) {
444+
445+
.e-booking-details-container {
446+
flex: 2;
447+
}
448+
449+
.e-hotel-details-container {
450+
flex: 1;
451+
}
415452

453+
}
416454

417455
@media only screen and (max-width: 1050px) {
418456

@@ -463,13 +501,13 @@ body {
463501

464502
.e-booking-details-container {
465503
width: 100%;
466-
border-left: 0px solid #F0F4F6 !important;
467-
border-right: 0px solid #F0F4F6 !important;
468-
border-bottom: 5px solid #F0F4F6 !important;
504+
border-left: 0px solid #31353e !important;
505+
border-right: 0px solid #31353e !important;
506+
border-bottom: 5px solid #31353e !important;
469507
}
470508

471509
.e-hotel-details-container {
472-
border-right: 0px solid #F0F4F6 !important;
510+
border-right: 0px solid #31353e !important;
473511
}
474512
}
475513

0 commit comments

Comments
 (0)