Skip to content

Commit 95426ab

Browse files
maxceemmaxceem
authored
Merge pull request #2860 from sumitdaga/issue-2852
fixes issue #2852
2 parents 09b729b + bca2065 commit 95426ab

File tree

3 files changed

+46
-242
lines changed

3 files changed

+46
-242
lines changed

‎src/projects/list/components/Projects/Projects.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ class Projects extends Component {
195195
}
196196

197197
render() {
198-
const { isPowerUser, isLoading, totalCount, criteria, currentUser, projectsListView, setProjectsListView, setInfiniteAutoload, loadProjects, history, orgConfig } = this.props
198+
const { isPowerUser, isLoading, totalCount, criteria, projectsListView, setProjectsListView, setInfiniteAutoload, loadProjects, history, orgConfig } = this.props
199199
// show walk through if user is customer and no projects were returned
200200
// for default filters
201201
const showWalkThrough = !isLoading && totalCount === 0 &&
@@ -248,7 +248,7 @@ class Projects extends Component {
248248
<ProjectListNavHeader applyFilters={this.applyFilters} selectedView={chosenView} changeView={setProjectsListView} currentStatus={currentStatus} criteria={criteria} setInfiniteAutoload={setInfiniteAutoload} loadProjects={loadProjects} history={history}/>}
249249
{ showWalkThrough ?
250250
(
251-
<Walkthrough currentUser={currentUser} />
251+
<Walkthrough newProjectLink={getNewProjectLink(orgConfig)} />
252252
) : (
253253
projectsView
254254
)

‎src/projects/list/components/Walkthrough/Walkthrough.jsx‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,29 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import {Link} from 'react-router-dom'
43
import './Walkthrough.scss'
5-
import IconShadow from '../../../../assets/icons/ground-shadow.svg'
6-
import IconRobot from '../../../../assets/icons/coder-welcome.svg'
7-
import IconTextImg from '../../../../assets/icons/pointer-new-project.svg'
8-
import BoldAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
4+
import NewProjectCard from '../../../components/projectsCard/NewProjectCard'
95

106

117

12-
const Walkthrough = ({currentUser}) => (
8+
const Walkthrough = ({newProjectLink}) => (
139
<div className="walkthrough-column">
14-
15-
<IconTextImg className="text-img"/>
16-
17-
<div className="bubble">
18-
<IconRobot className="robot robotleft"/>
19-
<div>
20-
<span className="arrow"/>
21-
<h3>010010010010100101001000100100101 <br/>Bzzt …I mean… Hello, {currentUser.firstName}!</h3>
22-
<p>Welcome to Connect! I’m Coder the Robot. I see you have no projects yet. To get you started, press the “New Project” icon and let’s build something.</p>
23-
<Link to="/new-project">
24-
<div className="new-project-button">
25-
<div className="new-project-icon">
26-
<BoldAdd className="icon-bold-add"/>
27-
</div>
28-
<div className="title">Create a new project</div>
29-
</div>
30-
</Link>
31-
</div>
32-
<IconRobot className="robot"/>
33-
<IconShadow className="shadow"/>
10+
<div className="header-text-wrapper">
11+
<h3>Welcome to Topcoder.</h3>
12+
<h3>To get started, click the "Create a new project" button below.</h3>
13+
</div>
14+
15+
<div className="project-card-new">
16+
<NewProjectCard link={newProjectLink} />
17+
</div>
18+
19+
<div className="subtext">
20+
If you have already created a project with us and are not seeing it listed, contact <a href="mailto:support@topcoder.com" target="_blank">support@topcoder.com</a>
3421
</div>
3522
</div>
3623
)
3724

3825
Walkthrough.PropTypes = {
39-
currentUser: PropTypes.object.isRequired
26+
newProjectLink: PropTypes.string
4027
}
4128

4229
export default Walkthrough

‎src/projects/list/components/Walkthrough/Walkthrough.scss‎

Lines changed: 30 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -6,234 +6,51 @@
66
.walkthrough-column {
77
position: relative;
88
text-align: center;
9-
min-height: 496px;
109
padding: 20px 56px;
1110
@media screen and (max-width: $screen-sm - 1px) {
1211
padding: 20px 26px;
1312
}
1413

15-
.text-img{
16-
background-size: 100% 100%;
17-
position: relative;
18-
display: block;
19-
width: 90%;
20-
left: 10%;
21-
@media screen and (max-width: $screen-sm - 1px) {
22-
display: none;
23-
}
24-
@media screen and (min-width: $screen-md - 1px) {
25-
width: 60%;
26-
left: 40%;
27-
}
28-
}
14+
.header-text-wrapper {
15+
margin-bottom: 6 * $base-unit;
2916

30-
h3{
31-
word-break: break-all;
32-
color: $tc-gray-70;
33-
@include roboto-medium;
34-
font-size: 48px;
35-
letter-spacing: 0px;
36-
padding: 0 0 25px 0;
37-
line-height: inherit;
38-
}
39-
ul{
40-
width: 100%;
41-
left:50%;
42-
margin-left: -50%;
43-
position: relative;
44-
li{
45-
float: left;
46-
width: calc((100% - 40px)/3);
47-
}
48-
li:nth-child(2){
49-
margin-left:20px;
50-
margin-right:20px;
51-
}
52-
a{
53-
background: rgba($tc-gray-neutral-dark,0.39);
54-
border-radius: 4px;
55-
width: 100%;
56-
height: 306px;
57-
display: block;
58-
margin-bottom:20px;
59-
font-size: 88px;
60-
line-height: 306px;
61-
text-align: center;
62-
@include roboto-bold;
63-
color: $tc-gray-20;
64-
&:hover {
65-
color: $tc-gray-80;
66-
}
67-
}
68-
}
17+
h3 {
18+
color: $tc-gray-70;
19+
@include roboto-medium;
20+
font-size: 28px;
21+
letter-spacing: 0px;
22+
line-height: 36px;
6923

70-
.bubble{
71-
position: relative;
72-
padding:0 10%;
73-
display: flex;
74-
padding: 0 20% 0 20%;
75-
@media screen and (max-width: $screen-sm - 1px) {
76-
left:0;
77-
padding-left: 0;
78-
display: block;
79-
margin: 0;
80-
}
81-
@media screen and (max-width: 1200px) {
82-
padding: 0 10% 0 10%;
83-
}
84-
@media screen and (max-width: 1000px) {
85-
padding: 0;
86-
}
87-
div{
88-
position:relative;
89-
background: $tc-white;
90-
min-height: 235px;
91-
padding: 30px 30px 50px 30px;
92-
box-shadow: 0 0 15px rgba($tc-black, .15);
93-
border-radius: 4px;
9424
@media screen and (max-width: $screen-sm - 1px) {
95-
width: auto;
96-
padding: 30px 30px 30px 30px;
97-
}
98-
a {
99-
display: none;
100-
@media screen and (max-width: $screen-sm - 1px) {
101-
display: initial;
102-
}
103-
.new-project-button {
104-
@include roboto;
105-
color: $tc-dark-blue-70;
106-
margin-top: 30px;
107-
display: flex;
108-
align-items: center;
109-
justify-content: center;
110-
.title {
111-
white-space: nowrap;
112-
margin-left: 10px;
113-
}
114-
.new-project-icon {
115-
width: 30px;
116-
height: 30px;
117-
background-color: $tc-dark-blue-70;
118-
border-radius: 100%;
119-
display: -webkit-box;
120-
display: -ms-flexbox;
121-
display: flex;
122-
-webkit-box-pack: center;
123-
-ms-flex-pack: center;
124-
justify-content: center;
125-
-webkit-box-align: center;
126-
-ms-flex-align: center;
127-
align-items: center;
128-
svg {
129-
fill: $tc-white;
130-
width: 10px;
131-
height: 10px;
132-
}
133-
}
134-
}
135-
div {
136-
box-shadow: none;
137-
min-height: 0;
138-
padding: 0;
139-
width: auto;
140-
}
141-
}
142-
h3{
143-
@include roboto-medium;
144-
line-height:35px;
145-
font-size: $tc-heading-sm;
146-
color: $tc-black;
147-
text-align:left;
148-
padding-bottom: 10px;
149-
@media screen and (max-width: $screen-md - 1px) {
150-
font-size: 18px;
151-
}
152-
@media screen and (max-width: $screen-sm - 1px) {
153-
font-size: 16px;
154-
line-height:30px;
155-
}
156-
}
157-
p{
158-
@include roboto;
159-
font-size: $tc-label-lg;
160-
color: $tc-gray-80;
161-
line-height: 25px;
162-
padding: 0;
163-
@media screen and (max-width: $screen-md - 1px) {
164-
font-size: 14px;
165-
}
166-
@media screen and (max-width: $screen-sm - 1px) {
167-
font-size: 13px;
168-
}
169-
}
170-
.arrow{
171-
width:0;
172-
height:0;
173-
position: absolute;
174-
left:-20px;
175-
top: 42px;
176-
border-left:34px solid transparent;
177-
border-top:34px solid $tc-white;
178-
@media screen and (max-width: $screen-sm - 1px) {
179-
border-left: none;
180-
border-right:34px solid transparent;
181-
bottom: -20px;
182-
left: inherit;
183-
top: inherit;
184-
}
185-
}
186-
}
187-
}
188-
.robot{
189-
background-size: 238px 281px;
190-
width: 238px;
191-
height: 281px;
192-
left: 30%;
193-
top:0;
194-
z-index:2;
195-
display: none;
196-
&.robotleft {
197-
width: 100%;
198-
display: block;
199-
@media screen and (max-width: $screen-sm - 1px) {
200-
display: none;
201-
}
202-
}
203-
@media screen and (max-width: $screen-sm - 1px) {
204-
width: 100%;
205-
position: relative;
206-
margin: 50px 0;
207-
left: 0%;
208-
display: block;
209-
}
210-
ellipse {
211-
display: none;
212-
@media screen and (max-width: $screen-sm - 1px) {
213-
display: initial;
25+
font-size: 18px;
26+
line-height: 22px;
21427
}
21528
}
21629
}
217-
.shadow{
218-
background-size: 960px 11px;
219-
position: absolute;
220-
width: 100%;
221-
z-index:1;
222-
display:block;
223-
height: 11px;
224-
bottom:-48px;
225-
@media screen and (max-width: $screen-sm - 1px) {
226-
display: none;
30+
31+
.project-card-new {
32+
margin: 0 auto 6 * $base-unit;
33+
height: 400px;
34+
min-width: 280px;
35+
max-width: 460px;
36+
37+
@media screen and (max-width: $screen-md - 1px) {
38+
height: auto;
22739
}
22840
}
229-
p{
230-
text-align: left;
231-
padding: 0 168px;
41+
42+
.subtext {
43+
font-size: 14px;
23244
@include roboto;
233-
font-size: $tc-label-lg;
23445
color: $tc-gray-70;
235-
letter-spacing: 0px;
236-
line-height: 23px;
46+
47+
a {
48+
color: $tc-dark-blue;
49+
50+
&:hover {
51+
text-decoration: underline;
52+
}
53+
}
23754
}
23855
}
23956
}

0 commit comments

Comments
 (0)