Remove tailwind from cashier page (#3)

src/UI/NCafe.Web/App.razor

@@ -10,6 +10,5 @@
         </LayoutView>
     </NotFound>
 </Router>
-<script src="https://cdn.tailwindcss.com"></script>
 
 <AntContainer />

src/UI/NCafe.Web/Pages/Cashier/Index.razor

@@ -22,37 +22,36 @@
     </Result>
     return;
 }
-<div class="grid grid-cols-[1fr,2fr] h-full">
-    <div class="grid grid-rows-[3rem,auto,3rem,5rem]">
-        <h2 class="font-bold text-xl">Order Summary</h2>
-        <ul>
+<div class="container">
+    <div class="order-summary">
+        <Title>Order Summary</Title>
+        <ul class="order-items">
             @foreach (var item in _order.Items)
             {
-                <li class="grid grid-cols-[1fr,2fr,auto] p-2 border-b-dashed border-b border-dashed last:border-b-0 text-lg">
+                <li class="order-item">
                     <span>@item.Quantity x @(_products.FirstOrDefault(p => p.Id == item.ProductId)?.Name)</span>
-                    <span class="text-right">@(item.Total.ToString("C"))</span>
+                    <span style="text-align: right;">@(item.Total.ToString("C"))</span>
                     <Popconfirm Title="Are you sure delete this item?"
                                 OnConfirm="@(() => RemoveItem(item.ProductId))">
-                        <button><Icon Type="delete" Theme="outline"/></button>
+                        <button class="remove-item-btn"><Icon Type="delete" Theme="outline"/></button>
                     </Popconfirm>
                 </li>
             }
         </ul>
         @if (_order.Items.Any()) {
-            <div class="grid grid-cols-2 p-2 text-right font-bold text-xl">
+            <div class="order-total">
                 <span>Total</span>
                 <span>@(_order.Total.ToString("C"))</span>
             </div>
 
-            <button class="m-2 shadow border-black border-1 rounded bg-sky-800 text-white text-xl font-bold active:bg-sky-600"
-                    type="@ButtonType.Primary" @onclick="ShowModal">Place Order</button>
+            <button type="button" class="place-order-btn" @onclick="ShowModal">Place Order</button>
         }
     </div>
-    <div class="grid grid-cols-4 grid-rows-4 gap-2 p-4">
+    <div class="grid-container">
         @foreach (var product in _products)
         {
-            <button type="button" @onclick="() => AddItemToOrder(product.Id)"
-                    class="shadow hover:shadow-lg p-2 text-xl border-solid border-black border-1 active:bg-sky-600 hover:bg-sky-800 hover:text-white hover:border-slate-500 rounded">
+            <button type="button" class="product-button"
+                    @onclick="() => AddItemToOrder(product.Id)">
                 <strong>@product.Name<br/>@product.Price.ToString("C")</strong>
             </button>
         }

src/UI/NCafe.Web/Pages/Cashier/Index.razor.css

@@ -0,0 +1,89 @@
+.container {
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    height: 100%;
+    width: 100%;
+}
+
+.order-summary {
+    display: grid;
+    grid-template-rows: 4rem auto 3rem 5rem;
+}
+
+.order-items {
+    list-style-type: none;
+    padding: 0;
+}
+
+.order-item {
+    display: grid;
+    grid-template-columns: 1fr 2fr auto;
+    padding: 8px;
+    border-bottom: 1px dashed;
+    font-size: large;
+}
+
+.order-item:last-child {
+    border-bottom: none;
+}
+
+.order-total {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 8px;
+    text-align: right;
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.grid-container {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: 8px;
+    padding: 16px;
+}
+
+.product-button {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    font-size: large;
+    border: 1px solid #dedede;
+    border-radius: 4px;
+}
+
+.product-button:hover {
+    background-color: #6192fa;
+    color: white;
+}
+
+.product-button:active {
+    background-color: #6192fa;
+}
+
+.place-order-btn {
+    margin: 1rem;
+    font-size: large;
+    font-weight: bold;
+    border: 1px solid black;
+    border-radius: 4px;
+    background-color: #4480ff;
+    color: white;
+}
+
+.place-order-btn:hover {
+    background-color: #6192fa;
+}
+
+.place-order-btn:active {
+    background-color: #4480ff;
+}
+
+.remove-item-btn {
+    margin-left: 2px;
+    padding: 2px 3px;
+    border: none;
+}