Skip to content

Commit 8dada7a

Browse files
jmfarook7jmfarook7
authored
Merge pull request #10 from SyncfusionExamples/EJ2-932442-theme-cost
932442: Theme updated
2 parents 726333d + fb3b2f3 commit 8dada7a

File tree

2 files changed

+24
-8
lines changed

2 files changed

+24
-8
lines changed

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,11 @@
352352
padding-right: 3px;
353353
}
354354

355+
.e-arrow-styler {
356+
font-size: 20px;
357+
padding-right: 3px;
358+
}
359+
355360
.e-price-info {
356361
text-align: right;
357362
}
@@ -494,8 +499,17 @@
494499
padding-left: 0px;
495500
}
496501

497-
.e-chip.e-info {
502+
.e-chip.e-disabled.e-info {
498503
margin: 6px 6px 0px 0px;
504+
background: #ecfeff !important;
505+
border-color: #cffafe !important;
506+
color: #0e7490 !important;
507+
}
508+
509+
.e-chip.e-disabled.e-success {
510+
background: #f0fdf4 !important;
511+
border-color: #bbf7d0 !important;
512+
color: #15803d !important;
499513
}
500514

501515
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ function HotelBookApp() {
252252
priceCollectionData.current = priceCollection;
253253
lineThroughPriceText.current.innerText = '$' + price.toFixed(2);
254254
taxedPriceText.current.innerText = '$' + priceCollection.TaxedPrice;
255-
priceStatementText.current.innerHTML = 'includes ' + selectedRoom.DiscountPercentage + '% discount (<span class="e-discount-style">-$' + priceCollection.DiscountAmount + '</span>) and ' + selectedRoom.TaxPercentage + '% tax (<span class="e-tax-style">+$' + priceCollection.TaxAmount + '</span>)';
255+
priceStatementText.current.innerHTML = 'Includes ' + selectedRoom.DiscountPercentage + '% discount (<span class="e-discount-style">-$' + priceCollection.DiscountAmount + '</span>) and ' + selectedRoom.TaxPercentage + '% tax (<span class="e-tax-style">+$' + priceCollection.TaxAmount + '</span>)';
256256
}
257257

258258
// This method calls for navigate the user to booking page and rendering the input field with form validator
@@ -409,7 +409,7 @@ function HotelBookApp() {
409409
<ChipListComponent cssClass='e-outline'>
410410
<ChipsDirective>
411411
{hotelFacilityList.map((item, index) => (
412-
<ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
412+
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
413413
))}
414414
</ChipsDirective>
415415
</ChipListComponent>
@@ -419,7 +419,7 @@ function HotelBookApp() {
419419
<ChipListComponent cssClass='e-outline'>
420420
<ChipsDirective>
421421
{roomFacilityList.map((item, index) => (
422-
<ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
422+
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
423423
))}
424424
</ChipsDirective>
425425
</ChipListComponent>
@@ -435,7 +435,7 @@ function HotelBookApp() {
435435
<ChipListComponent cssClass='e-outline'>
436436
<ChipsDirective>
437437
{extrasList.map((item, index) => (
438-
<ChipDirective key={index} text={item} cssClass="e-success"></ChipDirective>
438+
<ChipDirective key={index} text={item} cssClass="e-success" enabled={false}></ChipDirective>
439439
))}
440440
</ChipsDirective>
441441
</ChipListComponent>
@@ -444,10 +444,11 @@ function HotelBookApp() {
444444
<div className='e-price-info'>
445445
<div>
446446
<span className='e-cost-line-through-styler normal-hint-text-color'>${props.Price.toFixed(2)}</span>
447+
<span className='e-arrow-styler normal-hint-text-color'>&#8594;</span>
447448
<span className='e-cost-styler'>${priceCollection.TaxedPrice}</span>
448449
</div>
449450
<div className='normal-text-color e-semi-title-header-text'>
450-
includes {props.DiscountPercentage}% discount (<span className='e-discount-style'>-${priceCollection.DiscountAmount}</span>) and {props.TaxPercentage}% tax (<span className='e-tax-style'>+${priceCollection.TaxAmount}</span>)
451+
Includes {props.DiscountPercentage}% discount (<span className='e-discount-style'>-${priceCollection.DiscountAmount}</span>) and {props.TaxPercentage}% tax (<span className='e-tax-style'>+${priceCollection.TaxAmount}</span>)
451452
</div>
452453
</div>
453454
</div>
@@ -970,6 +971,7 @@ function HotelBookApp() {
970971
<div className='e-price-info'>
971972
<div>
972973
<span className='e-cost-line-through-styler normal-hint-text-color' ref={e => lineThroughPriceText.current = e}></span>
974+
<span className='e-arrow-styler normal-hint-text-color'>&#8594;</span>
973975
<span className='e-cost-styler' ref={e => taxedPriceText.current = e}></span>
974976
</div>
975977
<div className='normal-text-color e-semi-title-header-text' ref={e => priceStatementText.current = e}></div>
@@ -991,7 +993,7 @@ function HotelBookApp() {
991993
<ChipListComponent cssClass='e-outline'>
992994
<ChipsDirective>
993995
{selectedRoom.HotelFacility.split(', ').map((item, index) => (
994-
<ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
996+
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
995997
))}
996998
</ChipsDirective>
997999
</ChipListComponent>
@@ -1001,7 +1003,7 @@ function HotelBookApp() {
10011003
<ChipListComponent cssClass='e-outline'>
10021004
<ChipsDirective>
10031005
{selectedRoom.RoomFacility.split(', ').map((item, index) => (
1004-
<ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
1006+
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
10051007
))}
10061008
</ChipsDirective>
10071009
</ChipListComponent>

0 commit comments

Comments
 (0)