Merge pull request #17 from SyncfusionExamples/EJ2-946331-update

946331: Need to update Inventory Use Case Sample Based on UX Review

Author: jmfarook7

Inventory Management and Invoice Generating/Inventory Application/src/App.tsx

@@ -644,7 +644,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
         if ((gridInstance.current.dataSource as any).length) {
           printTable(
             (gridInstance.current),
-            "ABC SUPERMARKET",
+            "ShopNezt Supermarket",
             (document.getElementById("billNoInput") as HTMLInputElement).value,
             (document.getElementById("customerName") as HTMLInputElement).value,
             (document.getElementById("phone-input") as HTMLInputElement).value,
@@ -1140,7 +1140,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
 
     return (
       <div>
-      <div className="input-container-title">ABC SUPERMARKET POINT OF SALE (POS)</div>
+  <div className="input-container-title">ShopNezt Supermarket Point Of Sale (POS)</div>
         {/* Customer details Header element */}
         <div className="header" style={{marginTop: "15px", height: '20%'}}>
           <table className="header-table" style={{marginLeft: '40px'}}>
@@ -1332,15 +1332,15 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
                   <div className="col-xs-3 col-sm-3 ">
                     <div className="e-card" id="poscards">
                       <div className="e-card-actions">
-                        <div className="e-card-btn-txt" id="deliverOptionDiv" style={{ background: 'linear-gradient(to right, rgb(251, 146, 60), rgb(224 212 55) 50%, rgb(251, 146, 60))'}}>
+                        <div className="e-card-btn-txt" id="deliverOptionDiv" style={{ background: 'rgba(251, 140, 0, 0.7)'}}>
                           <ButtonComponent
                             ref={buttonRef}
                             onClick={onClickToggle}
                             isToggle={true}
                             title="Toggle Delivery type"
                           >
                             <span>Delivery Type:</span> &nbsp;
-                            <span ref={deliverytypeRef} style={{ color: deliveryType === "Take Away" ? "rgb(8 168 67)" : "red" }}>
+                            <span ref={deliverytypeRef} style={{ color: deliveryType === "Take Away" ? "green" : "red" }}>
                             {deliveryType}
                             </span>
                           </ButtonComponent>
@@ -1352,7 +1352,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
                   <div className="col-xs-3 col-sm-3 ">
                     <div className="e-card" id="poscards">
                       <div className="e-card-actions">
-                        <div className="e-card-btn-txt" id="cardPayButtonDiv" style={{ background: 'linear-gradient(to right, rgb(16, 18, 240), rgb(141 149 232) 50%, rgb(16, 18, 240))'}}>
+                        <div className="e-card-btn-txt" id="cardPayButtonDiv" style={{ background: 'rgb(79, 70, 229)'}}>
                           <ButtonComponent
                             id="cardPayButton"
                             title="Click to enter card payment"
@@ -1373,7 +1373,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
                   <div className="col-xs-3 col-sm-3 ">
                     <div className="e-card" id="poscards">
                       <div className="e-card-actions">
-                        <div className="e-card-btn-txt" id="UPIPayButtondiv" style={{ background: 'linear-gradient(to right, #15803d, #55e189 50%, #15803d)'}}>
+                        <div className="e-card-btn-txt" id="UPIPayButtondiv" style={{ background: 'green'}}>
                           <ButtonComponent
                             id="UPIPayButton"
                             title="Click to enter UPI payment"
@@ -1394,7 +1394,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
                   <div className="col-xs-3 col-sm-3 ">
                     <div className="e-card" id="poscards">
                       <div className="e-card-actions">
-                        <div className="e-card-btn-txt" id="totalNetAmount" style={{ background: 'linear-gradient(to right, rgb(251 60 60), rgb(239 179 87) 50%, rgb(251 60 60))'}}>
+                        <div className="e-card-btn-txt" id="totalNetAmount" style={{ background: 'black'}}>
                           <ButtonComponent
                             id="cashPayButton"
                             title="Click to enter cash payment"

Inventory Management and Invoice Generating/Inventory Application/src/index.css

@@ -134,7 +134,6 @@
     margin: 0;
     padding: 5px;
     text-align: center;
-    text-transform: uppercase;
     font-size: 19px;
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-weight: bold;
@@ -418,13 +417,12 @@
 .e-card {
     margin: 10px 10px 0 10px;
     border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Dialogs */
 .e-dialog .e-header,
 #targetElement2 .e-footer-content .e-control.e-btn {
-    background-color: #fb923c;
+    background-color: rgb(79, 70, 229);
     color: white;
     font-weight: bold;
 }
@@ -473,12 +471,6 @@ body {
     overflow: hidden;
 }
 
-/* Additional Styling */
-#poscards {
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
 #cashCalculator {
     margin-top: 20px;
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -533,7 +525,7 @@ body {
 #cashCalculator td:last-child {
     text-align: right;
     font-weight: bold;
-    color: #1b8ef2;
+    color: #111827;
     font-size: 17px;
     /* Text color for balance amount */
 }