diff --git a/css/reskin-2/common.css b/css/reskin-2/common.css
new file mode 100644
index 000000000..34f7f84d2
--- /dev/null
+++ b/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;
+ }
+ }
diff --git a/css/reskin-2/footer.css b/css/reskin-2/footer.css
new file mode 100644
index 000000000..ae6b644ee
--- /dev/null
+++ b/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;
+ }
+ }
diff --git a/css/reskin-2/paymentHistory.css b/css/reskin-2/paymentHistory.css
new file mode 100644
index 000000000..d99bf669a
--- /dev/null
+++ b/css/reskin-2/paymentHistory.css
@@ -0,0 +1,1116 @@
+/* src/main/com/topcoder/web/tc/view/pacts/client/PaymentHistory.jsp */
+
+body {
+ background-color: var(--tc-white);
+}
+
+.page {
+ min-height: calc(100vh - var(--header-height) - var(--footer-height) - 64px);
+ max-width: var(--screen-max);
+ margin: 0 auto;
+ padding: 32px;
+ box-sizing: content-box;
+}
+ .page ~ .bottom-footer {
+ box-sizing: border-box;
+ }
+ .page table.myHome tbody tr td.bodyColumn#payments {
+ padding: 0;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .page {
+ min-height: calc(100vh - var(--header-height-mobile) - 75px - 32px);
+ max-width: 100%;
+ padding: 16px 16px 0;
+ }
+ }
+
+.page-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+ .page-header .title {
+ order: -2;
+ flex: auto;
+ padding-right: 1em;
+ text-transform: uppercase;
+
+ margin-bottom: 0 !important;
+ font-family: 'Barlow Condensed';
+ font-weight: 600 !important;
+ font-size: 34px !important;
+ line-height: 32px !important;
+ color: var(--black-100) !important;
+ border-bottom: none !important;
+ }
+ .page-header .back-btn {
+ order: -3;
+ flex: none;
+ align-self: flex-end;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 32px;
+ height: 24px;
+ margin-right: 16px;
+ margin-bottom: 1px;
+ border: 1.5px solid var(--green);
+ border-radius: 24px;
+ box-sizing: border-box;
+ }
+ .page-header .back-btn .arrow-prev-icon {
+ content: url('/i/reskin-2/arrow-prev.svg');
+ }
+ .page-header .how-to-get-paid {
+ order: -1;
+ align-self: flex-end;
+ text-transform: uppercase;
+
+ padding: 0 !important;
+ }
+ .page-header .how-to-get-paid a {
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: var(--green);
+
+ display: block;
+ }
+ .page-header .how-to-get-paid a:hover {
+ text-shadow: none;
+ }
+ .page-header .divider {
+ width: 100%;
+ height: 2px;
+ margin: 23px 0 24px;
+ background-color: var(--divider);
+ }
+ .page-header .tabs,
+ .page-header .dropdown {
+ width: 100%;
+ }
+ @media (min-width: /* --md-min */ 960px) {
+ .page-header .dropdown {
+ display: none;
+ }
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .page-header .tabs {
+ display: none;
+ }
+ .page-header .back-btn {
+ margin-right: calc(100% - 32px);
+ margin-bottom: 8px;
+ }
+ .page-header .title {
+ font-size: 28px !important;
+ line-height: 32px !important;
+ }
+ .page-header .how-to-get-paid a {
+ font-size: 14px;
+ line-height: 14px;
+ }
+ }
+
+
+
+.paymentHistoryTabs {
+ display: flex;
+ height: 42px;
+ background-color: var(--blue-1);
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid var(--black-20);
+}
+ .paymentHistoryTabs .item {
+ font-family: Barlow;
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--black-80);
+ line-height: 20px;
+ padding: 12px 16px 10px 16px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ text-transform: uppercase;
+ }
+ .paymentHistoryTabs .item:first-child {
+ border-radius: 4px 0 0 0;
+ }
+ .paymentHistoryTabs .item:not(.active):hover {
+ background-color: var(--blue-2);
+ }
+ .paymentHistoryTabs .item.active {
+ color: var(--black-100);
+ font-weight: 700;
+ background-color: var(--blue-2);
+ }
+ .paymentHistoryTabs .item.active::after {
+ content: "";
+ background-image: url("/i/reskin-2/nav-active-item.svg");
+ height: 10px;
+ width: 40px;
+ justify-content: center;
+ z-index: 100;
+ display: block;
+ position: absolute;
+ top: 100%;
+ }
+
+.paymentHistoryDropdown-container {
+ display: flex;
+ width: 100%;
+ gap: 8px;
+}
+
+.paymentHistoryDropdown {
+}
+ .paymentHistoryDropdown .dropdown-toggle {
+ display: block;
+ width: 100%;
+ padding: 0;
+ appearance: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+
+ background-color: var(--blue-1);
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #d4d4d4;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .toggle-value {
+ font-family: Barlow;
+
+ font-weight: 700;
+ color: var(--tc-black);
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding-left: 16px;
+ padding-top: 10px;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .icon {
+ align-self: center;
+ padding: 0 12px;
+ font-size: 0;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .icon::before {
+ content: url('/i/reskin-2/cheveron-down.svg');
+ }
+ .paymentHistoryDropdown .dropdown-toggle[data-open] .icon {
+ transform: rotate(180deg);
+ }
+ .paymentHistoryDropdown .dropdown-toggle[data-open] + .dropdown-menu {
+ display: block;
+ }
+ .paymentHistoryDropdown .dropdown-menu {
+ background-color: var(--blue-1);
+ display: none;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item {
+ height: 40px;
+ margin: 0;
+ display: block;
+
+ font-family: Barlow;
+ font-weight: 600;
+ color: #555;
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding: 10px 16px;
+ box-sizing: border-box;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item.active {
+ background-color: var(--blue-2);
+ color: var(--tc-black);
+ font-weight: 700;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item:hover {
+ background-color: var(--blue-2);
+ }
+
+
+.no-payments-found {
+ font-family: Roboto;
+ font-weight: 500;
+ font-size: 16px;
+ letter-spacing: 0.5px;
+ line-height: 20px;
+ color: var(--black-100);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ margin: 26px auto 0;
+ max-width: 476px;
+}
+ .no-payments-found > * {
+ font: inherit;
+ color: inherit;
+ }
+ .no-payments-found::before {
+ content: url('/i/reskin-2/info-icon.svg');
+ display: block;
+ width: 40px;
+ height: 40px;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .no-payments-found {
+ margin: 0 auto 0;
+ }
+ }
+
+/* **************** View-All, View Pending **************** */
+
+#payments > br { display: none; }
+
+.form-container {
+ display: flex;
+ flex-direction: column;
+ padding-top: 24px;
+}
+ .form-container br {
+ display: none;
+ }
+ @media (min-width: /* --md-min */ 960px) {
+ .form-container .payment-list {
+ display: none;
+ }
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .form-container .payment-table {
+ display: none;
+ }
+ }
+
+ /* Desktop table */
+ .form-container .payment-table {}
+ .form-container .payment-table table {
+ table-layout: fixed;
+ }
+ .form-container .payment-table .caption {
+ display: none;
+ }
+ .form-container .payment-table .checkbox {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"] ~ .checkbox-label {
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"] ~ .checkbox-label::before {
+ content: '';
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-color: #fff;
+ border: 1.52px solid #7f7f7f;
+ border-radius: 3px;
+ box-sizing: border-box;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"] ~ .checkbox-label::after {
+ content: url('/i/reskin-2/checkbox.svg');
+ display: none;
+ box-sizing: border-box;
+ }
+ .form-container .payment-table input[type="checkbox"]:checked ~ .checkbox-label::before {
+ display: none;
+ }
+ .form-container .payment-table input[type="checkbox"]:checked ~ .checkbox-label::after {
+ display: block;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"]:disabled {
+ cursor: default;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"]:disabled ~ .checkbox-label::before {
+ border-color: #aaaaaa;
+ cursor: default;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"]:disabled ~ .checkbox-label::after {
+ opacity: 0.75;
+ cursor: default;
+ }
+ .form-container .payment-table .checkbox input[type="checkbox"].PAID-OR-ENTERED_INTO_PAYMENT_SYSTEM ~ .checkbox-label,
+ .form-container .payment-table .checkbox input[type="checkbox"].OTHER ~ .checkbox-label {
+ display: none;
+ }
+
+ .form-container .payment-table colgroup col.col-description {}
+ .form-container .payment-table colgroup col.col-type { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-create-date { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-net-payment { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-status { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-release-date { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-paid-date { width: 10.5%; }
+ .form-container .payment-table colgroup col.col-checkbox { width: 3.5%; }
+
+ .form-container .payment-table tbody tr.headerRow {
+ }
+ .form-container .payment-table tbody tr.headerRow td {
+ padding: 0 !important;
+ text-align: left;
+ vertical-align: middle !important;
+ text-transform: uppercase;
+ background-color: transparent !important;
+ }
+ .form-container .payment-table tbody tr.headerRow td a {
+ font-family: Barlow;
+ font-weight: 600;
+ font-size: 11px;
+ line-height: 14px;
+ color: var(--grey-1);
+
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ padding: 0 16px 8px;
+ }
+ .form-container .payment-table tbody tr.headerRow td a::after {
+ content: url('/i/reskin-2/sortable.svg');
+ flex: none;
+ margin-left: 4px;
+ }
+ .form-container .payment-table tbody tr.headerRow td.active a {
+ font-weight: 700;
+ color: var(--black-100);
+ }
+ .form-container .payment-table tbody tr.headerRow.asc td.active a::after {
+ content: url('/i/reskin-2/sort-down.svg');
+ transform: scaleY(-1);
+ }
+ .form-container .payment-table tbody tr.headerRow.desc td.active a::after {
+ content: url('/i/reskin-2/sort-down.svg');
+ }
+
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) {
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td {
+ text-align: left;
+ vertical-align: top;
+ padding: 16px 0 16px 16px !important;
+ border: 0 !important;
+
+ font-family: Roboto;
+ font-weight: 400 !important;
+ font-size: 14px !important;
+ line-height: 22px !important;
+ color: var(--black-80);
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td:first-child {
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td:last-child {
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ padding-left: 0 !important;
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.description a {
+ color: var(--green);
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status {
+ display: inline-block;
+ }
+ #payments .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status.Owed {
+ color: var(--payment-status-owed) !important;
+ }
+ #payments .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status.Paid {
+ color: var(--payment-status-paid) !important;
+ }
+ #payments .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status.Cancelled {
+ color: var(--payment-status-cancelled) !important;
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status .status-label {
+ font-family: Roboto;
+ font-weight: 500 !important;
+ text-transform: uppercase;
+ font-size: 11px;
+ line-height: inherit;
+ color: var(--black-80);
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.status > .status::before {
+ content: '';
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ line-height: inherit;
+ margin: 0 4px 0 0;
+ vertical-align: middle;
+ border: 2px solid currentColor;
+ border-radius: 50%;
+ box-sizing: border-box;
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.net-payment {
+ text-align: right;
+ padding-right: 40px !important;
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.description {
+ color: var(--black-100);
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.type,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.create-date,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.net-payment,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.status > .status .status-label,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.release-date,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow).highlight td.paid-date {
+ font-weight: 700 !important;
+ color: var(--black-100);
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.release-date.null-value,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.paid-date.null-value {
+ }
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.release-date.null-value::before,
+ .form-container .payment-table tbody tr:not(.caption):not(.headerRow) td.paid-date.null-value::before {
+ content: '\2014';
+ }
+
+ .form-container .payment-table tbody tr.light {
+ background-color: var(--black-5);
+ }
+ .form-container .payment-table tbody tr.light td {
+ background-color: transparent;
+ }
+ .form-container .payment-table tbody tr.dark {
+ background-color: var(--tc-white);
+ }
+ .form-container .payment-table tbody tr.dark td {
+ background-color: transparent;
+ }
+
+ /* Mobile list */
+ .form-container .payment-list {
+ box-sizing: border-box;
+ }
+ .form-container .payment-list * {
+ box-sizing: inherit;
+ }
+ .form-container .payment-list .payment-list-item {
+ padding: 16px;
+ margin: 0 auto 16px;
+ background-color: var(--black-5);
+ border-radius: 8px;
+ }
+ .form-container .payment-list .payment-list-item:last-child {
+ margin-bottom: 0;
+ }
+ .form-container .payment-list .payment-list-item .checkbox[role="checkbox"] {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ background-color: #fff;
+ border: 1.52px solid var(--black-60);
+ border-radius: 3px;
+ cursor: pointer;
+ box-sizing: border-box;
+ }
+ .form-container .payment-list .payment-list-item .checkbox[role="checkbox"].disabled {
+ border-color: var(--black-40);
+ cursor: default;
+ }
+ .form-container .payment-list .payment-list-item .checkbox[role="checkbox"].checked {
+ background: url('/i/reskin-2/checkbox.svg');
+ border: none;
+ }
+ .form-container .payment-list .payment-list-item .checkbox[role="checkbox"].PAID-OR-ENTERED_INTO_PAYMENT_SYSTEM,
+ .form-container .payment-list .payment-list-item .checkbox[role="checkbox"].OTHER {
+ display: none;
+ }
+ .form-container .payment-list .payment-list-item > .row {
+ display: flex;
+ align-items: center;
+ margin: 0 -16px 8px;
+ }
+ .form-container .payment-list .payment-list-item > .row > .col {
+ flex: 1 1 auto;
+ max-width: 100%;
+ padding: 0 16px;
+ }
+ .form-container .payment-list .payment-list-item > .row:last-child {
+ margin-bottom: 0;
+ }
+ .form-container .payment-list .payment-list-item > .row.description {
+ margin-bottom: 16px;
+ }
+ .form-container .payment-list .payment-list-item > .row.description,
+ .form-container .payment-list .payment-list-item > .row.description a {
+ font-family: Roboto;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--black-100);
+ }
+ .form-container .payment-list .payment-list-item > .row.description > .col-label {
+ display: none;
+ }
+ .form-container .payment-list .payment-list-item > .row:nth-child(1n+2) > .col-label {
+ font-family: Barlow;
+ font-weight: 600;
+ font-size: 11px;
+ line-height: 14px;
+ color: var(--grey-1);
+
+ text-transform: uppercase;
+ min-width: 84px;
+ }
+ .form-container .payment-list .payment-list-item > .row:nth-child(1n+2) > .col-value {
+ font-family: Roboto;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ letter-spacing: 0.5px;
+ color: var(--black-100);
+
+ text-align: right;
+ text-transform: capitalize;
+ min-width: 52px;
+ }
+ .form-container .payment-list .payment-list-item > .row.status {
+ }
+ .form-container .payment-list .payment-list-item > .row.status .status {
+ }
+ .form-container .payment-list .payment-list-item > .row.status .status .status-label {
+ font-family: Roboto;
+ font-weight: 500;
+ text-transform: uppercase;
+ font-size: 11px;
+ line-height: inherit;
+ color: var(--black-80);
+ }
+ .form-container .payment-list .payment-list-item > .row.status .status::before {
+ content: '';
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ line-height: inherit;
+ margin: 0 4px 0 0;
+ vertical-align: middle;
+ border: 2px solid currentColor;
+ border-radius: 50%;
+ }
+ .form-container .payment-list .payment-list-item > .row.status .status.Owed { color: var(--payment-status-owed); }
+ .form-container .payment-list .payment-list-item > .row.status .status.Paid { color: var(--payment-status-paid); }
+ .form-container .payment-list .payment-list-item > .row.status .status.Cancelled { color: var(--payment-status-cancelled); }
+ .form-container .payment-list .payment-list-item > .row.release-date,
+ .form-container .payment-list .payment-list-item > .row.paid-date {
+ }
+ .form-container .payment-list .payment-list-item > .row.release-date.null-value .col-value::before,
+ .form-container .payment-list .payment-list-item > .row.paid-date.null-value .col-value::before {
+ content: '\2014';
+ }
+
+ @media (max-width: /* --sm-max */ 959px) {
+ .form-container .payment-list {
+ }
+ .form-container .payment-list .payment-list-item {
+ max-width: 288px;
+ }
+ }
+ @media (max-width: /* --xs-max */ 599px) {
+ .form-container .payment-list {
+ }
+ .form-container .payment-list .payment-list-item {
+ max-width: 100%;
+ }
+ }
+
+ .form-container .table-footer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .form-container .table-footer input[name="sr"],
+ .form-container .table-footer button[name="nameSubmit"] {
+ display: none;
+ }
+ .form-container .table-footer .pay-me-btn {
+ order: -1;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+ width: 100%;
+ padding: 24px 0;
+ gap: 18px;
+
+ border-bottom: 2px solid var(--black-10);
+ }
+ .form-container .table-footer .pay-me-btn input[type="button"] {
+ text-transform: uppercase;
+ padding: 8px 24px;
+ border: 0;
+ border-radius: 24px;
+ cursor: pointer;
+
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 24px;
+ letter-spacing: 0.008em;
+
+ color: var(--tc-white);
+ background-color: var(--green);
+ }
+ .form-container .table-footer .pay-me-btn input[type="button"]:disabled {
+ color: var(--grey-1);
+ background-color: var(--black-5);
+ cursor: default;
+ }
+ .form-container .table-footer .pay-me-btn .payMeValue {
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ letter-spacing: 0.5px;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .form-container .table-footer .pay-me-btn {
+ padding: 16px 0;
+ }
+ }
+ @media (max-width: /* --xs-max */ 599px) {
+ .form-container .table-footer .pay-me-btn {
+ }
+ .form-container .table-footer .pay-me-btn .payMeValue {
+ margin-right: auto;
+ }
+ }
+
+ .form-container .table-footer .export-to-excel {
+ order: 99;
+ padding: 32px 0;
+ }
+ .form-container .table-footer .export-to-excel a {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ height: auto !important;
+ padding: 6px 22px 6px 18px !important;
+ background: none !important;
+ border: 2px solid var(--green);
+ border-radius: 24px;
+ text-transform: uppercase;
+ user-select: none;
+
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 24px !important;
+ letter-spacing: 00.008em;
+ color: var(--green);
+ }
+ .form-container .table-footer .export-to-excel a::before {
+ content: url('/i/reskin-2/download-excel.svg');
+ flex: none;
+ }
+
+ .form-container .table-pagination {
+ flex: auto;
+ display: flex;
+ width: auto;
+ margin: 0 !important;
+ font-size: 0;
+ padding: 32px 0;
+ }
+ .form-container .table-pagination:not(.croppedData) {
+ }
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter) .items-per-page {
+ display: none;
+ }
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter)::before,
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter)::after {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 56px;
+ padding: 6px 14px;
+ border: 2px solid #f4f4f4;
+ border-radius: 24px;
+ box-sizing: border-box;
+ }
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter)::before {
+ order: -2;
+ content: url('/i/reskin-2/chevron-left-large-grey.svg');
+ margin: 0 16px 0 0;
+ }
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter)::after {
+ content: url('/i/reskin-2/chevron-right-grey.svg');
+ margin: 0 16px 0 auto;
+ }
+ .form-container .table-pagination:not(.croppedDataBefore):not(.croppedDataAfter).more-than-10-items .items-per-page {
+ display: block;
+ }
+ @media (min-width: /* --md-min */ 960px) {
+ .form-container .table-pagination.hiddenOnSelected {
+ opacity: 0;
+ pointer-events: none;
+ }}
+ .form-container .table-pagination .pageIndexes-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ padding: 0 16px;
+ }
+ .form-container .table-pagination .page-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 32px;
+ padding: 8px 11px;
+ border: 1px solid var(--black-40);
+ border-radius: 16px;
+ box-sizing: border-box;
+ user-select: none;
+
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 14px;
+ letter-spacing: 00.008em;
+ color: var(--grey-1);
+ }
+ .form-container .table-pagination .page-btn.hidden {
+ display: none;
+ }
+ .form-container .table-pagination .page-btn.active,
+ .form-container .table-pagination .page-btn:hover,
+ .form-container .table-pagination .page-btn:focus {
+ color: var(--black-80);
+ border-color: var(--black-80);
+ }
+ .form-container .table-pagination .page-btn.active {
+ pointer-events: none;
+ }
+ .form-container .table-pagination .prev-btn {
+ margin-left: auto;
+ }
+ .form-container .table-pagination .next-btn {
+ margin-right: auto;
+ }
+ .form-container .table-pagination .prev-btn,
+ .form-container .table-pagination .next-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 56px;
+ padding: 6px 14px;
+ font-size: 0;
+ border: 2px solid var(--green);
+ border-radius: 24px;
+ box-sizing: border-box;
+ }
+ .form-container .table-pagination .prev-btn::before,
+ .form-container .table-pagination .next-btn::after {
+ display: block;
+ }
+ .form-container .table-pagination .prev-btn.disabled,
+ .form-container .table-pagination .next-btn.disabled {
+ border-color: var(--black-5);
+ }
+ .form-container .table-pagination .prev-btn::before {
+ content: url('/i/reskin-2/chevron-left-large-green.svg');
+ }
+ .form-container .table-pagination .prev-btn.disabled::before {
+ content: url('/i/reskin-2/chevron-left-large-grey.svg');
+ }
+ .form-container .table-pagination .next-btn::after {
+ content: url('/i/reskin-2/chevron-right-green.svg');
+ }
+ .form-container .table-pagination .next-btn.disabled::after {
+ content: url('/i/reskin-2/chevron-right-grey.svg');
+ }
+ .form-container .table-pagination .items-per-page {
+ order: -1;
+ position: relative;
+ display: inline-block;
+ min-width: 184px;
+ border: 1px solid var(--black-40);
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .form-container .table-pagination .items-per-page > label {
+ position: absolute;
+ top: 4px;
+ left: 9px;
+ width: calc(100% - 9px);
+
+ white-space: nowrap;
+ text-align: left;
+ cursor: inherit;
+
+ font-family: Roboto;
+ font-weight: 500;
+ font-size: 11px;
+ line-height: 10px;
+ color: var(--green);
+ }
+ .form-container .table-pagination .items-per-page > input {
+ padding: 0;
+ margin: 0;
+ border: 0;
+
+ font-family: Roboto;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: var(--grey-1);
+
+ margin-top: 16px;
+ width: 100%;
+ padding: 2px 24px 2px 9px;
+ background: url('/i/reskin-2/cheveron-down-small.svg') center right 9px / auto no-repeat;
+ cursor: inherit;
+ }
+ .form-container .table-pagination .items-per-page > input:focus {
+ background-image: url('/i/reskin-2/cheveron-up-small.svg');
+ }
+ .form-container .table-pagination .items-per-page > input:focus ~ .per-page-dropdown{
+ height: auto;
+ opacity: 1;
+ visibility: visible !important;
+ }
+ .form-container .table-pagination .items-per-page .per-page-dropdown {
+ position: absolute;
+ top: 100%;
+ left: -1px;
+ right: -1px;
+ text-align: left;
+ cursor: default;
+ background-color: var(--tc-white);
+ border: 1px solid var(--black-40);
+
+ list-style: none;
+ margin: 2px 0 0 !important;
+ padding: 0 !important;
+
+ font-family: Roboto;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: var(--grey-1);
+
+ height: 0;
+ opacity: 0;
+ transition: visibility 225ms;
+ }
+ .form-container .table-pagination .items-per-page .per-page-dropdown li {
+ padding: 0 !important;
+ }
+ .form-container .table-pagination .items-per-page .per-page-dropdown li > a {
+ display: block;
+ padding: 3px 9px;
+ line-height: 22px;
+ color: inherit !important;
+ }
+ .form-container .table-pagination .items-per-page .per-page-dropdown li:hover {
+ color: var(--tc-white);
+ background-color: var(--green);
+ }
+ .form-container .table-pagination .items-per-page .per-page-dropdown li.selected {
+ font-weight: 700;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .form-container .table-footer {
+ }
+ .form-container .table-footer .export-to-excel {
+ width: 100%;
+ height: 0px;
+ padding: 0;
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ }
+ .form-container .table-footer .export-to-excel > a {
+ margin: 0 88px 16px 0;
+ }
+ .form-container .table-pagination {
+ padding: 32px 0 16px;
+ }
+ .form-container .table-pagination .items-per-page {
+ display: none;
+ }
+ .form-container .table-pagination .pageIndexes-container {
+ flex: 1 1 auto;
+ }
+ .form-container .table-pagination .pageIndexes-container > * {
+ display: none;
+ }
+ .form-container .table-pagination .prev-btn {
+ }
+ .form-container .table-pagination .prev-btn::before {
+ content: url('/i/reskin-2/chevron-right-green.svg');
+ transform: rotate(180deg);
+ }
+ .form-container .table-pagination .prev-btn.disabled::before {
+ content: url('/i/reskin-2/chevron-right-grey.svg');
+ transform: rotate(180deg);
+ }
+ .form-container .table-pagination .next-btn {
+ }
+ .form-container .table-pagination .next-btn:not(.disabled) {
+ background-color: var(--green);
+ }
+ .form-container .table-pagination .next-btn::after {
+ content: url('/i/reskin-2/chevron-right-white.svg');
+ }
+ }
+ @media (max-width: /* --xs-max */ 599px) {
+ .form-container .table-footer {
+ }
+ .form-container .table-footer .export-to-excel {
+ }
+ .form-container .table-footer .export-to-excel > a {
+ font-size: 0;
+ gap: 0;
+ line-height: 0 !important;
+ padding: 9px 16px !important;
+ }
+ .form-container .table-footer .export-to-excel > a::before {
+ content: url('/i/reskin-2/download-excel-mobile.svg');
+ display: block;
+ }
+ }
+
+ @media (max-width: /* --sm-max */ 959px) {
+ .form-container {
+ padding-top: 16px;
+ }
+ }
+
+.payment-confirm-modal {
+ box-sizing: border-box;
+ background-color: rgba(12, 12, 12, .85);
+}
+ .payment-confirm-modal * {
+ box-sizing: inherit;
+ }
+ .payment-confirm-modal .close-btn {
+ padding: 0;
+ margin: 0;
+ appearance: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+ .payment-confirm-modal .close-btn::before {
+ content: url('/i/reskin-2/close.svg');
+ display: block;
+ }
+ .payment-confirm-modal .button-primary,
+ .payment-confirm-modal .button-secondary {
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0.008em;
+ text-transform: uppercase;
+ color: var(--green);
+
+ padding: 10px 22px;
+ background-color: #fff;
+ border: 2px solid var(--green);
+ border-radius: 50px;
+ cursor: pointer;
+ }
+ .payment-confirm-modal .button-primary {
+ color: #fff;
+ background-color: var(--green);
+ }
+ .payment-confirm-modal .modal-dialog {
+ max-width: 676px;
+ margin-top: 18.7vh;
+ margin-bottom: 18.7vh;
+ }
+ .payment-confirm-modal .modal-body {
+ font-family: Roboto;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 22px;
+ color: var(--black-100);
+ }
+ @media (max-width: /* --xs-max */ 599px) {
+ .payment-confirm-modal .modal-dialog {
+ height: 100%;
+ margin: 0 auto 0;
+ }
+ .payment-confirm-modal .modal-content {
+ min-height: 100%;
+ border-radius: 0;
+ box-shadow: none;
+ }
+ .payment-confirm-modal .close-btn {
+ }
+ .payment-confirm-modal .close-btn::before {
+ content: url('/i/reskin-2/close-small.svg');
+ }
+ .payment-confirm-modal .button-primary,
+ .payment-confirm-modal .button-secondary {
+ font-size: 14px;
+ }
+ .payment-confirm-modal .modal-body {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+
+.mobile-payments-sort-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background-color: var(--black-5);
+ border-radius: 4px;
+ box-sizing: border-box;
+}
+ .mobile-payments-sort-button::before {
+ content: url('/i/reskin-2/sortable-green.svg');
+ }
+ .mobile-payments-sort-button.active.desc::before {
+ content: url('/i/reskin-2/sort-down-green.svg');
+ }
+ .mobile-payments-sort-button.active.asc::before {
+ content: url('/i/reskin-2/sort-down-green.svg');
+ transform: scaleY(-1);
+ }
+ @media (min-width: /* --md-min */ 960px) {
+ .mobile-payments-sort-button {
+ display: none;
+ }
+ }
+
+.view-pending-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 8px;
+ margin-left: 4px;
+ vertical-align: middle;
+ background-color: var(--blue-3);
+ border-radius: 50px;
+
+ font-family: Roboto;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 0;
+ letter-spacing: 0.5px;
+ color: var(--tc-white);
+}
diff --git a/css/reskin-2/paymentStatusSummary.css b/css/reskin-2/paymentStatusSummary.css
new file mode 100644
index 000000000..db2971900
--- /dev/null
+++ b/css/reskin-2/paymentStatusSummary.css
@@ -0,0 +1,343 @@
+/* src/main/com/topcoder/web/tc/view/pacts/client/PaymentStatusSummary.jsp */
+
+body {
+ background-color: var(--tc-white);
+}
+
+#payments > br { display: none; }
+
+.page {
+ min-height: calc(100vh - var(--header-height) - var(--footer-height) - 64px);
+ max-width: var(--screen-max);
+ margin: 0 auto;
+ padding: 32px;
+ box-sizing: content-box;
+}
+ .page table.myHome tbody tr td.bodyColumn#payments {
+ padding: 0;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .page {
+ min-height: calc(100vh - var(--header-height-mobile) - 75px - 32px);
+ max-width: 100%;
+ padding: 16px 16px 8px;
+ }
+ }
+
+.page-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+ .page-header .title {
+ order: -2;
+ flex: auto;
+ padding-right: 1em;
+ text-transform: uppercase;
+
+ margin-bottom: 0 !important;
+ font-family: 'Barlow Condensed';
+ font-weight: 600 !important;
+ font-size: 34px !important;
+ line-height: 32px !important;
+ color: var(--black-100) !important;
+ border-bottom: none !important;
+ }
+ .page-header .back-btn {
+ order: -3;
+ flex: none;
+ align-self: flex-end;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 32px;
+ height: 24px;
+ margin-right: 16px;
+ margin-bottom: 1px;
+ border: 1.5px solid var(--green);
+ border-radius: 24px;
+ box-sizing: border-box;
+ }
+ .page-header .back-btn .arrow-prev-icon {
+ content: url('/i/reskin-2/arrow-prev.svg');
+ }
+ .page-header .how-to-get-paid {
+ order: -1;
+ align-self: flex-end;
+ text-transform: uppercase;
+
+ padding: 0 !important;
+ }
+ .page-header .how-to-get-paid a {
+ font-family: Roboto;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: var(--green);
+
+ display: block;
+ }
+ .page-header .how-to-get-paid a:hover {
+ text-shadow: none;
+ }
+ .page-header .divider {
+ width: 100%;
+ height: 2px;
+ margin: 23px 0 24px;
+ background-color: var(--divider);
+ }
+ .page-header .tabs,
+ .page-header .dropdown {
+ width: 100%;
+ }
+ @media (min-width: /* --md-min */ 960px) {
+ .page-header .dropdown {
+ display: none;
+ }
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .page-header .tabs {
+ display: none;
+ }
+ .page-header .back-btn {
+ margin-right: calc(100% - 32px);
+ margin-bottom: 8px;
+ }
+ .page-header .title {
+ font-size: 28px !important;
+ line-height: 32px !important;
+ }
+ .page-header .how-to-get-paid a {
+ font-size: 14px;
+ line-height: 14px;
+ }
+ }
+
+.paymentHistoryTabs {
+ display: flex;
+ height: 42px;
+ background-color: var(--blue-1);
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid var(--black-20);
+}
+ .paymentHistoryTabs .item {
+ font-family: Barlow;
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--black-80);
+ line-height: 20px;
+ padding: 12px 16px 10px 16px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ text-transform: uppercase;
+ }
+ .paymentHistoryTabs .item:first-child {
+ border-radius: 4px 0 0 0;
+ }
+ .paymentHistoryTabs .item:not(.active):hover {
+ background-color: var(--blue-2);
+ }
+ .paymentHistoryTabs .item.active {
+ color: var(--black-100);
+ font-weight: 700;
+ background-color: var(--blue-2);
+ }
+ .paymentHistoryTabs .item.active::after {
+ content: "";
+ background-image: url("/i/reskin-2/nav-active-item.svg");
+ height: 10px;
+ width: 40px;
+ justify-content: center;
+ z-index: 100;
+ display: block;
+ position: absolute;
+ top: 100%;
+ }
+
+.paymentHistoryDropdown {
+}
+ .paymentHistoryDropdown .dropdown-toggle {
+ display: block;
+ width: 100%;
+ padding: 0;
+ appearance: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+
+ background-color: var(--blue-1);
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #d4d4d4;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .toggle-value {
+ font-family: Barlow;
+
+ font-weight: 700;
+ color: var(--tc-black);
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding-left: 16px;
+ padding-top: 10px;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .icon {
+ align-self: center;
+ padding: 0 12px;
+ font-size: 0;
+ }
+ .paymentHistoryDropdown .dropdown-toggle .icon::before {
+ content: url('/i/reskin-2/cheveron-down.svg');
+ }
+ .paymentHistoryDropdown .dropdown-toggle[data-open] .icon {
+ transform: rotate(180deg);
+ }
+ .paymentHistoryDropdown .dropdown-toggle[data-open] + .dropdown-menu {
+ display: block;
+ }
+ .paymentHistoryDropdown .dropdown-menu {
+ background-color: var(--blue-1);
+ display: none;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item {
+ height: 40px;
+ margin: 0;
+ display: block;
+
+ font-family: Barlow;
+ font-weight: 600;
+ color: #555;
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding: 10px 16px;
+ box-sizing: border-box;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item .view-pending-badge {
+ line-height: 16px;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item.active {
+ background-color: var(--blue-2);
+ color: var(--tc-black);
+ font-weight: 700;
+ }
+ .paymentHistoryDropdown .dropdown-menu .item:hover {
+ background-color: var(--blue-2);
+ }
+
+.view-pending-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 8px;
+ margin-left: 4px;
+ vertical-align: middle;
+ background-color: var(--blue-3);
+ border-radius: 50px;
+
+ font-family: Roboto;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 0;
+ letter-spacing: 0.5px;
+ color: var(--tc-white);
+}
+
+/* **************** Payment status summary table **************** */
+
+.table-container {
+ padding: 32px 0;
+ margin: 9px 0 0;
+}
+ .table-container table colgroup col.col-payment-status {}
+ .table-container table colgroup col.col-net-amount { width: 25%; }
+ .table-container table tbody tr.headerRow {
+ }
+ .table-container table tbody tr.headerRow td {
+ background-color: transparent !important;
+ }
+ .table-container table tbody tr.light {
+ background-color: var(--black-5);
+ }
+ .table-container table tbody tr.light td {
+ background-color: transparent;
+ }
+ .table-container table tbody tr.dark {
+ background-color: transparent;
+ }
+ .table-container table tbody tr.dark td {
+ background-color: transparent;
+ }
+
+ .table-container table tbody tr.headerRow td {
+ padding: 0 16px 10px !important;
+ text-transform: uppercase;
+ border: none !important;
+
+ font-family: Barlow;
+ font-weight: 600 !important;
+ font-size: 11px;
+ line-height: 14px !important;
+ color: var(--grey-1);
+ }
+ .table-container table tbody tr.headerRow td.payment-status {
+ text-align: left;
+ }
+ .table-container table tbody tr.headerRow td.net-amount {
+ text-align: right;
+ }
+ .table-container table tbody tr:not(.headerRow) td {
+ padding: 16px !important;
+ text-transform: capitalize;
+ border: none !important;
+
+ font-family: Roboto;
+ font-weight: 500 !important;
+ font-size: 16px !important;
+ line-height: 20px !important;
+ letter-spacing: 0.5px;
+ color: var(--black-100);
+ }
+ .table-container table tbody tr:not(.headerRow) td:first-child {
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ }
+ .table-container table tbody tr:not(.headerRow) td:last-child {
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ }
+ .table-container table tbody tr:not(.headerRow) td.payment-status {
+ text-align: left;
+ }
+ .table-container table tbody tr:not(.headerRow) td.net-amount {
+ text-align: right;
+ }
+ .table-container table tbody tr:not(.headerRow).totalRow td.total-text {
+ text-align: left;
+
+ font-weight: 500 !important;
+ font-size: 20px !important;
+ line-height: 26px !important;
+ }
+ .table-container table tbody tr:not(.headerRow).totalRow td.total-value {
+ text-align: right;
+
+ font-weight: 700 !important;
+ font-size: 20px !important;
+ line-height: 26px !important;
+ }
+ @media (max-width: /* --sm-max */ 959px) {
+ .table-container {
+ padding: 16px 0;
+ margin: 0;
+ }
+ .table-container table tbody tr.headerRow td {
+ padding: 0 16px 8px !important;
+ }
+ }
diff --git a/css/reskin-2/top.css b/css/reskin-2/top.css
new file mode 100644
index 000000000..7d6489e0b
--- /dev/null
+++ b/css/reskin-2/top.css
@@ -0,0 +1,19 @@
+.primaryNav {
+ background: var(--black-100);
+ color: var(--tc-white);
+ height: var(--header-height);
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ z-index: 1;
+}
+@media (max-width: /* --xs-max */ 599px) {
+ .primaryNav {
+ height: var(--header-height-mobile);
+ }
+}
+ .primaryNav .tcLogo {
+ margin: 0 50px 0 30px;
+ cursor: pointer;
+ }
diff --git a/i/reskin-2/arrow-prev.svg b/i/reskin-2/arrow-prev.svg
new file mode 100644
index 000000000..4c17ae49f
--- /dev/null
+++ b/i/reskin-2/arrow-prev.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.16569 0.234315C5.47811 0.546734 5.47811 1.05327 5.16569 1.36569L2.53138 4L5.16569 6.63432C5.47811 6.94673 5.47811 7.45327 5.16569 7.76569C4.85327 8.0781 4.34674 8.0781 4.03432 7.76569L0.834321 4.56569C0.521901 4.25327 0.521901 3.74673 0.834321 3.43431L4.03432 0.234315C4.34674 -0.0781049 4.85327 -0.0781049 5.16569 0.234315Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/checkbox.svg b/i/reskin-2/checkbox.svg
new file mode 100644
index 000000000..14283486c
--- /dev/null
+++ b/i/reskin-2/checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V17C0 18.6569 1.34315 20 3 20H17C18.6569 20 20 18.6569 20 17V3C20 1.34315 18.6569 0 17 0H3ZM3.84984 9.84167L7.32484 13.3167L16.1498 4.5L17.3248 5.675L7.32484 15.675L2.6665 11.0167L3.84984 9.84167Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/cheveron-down-small.svg b/i/reskin-2/cheveron-down-small.svg
new file mode 100644
index 000000000..8fc47da6c
--- /dev/null
+++ b/i/reskin-2/cheveron-down-small.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56704 4.90041C2.76011 4.70735 3.07313 4.70735 3.26619 4.90041L6.99995 8.63417L10.7337 4.90041C10.9268 4.70735 11.2398 4.70735 11.4329 4.90041C11.6259 5.09348 11.6259 5.4065 11.4329 5.59957L7.34953 9.6829C7.15646 9.87597 6.84344 9.87597 6.65037 9.6829L2.56704 5.59957C2.37397 5.4065 2.37397 5.09348 2.56704 4.90041Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/cheveron-down.svg b/i/reskin-2/cheveron-down.svg
new file mode 100644
index 000000000..f98b32353
--- /dev/null
+++ b/i/reskin-2/cheveron-down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 8.79289C4.68342 8.40237 5.31658 8.40237 5.70711 8.79289L12 15.0858L18.2929 8.79289C18.6834 8.40237 19.3166 8.40237 19.7071 8.79289C20.0976 9.18342 20.0976 9.81658 19.7071 10.2071L12.7071 17.2071C12.3166 17.5976 11.6834 17.5976 11.2929 17.2071L4.29289 10.2071C3.90237 9.81658 3.90237 9.18342 4.29289 8.79289Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/cheveron-up-small.svg b/i/reskin-2/cheveron-up-small.svg
new file mode 100644
index 000000000..aad41a78d
--- /dev/null
+++ b/i/reskin-2/cheveron-up-small.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(180 0 0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56704 4.90041C2.76011 4.70735 3.07313 4.70735 3.26619 4.90041L6.99995 8.63417L10.7337 4.90041C10.9268 4.70735 11.2398 4.70735 11.4329 4.90041C11.6259 5.09348 11.6259 5.4065 11.4329 5.59957L7.34953 9.6829C7.15646 9.87597 6.84344 9.87597 6.65037 9.6829L2.56704 5.59957C2.37397 5.4065 2.37397 5.09348 2.56704 4.90041Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/chevron-left-large-green.svg b/i/reskin-2/chevron-left-large-green.svg
new file mode 100644
index 000000000..a0c0419a2
--- /dev/null
+++ b/i/reskin-2/chevron-left-large-green.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L9.41421 12L15.7071 18.2929C16.0976 18.6834 16.0976 19.3166 15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071L7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289Z" fill="#137d60"/>
+</svg>
diff --git a/i/reskin-2/chevron-left-large-grey.svg b/i/reskin-2/chevron-left-large-grey.svg
new file mode 100644
index 000000000..ad78fbe3f
--- /dev/null
+++ b/i/reskin-2/chevron-left-large-grey.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L9.41421 12L15.7071 18.2929C16.0976 18.6834 16.0976 19.3166 15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071L7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/chevron-right-green.svg b/i/reskin-2/chevron-right-green.svg
new file mode 100644
index 000000000..3a7fb5741
--- /dev/null
+++ b/i/reskin-2/chevron-right-green.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7515 17.6485C8.28287 17.1799 8.28287 16.4201 8.7515 15.9515L12.703 12L8.7515 8.04853C8.28287 7.5799 8.28287 6.8201 8.7515 6.35147C9.22013 5.88284 9.97992 5.88284 10.4486 6.35147L15.2486 11.1515C15.7172 11.6201 15.7172 12.3799 15.2486 12.8485L10.4486 17.6485C9.97992 18.1172 9.22013 18.1172 8.7515 17.6485Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/chevron-right-grey.svg b/i/reskin-2/chevron-right-grey.svg
new file mode 100644
index 000000000..502220a55
--- /dev/null
+++ b/i/reskin-2/chevron-right-grey.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7515 17.6485C8.28287 17.1799 8.28287 16.4201 8.7515 15.9515L12.703 12L8.7515 8.04853C8.28287 7.5799 8.28287 6.8201 8.7515 6.35147C9.22013 5.88284 9.97992 5.88284 10.4486 6.35147L15.2486 11.1515C15.7172 11.6201 15.7172 12.3799 15.2486 12.8485L10.4486 17.6485C9.97992 18.1172 9.22013 18.1172 8.7515 17.6485Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/chevron-right-white.svg b/i/reskin-2/chevron-right-white.svg
new file mode 100644
index 000000000..e0f7a8e10
--- /dev/null
+++ b/i/reskin-2/chevron-right-white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7515 17.6485C8.28287 17.1799 8.28287 16.4201 8.7515 15.9515L12.703 12L8.7515 8.04853C8.28287 7.5799 8.28287 6.8201 8.7515 6.35147C9.22013 5.88284 9.97992 5.88284 10.4486 6.35147L15.2486 11.1515C15.7172 11.6201 15.7172 12.3799 15.2486 12.8485L10.4486 17.6485C9.97992 18.1172 9.22013 18.1172 8.7515 17.6485Z" fill="#fff"/>
+</svg>
diff --git a/i/reskin-2/close-small.svg b/i/reskin-2/close-small.svg
new file mode 100644
index 000000000..12467382b
--- /dev/null
+++ b/i/reskin-2/close-small.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.0783 4.5783C4.4493 4.2073 5.0508 4.2073 5.4218 4.5783L9.50005 8.65655L13.5783 4.5783C13.9493 4.2073 14.5508 4.2073 14.9218 4.5783C15.2928 4.9493 15.2928 5.5508 14.9218 5.9218L10.8436 10L14.9218 14.0783C15.2928 14.4493 15.2928 15.0508 14.9218 15.4218C14.5508 15.7928 13.9493 15.7928 13.5783 15.4218L9.50005 11.3436L5.4218 15.4218C5.0508 15.7928 4.4493 15.7928 4.0783 15.4218C3.7073 15.0508 3.7073 14.4493 4.0783 14.0783L8.15655 10L4.0783 5.9218C3.7073 5.5508 3.7073 4.9493 4.0783 4.5783Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/close.svg b/i/reskin-2/close.svg
new file mode 100644
index 000000000..10fc855ec
--- /dev/null
+++ b/i/reskin-2/close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.15128 5.15146C5.61991 4.68283 6.3797 4.68283 6.84833 5.15146L11.9998 10.3029L17.1513 5.15146C17.6199 4.68283 18.3797 4.68283 18.8483 5.15146C19.317 5.62009 19.317 6.37989 18.8483 6.84852L13.6969 12L18.8483 17.1515C19.317 17.6201 19.317 18.3799 18.8483 18.8485C18.3797 19.3171 17.6199 19.3171 17.1513 18.8485L11.9998 13.697L6.84833 18.8485C6.3797 19.3171 5.61991 19.3171 5.15128 18.8485C4.68265 18.3799 4.68265 17.6201 5.15128 17.1515L10.3027 12L5.15128 6.84852C4.68265 6.37989 4.68265 5.62009 5.15128 5.15146Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/download-excel-mobile.svg b/i/reskin-2/download-excel-mobile.svg
new file mode 100644
index 000000000..b83c0d7e3
--- /dev/null
+++ b/i/reskin-2/download-excel-mobile.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C10.5523 0 11 0.447715 11 1L11 8.58579L12.2929 7.29289C12.6834 6.90237 13.3166 6.90237 13.7071 7.29289C14.0976 7.68342 14.0976 8.31658 13.7071 8.70711L10.7071 11.7071C10.3166 12.0976 9.68342 12.0976 9.29289 11.7071L6.29289 8.70711C5.90237 8.31658 5.90237 7.68342 6.29289 7.29289C6.68342 6.90237 7.31658 6.90237 7.70711 7.29289L9 8.58579L9 1C9 0.447715 9.44771 5.96046e-08 10 0ZM0 6C0 4.34315 1.34315 3 3 3H6C6.55228 3 7 3.44772 7 4C7 4.55228 6.55228 5 6 5H3C2.44772 5 2 5.44772 2 6V15C2 15.5523 2.44772 16 3 16H17C17.5523 16 18 15.5523 18 15V6C18 5.44772 17.5523 5 17 5H14C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H17C18.6569 3 20 4.34315 20 6V15C20 16.6569 18.6569 18 17 18H3C1.34315 18 0 16.6569 0 15V6Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/download-excel.svg b/i/reskin-2/download-excel.svg
new file mode 100644
index 000000000..d797018a2
--- /dev/null
+++ b/i/reskin-2/download-excel.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.80001 1.59998C3.91636 1.59998 3.20001 2.31632 3.20001 3.19998V12.8C3.20001 13.6836 3.91636 14.4 4.80001 14.4H11.2C12.0837 14.4 12.8 13.6836 12.8 12.8V5.93135C12.8 5.507 12.6314 5.10003 12.3314 4.79998L9.60001 2.0686C9.29995 1.76855 8.89299 1.59998 8.46864 1.59998H4.80001ZM8.80001 6.39998C8.80001 5.95815 8.44184 5.59998 8.00001 5.59998C7.55818 5.59998 7.20001 5.95815 7.20001 6.39998V9.2686L6.1657 8.23429C5.85328 7.92187 5.34675 7.92187 5.03433 8.23429C4.72191 8.54671 4.72191 9.05324 5.03433 9.36566L7.43433 11.7657C7.74675 12.0781 8.25328 12.0781 8.5657 11.7657L10.9657 9.36566C11.2781 9.05324 11.2781 8.54671 10.9657 8.23429C10.6533 7.92187 10.1467 7.92187 9.83433 8.23429L8.80001 9.2686V6.39998Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/info-icon.svg b/i/reskin-2/info-icon.svg
new file mode 100644
index 000000000..f7bd8182d
--- /dev/null
+++ b/i/reskin-2/info-icon.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20ZM20 10C21.1046 10 22 10.8954 22 12V20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20V12C18 10.8954 18.8954 10 20 10ZM18 28C18 26.8954 18.8954 26 20 26H20.02C21.1246 26 22.02 26.8954 22.02 28C22.02 29.1046 21.1246 30 20.02 30H20C18.8954 30 18 29.1046 18 28Z" fill="#555555"/>
+</svg>
diff --git a/i/reskin-2/nav-active-item.svg b/i/reskin-2/nav-active-item.svg
new file mode 100644
index 000000000..459058553
--- /dev/null
+++ b/i/reskin-2/nav-active-item.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="10" viewBox="0 0 40 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5614 7.96244C18.942 9.36862 21.1465 9.34246 22.4963 7.90232L24.6352 5.6202C26.2594 3.88726 27.9524 2.47624 29.968 1.50162C31.9869 0.525378 34.3022 -1.45179e-06 37.1546 -1.20242e-06L40 -9.53674e-07L40 0.999999L37.1546 0.999999C34.4318 0.999999 32.2686 1.49994 30.4033 2.40189C28.5347 3.30545 26.938 4.6255 25.3648 6.30404L23.2259 8.58616C21.488 10.4405 18.6275 10.4756 16.8478 8.66303C16.823 8.6377 16.7984 8.61208 16.7741 8.58616L14.6352 6.30404C13.062 4.6255 11.4653 3.30545 9.59671 2.40189C7.73145 1.49993 5.56821 0.999996 2.84535 0.999996L7.86805e-07 0.999996L8.74228e-07 -4.45059e-06L2.84535 -4.20184e-06C5.69776 -3.95247e-06 8.01315 0.525376 10.032 1.50161C12.0476 2.47624 13.7406 3.88725 15.3648 5.6202L17.5037 7.90232C17.5227 7.92259 17.542 7.94263 17.5614 7.96244Z" fill="#D4D4D4"/>
+<path d="M22.4963 7.90232C21.1465 9.34246 18.942 9.36862 17.5614 7.96244C17.5419 7.94263 17.5227 7.92259 17.5037 7.90232L15.3648 5.6202C13.7406 3.88725 12.0476 2.47624 10.032 1.50161C8.01644 0.52697 5.70532 0.00171271 2.85931 0H37.1546C34.3022 0 31.9868 0.525378 29.968 1.50162C27.9524 2.47624 26.2594 3.88726 24.6352 5.6202L22.4963 7.90232Z" fill="#bae1f9"/>
+</svg>
diff --git a/i/reskin-2/social-fb-icon.svg b/i/reskin-2/social-fb-icon.svg
new file mode 100644
index 000000000..6fe6d3fdd
--- /dev/null
+++ b/i/reskin-2/social-fb-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM6.66667 6.66667H5.33333V8H6.66667V12H8.66667V8H9.88L10 6.66667H8.66667V6.11133C8.66667 5.79267 8.73067 5.66667 9.03867 5.66667H10V4H8.39733C7.19867 4 6.66667 4.528 6.66667 5.53867V6.66667Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/social-insta-icon.svg b/i/reskin-2/social-insta-icon.svg
new file mode 100644
index 000000000..6c51702ce
--- /dev/null
+++ b/i/reskin-2/social-insta-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM8 4.72135C9.068 4.72135 9.19466 4.72535 9.61666 4.74469C10.7013 4.79402 11.2067 5.30802 11.2567 6.38402C11.2753 6.80602 11.2793 6.93202 11.2793 8.00002C11.2793 9.06802 11.2753 9.19469 11.2567 9.61602C11.2067 10.6914 10.702 11.2067 9.61666 11.256C9.19466 11.2747 9.06866 11.2794 8 11.2794C6.932 11.2794 6.80533 11.2754 6.384 11.256C5.29733 11.206 4.794 10.69 4.744 9.61602C4.72533 9.19469 4.72066 9.06802 4.72066 8.00002C4.72066 6.93202 4.72533 6.80535 4.744 6.38402C4.79333 5.30735 5.29866 4.79335 6.384 4.74402C6.80533 4.72469 6.932 4.72135 8 4.72135ZM8 4C6.91333 4 6.778 4.00467 6.35067 4.02467C4.89733 4.09133 4.09067 4.89733 4.024 6.35067C4.00467 6.778 4 6.914 4 8C4 9.08667 4.00467 9.22267 4.024 9.64933C4.09067 11.102 4.89733 11.9093 6.35067 11.976C6.778 11.9953 6.91333 12 8 12C9.08667 12 9.22267 11.9953 9.65 11.976C11.1007 11.9093 11.9107 11.1033 11.976 9.64933C11.9953 9.22267 12 9.08667 12 8C12 6.914 11.9953 6.778 11.976 6.35067C11.9107 4.89933 11.1033 4.09067 9.65 4.02467C9.22267 4.00467 9.08667 4 8 4ZM8 5.94596C6.866 5.94596 5.946 6.8653 5.946 7.99996C5.946 9.13463 6.866 10.054 8 10.054C9.134 10.054 10.054 9.13463 10.054 7.99996C10.054 6.86596 9.134 5.94596 8 5.94596ZM8 9.33333C7.26333 9.33333 6.66667 8.73667 6.66667 8C6.66667 7.264 7.26333 6.66667 8 6.66667C8.736 6.66667 9.334 7.26333 9.334 8C9.334 8.73667 8.736 9.33333 8 9.33333ZM10.1347 5.38534C9.87 5.38534 9.65466 5.6 9.65466 5.86534C9.65466 6.13 9.86933 6.34534 10.1347 6.34534C10.4 6.34534 10.6153 6.13067 10.6153 5.86534C10.6153 5.6 10.4007 5.38534 10.1347 5.38534Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/social-linkedin-icon.svg b/i/reskin-2/social-linkedin-icon.svg
new file mode 100644
index 000000000..0ce93b8a2
--- /dev/null
+++ b/i/reskin-2/social-linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM6.66667 5.3333C6.66667 5.70463 6.36867 6.0053 6 6.0053C5.63133 6.0053 5.33333 5.7053 5.33333 5.3333C5.33333 4.96196 5.63133 4.6613 6 4.6613C6.36867 4.6613 6.66667 4.96263 6.66667 5.3333ZM6.66667 6.66667H5.33333V10.6667H6.66667V6.66667ZM8.66667 6.66669H7.33333V10.6667H8.66667V8.75935C8.66667 7.61135 10.0013 7.50535 10.0013 8.75935V10.6667H11.3333V8.42735C11.3333 6.23802 9.248 6.31802 8.66667 7.39535V6.66669Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/social-tw-icon.svg b/i/reskin-2/social-tw-icon.svg
new file mode 100644
index 000000000..48272e01d
--- /dev/null
+++ b/i/reskin-2/social-tw-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM12.3333 5.85203C12.0393 5.9827 11.7227 6.0707 11.3907 6.1107C11.73 5.90736 11.9893 5.58603 12.1127 5.2027C11.7953 5.3907 11.444 5.52736 11.07 5.6007C10.7713 5.28136 10.344 5.08203 9.87267 5.08203C8.81267 5.08203 8.034 6.0707 8.27333 7.09736C6.91 7.0287 5.7 6.37536 4.89067 5.3827C4.46067 6.12003 4.668 7.08536 5.39867 7.57403C5.13 7.56536 4.87733 7.49136 4.656 7.3687C4.638 8.1287 5.18333 8.84003 5.97267 8.9987C5.742 9.06137 5.48867 9.07603 5.23133 9.0267C5.44 9.6787 6.04733 10.1527 6.76467 10.166C6.07333 10.7074 5.20467 10.9494 4.33333 10.8467C5.06 11.3127 5.922 11.584 6.84867 11.584C9.89667 11.584 11.618 9.01003 11.514 6.70136C11.8353 6.4707 12.1133 6.18136 12.3333 5.85203Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/social-yt-icon.svg b/i/reskin-2/social-yt-icon.svg
new file mode 100644
index 000000000..2c28fbc23
--- /dev/null
+++ b/i/reskin-2/social-yt-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.82 4.73466C9.48534 4.64399 6.51201 4.64466 5.17934 4.73466C3.73601 4.83333 3.56667 5.70533 3.55534 7.99999C3.56667 10.2907 3.73534 11.1667 5.18001 11.2653C6.51267 11.3553 9.486 11.356 10.8207 11.2653C12.264 11.1667 12.434 10.294 12.4453 7.99999C12.4333 5.70933 12.2647 4.83333 10.82 4.73466ZM6.66667 9.4813V6.51864L9.852 7.9973L6.66667 9.4813ZM8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/sort-down-green.svg b/i/reskin-2/sort-down-green.svg
new file mode 100644
index 000000000..443b111a8
--- /dev/null
+++ b/i/reskin-2/sort-down-green.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.43506 2.66665C1.43506 2.35461 1.68802 2.10165 2.00006 2.10165H10.6667C10.9788 2.10165 11.2317 2.35461 11.2317 2.66665C11.2317 2.97869 10.9788 3.23165 10.6667 3.23165H2.00006C1.68802 3.23165 1.43506 2.97869 1.43506 2.66665ZM1.43506 5.33332C1.43506 5.02128 1.68802 4.76832 2.00006 4.76832H8.00006C8.3121 4.76832 8.56506 5.02128 8.56506 5.33332C8.56506 5.64536 8.3121 5.89832 8.00006 5.89832H2.00006C1.68802 5.89832 1.43506 5.64536 1.43506 5.33332ZM11.3334 4.76832C11.6454 4.76832 11.8984 5.02128 11.8984 5.33332V11.9693L13.6005 10.2671C13.8212 10.0465 14.1789 10.0465 14.3996 10.2671C14.6202 10.4878 14.6202 10.8455 14.3996 11.0662L11.7329 13.7328C11.5123 13.9535 11.1545 13.9535 10.9339 13.7328L8.26721 11.0662C8.04656 10.8455 8.04656 10.4878 8.26721 10.2671C8.48786 10.0465 8.84559 10.0465 9.06624 10.2671L10.7684 11.9693V5.33332C10.7684 5.02128 11.0214 4.76832 11.3334 4.76832ZM1.43506 7.99999C1.43506 7.68795 1.68802 7.43499 2.00006 7.43499H8.00006C8.3121 7.43499 8.56506 7.68795 8.56506 7.99999C8.56506 8.31203 8.3121 8.56499 8.00006 8.56499H2.00006C1.68802 8.56499 1.43506 8.31203 1.43506 7.99999Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/sort-down.svg b/i/reskin-2/sort-down.svg
new file mode 100644
index 000000000..12daae574
--- /dev/null
+++ b/i/reskin-2/sort-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.43506 2.66665C1.43506 2.35461 1.68802 2.10165 2.00006 2.10165H10.6667C10.9788 2.10165 11.2317 2.35461 11.2317 2.66665C11.2317 2.97869 10.9788 3.23165 10.6667 3.23165H2.00006C1.68802 3.23165 1.43506 2.97869 1.43506 2.66665ZM1.43506 5.33332C1.43506 5.02128 1.68802 4.76832 2.00006 4.76832H8.00006C8.3121 4.76832 8.56506 5.02128 8.56506 5.33332C8.56506 5.64536 8.3121 5.89832 8.00006 5.89832H2.00006C1.68802 5.89832 1.43506 5.64536 1.43506 5.33332ZM11.3334 4.76832C11.6454 4.76832 11.8984 5.02128 11.8984 5.33332V11.9693L13.6005 10.2671C13.8212 10.0465 14.1789 10.0465 14.3996 10.2671C14.6202 10.4878 14.6202 10.8455 14.3996 11.0662L11.7329 13.7328C11.5123 13.9535 11.1545 13.9535 10.9339 13.7328L8.26721 11.0662C8.04656 10.8455 8.04656 10.4878 8.26721 10.2671C8.48786 10.0465 8.84559 10.0465 9.06624 10.2671L10.7684 11.9693V5.33332C10.7684 5.02128 11.0214 4.76832 11.3334 4.76832ZM1.43506 7.99999C1.43506 7.68795 1.68802 7.43499 2.00006 7.43499H8.00006C8.3121 7.43499 8.56506 7.68795 8.56506 7.99999C8.56506 8.31203 8.3121 8.56499 8.00006 8.56499H2.00006C1.68802 8.56499 1.43506 8.31203 1.43506 7.99999Z" fill="#2A2A2A"/>
+</svg>
diff --git a/i/reskin-2/sortable-green.svg b/i/reskin-2/sortable-green.svg
new file mode 100644
index 000000000..80fb08c5a
--- /dev/null
+++ b/i/reskin-2/sortable-green.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 3.79289C6.68342 3.40237 7.31658 3.40237 7.70711 3.79289L11.7071 7.79289C12.0976 8.18342 12.0976 8.81658 11.7071 9.20711C11.3166 9.59763 10.6834 9.59763 10.2929 9.20711L8 6.91421V16.5C8 17.0523 7.55228 17.5 7 17.5C6.44772 17.5 6 17.0523 6 16.5V6.91421L3.70711 9.20711C3.31658 9.59763 2.68342 9.59763 2.29289 9.20711C1.90237 8.81658 1.90237 8.18342 2.29289 7.79289L6.29289 3.79289ZM16 18.0858V8.5C16 7.94772 16.4477 7.5 17 7.5C17.5523 7.5 18 7.94772 18 8.5V18.0858L20.2929 15.7929C20.6834 15.4024 21.3166 15.4024 21.7071 15.7929C22.0976 16.1834 22.0976 16.8166 21.7071 17.2071L17.7071 21.2071C17.3166 21.5976 16.6834 21.5976 16.2929 21.2071L12.2929 17.2071C11.9024 16.8166 11.9024 16.1834 12.2929 15.7929C12.6834 15.4024 13.3166 15.4024 13.7071 15.7929L16 18.0858Z" fill="#137D60"/>
+</svg>
diff --git a/i/reskin-2/sortable.svg b/i/reskin-2/sortable.svg
new file mode 100644
index 000000000..0b9a84a0d
--- /dev/null
+++ b/i/reskin-2/sortable.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.26721 2.26714C4.48786 2.04649 4.84559 2.04649 5.06624 2.26714L7.73291 4.93381C7.95355 5.15445 7.95355 5.51219 7.73291 5.73284C7.51226 5.95348 7.15452 5.95348 6.93388 5.73284L5.23173 4.03068V10.6667C5.23173 10.9787 4.97877 11.2317 4.66673 11.2317C4.35468 11.2317 4.10173 10.9787 4.10173 10.6667V4.03068L2.39957 5.73284C2.17893 5.95348 1.82119 5.95348 1.60054 5.73284C1.3799 5.51219 1.3799 5.15445 1.60054 4.93381L4.26721 2.26714ZM10.7684 5.33332C10.7684 5.02128 11.0214 4.76832 11.3334 4.76832C11.6454 4.76832 11.8984 5.02128 11.8984 5.33332V11.9693L13.6005 10.2671C13.8212 10.0465 14.1789 10.0465 14.3996 10.2671C14.6202 10.4878 14.6202 10.8455 14.3996 11.0662L11.7329 13.7328C11.5123 13.9535 11.1545 13.9535 10.9339 13.7328L8.26721 11.0662C8.04656 10.8455 8.04656 10.4878 8.26721 10.2671C8.48786 10.0465 8.84559 10.0465 9.06624 10.2671L10.7684 11.9693V5.33332Z" fill="#767676"/>
+</svg>
diff --git a/i/reskin-2/tc-logo-new.svg b/i/reskin-2/tc-logo-new.svg
new file mode 100644
index 000000000..1c2d4c925
--- /dev/null
+++ b/i/reskin-2/tc-logo-new.svg
@@ -0,0 +1,3 @@
+<svg width="162" height="39" viewBox="0 0 162 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1749 10.0062C31.7371 10.1849 31.2521 10.375 30.7354 10.5763C30.2187 10.375 29.7359 10.1849 29.2982 10.0062C25.1872 8.38711 20.9283 7.17478 16.5821 6.38651C20.6885 2.41841 25.8304 0 30.7354 0C35.6404 0 40.7846 2.41841 44.8909 6.38651C40.5447 7.17478 36.2858 8.38711 32.1749 10.0062ZM137.98 16.5058V10.4903C137.548 9.82077 136.957 9.2684 136.261 8.8821C135.565 8.4958 134.785 8.28747 133.989 8.27553C131.304 8.27553 129.747 10.5378 129.747 13.4789C129.747 16.4199 131.304 18.6618 133.989 18.6618C135.697 18.6686 137.276 17.6619 137.98 16.5058ZM137.98 19.5509V17.6121C137.509 18.298 136.88 18.8597 136.145 19.2496C135.411 19.6395 134.594 19.8461 133.763 19.8518C130.55 19.8518 128.348 17.3859 128.348 13.4856C128.348 9.63971 130.557 7.09234 133.763 7.09234C134.596 7.09888 135.416 7.30818 136.15 7.70226C136.885 8.09633 137.513 8.66338 137.98 9.35466V2.76454H139.312V19.5509H137.98ZM69.6123 8.55154V17.2094L69.61 17.2071C69.61 18.8677 70.3885 19.8495 71.9949 19.8495C72.999 19.8495 73.5766 19.5464 74.0527 19.0939L73.5518 18.0872C73.3763 18.2697 73.166 18.415 72.9335 18.5144C72.7009 18.6139 72.4508 18.6656 72.198 18.6663C71.3451 18.6663 70.9435 17.9876 70.9435 17.0058V8.55154H73.4029V7.39323H70.9435V4.07216H69.6123V7.39323H67.6042V8.55154H69.6123ZM104.776 29.6712C104.913 29.6246 105.06 29.6195 105.2 29.6567C105.293 29.6816 105.381 29.7248 105.457 29.7839C105.534 29.843 105.598 29.9168 105.646 30.001C105.694 30.0852 105.725 30.1781 105.737 30.2744C105.749 30.3707 105.742 30.4684 105.716 30.5618C105.678 30.7012 105.599 30.8259 105.49 30.9204C105.38 31.0149 105.246 31.0749 105.103 31.0928C104.96 31.1108 104.814 31.0858 104.685 31.0212C104.556 30.9566 104.449 30.8551 104.378 30.7296C104.306 30.604 104.273 30.4601 104.283 30.3158C104.292 30.1715 104.344 30.0333 104.432 29.9186C104.52 29.8039 104.64 29.7178 104.776 29.6712ZM118.455 31.6C117.957 31.586 117.466 31.7214 117.045 31.9888C116.624 32.2563 116.292 32.6435 116.091 33.1011C115.891 33.5587 115.832 34.0658 115.92 34.5575C116.009 35.0492 116.242 35.5032 116.59 35.8613C116.937 36.2195 117.384 36.4655 117.871 36.568C118.359 36.6705 118.866 36.6247 119.328 36.4365C119.79 36.2483 120.185 35.9263 120.463 35.5117C120.741 35.097 120.89 34.6086 120.889 34.1089C120.895 33.4535 120.642 32.8225 120.186 32.3527C119.731 31.883 119.108 31.6125 118.455 31.6ZM118.455 35.4346C118.19 35.4491 117.927 35.3836 117.7 35.2467C117.473 35.1098 117.292 34.9076 117.181 34.6665C117.069 34.4253 117.033 34.1562 117.076 33.894C117.118 33.6317 117.239 33.3884 117.421 33.1954C117.603 33.0025 117.839 32.8688 118.098 32.8117C118.357 32.7546 118.627 32.7766 118.873 32.875C119.119 32.9734 119.33 33.1436 119.479 33.3635C119.628 33.5835 119.707 33.8432 119.707 34.1089C119.716 34.451 119.589 34.7825 119.354 35.031C119.119 35.2794 118.796 35.4245 118.455 35.4346ZM149.987 36.4739C150.26 36.3599 150.505 36.1883 150.705 35.9708V36.5069H151.443V33.2311C151.443 32.0751 150.606 31.6226 149.604 31.6226C149.25 31.6104 148.897 31.6746 148.569 31.8108C148.241 31.947 147.946 32.1521 147.704 32.4121L148.047 32.9257C148.227 32.7153 148.451 32.5472 148.703 32.433C148.955 32.3189 149.229 32.2616 149.505 32.2651C150.193 32.2651 150.705 32.6293 150.705 33.2718V34.1292C150.507 33.9099 150.262 33.7376 149.989 33.6249C149.716 33.5123 149.421 33.4619 149.126 33.4777C148.32 33.4777 147.463 34.0048 147.463 35.0477C147.463 36.0907 148.32 36.6314 149.126 36.6314C149.421 36.6416 149.715 36.5879 149.987 36.4739ZM150.121 34.162C150.348 34.2646 150.548 34.4192 150.705 34.6134V35.5115C150.549 35.707 150.349 35.8626 150.122 35.9656C149.894 36.0686 149.646 36.1162 149.397 36.1042C148.708 36.1042 148.226 35.6789 148.226 35.0681C148.226 34.4573 148.72 34.0229 149.397 34.0229C149.646 34.0118 149.894 34.0595 150.121 34.162ZM126.521 31.6294C126.857 31.6125 127.191 31.6796 127.495 31.8245C127.799 31.9694 128.062 32.1877 128.26 32.4597L127.769 32.9121C127.636 32.7146 127.455 32.5541 127.244 32.4457C127.032 32.3373 126.797 32.2845 126.559 32.2922C125.546 32.2922 124.917 33.0705 124.917 34.127C124.917 35.1835 125.546 35.9708 126.559 35.9708C126.796 35.976 127.031 35.9221 127.242 35.8139C127.453 35.7057 127.634 35.5466 127.769 35.3509L128.26 35.8034C128.061 36.0749 127.798 36.2928 127.495 36.4373C127.191 36.5818 126.856 36.6485 126.521 36.6314C125.104 36.6314 124.149 35.5477 124.149 34.127C124.149 32.7062 125.104 31.6294 126.521 31.6294ZM128.833 34.127C128.833 32.7447 129.736 31.6384 131.184 31.6384C132.633 31.6384 133.538 32.7538 133.538 34.127C133.538 35.5002 132.635 36.6314 131.184 36.6314C129.734 36.6314 128.833 35.507 128.833 34.127ZM132.759 34.127C132.759 33.1587 132.2 32.2923 131.18 32.2923C130.16 32.2923 129.601 33.1587 129.601 34.127C129.601 35.0953 130.171 35.9708 131.18 35.9708C132.188 35.9708 132.748 35.1043 132.748 34.127H132.759ZM139.39 32.2923C140 32.2923 140.266 32.6768 140.266 33.2786V36.5137H141.004V33.0705C141.004 32.1135 140.541 31.6294 139.675 31.6294C139.358 31.6405 139.048 31.7269 138.771 31.8815C138.494 32.0361 138.258 32.2544 138.082 32.5185C137.944 32.0253 137.531 31.6294 136.802 31.6294C136.503 31.644 136.211 31.7241 135.946 31.864C135.681 32.0039 135.449 32.2003 135.268 32.4393V31.7493H134.528V36.5137H135.268V33.032C135.407 32.8221 135.591 32.6464 135.807 32.5182C136.023 32.3901 136.266 32.3128 136.516 32.2923C137.136 32.2923 137.391 32.6768 137.391 33.2786V36.5137H138.131V33.0207C138.273 32.8118 138.459 32.6376 138.677 32.5115C138.895 32.3853 139.139 32.3103 139.39 32.2923ZM142.283 38.3304V31.7493H143.02V32.4597C143.203 32.204 143.444 31.9955 143.723 31.8511C144.002 31.7068 144.311 31.6308 144.625 31.6294C145.875 31.6294 146.739 32.5773 146.739 34.1179C146.739 35.6586 145.875 36.6223 144.625 36.6223C144.31 36.6231 143.999 36.5474 143.72 36.4016C143.44 36.2558 143.2 36.0443 143.02 35.7853V38.3213L142.283 38.3304ZM144.437 32.2923C144.158 32.2964 143.884 32.3674 143.637 32.4992C143.391 32.631 143.179 32.8199 143.02 33.0501V35.2016C143.179 35.4333 143.39 35.6238 143.636 35.7576C143.883 35.8913 144.157 35.9644 144.437 35.9708C145.392 35.9708 145.963 35.1812 145.963 34.127C145.963 33.0727 145.392 32.2923 144.437 32.2923ZM155.931 33.3963C155.931 32.5569 155.506 32.2923 154.868 32.2923C154.593 32.3018 154.324 32.3732 154.08 32.5013C153.836 32.6294 153.624 32.8107 153.46 33.032V36.5137H152.722V31.7493H153.46V32.4393C153.672 32.1955 153.931 31.9979 154.222 31.8586C154.513 31.7193 154.83 31.6413 155.152 31.6294C156.147 31.6294 156.668 32.1339 156.668 33.17V36.5137H155.931V33.3963ZM158.648 37.6642C158.519 37.7564 158.361 37.8 158.203 37.7874C158.064 37.7832 157.927 37.7533 157.799 37.6992L157.681 38.3779C157.858 38.4225 158.04 38.446 158.223 38.448C158.529 38.4608 158.83 38.3734 159.082 38.1992C159.334 38.0249 159.523 37.7732 159.62 37.482L162 31.7493H161.194L159.615 35.6563L158.036 31.7493H157.239L159.227 36.5635L158.911 37.2829C158.871 37.437 158.778 37.572 158.648 37.6642ZM104.351 31.7086V36.2716V36.4798H104.559H105.464H105.671V36.2716V31.7086H104.351ZM114.958 31.5955C115.159 31.5937 115.359 31.6195 115.553 31.6724L115.558 31.6633C115.707 31.704 115.842 31.747 115.969 31.7923L115.854 32.0547L115.77 32.247L115.472 32.9257H115.454C115.262 32.8284 115.049 32.7815 114.833 32.7894C114.618 32.7973 114.409 32.8598 114.224 32.9709C114.132 33.0368 114.057 33.1241 114.006 33.2253C113.954 33.3266 113.928 33.4387 113.929 33.5524V36.4798H112.609V36.2694L112.589 31.6995H113.618L113.636 32.3058C113.731 32.1267 113.872 31.976 114.044 31.8692C114.172 31.7773 114.315 31.7084 114.466 31.6656C114.594 31.6252 114.727 31.6016 114.861 31.5955H114.958ZM99.4756 31.7086L98.6024 34.3849L97.7902 31.704H96.468L97.9459 36.4798H99.0311L100.022 33.5116L101.012 36.4798H102.097L103.575 31.704H102.253L101.441 34.3849L100.561 31.7086H99.4756ZM108.585 31.796C108.841 31.6639 109.125 31.5959 109.412 31.5977C110.68 31.5977 111.707 32.7289 111.707 34.1089C111.707 35.4889 110.68 36.6201 109.412 36.6201C108.966 36.5988 108.534 36.4591 108.16 36.2151V39H106.84V31.7108H107.943V32.3579C108.109 32.1212 108.329 31.9284 108.585 31.796ZM108.549 35.2732C108.775 35.4101 109.037 35.4758 109.302 35.4617C109.643 35.4517 109.966 35.3065 110.201 35.0581C110.435 34.8097 110.562 34.4781 110.554 34.136C110.553 33.8709 110.474 33.612 110.325 33.3927C110.177 33.1735 109.966 33.0039 109.72 32.906C109.474 32.808 109.205 32.7862 108.947 32.8433C108.689 32.9004 108.453 33.0338 108.272 33.2263C108.09 33.4188 107.97 33.6615 107.927 33.9231C107.884 34.1847 107.92 34.4532 108.031 34.6938C108.142 34.9345 108.322 35.1363 108.549 35.2732ZM92.734 35.9708C92.5337 36.1884 92.2889 36.3601 92.0163 36.4741C91.7437 36.5881 91.4498 36.6418 91.1546 36.6314C90.3469 36.6314 89.4918 36.0907 89.4918 35.0477C89.4918 34.0048 90.3469 33.4777 91.1546 33.4777C91.4496 33.4618 91.7445 33.512 92.0177 33.6247C92.2909 33.7374 92.5356 33.9098 92.734 34.1292V33.2718C92.734 32.6293 92.2241 32.2651 91.5337 32.2651C91.2576 32.2613 90.9841 32.3185 90.7326 32.4326C90.481 32.5468 90.2577 32.7152 90.0784 32.9257L89.7332 32.4121C89.9752 32.1521 90.27 31.947 90.5977 31.8108C90.9254 31.6746 91.2784 31.6104 91.633 31.6226C92.637 31.6226 93.4718 32.0751 93.4718 33.2311V36.5069H92.734V35.9708ZM92.734 34.6134C92.5772 34.4192 92.3771 34.2646 92.1498 34.162C91.9225 34.0595 91.6744 34.0118 91.4254 34.0229C90.7372 34.0229 90.2544 34.4573 90.2544 35.0681C90.2544 35.6789 90.7372 36.1042 91.4254 36.1042C91.6747 36.1162 91.9233 36.0687 92.1508 35.9656C92.3783 35.8626 92.5781 35.707 92.734 35.5115V34.6134ZM85.3249 13.4608C85.3249 10.7663 83.7455 8.27554 80.8822 8.27554C78.0709 8.27554 76.4644 10.7641 76.4644 13.4608C76.4644 16.1574 78.0709 18.6641 80.8822 18.6641C83.7432 18.6641 85.3249 16.1755 85.3249 13.4608ZM75.0587 13.4608C75.0587 9.91119 77.3443 7.09235 80.8822 7.09235C84.472 7.09235 86.7305 9.91119 86.7305 13.4608C86.7305 17.0103 84.4742 19.8518 80.8822 19.8518C77.3443 19.8518 75.0587 17.0081 75.0587 13.4608ZM94.8865 8.27554C97.5986 8.27554 99.1284 10.5198 99.1284 13.4608V13.4653C99.1284 16.4063 97.5941 18.6686 94.8865 18.6686C94.093 18.6482 93.3161 18.4362 92.6217 18.0507C91.9272 17.6651 91.3358 17.1173 90.8974 16.4538V10.4383C91.5991 9.28227 93.2056 8.27554 94.8865 8.27554ZM90.8974 24.1864V17.5963C91.3667 18.2855 91.9948 18.851 92.7286 19.2448C93.4623 19.6387 94.28 19.8492 95.1122 19.8586C98.3432 19.8586 100.527 17.37 100.527 13.4675C100.527 9.56506 98.3522 7.09914 95.1122 7.09914C94.2847 7.10597 93.4707 7.31045 92.7377 7.69561C92.0048 8.08078 91.3739 8.63555 90.8974 9.31394V7.39323H89.591V24.1864H90.8974ZM102.616 13.4608C102.616 9.91119 104.951 7.09235 108.516 7.09235C110.624 7.09235 111.829 7.92262 112.803 9.15558L111.901 9.96096C111.536 9.42143 111.04 8.9837 110.461 8.68888C109.881 8.39406 109.236 8.25183 108.586 8.27554C105.75 8.27554 104.017 10.5379 104.017 13.4608C104.017 16.3837 105.75 18.6641 108.586 18.6641C109.239 18.6852 109.887 18.5397 110.469 18.2414C111.05 17.943 111.547 17.5016 111.912 16.9583L112.815 17.7637C111.835 19.0215 110.631 19.8518 108.528 19.8518C104.963 19.8518 102.627 17.0081 102.627 13.4608H102.616ZM120.33 8.27554C123.193 8.27554 124.773 10.7663 124.773 13.4608C124.773 16.1755 123.191 18.6641 120.33 18.6641C117.519 18.6641 115.912 16.1574 115.912 13.4608C115.912 10.7641 117.519 8.27554 120.33 8.27554ZM120.33 7.09235C116.79 7.09235 114.506 9.91119 114.506 13.4608C114.506 17.0081 116.79 19.8518 120.33 19.8518C123.922 19.8518 126.178 17.0103 126.178 13.4608C126.178 9.91119 123.92 7.09235 120.33 7.09235ZM143.603 12.8567C143.706 10.7425 145.131 8.22834 147.989 8.22577C151.025 8.22834 152.377 10.7923 152.402 12.8567H143.603ZM147.989 8.22577L147.993 8.22577H147.984L147.989 8.22577ZM148.011 7.09235C144.645 7.09235 142.163 9.93608 142.163 13.4608H142.172C142.172 17.2094 144.706 19.8518 148.246 19.8518C150.25 19.8518 151.779 19.1482 152.984 17.8904L152.307 17.0329C151.8 17.5758 151.185 18.0064 150.502 18.2971C149.819 18.5877 149.083 18.732 148.341 18.7206C145.484 18.7206 143.727 16.5307 143.603 13.8883H153.733V13.5354C153.733 10.0334 151.7 7.09235 148.011 7.09235ZM156.603 19.5509V7.39549H157.907V9.48361C158.936 8.12622 160.317 7.14211 162 7.14211V8.57642C161.785 8.53419 161.565 8.51749 161.346 8.52665C160.116 8.52665 158.46 9.63518 157.907 10.6917V19.5509H156.603ZM29.2042 11.3862L29.1659 11.3704L28.5634 11.1238L27.9678 10.8976L27.8888 10.8681L27.8459 10.85C27.6474 10.7731 27.4443 10.6962 27.239 10.6238H27.2254L27.142 10.5944L26.544 10.3682L26.4696 10.341L25.8062 10.1148L25.7385 10.0922L25.6912 10.0763C25.2264 9.91798 24.751 9.76188 24.2652 9.60804L24.2088 9.5922H24.1794L23.4371 9.36597L23.4033 9.35466H23.3807C22.8685 9.20082 22.3451 9.04925 21.8148 8.9022L21.7652 8.88862C21.2259 8.74157 20.6822 8.59679 20.1339 8.46105H20.1136L19.2765 8.2597C18.7147 8.12849 18.1483 8.00406 17.5888 7.88416H17.5639C16.9976 7.76652 16.4358 7.65793 15.8672 7.55612C12.2102 11.0777 9.6398 15.5789 8.46202 20.5237L8.40787 20.7499C9.99821 20.8168 11.4654 19.9946 12.0146 19.6869L12.0879 19.6459C18.2002 16.223 25.6483 12.4405 30.0233 11.7482L29.2245 11.436L29.2042 11.3862ZM14.5024 7.13081C10.8754 10.6601 8.34028 15.1633 7.20105 20.1006V20.0893C7.20105 20.0893 7.18751 20.1821 7.16721 20.3337C7.1469 20.4852 7.1469 20.5599 7.1469 20.5599C6.197 20.5192 5.20422 19.931 4.33555 18.9559C1.17221 15.4018 -0.673447 11.8025 0.229074 9.41121C1.5084 6.02679 7.7561 5.92047 14.5024 7.13081ZM32.2471 11.3862L32.2877 11.3704L32.8834 11.1306L33.4813 10.9043L33.558 10.8749L33.6031 10.8568C33.8017 10.7799 34.0025 10.703 34.2078 10.6306H34.2236L34.3048 10.6012L34.9028 10.375L34.9772 10.3478L35.6541 10.1216L35.7218 10.099L35.7669 10.0831C36.2317 9.92477 36.7078 9.76867 37.1952 9.61483L37.2516 9.59899H37.2809C37.5245 9.52212 37.7725 9.4475 38.0205 9.37289L38.021 9.37276L38.0571 9.36145H38.0774C38.5918 9.20761 39.1153 9.05604 39.6433 8.90899H39.6568L39.7132 8.86148C40.2502 8.71443 40.7962 8.56964 41.3445 8.4339H41.3648L42.1997 8.23256C42.7592 8.10134 43.3278 7.97691 43.8874 7.85701H43.9122C44.4785 7.73937 45.0403 7.63078 45.6067 7.52898C49.266 11.0408 51.8412 15.5335 53.0254 20.4717L53.0796 20.6979C51.4851 20.7651 50.0106 19.9361 49.4683 19.6312L49.4018 19.5939C43.2895 16.171 35.8414 12.3884 31.4664 11.6962L32.2629 11.384L32.2471 11.3862ZM46.9508 7.13083C50.5779 10.6597 53.1124 15.1632 54.2499 20.1007V20.0894C54.2499 20.0894 54.2679 20.1821 54.286 20.3337C54.304 20.4853 54.304 20.5599 54.304 20.5599C55.2539 20.5192 56.249 19.931 57.1154 18.9559C60.2787 15.4018 62.1244 11.8002 61.2218 9.41124C59.9448 6.02682 53.6948 5.92275 46.9508 7.13083Z" fill="white"/>
+</svg>
diff --git a/js/reskin/newTCScript.js b/js/reskin/newTCScript.js
index 49d5728ee..6af95d013 100644
--- a/js/reskin/newTCScript.js
+++ b/js/reskin/newTCScript.js
@@ -365,9 +365,11 @@ function adjustAndShow(modal) {
function updatePayMe() {
var total = calcTotalPayment();
if (total >= 0) {
- $('#payMe').val('Pay Me: $' + total.toFixed(2));
+ // $('#payMe').val('Pay Me: $' + total.toFixed(2));
+ $('#payMeValue').text('$' + total.toFixed(2));
} else {
- $('#payMe').val('Pay Me: -$' + Math.abs(total.toFixed(2)));
+ // $('#payMe').val('Pay Me: -$' + Math.abs(total.toFixed(2)));
+ $('#payMeValue').text('-$' + Math.abs(total.toFixed(2)));
}
if (total < MINIMUM_PAYMENT_ACCRUAL_AMOUNT || !isUserPaymentMethodValid()) {
$('#payMe').attr('disabled', 'disabled');
@@ -627,11 +629,51 @@ $(document).ready(function() {
var total = calcTotalPayment();
var confirmationMessage = PAY_ME_CONFIRMATION_TEMPLATE.replace('{0}', '$' + total.toFixed(2));
- if (confirm(confirmationMessage)) {
- var myForm = document.f;
- myForm.method = 'POST';
- myForm.module.value = 'PayMe';
- myForm.submit();
+ var isNativeDialog = $('#payment-confirm-modal-id').length === 0;
+
+ if (isNativeDialog) {
+ if (confirm(confirmationMessage)) {
+ var myForm = document.f;
+ myForm.method = 'POST';
+ myForm.module.value = 'PayMe';
+ myForm.submit();
+ }
+ } else {
+ var resultPromise = new Promise(function (resolve) {
+ $('#payment-confirm-modal-id .modal-body').text(confirmationMessage);
+ document.body.style.overflow = 'hidden';
+
+ function onCancel () {
+ document.body.style.overflow = '';
+ $('#payment-confirm-modal-id').removeClass('show');
+ $('#payment-confirm-modal-id .close-btn').off('click');
+ $('#payment-confirm-modal-id .button-secondary').off('click');
+ $('#payment-confirm-modal-id .button-primary').off('click');
+ resolve(false);
+ }
+ function onOk () {
+ document.body.style.overflow = '';
+ $('#payment-confirm-modal-id').removeClass('show');
+ $('#payment-confirm-modal-id .close-btn').off('click');
+ $('#payment-confirm-modal-id .button-secondary').off('click');
+ $('#payment-confirm-modal-id .button-primary').off('click');
+ resolve(true);
+ }
+
+ $('#payment-confirm-modal-id').addClass('show');
+ $('#payment-confirm-modal-id .close-btn').one('click', onCancel);
+ $('#payment-confirm-modal-id .button-secondary').one('click', onCancel);
+ $('#payment-confirm-modal-id .button-primary').one('click', onOk);
+ });
+
+ resultPromise.then(function (ok) {
+ if (ok) {
+ var myForm = document.f;
+ myForm.method = 'POST';
+ myForm.module.value = 'PayMe';
+ myForm.submit();
+ }
+ })
}
}
});