Merge pull request #236 from wanderlust-group-project-1/style_change

Style change
wanderlust-group-project-1 · Apr 26, 2024 · dbee3fa · dbee3fa
2 parents 04285b8 + 4049e8c
commit dbee3fa
Show file tree

Hide file tree

Showing 23 changed files with 373 additions and 181 deletions.
diff --git a/app/views/customer/checkout.view.php b/app/views/customer/checkout.view.php
@@ -100,7 +100,7 @@
                     <div class="row gap-2 ">
                         <!-- <a href= <?php echo ROOT_DIR . "/cart/checkout" ?> class="btn btn-primary btn-full btn-lg">Pay</a> -->
 
-                        <button id="pay" class="btn btn-primary btn-full btn-lg" type="button">Pay</button>
+                        <button id="pay" class="btn-text-green border mt-4" type="button">Pay</button>
                     </div>
 
                 </div>

diff --git a/app/views/customer/components/cart.view.php b/app/views/customer/components/cart.view.php
@@ -51,7 +51,7 @@
     </div>
     <div class="row gap-2">
         <div class="total">
-            <h4>Subtotal: Rs. <span id="total">
+            <h4>Total: Rs. <span id="total">
 
             <?php
             // $total = 0;
@@ -65,8 +65,10 @@
         </div>
     </div>
     <div class="row gap-2">
-     <a href= <?php echo ROOT_DIR . "/cart/checkout" ?> class="btn btn-primary">Go to checkout</a>
-
+   <?php  if (!empty($items)) { ?>
+
+     <a href= <?php echo ROOT_DIR . "/cart/checkout" ?> class="btn-text-green border">Go to checkout</a>
+<?php } ?>
         <!-- <button id="checkout" class="btn" type="button">Checkout</button> -->
     </div>
 </div>
diff --git a/app/views/customer/components/fullpay.view.php b/app/views/customer/components/fullpay.view.php
@@ -1,5 +1,5 @@
-<div class="order-pay-content">
-    <h2>Pay</h2>
+<div class="order-pay-content ">
+    <h2 class="text-center">Pay</h2>
 
     <table class="payment-table w-100">
          <tr>
@@ -26,9 +26,11 @@
 
     </table>
 
-    <div class="payment">
-        <button class="btn btn-primary"   id="full-pay-confirm" data-id="<?= $rent->id ?>"
+    <div class="payment m-4 flex-d align-items-center justify-content-center gap-2">
+        <button class="btn-text-green border"   id="full-pay-confirm" data-id="<?= $rent->id ?>"
         >Pay Now</button>
+
+        <button class="btn-text-red border modal-close" >Cancel</button>
     </div>
 
 </div>
diff --git a/app/views/customer/components/item.view.php b/app/views/customer/components/item.view.php
@@ -31,7 +31,7 @@
 
                 <h5>Price: Rs. <?php echo htmlspecialchars($equipment->cost); ?></h5>
 
-                <button id="add-to-cart" class="btn btn-primary">Add to Cart</button>
+                <button id="add-to-cart" class="btn-text-green border">Add to Cart</button>
                 <!-- <button  class="btn btn-primary">Add to Cart</button> -->
 
             </div>

diff --git a/app/views/customer/components/items.view.php b/app/views/customer/components/items.view.php
@@ -24,7 +24,7 @@
                     <i class="fa fa-star-half-o" aria-hidden="true"></i>
                     <i class="fa fa-star-o" aria-hidden="true"></i>
                     </div> -->
-                    <button  class="btn btn-primary">View</button>
+                    <button  class="btn-text-green border">View</button>
                 </div>
             </div>
             </div>

diff --git a/app/views/customer/orders.view.php b/app/views/customer/orders.view.php
@@ -436,6 +436,8 @@ function paymentGateWay(data) {
                         // Note: Prompt user to pay again or show an error page
                         console.log("Payment dismissed");
                         alertmsg("Payment dismissed", "error");
+                        hideLoader();
+
 
                     };
 
@@ -444,6 +446,8 @@ function paymentGateWay(data) {
                         // Note: show an error page
                         console.log("Error:" + error);
                         alertmsg("Error occured", "error");
+                        hideLoader();
+
                     };
 
                     // Put the payment variables here
@@ -506,10 +510,13 @@ function paymentGateWay(data) {
 <div class="modal" id="confirm-cancel-modal">
     <div class="modal-content">
         <span class="close">&times;</span>
+        <div class="flex-d-c flex-md-c justify-content-center aligh-items-center gap-3">
+        <h2 class="text-center">Cancel Order</h2>
         <p>Are you sure you want to cancel this order?</p>
         <div class="flex-d gap-3 mt-3">
-        <button class="btn btn-primary" id="confirm-cancel">Yes</button>
-        <button class="btn btn-danger modal-close" id="cancel-cancel">No</button>
+        <button class="btn-text-green border" id="confirm-cancel">Yes</button>
+        <button class="btn-text-red border modal-close" id="cancel-cancel">No</button>
+        </div>
         </div>
     </div>
 </div>
@@ -520,11 +527,14 @@ function paymentGateWay(data) {
 <div class="modal" id="mark-as-rented-modal">
     <div class="modal-content">
         <span class="close">&times;</span>
-        <h2>Mark as Rented</h2>
+        <div class="flex-d-c flex-md-c justify-content-center aligh-items-center gap-3">
+
+        <h2 class="text-center">Mark as Rented</h2>
         <p>Are you sure you want to mark this order as rented?</p>
         <div class="flex-d gap-3 mt-3">
-        <button class="btn-text-green" id="mark-as-rented-confirm">Yes</button>
-        <button class="btn-text-red" id="mark-as-rented-cancel">No</button>
+        <button class="btn-text-green border" id="mark-as-rented-confirm">Yes</button>
+        <button class="btn-text-red border modal-close" id="mark-as-rented-cancel">No</button>
+        </div>
         </div>
     </div>
 </div>
@@ -546,12 +556,22 @@ function paymentGateWay(data) {
                 <label for="description">Description</label>
                 <textarea id="report-description" name="description" class="form-control-lg" required></textarea>
             </div>
-            <button class="btn btn-primary" id="report-submit">Submit</button>
+            <button class="btn-text-green border" id="report-submit">Submit</button>
         </form>
     </div>
 </div>
 
 
+
+<!-- Pay modal -->
+
+<div class="modal" id="pay-modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <div id="pay-data"></div>
+    </div>
+</div>
+
 <script type="text/javascript" src="https://www.payhere.lk/lib/payhere.js"></script>
 
 

diff --git a/app/views/rental/components/equipment.view.php b/app/views/rental/components/equipment.view.php
@@ -64,28 +64,34 @@
         </div>
         </div>
 
+        <div class="row flex-d">
         <div class="edit-button">
-        <button id="edit-equipment-button" class="btn btn-full m-1">Edit</button>        
+        <button id="edit-equipment-button" class="btn-text-orange m-1"><i class="fas fa-edit"></i>Edit</button>        
     </div>
 
     <!-- increase count -->
     <div class="increase-count-button">
-        <button id="increase-count-button" class="btn btn-full m-1" data-id="<?php echo htmlspecialchars($item->id); ?>" >Increase Quantity</button>
+        <button id="increase-count-button" class="btn-text-green  m-1" data-id="<?php echo htmlspecialchars($item->id); ?>" ><i class="fa fa-plus" aria-hidden="true"></i> Increase Quantity</button>
     </div>
     <!-- Manage Items -->
     <div class="manage-items-button">
-        <button id="manage-items-button" class="btn btn-full m-1" data-id="<?php echo htmlspecialchars($item->id); ?>">Manage Items</button>
+        <button id="manage-items-button" class="btn-text-orange m-1" data-id="<?php echo htmlspecialchars($item->id); ?>"><i class="fa fa-tasks" aria-hidden="true"></i>Manage Items</button>
     </div>
 
+        </div>
+
+        <div class="row flex-d">
+
     <!-- disable -->
     <div class="disable-button">
-        <button id="disable-equipment-button" class="btn btn-full m-1" data-id="<?php echo htmlspecialchars($item->id); ?>">Disable</button>
+        <button id="disable-equipment-button" class="btn-text-red m-1" data-id="<?php echo htmlspecialchars($item->id); ?>"><i class="fa fa-ban" aria-hidden="true"></i>Disable</button>
     </div>
 
 
     <div class="delete-button">
-        <button id="delete-equipment-button" class="btn btn-danger btn-full m-1" data-id="<?php echo htmlspecialchars($item->id); ?>">Delete</button>
+        <button id="delete-equipment-button" class="btn-text-red m-1" data-id="<?php echo htmlspecialchars($item->id); ?>"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button>
     </div>
+        </div>
 
 
         </div>
@@ -110,19 +116,19 @@
     <div id="increase-count-modal" class="increase-count-modal modal" >
         <div class="modal-content">
             <span class="close">&times;</span>
-            <form id="increase-count-form" class="flex-d-c gap-2">
+            <form id="increase-count-form" class="flex-d-c gap-2 justify-content-center text-center">
                 <h2>Increase Quantity</h2>
 
                 <!-- Current count -->
                 <!-- <p>Current Count: <?php echo htmlspecialchars($item->count); ?></p> -->
 
                 <div class="flex-d gap-2 justify-content-between ">
-                <label for="count">Current Count</label>
+                <label for="count">Current Quantity</label>
                 <input type="text" id="current-count" name="count" value="<?php echo htmlspecialchars($item->count); ?>" disabled>
                 </div>
 
                 <div class="flex-d gap-2 justify-content-between ">
-                <label for="count">Count</label>
+                <label for="count">Quantity</label>
 
                 <input type="number" id="count" name="count" required>
                 </div>
@@ -132,9 +138,9 @@
                 <label for="total">Total</label>
                 <input type="text" id="total" name="total" value="<?php echo htmlspecialchars($item->count); ?>" disabled>
                 </div>
-
-                <button type="submit" id="increase-count" class="btn">Increase Quantity</button>
-
+                <div class="flex-d gap-2 justify-content-center">
+                <button type="submit" id="increase-count" class="btn-text-green border"><i class="fa fa-plus" aria-hidden="true"></i> Increase Quantity</button>
+                </div>
             </form>
         </div>
     </div>
@@ -145,11 +151,14 @@
     <div id="delete-equipment-modal" class="delete-equipment-modal modal">
         <div class="modal-content ">
             <span class="close ">&times;</span>
+            <div class="flex-d-c gap-2 justify-content-center text-center">
+
             <h2>Delete Equipment</h2>
             <p>Are you sure you want to delete this equipment?</p>
             <div class="flex-d gap-2 mt-5">
-            <button id="delete-equipment" class="btn btn-danger">Delete</button>
-            <button id="cancel-delete" class="btn modal-close">Cancel</button>
+            <button id="delete-equipment" class="btn-text-red border">Delete</button>
+            <button id="cancel-delete" class="btn-text-green border  modal-close">Cancel</button>
+            </div>
             </div>
 
         </div>
@@ -165,11 +174,13 @@
     <div id="disable-equipment-modal" class="disable-equipment-modal modal">
         <div class="modal-content">
             <span class="close">&times;</span>
+            <div class="flex-d-c gap-2 justify-content-center text-center">
             <h2>Disable Equipment</h2>
             <p>Are you sure you want to disable this equipment?</p>
             <div class="flex-d gap-2 mt-5">
-            <button id="disable-equipment" class="btn btn-danger">Disable</button>
-            <button id="cancel-disable" class="btn modal-close">Cancel</button>
+            <button id="disable-equipment" class="btn-text-red border">Disable</button>
+            <button id="cancel-disable" class="btn-text-green border modal-close">Cancel</button>
+            </div>
             </div>
         </div>
     </div>
@@ -220,7 +231,7 @@
     <div class="edit-equipment-modal modal" id="edit-equipment-modal">
     <div class="modal-content">
         <span class="close">&times;</span>
-        <form id="update-equipment-form" itemid="<?php echo htmlspecialchars($item->id); ?>"  class="flex-d gap-2"  enctype="multipart/form-data">
+        <form id="update-equipment-form" class="flex-d-c text-center" itemid="<?php echo htmlspecialchars($item->id); ?>"  class="flex-d gap-2"  enctype="multipart/form-data">
             <h2>Update Equipment</h2>
 
             <div class="row align-items-start">
@@ -279,7 +290,7 @@
             </div>
                     </div>
             <div class="row">
-            <input id="update-equipment" type="submit" class="btn" value="Update Equipment">
+            <input id="update-equipment" type="submit" class="btn-text-green border" value="Update Equipment">
             </div>
         </form>
     </div>
@@ -304,7 +315,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     background-color: rgba(0, 0, 0, 0.4); /* Unified background color */
     /* padding-top: 60px; */
 }
@@ -317,7 +328,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     background-color: rgba(0, 0, 0, 0.4); /* Unified background color */
     /* padding-top: 60px; */
 }

diff --git a/app/views/rental/components/equipmentlist.view.php b/app/views/rental/components/equipmentlist.view.php
@@ -2,14 +2,14 @@
 
     <!-- Table filter for each column -->
     <!-- button for show filter -->
-    <div class="filter-btn">
-        <button id="show-filter" class="btn-icon" aria-expanded="false"><i class="fa fa-filter" aria-hidden="true"></i> Filter</button>
+    <div class="filter-btn mb-3">
+        <button id="show-filter" class="btn-text-green border" aria-expanded="false"><i class="fa fa-filter" aria-hidden="true"></i> Filter</button>
     </div>
 
 
     <div class="table-filter ">
-        <div class="row">
-            <div class="back-btn">
+        <div class="row ">
+            <div class="back-btn mb-3">
                 <button id="hide-filter" class="btn-icon" aria-expanded="true"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
             </div>
         </div>

diff --git a/app/views/rental/components/items.view.php b/app/views/rental/components/items.view.php
@@ -22,8 +22,8 @@
                     <td><?= $item->upcoming_rent_count ?></td>
                     <!-- Actions -->
                     <td> 
-                        <button id="equipment-item" class="btn btn-primary" data-id="<?= $item->id ?>" data-status="<?= $item->status ?>" data-number="<?= $item->item_number ?>" data-count = "<?= $item->upcoming_rent_count ?>"
-                         >Manage</button>
+                        <button id="equipment-item" class="btn-text-blue" data-id="<?= $item->id ?>" data-status="<?= $item->status ?>" data-number="<?= $item->item_number ?>" data-count = "<?= $item->upcoming_rent_count ?>"
+                         > <i class="fa fa-tasks" aria-hidden="true"></i>  Manage</button>
                     </td>
 
                 </tr>
@@ -39,14 +39,19 @@
 <div id="change-item-status-modal" class="modal">
     <div class="modal-content">
         <span class="close">&times;</span>
+
+        <div class="flex-d-c justify-content-center text-center gap-3" >
+
         <h2>Change Item Status</h2>
 
         <p>Item Number: <span id="item-number"></span></p>
 
         <div id="item-actions">
-            <button id="make-unavailable-t" class="btn btn-danger">Make Unavailable Temporarily</button>
-            <button id="make-unavailable-p" class="btn btn-danger tooltip"  data-tooltip="This action cannot be undone." >Make Unavailable Permanently</button>
-            <button id="make-available" class="btn btn-success">Make Available</button>
+            <button id="make-unavailable-t" class="btn-text-orange border">Make Unavailable Temporarily</button>
+            <button id="make-unavailable-p" class="btn-text-red border"  data-tooltip="This action cannot be undone." >Make Unavailable Permanently</button>
+            <button id="make-available" class="btn-text-green border">Make Available</button>
+
+        </div>
 
         </div>
 

diff --git a/app/views/rental/components/order.view.php b/app/views/rental/components/order.view.php
@@ -80,7 +80,7 @@
     <!-- Button to download report -->
     <div class="row m-2">
         <div class="col-lg-12 col-md-12 m-4">
-            <button id="download-report" class="btn btn-primary" data-id="<?= $order->id ?>" >Download Report</button>
+            <button id="download-report" class="btn-text-green border" data-id="<?= $order->id ?>" ><i class="fa fa-download" aria-hidden="true"></i> Order Details</button>
         </div>
     </div>
 

diff --git a/app/views/rental/components/orderlist.view.php b/app/views/rental/components/orderlist.view.php
@@ -27,7 +27,7 @@
         </div> -->
 
         <div class="filter-order-button">
-            <button class="btn btn-primary" id="filter-order-button">Filter</button>
+            <button class="btn-text-green border" id="filter-order-button"><i class="fa fa-filter" aria-hidden="true"></i>Filter</button>
         </div>
 
         <!-- by Cost -->
@@ -132,7 +132,7 @@
                     </div>
                 <?php } }
                 elseif ($order->status == 'rented') { ?>
-                    <button class="btn btn-primary" id="mark-as-returned">Mark as Returned</button>
+                    <button class="btn-text-orange" id="mark-as-returned"><i class="fa fa-check" aria-hidden="true"></i>Mark as Returned</button>
                 <?php }
                 elseif ($order->status == 'pending') { ?>
                     <button class="btn-text-orange" id="accept-request"><i class="fa fa-check" aria-hidden="true"></i> Accept</button>
@@ -159,19 +159,21 @@
 <div id="mark-as-returned-modal" class="modal">
     <div class="modal-content">
         <span class="close">&times;</span>
+        <div class="flex-d-c justify-content-center text-center gap-3">
         <h2>Mark as Returned</h2>
         <p>Are you sure you want to mark this order as returned?</p>
         <div class="flex-d gap-3 mt-3">
-            <button class="btn btn-primary" id="mark-as-returned-confirm">Yes</button>
-            <button class="btn btn-danger modal-close" id="mark-as-returned-cancel">No</button>
+            <button class="btn-text-green border" id="mark-as-returned-confirm">Yes</button>
+            <button class="btn-text-orange border modal-close" id="mark-as-returned-cancel">No</button>
             <!-- Report Complaint -->
 
-            <button class="btn btn-danger" id="report-return-complaint">Report Complaint</button>
+            <button class="btn-text-red border" id="report-return-complaint">Report Complaint</button>
 
 
 
 
 
+        </div>
         </div>
     </div>
 </div>