Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 9a4386e

Browse files
dedywahyudidedywahyudi
committed
improvement(reskin-payment): no payment page
1 parent fb8d0df commit 9a4386e

14 files changed

+407
-0
lines changed

‎css/reskin-2/common.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* reskin-2 common */
2+
3+
:root {
4+
/*
5+
--xs-max: 599px; (max-width: /* --xs-max * / 599px)
6+
--sm-max: 959px; (max-width: /* --sm-max * / 959px)
7+
--md-max: 1279px; (max-width: /* --md-max * / 1279px)
8+
--lg-max: 1375px; (max-width: /* --lg-max * / 1375px)
9+
10+
--xs-min: 320px; (min-width: /* --xs-min * / 320px)
11+
--sm-min: 600px; (min-width: /* --sm-min * / 600px)
12+
--md-min: 960px; (min-width: /* --md-min * / 960px)
13+
--lg-min: 1280px; (min-width: /* --lg-min * / 1280px)
14+
--xl-min: 1376px; (min-width: /* --xl-min * / 1376px)
15+
*/
16+
17+
--screen-max: 1376px;
18+
19+
--tc-black: #0c0c0c;
20+
--tc-white: #fff;
21+
--black-100: #2a2a2a;
22+
--black-80: #555555;
23+
--black-60: #7f7f7f;
24+
--black-40: #aaaaaa;
25+
--black-20: #d4d4d4;
26+
--black-10: #e9e9e9;
27+
--black-5: #f4f4f4;
28+
--black-2: #fbfbfb;
29+
--green: #137d60;
30+
--blue-1: #eaf6fd;
31+
--blue-2: #bae1f9;
32+
33+
--divider: #e9e9e9;
34+
35+
--header-height: 80px;
36+
--footer-height: 51px;
37+
--header-height-mobile: 60px;
38+
--footer-height-mobile: 75px;
39+
}

‎css/reskin-2/footer.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* src/main/com/topcoder/web/jsp/foot.jsp */
2+
3+
.footer-wrapper {
4+
height: var(--footer-height);
5+
border-top: 1px solid var(--black-10);
6+
box-sizing: border-box;
7+
}
8+
.footer-wrapper .footer-inner {
9+
display: flex;
10+
11+
align-items: center;
12+
padding: 16px 32px;
13+
max-width: var(--screen-max);
14+
margin: 0 auto;
15+
box-sizing: border-box;
16+
17+
font-size: 12px;
18+
line-height: 18px;
19+
font-weight: 400;
20+
color: var(--black-100);
21+
}
22+
@media (max-width: /* --xs-max */ 599px) {
23+
.footer-wrapper .footer-inner {
24+
flex-direction: column;
25+
gap: 8px;
26+
}
27+
}
28+
29+
.footer-wrapper .utils {
30+
display: flex;
31+
align-items: center;
32+
gap: 16px;
33+
}
34+
.footer-wrapper .utils > * {
35+
font-family: Roboto;
36+
font-weight: 400;
37+
font-size: 12px;
38+
line-height: 18px;
39+
color: var(--black-100);
40+
}
41+
42+
.footer-wrapper .social {
43+
display: flex;
44+
align-items: center;
45+
gap: 4px;
46+
color: var(--black-60);
47+
48+
margin-left: auto;
49+
}
50+
.footer-wrapper .social a {
51+
display: flex;
52+
}
53+
@media (max-width: /* --xs-max */ 599px) {
54+
.footer-wrapper .social {
55+
margin-right: auto;
56+
}
57+
}

‎css/reskin-2/paymentHistory.css

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
/* src/main/com/topcoder/web/tc/view/pacts/client/PaymentHistory.jsp */
2+
3+
body {
4+
background-color: var(--tc-white);
5+
}
6+
7+
.page {
8+
min-height: calc(100vh - var(--header-height) - var(--footer-height));
9+
max-width: var(--screen-max);
10+
margin: 0 auto;
11+
padding: 32px;
12+
box-sizing: border-box;
13+
}
14+
.page table.myHome tbody tr td.bodyColumn#payments {
15+
padding: 0;
16+
}
17+
@media (max-width: /* --xs-max */ 599px) {
18+
.page {
19+
min-height: calc(100vh - var(--header-height-mobile) - 75px);
20+
max-width: 100%;
21+
padding: 16px;
22+
}
23+
}
24+
25+
.page-header {
26+
display: flex;
27+
flex-wrap: wrap;
28+
align-items: center;
29+
}
30+
.page-header .title {
31+
order: -2;
32+
flex: auto;
33+
padding-right: 1em;
34+
text-transform: uppercase;
35+
36+
margin-bottom: 0 !important;
37+
font-family: 'Barlow Condensed';
38+
font-weight: 600 !important;
39+
font-size: 34px !important;
40+
line-height: 32px !important;
41+
color: var(--black-100) !important;
42+
border-bottom: none !important;
43+
}
44+
.page-header .back-btn {
45+
order: -3;
46+
flex: none;
47+
align-self: flex-end;
48+
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
53+
width: 32px;
54+
height: 24px;
55+
margin-right: 16px;
56+
margin-bottom: 1px;
57+
border: 1.5px solid var(--green);
58+
border-radius: 24px;
59+
box-sizing: border-box;
60+
}
61+
.page-header .back-btn .arrow-prev-icon {
62+
content: url('/i/reskin-2/arrow-prev.svg');
63+
}
64+
.page-header .how-to-get-paid {
65+
order: -1;
66+
align-self: flex-end;
67+
text-transform: uppercase;
68+
69+
padding: 0 !important;
70+
}
71+
.page-header .how-to-get-paid a {
72+
font-family: Roboto;
73+
font-weight: 700;
74+
font-size: 16px;
75+
line-height: 16px;
76+
color: var(--green);
77+
78+
display: block;
79+
}
80+
.page-header .how-to-get-paid a:hover {
81+
text-shadow: none;
82+
}
83+
.page-header .divider {
84+
width: 100%;
85+
height: 2px;
86+
margin: 23px 0 24px;
87+
background-color: var(--divider);
88+
}
89+
.page-header .tabs,
90+
.page-header .dropdown {
91+
width: 100%;
92+
}
93+
@media (min-width: /* --md-min */ 960px) {
94+
.page-header .dropdown {
95+
display: none;
96+
}
97+
}
98+
@media (max-width: /* --sm-max */ 959px) {
99+
.page-header .tabs {
100+
display: none;
101+
}
102+
.page-header .back-btn {
103+
margin-right: calc(100% - 32px);
104+
margin-bottom: 8px;
105+
}
106+
.page-header .title {
107+
font-size: 28px !important;
108+
line-height: 32px !important;
109+
}
110+
.page-header .how-to-get-paid a {
111+
font-size: 14px;
112+
line-height: 14px;
113+
}
114+
}
115+
116+
117+
118+
.paymentHistoryTabs {
119+
display: flex;
120+
height: 42px;
121+
background-color: var(--blue-1);
122+
border-radius: 4px 4px 0 0;
123+
border-bottom: 1px solid var(--black-20);
124+
}
125+
.paymentHistoryTabs .item {
126+
font-family: Barlow;
127+
font-weight: 600;
128+
font-size: 14px;
129+
color: var(--black-80);
130+
line-height: 20px;
131+
padding: 12px 16px 10px 16px;
132+
cursor: pointer;
133+
display: flex;
134+
justify-content: center;
135+
position: relative;
136+
text-transform: uppercase;
137+
}
138+
.paymentHistoryTabs .item:first-child {
139+
border-radius: 4px 0 0 0;
140+
}
141+
.paymentHistoryTabs .item:not(.active):hover {
142+
background-color: var(--blue-2);
143+
}
144+
.paymentHistoryTabs .item.active {
145+
color: var(--black-100);
146+
font-weight: 700;
147+
background-color: var(--blue-2);
148+
}
149+
.paymentHistoryTabs .item.active::after {
150+
content: "";
151+
background-image: url("/i/reskin-2/nav-active-item.svg");
152+
height: 10px;
153+
width: 40px;
154+
justify-content: center;
155+
z-index: 100;
156+
display: block;
157+
position: absolute;
158+
top: 100%;
159+
}
160+
161+
.paymentHistoryDropdown {
162+
}
163+
.paymentHistoryDropdown .dropdown-toggle {
164+
display: block;
165+
width: 100%;
166+
padding: 0;
167+
appearance: none;
168+
outline: none;
169+
border: none;
170+
cursor: pointer;
171+
172+
background-color: var(--blue-1);
173+
height: 40px;
174+
display: flex;
175+
justify-content: space-between;
176+
border-radius: 4px 4px 0 0;
177+
border-bottom: 1px solid #d4d4d4;
178+
}
179+
.paymentHistoryDropdown .dropdown-toggle .toggle-value {
180+
font-family: Barlow;
181+
182+
font-weight: 700;
183+
color: var(--tc-black);
184+
font-size: 14px;
185+
line-height: 20px;
186+
text-transform: uppercase;
187+
padding-left: 16px;
188+
padding-top: 10px;
189+
}
190+
.paymentHistoryDropdown .dropdown-toggle .icon {
191+
align-self: center;
192+
padding: 0 12px;
193+
font-size: 0;
194+
}
195+
.paymentHistoryDropdown .dropdown-toggle .icon::before {
196+
content: url('/i/reskin-2/cheveron-down.svg');
197+
}
198+
.paymentHistoryDropdown .dropdown-toggle[data-open] .icon {
199+
transform: rotate(180deg);
200+
}
201+
.paymentHistoryDropdown .dropdown-toggle[data-open] + .dropdown-menu {
202+
display: block;
203+
}
204+
.paymentHistoryDropdown .dropdown-menu {
205+
background-color: var(--blue-1);
206+
display: none;
207+
}
208+
.paymentHistoryDropdown .dropdown-menu .item {
209+
height: 40px;
210+
margin: 0;
211+
display: block;
212+
213+
font-family: Barlow;
214+
font-weight: 600;
215+
color: #555;
216+
font-size: 14px;
217+
line-height: 20px;
218+
text-transform: uppercase;
219+
padding: 10px 16px;
220+
box-sizing: border-box;
221+
}
222+
.paymentHistoryDropdown .dropdown-menu .item.active {
223+
background-color: var(--blue-2);
224+
color: var(--tc-black);
225+
font-weight: 700;
226+
}
227+
.paymentHistoryDropdown .dropdown-menu .item:hover {
228+
background-color: var(--blue-2);
229+
}
230+
231+
232+
.no-payments-found {
233+
font-family: Roboto;
234+
font-weight: 500;
235+
font-size: 16px;
236+
letter-spacing: 0.5px;
237+
line-height: 20px;
238+
color: var(--black-100);
239+
240+
display: flex;
241+
flex-direction: column;
242+
align-items: center;
243+
gap: 20px;
244+
margin: 26px auto 0;
245+
max-width: 476px;
246+
}
247+
.no-payments-found > * {
248+
font: inherit;
249+
color: inherit;
250+
}
251+
.no-payments-found::before {
252+
content: url('/i/reskin-2/info-icon.svg');
253+
display: block;
254+
width: 40px;
255+
height: 40px;
256+
}
257+
@media (max-width: /* --sm-max */ 959px) {
258+
.no-payments-found {
259+
margin: 0 auto 0;
260+
}
261+
}

‎css/reskin-2/top.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.primaryNav {
2+
background: var(--black-100);
3+
color: var(--tc-white);
4+
height: var(--header-height);
5+
position: relative;
6+
display: flex;
7+
flex-direction: row;
8+
align-items: center;
9+
z-index: 1;
10+
}
11+
@media (max-width: /* --xs-max */ 599px) {
12+
.primaryNav {
13+
height: var(--header-height-mobile);
14+
}
15+
}
16+
.primaryNav .tcLogo {
17+
margin: 0 50px 0 30px;
18+
cursor: pointer;
19+
}

‎i/reskin-2/arrow-prev.svg

Lines changed: 3 additions & 0 deletions
Loading

‎i/reskin-2/cheveron-down.svg

Lines changed: 3 additions & 0 deletions
Loading

‎i/reskin-2/info-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎i/reskin-2/nav-active-item.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)