Skip to content

Commit f08c663

Browse files
kkartunovkkartunov
authored
Merge pull request #4936 from topcoder-platform/gui-kit-components
Gui kit components
2 parents d21a40a + 5023f5e commit f08c663

File tree

17 files changed

+284
-24
lines changed

17 files changed

+284
-24
lines changed

‎__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ exports[`Default render 1`] = `
1515
<IconCheckSolid
1616
className="src-shared-components-GUIKit-Checkbox-___style__after___2rEBg"
1717
height={13}
18-
viewBox="0 0 15 13"
18+
viewBox="0 0 18 15"
1919
width={13}
2020
xmlns="http://www.w3.org/2000/svg"
21+
xmlnsXlink="http://www.w3.org/1999/xlink"
2122
/>
2223
</div>
2324
</label>

‎src/assets/images/check-mark.svg

Lines changed: 24 additions & 0 deletions
Loading

‎src/assets/images/l4.png

-1.86 KB
Binary file not shown.

‎src/shared/components/Contentful/AppComponent/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function AppComponentSwitch(appComponent) {
3232
);
3333
}
3434
if (appComponent.fields.type === 'RecruitCRM-Jobs') {
35-
return <RecruitCRMJobs {...appComponent.fields.props} />;
35+
return <RecruitCRMJobs {...appComponent.fields.props} key={appComponent.sys.id} />;
3636
}
3737
fireErrorMessage('Unsupported app component type from contentful', '');
3838
return null;

‎src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
$gui-kit-gray-30: #aaa;
33
$gui-kit-gray-90: #2a2a2a;
44
$gui-kit-level-2: #0ab88a;
5+
$gui-kit-level-5: #ef476f;
56

67
@mixin textInputLabel {
78
font-size: 12px;
@@ -22,6 +23,7 @@ $gui-kit-level-2: #0ab88a;
2223
padding: 15px;
2324
margin-bottom: 0;
2425
margin-top: 12px;
26+
color: $gui-kit-gray-90;
2527

2628
&::-webkit-input-placeholder {
2729
/* Edge */
@@ -50,6 +52,12 @@ $gui-kit-level-2: #0ab88a;
5052
border: 1px solid $gui-kit-gray-30;
5153
box-shadow: none;
5254
}
55+
56+
&:focus-within {
57+
label {
58+
color: #229174;
59+
}
60+
}
5361
}
5462

5563
@mixin textInputXs {
@@ -75,8 +83,10 @@ $gui-kit-level-2: #0ab88a;
7583
line-height: 20px;
7684
margin-top: 10px;
7785
margin-left: 15px;
86+
color: $gui-kit-gray-90;
7887
}
7988

8089
@mixin errorMessageXs {
8190
margin-top: 8px;
91+
color: $gui-kit-gray-90;
8292
}

‎src/shared/components/GUIKit/Checkbox/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
import React, { useRef, useState } from 'react';
77
import PT from 'prop-types';
8-
import IconCheckSolid from 'assets/images/dashboard/ico-checkmark.svg';
8+
import IconCheckSolid from 'assets/images/check-mark.svg';
99
import _ from 'lodash';
1010
import './style.scss';
1111

‎src/shared/components/GUIKit/Datepicker/style.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
&.haveError .label,
2222
&.haveError.isFocused .label {
23-
color: $tc-level-5;
23+
color: $gui-kit-level-5;
2424
}
2525

2626
:global {
@@ -153,8 +153,17 @@
153153
border-radius: 50%;
154154
}
155155

156+
&.CalendarDay__default {
157+
color: #2a2a2a;
158+
}
159+
160+
&.CalendarDay__blocked_out_of_range {
161+
color: #aaa;
162+
}
163+
156164
&.CalendarDay__selected {
157165
background: transparent !important;
166+
color: #fff;
158167

159168
div {
160169
background: $gui-kit-level-2;
@@ -190,7 +199,7 @@
190199
.SingleDatePickerInput {
191200
.DateInput {
192201
input {
193-
border: 2px solid $tc-level-5;
202+
border: 2px solid $gui-kit-level-5;
194203
}
195204
}
196205
}

‎src/shared/components/GUIKit/Dropdown/style.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
&.haveError .label,
4545
&.haveError.isFocused .label {
46-
color: $tc-level-5;
46+
color: $gui-kit-level-5;
4747
}
4848

4949
:global {
@@ -80,6 +80,7 @@
8080
height: 22px;
8181
line-height: 22px;
8282
font-size: 16px;
83+
color: $gui-kit-gray-90 !important;
8384
}
8485
}
8586

@@ -163,7 +164,7 @@
163164
&.haveError {
164165
:global {
165166
.Select-control {
166-
border: 2px solid $tc-level-5 !important;
167+
border: 2px solid $gui-kit-level-5 !important;
167168
}
168169
}
169170
}
@@ -200,6 +201,7 @@
200201
.Select-value {
201202
.Select-value-label {
202203
font-size: 14px;
204+
color: $gui-kit-gray-90 !important;
203205
}
204206
}
205207

‎src/shared/components/GUIKit/TextInput/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@
5151

5252
input:not([type='checkbox']).haveError + label,
5353
input:not([type='checkbox']).haveError:focus + label {
54-
color: $tc-level-5;
54+
color: $gui-kit-level-5;
5555
}
5656

5757
input:not([type='checkbox']).haveError,
5858
input:not([type='checkbox']).haveError:active,
5959
input:not([type='checkbox']).haveError:focus,
6060
input:not([type='checkbox']).haveError:hover {
61-
border: 2px solid $tc-level-5;
61+
border: 2px solid $gui-kit-level-5;
6262
}
6363
}

‎src/shared/components/GUIKit/Textarea/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
&.haveError ~ label,
3232
&.haveError:focus ~ label {
33-
color: $tc-level-5;
33+
color: $gui-kit-level-5;
3434
}
3535
}
3636

@@ -52,7 +52,7 @@
5252
textarea.haveError:active,
5353
textarea.haveError:focus,
5454
textarea.haveError:hover {
55-
border: 2px solid $tc-level-5;
55+
border: 2px solid $gui-kit-level-5;
5656
}
5757

5858
textarea.haveError ~ .labelMask {

‎src/shared/components/Gigs/GigDetails.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PT from 'prop-types';
88
import { isomorphy, Link, config } from 'topcoder-react-utils';
99
import ReactHtmlParser from 'react-html-parser';
1010
import { getSalaryType, getCustomField } from 'utils/gigs';
11+
import SubscribeMailChimpTag from 'containers/SubscribeMailChimpTag';
1112
import './style.scss';
1213
import IconFacebook from 'assets/images/icon-facebook.svg';
1314
import IconTwitter from 'assets/images/icon-twitter.svg';
@@ -21,7 +22,6 @@ import iconSkills from 'assets/images/icon-skills-blue.png';
2122
import iconLabel1 from 'assets/images/l1.png';
2223
import iconLabel2 from 'assets/images/l2.png';
2324
import iconLabel3 from 'assets/images/l3.png';
24-
import iconLabel4 from 'assets/images/l4.png';
2525

2626
// Cleanup HTML from style tags
2727
// so it won't affect other parts of the UI
@@ -127,8 +127,12 @@ export default function GigDetails(props) {
127127
<IconTwitter />
128128
</a>
129129
</div>
130+
<div styleName="subscribe-area">
131+
<h6>SUBSCRIBE TO WEEKLY UPDATES</h6>
132+
<p>Not ready to apply? Want to stay tuned for any new gigs that may be upcoming? Join our weekly Gig Work list.</p>
133+
<SubscribeMailChimpTag listId="28bfd3c062" tags={['Gig Work']} />
134+
</div>
130135
<div styleName="info-area">
131-
<p>Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/thrive/tracks?track=Topcoder&amp;tax=Gig%20Work">here</a>.</p>
132136
<p>At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:</p>
133137
<ul>
134138
<li>
@@ -137,14 +141,10 @@ export default function GigDetails(props) {
137141
</li>
138142
<li>
139143
<img src={iconLabel2} alt="label 2" />
140-
<div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
144+
<div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/?module=ThreadList&forumID=703475">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
141145
</li>
142146
<li>
143147
<img src={iconLabel3} alt="label 3" />
144-
<div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
145-
</li>
146-
<li>
147-
<img src={iconLabel4} alt="label 4" />
148148
<div><strong>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate.</strong> Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</div>
149149
</li>
150150
</ul>

‎src/shared/components/Gigs/style.scss

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
.shareButtons {
102102
display: flex;
103103
align-items: center;
104+
margin-bottom: 12px;
104105

105106
a {
106107
margin-right: 5px;
@@ -111,11 +112,27 @@
111112
}
112113
}
113114

115+
.subscribe-area {
116+
background-image: linear-gradient(135.29deg, #2c95d7 0%, #06d6a0 100%);
117+
border-radius: 10px;
118+
padding: 25px 32px 30px 20px;
119+
120+
h6 {
121+
margin: 0 0 6px;
122+
color: #fff;
123+
}
124+
125+
p {
126+
color: #fff;
127+
margin-bottom: 15px;
128+
}
129+
}
130+
114131
.info-area {
115132
background-color: #f4f4f4;
116133
padding: 20px;
117134
border-radius: 10px;
118-
margin-top: 18px;
135+
margin-top: 20px;
119136

120137
/* stylelint-disable */
121138
p,

‎src/shared/components/examples/GUIKit/TextInput/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function TextInputExample({ size }) {
4040
value: 'Adam Morehead',
4141
required: true,
4242
errorMsg: '',
43+
sectionTitle: 'Required',
4344
},
4445
];
4546

‎src/shared/containers/Gigs/RecruitCRMJobs.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ const sortByOptions = [
2121
{ label: 'Latest Updated Descending', selected: false },
2222
];
2323
// Locations
24-
const locations = [{
25-
label: 'Anywhere', selected: true,
26-
}];
24+
let locations = [];
2725

2826
class RecruitCRMJobsContainer extends React.Component {
2927
constructor(props) {
@@ -33,7 +31,7 @@ class RecruitCRMJobsContainer extends React.Component {
3331
term: '',
3432
page: 0,
3533
sortBy: 'created_on',
36-
location: 'Anywhere',
34+
location: 'Any Location',
3735
};
3836
// binds
3937
this.onSearch = this.onSearch.bind(this);
@@ -127,6 +125,8 @@ class RecruitCRMJobsContainer extends React.Component {
127125
if (location === 'Anywhere' || location === 'Any' || location === 'Any Location') return true;
128126
return location.toLowerCase() === job.country.toLowerCase();
129127
});
128+
// sort location dropdown
129+
locations = _.sortBy(locations, ['label']);
130130
// Filter by term
131131
if (term) {
132132
jobsToDisplay = _.filter(jobsToDisplay, (job) => {
@@ -178,11 +178,12 @@ class RecruitCRMJobsContainer extends React.Component {
178178

179179
RecruitCRMJobsContainer.defaultProps = {
180180
jobs: [],
181+
loading: true,
181182
};
182183

183184
RecruitCRMJobsContainer.propTypes = {
184185
getJobs: PT.func.isRequired,
185-
loading: PT.bool.isRequired,
186+
loading: PT.bool,
186187
jobs: PT.arrayOf(PT.shape),
187188
};
188189

0 commit comments

Comments
 (0)