improvement(reskin-payment): payment summary

Author: dedywahyudi

css/reskin-2/common.css

@@ -29,7 +29,8 @@
   --green: #137d60;
   --blue-1: #eaf6fd;
   --blue-2: #bae1f9;
-
+  --blue-3: #2c95d7;
+  --grey-1: #767676;
   --divider: #e9e9e9;
 
   --header-height: 80px;

css/reskin-2/footer.css

@@ -12,13 +12,18 @@
     padding: 16px 32px;
     max-width: var(--screen-max);
     margin: 0 auto;
-    box-sizing: border-box;
+    box-sizing: content-box;
 
     font-size: 12px;
     line-height: 18px;
     font-weight: 400;
     color: var(--black-100);
   }
+  @media (max-width: /* --sm-max */ 959px) {
+    .footer-wrapper .footer-inner {
+      padding: 16px 16px;
+    }
+  }
   @media (max-width: /* --xs-max */ 599px) {
     .footer-wrapper .footer-inner {
         flex-direction: column;

css/reskin-2/paymentHistory.css

@@ -5,20 +5,20 @@ body {
 }
 
 .page {
-  min-height: calc(100vh - var(--header-height) - var(--footer-height));
+  min-height: calc(100vh - var(--header-height) - var(--footer-height) - 64px);
   max-width: var(--screen-max);
   margin: 0 auto;
   padding: 32px;
-  box-sizing: border-box;
+  box-sizing: content-box;
 }
   .page table.myHome tbody tr td.bodyColumn#payments {
     padding: 0;
   }
-  @media (max-width: /* --xs-max */ 599px) {
+  @media (max-width: /* --sm-max */ 959px) {
     .page {
-      min-height: calc(100vh - var(--header-height-mobile) - 75px);
+      min-height: calc(100vh - var(--header-height-mobile) - 75px - 32px);
       max-width: 100%;
-      padding: 16px;
+      padding: 16px 16px 0;
     }
   }
 
@@ -158,6 +158,12 @@ body {
       top: 100%;
     }
 
+.paymentHistoryDropdown-container {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
 .paymentHistoryDropdown {
 }
   .paymentHistoryDropdown .dropdown-toggle {