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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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(); + } + }) } } });