932442: Theme updated

Author: hemanthkumar-syncfusion

Hotel-booking-App/src/HotelBookApp.css

@@ -352,6 +352,11 @@
     padding-right: 3px;
 }
 
+.e-arrow-styler {
+    font-size: 20px;
+    padding-right: 3px;
+}
+
 .e-price-info {
     text-align: right;
 }
@@ -494,8 +499,17 @@
     padding-left: 0px;
 }
 
-.e-chip.e-info {
+.e-chip.e-disabled.e-info {
     margin: 6px 6px 0px 0px;
+    background: #ecfeff !important;
+    border-color: #cffafe !important;
+    color: #0e7490 !important;
+}
+
+.e-chip.e-disabled.e-success {
+    background: #f0fdf4 !important;
+    border-color: #bbf7d0 !important;
+    color: #15803d !important;
 }
 
 @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';

Hotel-booking-App/src/HotelBookApp.js

@@ -252,7 +252,7 @@ function HotelBookApp() {
         priceCollectionData.current = priceCollection;
         lineThroughPriceText.current.innerText = '$' + price.toFixed(2);
         taxedPriceText.current.innerText = '$' + priceCollection.TaxedPrice;
-        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>)';
+        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>)';
     }
 
     // This method calls for navigate the user to booking page and rendering the input field with form validator
@@ -409,7 +409,7 @@ function HotelBookApp() {
                                         <ChipListComponent cssClass='e-outline'>
                                             <ChipsDirective>
                                                 {hotelFacilityList.map((item, index) => (
-                                                    <ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
+                                                    <ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
                                                 ))}
                                             </ChipsDirective>
                                         </ChipListComponent>
@@ -419,7 +419,7 @@ function HotelBookApp() {
                                         <ChipListComponent cssClass='e-outline'>
                                             <ChipsDirective>
                                                 {roomFacilityList.map((item, index) => (
-                                                    <ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
+                                                    <ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
                                                 ))}
                                             </ChipsDirective>
                                         </ChipListComponent>
@@ -435,7 +435,7 @@ function HotelBookApp() {
                                 <ChipListComponent cssClass='e-outline'>
                                     <ChipsDirective>
                                         {extrasList.map((item, index) => (
-                                            <ChipDirective key={index} text={item} cssClass="e-success"></ChipDirective>
+                                            <ChipDirective key={index} text={item} cssClass="e-success" enabled={false}></ChipDirective>
                                         ))}
                                     </ChipsDirective>
                                 </ChipListComponent>
@@ -444,10 +444,11 @@ function HotelBookApp() {
                             <div className='e-price-info'>
                                 <div>
                                     <span className='e-cost-line-through-styler normal-hint-text-color'>${props.Price.toFixed(2)}</span>
+                                    <span className='e-arrow-styler normal-hint-text-color'>&#8594;</span>
                                     <span className='e-cost-styler'>${priceCollection.TaxedPrice}</span>
                                 </div>
                                 <div className='normal-text-color e-semi-title-header-text'>
-                                    includes {props.DiscountPercentage}% discount (<span className='e-discount-style'>-${priceCollection.DiscountAmount}</span>) and {props.TaxPercentage}% tax (<span className='e-tax-style'>+${priceCollection.TaxAmount}</span>)
+                                    Includes {props.DiscountPercentage}% discount (<span className='e-discount-style'>-${priceCollection.DiscountAmount}</span>) and {props.TaxPercentage}% tax (<span className='e-tax-style'>+${priceCollection.TaxAmount}</span>)
                                 </div>
                             </div>
                         </div>
@@ -970,6 +971,7 @@ function HotelBookApp() {
                                 <div className='e-price-info'>
                                     <div>
                                         <span className='e-cost-line-through-styler normal-hint-text-color' ref={e => lineThroughPriceText.current = e}></span>
+                                        <span className='e-arrow-styler normal-hint-text-color'>&#8594;</span>
                                         <span className='e-cost-styler' ref={e => taxedPriceText.current = e}></span>
                                     </div>
                                     <div className='normal-text-color e-semi-title-header-text' ref={e => priceStatementText.current = e}></div>
@@ -991,7 +993,7 @@ function HotelBookApp() {
                                 <ChipListComponent cssClass='e-outline'>
                                     <ChipsDirective>
                                         {selectedRoom.HotelFacility.split(', ').map((item, index) => (
-                                            <ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
+                                            <ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
                                         ))}
                                     </ChipsDirective>
                                 </ChipListComponent>
@@ -1001,7 +1003,7 @@ function HotelBookApp() {
                                 <ChipListComponent cssClass='e-outline'>
                                     <ChipsDirective>
                                         {selectedRoom.RoomFacility.split(', ').map((item, index) => (
-                                            <ChipDirective key={index} text={item} cssClass="e-info"></ChipDirective>
+                                            <ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
                                         ))}
                                     </ChipsDirective>
                                 </ChipListComponent>