Skip to content

Commit 8845bf5

Browse files
authored
Merge pull request #106 from topcoder-platform/PROD-2336_spacing-issue
PROD-2336 fix style issues -> Dev
2 parents 07bece2 + 100bd4d commit 8845bf5

File tree

8 files changed

+137
-75
lines changed

8 files changed

+137
-75
lines changed

public/global.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
3+
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
4+
5+
body {
6+
background-color: #f4f5f6;
7+
font-family: Roboto, Arial, Helvetica, sans-serif;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
/* Eric Meyer's "Reset CSS" 2.0 */
13+
14+
/* http://meyerweb.com/eric/tools/css/reset/
15+
v2.0 | 20110126
16+
License: none (public domain)
17+
*/
18+
19+
html, body, div, span, applet, object, iframe,
20+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
21+
a, abbr, acronym, address, big, cite, code,
22+
del, dfn, em, img, ins, kbd, q, s, samp,
23+
small, strike, strong, sub, sup, tt, var,
24+
b, u, i, center,
25+
dl, dt, dd, ol, ul, li,
26+
fieldset, form, label, legend,
27+
table, caption, tbody, tfoot, thead, tr, th, td,
28+
article, aside, canvas, details, embed,
29+
figure, figcaption, footer, header, hgroup,
30+
menu, nav, output, ruby, section, summary,
31+
time, mark, audio, video {
32+
margin: 0;
33+
padding: 0;
34+
border: 0;
35+
font-size: 100%;
36+
font: inherit;
37+
vertical-align: baseline;
38+
}
39+
/* HTML5 display-role reset for older browsers */
40+
article, aside, details, figcaption, figure,
41+
footer, header, hgroup, menu, nav, section {
42+
display: block;
43+
}
44+
body {
45+
line-height: 1;
46+
}
47+
ol, ul {
48+
list-style: none;
49+
}
50+
blockquote, q {
51+
quotes: none;
52+
}
53+
blockquote:before, blockquote:after,
54+
q:before, q:after {
55+
content: '';
56+
content: none;
57+
}
58+
table {
59+
border-collapse: collapse;
60+
border-spacing: 0;
61+
}

public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Barlow Condensed'>
1313
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
1414
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />
15+
<link rel="stylesheet" href="%PUBLIC_URL%/global.css">
1516
<!--
1617
manifest.json provides metadata used when your web app is installed on a
1718
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/routes/BasicInfoLegacy/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ const BasicInfoLegacy = ({
172172
<Page>
173173
<Breadcrumb items={breadcrumbs} />
174174
<WebsiteDesignBannerLegacy />
175-
<PageContent styleName="container">
175+
<PageContent styleName={styles["container"]}>
176176
<PageH2>BASIC INFO</PageH2>
177177
<PageDivider />
178178

src/routes/Review/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ const Review = ({
214214
}))}
215215
/>
216216
{banner}
217-
<PageContent styleName="container">
217+
<PageContent styleName={styles["container"]}>
218218
<ServicePrice
219219
hideTitle
220220
showIcon={showIcon}

src/routes/Review/styles.module.scss

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -18,95 +18,95 @@
1818
}
1919
}
2020

21+
.splitView {
22+
display: grid;
23+
grid-template-columns: 1fr 562px;
24+
column-gap: 24px;
25+
26+
@include mobile {
27+
grid-template-columns: 1fr;
28+
}
29+
30+
.reviewContainer {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
}
36+
2137
.container {
2238
border-top-left-radius: 0;
2339
border-top-right-radius: 0;
40+
}
2441

25-
.splitView {
26-
display: grid;
27-
grid-template-columns: 1fr 562px;
28-
column-gap: 24px;
42+
.paymentWrapper {
2943

30-
@include mobile {
31-
grid-template-columns: 1fr;
32-
}
44+
.infoBox {
45+
display: flex;
46+
flex-direction: column;
47+
row-gap: 24px;
48+
font-size: 16px;
49+
line-height: 26px;
3350

34-
.reviewContainer {
35-
flex: 1;
36-
display: flex;
37-
flex-direction: column;
51+
.confirmationBox {
52+
@include confirmationBox;
3853
}
39-
}
4054

41-
.paymentWrapper {
55+
.title {
56+
text-transform: uppercase;
57+
font-size: 20px;
58+
}
4259

43-
.infoBox {
44-
display: flex;
45-
flex-direction: column;
46-
row-gap: 24px;
60+
.importantInfo {
4761
font-size: 16px;
48-
line-height: 26px;
49-
50-
.confirmationBox {
51-
@include confirmationBox;
52-
}
53-
54-
.title {
55-
text-transform: uppercase;
56-
font-size: 20px;
57-
}
58-
59-
.importantInfo {
60-
font-size: 16px;
61-
}
6262
}
63+
}
6364

64-
.paymentBox {
65-
display: flex;
66-
flex-direction: column;
67-
align-items: center;
68-
border: 1px solid $gray-10;
69-
border-radius: 8px;
70-
margin-top: 18px;
71-
padding: 24px;
72-
row-gap: 8px;
73-
74-
.total {
75-
@include font-barlow-condensed;
76-
color: $aqua;
77-
font-size: 48px;
78-
position: relative;
79-
80-
.originalPrice {
81-
position: absolute;
82-
bottom: 0;
83-
left: -55px;
84-
text-decoration: line-through;
85-
font-size: 24px;
86-
}
87-
}
88-
89-
.totalInfo {
90-
text-transform: uppercase;
91-
font-size: 12px;
92-
font-weight: 700;
65+
.paymentBox {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
border: 1px solid $gray-10;
70+
border-radius: 8px;
71+
margin-top: 18px;
72+
padding: 24px;
73+
row-gap: 8px;
74+
75+
.total {
76+
@include font-barlow-condensed;
77+
color: $aqua;
78+
font-size: 48px;
79+
position: relative;
80+
81+
.originalPrice {
82+
position: absolute;
83+
bottom: 0;
84+
left: -55px;
85+
text-decoration: line-through;
86+
font-size: 24px;
9387
}
88+
}
9489

95-
.pageDivider {
96-
margin-top: -10px;
97-
}
90+
.totalInfo {
91+
text-transform: uppercase;
92+
font-size: 12px;
93+
font-weight: 700;
94+
}
9895

99-
.paymentButtonContainer,
100-
.wideButton {
101-
width: 100%;
102-
}
96+
.pageDivider {
97+
margin-top: -10px;
10398
}
10499

105-
.contract {
106-
display: flex;
107-
align-items: center;
100+
.paymentButtonContainer,
101+
.wideButton {
102+
width: 100%;
108103
}
109104
}
105+
106+
.contract {
107+
display: flex;
108+
align-items: center;
109+
}
110110
}
111111

112112
.backButtonWrapper {

src/routes/ReviewLegacy/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ const ReviewLegacy = ({
214214
<Page>
215215
<Breadcrumb items={breadcrumbs} />
216216
{banner}
217-
<PageContent styleName="container">
217+
<PageContent styleName={styles["container"]}>
218218
<PageH2>REVIEW & PAYMENT</PageH2>
219219
<PageDivider />
220220
<ServicePrice

src/routes/SelectWorkType/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const SelectWorkType = ({
170170
/>
171171
<Breadcrumb items={breadcrumb} />
172172
<Page>
173-
<PageContent styleName="pageContent">
173+
<PageContent styleName={styles["pageContent"]}>
174174
<PageH2 className={styles.pageHeading}>Start work</PageH2>
175175

176176
<PageDivider />

src/routes/WorkItems/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ const WorkItem = ({
235235
<>
236236
<LoadingSpinner show={isLoadingWork || isLoadingSolutions} />
237237
<Page className={styles["page"]}>
238-
<PageContent styleName="pageContent">
238+
<PageContent styleName={styles["pageContent"]}>
239239
<Breadcrumb items={breadcrumb} />
240240
<WorkDetailHeader
241241
challenge={work}

0 commit comments

Comments
 (0)