Merge branch 'temp-payment' into reskin-payment

* temp-payment:
  improvement(reskin-payment): view all, view pending

Author: dedywahyudi

css/reskin-2/common.css

@@ -37,4 +37,88 @@
   --footer-height: 51px;
   --header-height-mobile: 60px;
   --footer-height-mobile: 75px;
+
+  --payment-status-owed: #f46500;
+  --payment-status-paid: #0ab88a;
+  --payment-status-cancelled: #ef476f;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+  .modal.show {
+    display: block;
+  }
+.modal-dialog {
+  position: relative;
+  max-width: calc(100% - 16px);
+  margin-left: auto;
+  margin-right: auto;
+}
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+
+  padding: 32px;
+}
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 24px 0;
+  border-bottom: 2px solid var(--black-10);
+}
+  .modal-title {
+    font-family: Barlow;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 26px;
+  }
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 24px 0;
+}
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 24px 0 0 0;
+  gap: 16px;
+  border-top: 2px solid var(--black-10);
 }
+  @media (max-width: /* --xs-max */ 599px) {
+    .modal-content {
+      padding: 24px 16px;
+    }
+    .modal-header {
+      padding: 0 0 16px 0;
+    }
+      .modal-title {
+        font-size: 18px;
+        line-height: 20px;
+      }
+    .modal-body {
+      padding: 16px 0;
+    }
+    .modal-footer {
+      padding: 16px 0 0 0;
+      gap: 10px;
+    }
+  }