improvement(reskin-payment): no payment page

css/reskin-2/common.css

@@ -0,0 +1,124 @@
+/* reskin-2 common */
+
+:root {
+  /*
+  --xs-max: 599px;    (max-width: /* --xs-max * / 599px)
+  --sm-max: 959px;    (max-width: /* --sm-max * / 959px)
+  --md-max: 1279px;   (max-width: /* --md-max * / 1279px)
+  --lg-max: 1375px;   (max-width: /* --lg-max * / 1375px)
+
+  --xs-min: 320px;    (min-width: /* --xs-min * / 320px)
+  --sm-min: 600px;    (min-width: /* --sm-min * / 600px)
+  --md-min: 960px;    (min-width: /* --md-min * / 960px)
+  --lg-min: 1280px;   (min-width: /* --lg-min * / 1280px)
+  --xl-min: 1376px;   (min-width: /* --xl-min * / 1376px)
+  */
+
+  --screen-max: 1376px;
+
+  --tc-black: #0c0c0c;
+  --tc-white: #fff;
+  --black-100: #2a2a2a;
+  --black-80: #555555;
+  --black-60: #7f7f7f;
+  --black-40: #aaaaaa;
+  --black-20: #d4d4d4;
+  --black-10: #e9e9e9;
+  --black-5: #f4f4f4;
+  --black-2: #fbfbfb;
+  --green: #137d60;
+  --blue-1: #eaf6fd;
+  --blue-2: #bae1f9;
+  --blue-3: #2c95d7;
+  --grey-1: #767676;
+  --divider: #e9e9e9;
+
+  --header-height: 80px;
+  --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;
+    }
+  }

css/reskin-2/footer.css

@@ -0,0 +1,62 @@
+/* src/main/com/topcoder/web/jsp/foot.jsp */
+
+.footer-wrapper {
+  height: var(--footer-height);
+  border-top: 1px solid var(--black-10);
+  box-sizing: border-box;
+}
+  .footer-wrapper .footer-inner {
+    display: flex;
+
+    align-items: center;
+    padding: 16px 32px;
+    max-width: var(--screen-max);
+    margin: 0 auto;
+    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;
+        gap: 8px;
+    }
+  }
+
+  .footer-wrapper .utils {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+    .footer-wrapper .utils > * {
+      font-family: Roboto;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      color: var(--black-100);
+    }
+
+  .footer-wrapper .social {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--black-60);
+
+    margin-left: auto;
+  }
+    .footer-wrapper .social a {
+      display: flex;
+    }
+    @media (max-width: /* --xs-max */ 599px) {
+      .footer-wrapper .social {
+        margin-right: auto;
+      }
+    }