Skip to content

Commit fe01636

Browse files
ChitlangeSahasChitlangeSahas
authored
feat: vertical subway-styled navigation for the homepage experience (#3992)
1 parent 792d695 commit fe01636

File tree

4 files changed

+272
-167
lines changed

4 files changed

+272
-167
lines changed

‎src/homepageExperience/components/HomepageExperience.scss‎

Lines changed: 54 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
$pool-fill: #00a3ff;
2+
13
.homepage-container {
24
color: $cf-grey-95;
35
display: flex;
@@ -12,6 +14,21 @@
1214
width: 30%;
1315
}
1416

17+
.homepage-container--main {
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
width: 70%;
22+
}
23+
24+
.homepage-container--main-wrapper {
25+
display: flex;
26+
justify-content: center;
27+
width: 100%;
28+
}
29+
30+
// Subway CSS
31+
1532
.subway-navigation-container {
1633
display: flex;
1734
justify-content: center;
@@ -22,41 +39,55 @@
2239
flex-direction: column;
2340
}
2441

42+
.subway-navigation-step-flex-wrapper {
43+
display: flex;
44+
flex-direction: column;
45+
46+
&:after {
47+
content: '';
48+
width: $cf-border;
49+
pointer-events: none;
50+
z-index: 2;
51+
52+
height: 30px;
53+
transform: translate(16px);
54+
background: white;
55+
}
56+
57+
&:last-child:after {
58+
background: black;
59+
}
60+
61+
&.stepIsComplete {
62+
&:after {
63+
background: $pool-fill;
64+
}
65+
&:last-child:after {
66+
background: black;
67+
}
68+
}
69+
}
70+
2571
.subway-navigation-step {
2672
display: flex;
2773
flex-direction: row;
28-
justify-content: left;
74+
align-items: center;
2975
}
3076

3177
.subway-navigation-step-icon-container {
3278
border: $cf-grey-95 solid 2px;
3379
border-radius: 50%;
3480
color: rgba(0, 0, 0, 0);
35-
height: 24px;
36-
width: 24px;
37-
}
38-
39-
.active .subway-navigation-step-icon-container {
40-
border-color: $c-pool;
41-
}
42-
43-
.subway-navigation-step-icon {
44-
height: 16px;
45-
left: 2px;
46-
position: relative;
47-
top: 2px;
48-
width: 16px;
49-
}
81+
height: 34px;
82+
width: 34px;
5083

51-
.homepage-container--main {
5284
display: flex;
53-
flex-direction: column;
5485
justify-content: center;
55-
width: 70%;
86+
align-items: center;
87+
88+
margin-right: 21px;
5689
}
5790

58-
.homepage-container--main-wrapper {
59-
display: flex;
60-
justify-content: center;
61-
width: 100%;
91+
.showBorderColor .subway-navigation-step-icon-container {
92+
border-color: $pool-fill;
6293
}

‎src/homepageExperience/components/HomepageIcons.tsx‎

Lines changed: 103 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,111 @@
11
import React from 'react'
22

3-
export const OverviewIcon = props => {
4-
return (
5-
<svg
6-
className="subway-navigation-step-icon"
7-
xmlns="http://www.w3.org/2000/svg"
8-
viewBox="0 0 24 24"
9-
width="16"
10-
height="16"
11-
>
12-
<path fill="none" d="M0 0h24v24H0z" />
13-
<path
14-
fill={props.fill}
15-
d="M3 18.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A3.5 3.5 0 0 1 3 18.5zM19 20v-3H6.5a1.5 1.5 0 0 0 0 3H19zM5 15.337A3.486 3.486 0 0 1 6.5 15H19V4H6a1 1 0 0 0-1 1v10.337z"
16-
/>
17-
</svg>
18-
)
19-
}
3+
export const OverviewIcon = (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 24 24"
7+
width="16"
8+
height="16"
9+
>
10+
<path fill="none" d="M0 0h24v24H0z" />
11+
<path d="M3 18.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A3.5 3.5 0 0 1 3 18.5zM19 20v-3H6.5a1.5 1.5 0 0 0 0 3H19zM5 15.337A3.486 3.486 0 0 1 6.5 15H19V4H6a1 1 0 0 0-1 1v10.337z" />
12+
</svg>
13+
)
2014

21-
export const InstallDependenciesIcon = props => {
22-
return (
23-
<svg
24-
xmlns="http://www.w3.org/2000/svg"
25-
viewBox="0 0 24 24"
26-
width="16"
27-
height="16"
28-
>
29-
<path fill="none" d="M0 0h24v24H0z" />
30-
<path
31-
fill={props.fill}
32-
d="M9 2v2H5l-.001 10h14L19 4h-4V2h5a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h5zm9.999 14h-14L5 20h14l-.001-4zM17 17v2h-2v-2h2zM13 2v5h3l-4 4-4-4h3V2h2z"
33-
/>
34-
</svg>
35-
)
36-
}
15+
export const InstallDependenciesIcon = (
16+
<svg
17+
xmlns="http://www.w3.org/2000/svg"
18+
viewBox="0 0 24 24"
19+
width="16"
20+
height="16"
21+
>
22+
<path fill="none" d="M0 0h24v24H0z" />
23+
<path d="M9 2v2H5l-.001 10h14L19 4h-4V2h5a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h5zm9.999 14h-14L5 20h14l-.001-4zM17 17v2h-2v-2h2zM13 2v5h3l-4 4-4-4h3V2h2z" />
24+
</svg>
25+
)
3726

38-
export const ExecuteQueryIcon = props => {
39-
return (
40-
<svg
41-
xmlns="http://www.w3.org/2000/svg"
42-
viewBox="0 0 24 24"
43-
width="16"
44-
height="16"
45-
>
46-
<path fill="none" d="M0 0h24v24H0z" />
47-
<path
48-
fill={props.fill}
49-
d="M16.394 12L10 7.737v8.526L16.394 12zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832z"
50-
/>
51-
</svg>
52-
)
53-
}
27+
export const ExecuteQueryIcon = (
28+
<svg
29+
xmlns="http://www.w3.org/2000/svg"
30+
viewBox="0 0 24 24"
31+
width="16"
32+
height="16"
33+
>
34+
<path fill="none" d="M0 0h24v24H0z" />
35+
<path d="M16.394 12L10 7.737v8.526L16.394 12zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832z" />
36+
</svg>
37+
)
5438

55-
export const FinishIcon = props => {
56-
return (
57-
<svg
58-
xmlns="http://www.w3.org/2000/svg"
59-
viewBox="0 0 24 24"
60-
width="16"
61-
height="16"
62-
>
63-
<path fill="none" d="M0 0h24v24H0z" />
64-
<path
65-
fill={props.fill}
66-
d="M12 .5l4.226 6.183 7.187 2.109-4.575 5.93.215 7.486L12 19.69l-7.053 2.518.215-7.486-4.575-5.93 7.187-2.109L12 .5zm0 3.544L9.022 8.402 3.957 9.887l3.225 4.178-.153 5.275L12 17.566l4.97 1.774-.152-5.275 3.224-4.178-5.064-1.485L12 4.044zM10 12a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"
67-
/>
68-
</svg>
69-
)
70-
}
39+
export const FinishIcon = (
40+
<svg
41+
xmlns="http://www.w3.org/2000/svg"
42+
viewBox="0 0 24 24"
43+
width="16"
44+
height="16"
45+
>
46+
<path fill="none" d="M0 0h24v24H0z" />
47+
<path d="M12 .5l4.226 6.183 7.187 2.109-4.575 5.93.215 7.486L12 19.69l-7.053 2.518.215-7.486-4.575-5.93 7.187-2.109L12 .5zm0 3.544L9.022 8.402 3.957 9.887l3.225 4.178-.153 5.275L12 17.566l4.97 1.774-.152-5.275 3.224-4.178-5.064-1.485L12 4.044zM10 12a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" />
48+
</svg>
49+
)
7150

72-
export const InitializeClientIcon = props => {
73-
return (
74-
<svg
75-
xmlns="http://www.w3.org/2000/svg"
76-
viewBox="0 0 24 24"
77-
width="16"
78-
height="16"
79-
>
80-
<path fill="none" d="M0 0h24v24H0z" />
81-
<path
82-
fill={props.fill}
83-
d="M8.595 12.812a3.51 3.51 0 0 1 0-1.623l-.992-.573 1-1.732.992.573A3.496 3.496 0 0 1 11 8.645V7.5h2v1.145c.532.158 1.012.44 1.405.812l.992-.573 1 1.732-.992.573a3.51 3.51 0 0 1 0 1.622l.992.573-1 1.732-.992-.573a3.496 3.496 0 0 1-1.405.812V16.5h-2v-1.145a3.496 3.496 0 0 1-1.405-.812l-.992.573-1-1.732.992-.572zM12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM15 4H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z"
84-
/>
85-
</svg>
86-
)
87-
}
51+
export const InitializeClientIcon = (
52+
<svg
53+
xmlns="http://www.w3.org/2000/svg"
54+
viewBox="0 0 24 24"
55+
width="16"
56+
height="16"
57+
>
58+
<path fill="none" d="M0 0h24v24H0z" />
59+
<path d="M8.595 12.812a3.51 3.51 0 0 1 0-1.623l-.992-.573 1-1.732.992.573A3.496 3.496 0 0 1 11 8.645V7.5h2v1.145c.532.158 1.012.44 1.405.812l.992-.573 1 1.732-.992.573a3.51 3.51 0 0 1 0 1.622l.992.573-1 1.732-.992-.573a3.496 3.496 0 0 1-1.405.812V16.5h-2v-1.145a3.496 3.496 0 0 1-1.405-.812l-.992.573-1-1.732.992-.572zM12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM15 4H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
60+
</svg>
61+
)
8862

89-
export const TokenIcon = props => {
90-
return (
91-
<svg
92-
xmlns="http://www.w3.org/2000/svg"
93-
viewBox="0 0 24 24"
94-
width="16"
95-
height="16"
96-
>
97-
<path fill="none" d="M0 0h24v24H0z" />
98-
<path
99-
fill={props.fill}
100-
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-12.95L16.95 12 12 16.95 7.05 12 12 7.05zm0 2.829L9.879 12 12 14.121 14.121 12 12 9.879z"
101-
/>
102-
</svg>
103-
)
104-
}
63+
export const TokenIcon = (
64+
<svg
65+
xmlns="http://www.w3.org/2000/svg"
66+
viewBox="0 0 24 24"
67+
width="16"
68+
height="16"
69+
>
70+
<path fill="none" d="M0 0h24v24H0z" />
71+
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-12.95L16.95 12 12 16.95 7.05 12 12 7.05zm0 2.829L9.879 12 12 14.121 14.121 12 12 9.879z" />
72+
</svg>
73+
)
10574

106-
export const WriteDataIcon = props => {
107-
return (
108-
<svg
109-
xmlns="http://www.w3.org/2000/svg"
110-
viewBox="0 0 24 24"
111-
width="16"
112-
height="16"
113-
>
114-
<path fill="none" d="M0 0h24v24H0z" />
115-
<path
116-
fill={props.fill}
117-
d="M5 19h1.414l9.314-9.314-1.414-1.414L5 17.586V19zm16 2H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L9.243 19H21v2zM15.728 6.858l1.414 1.414 1.414-1.414-1.414-1.414-1.414 1.414z"
118-
/>
119-
</svg>
120-
)
121-
}
75+
export const WriteDataIcon = (
76+
<svg
77+
xmlns="http://www.w3.org/2000/svg"
78+
viewBox="0 0 24 24"
79+
width="16"
80+
height="16"
81+
>
82+
<path fill="none" d="M0 0h24v24H0z" />
83+
<path d="M5 19h1.414l9.314-9.314-1.414-1.414L5 17.586V19zm16 2H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L9.243 19H21v2zM15.728 6.858l1.414 1.414 1.414-1.414-1.414-1.414-1.414 1.414z" />
84+
</svg>
85+
)
86+
87+
export const StepCompleteIcon = (
88+
<svg
89+
width="17"
90+
height="13"
91+
viewBox="0 0 17 13"
92+
fill="none"
93+
xmlns="http://www.w3.org/2000/svg"
94+
>
95+
<path
96+
d="M6.364 9.193L15.556 0L16.971 1.414L6.364 12.021L0 5.657L1.414 4.243L6.364 9.193Z"
97+
fill="white"
98+
/>
99+
</svg>
100+
)
101+
102+
export const AlertIcon = (
103+
<svg
104+
width="14"
105+
height="14"
106+
viewBox="0 0 14 14"
107+
xmlns="http://www.w3.org/2000/svg"
108+
>
109+
<path d="M1.66674 12.3335V8.3335C1.66674 6.91901 2.22864 5.56245 3.22883 4.56226C4.22903 3.56207 5.58558 3.00016 7.00007 3.00016C8.41456 3.00016 9.77111 3.56207 10.7713 4.56226C11.7715 5.56245 12.3334 6.91901 12.3334 8.3335V12.3335H13.0001V13.6668H1.00007V12.3335H1.66674ZM3.00007 12.3335H11.0001V8.3335C11.0001 7.27263 10.5786 6.25521 9.8285 5.50507C9.07835 4.75492 8.06094 4.3335 7.00007 4.3335C5.9392 4.3335 4.92179 4.75492 4.17164 5.50507C3.4215 6.25521 3.00007 7.27263 3.00007 8.3335V12.3335ZM6.3334 0.333496H7.66674V2.3335H6.3334V0.333496ZM12.1854 2.2055L13.1281 3.14816L11.7147 4.56216L10.7714 3.6195L12.1854 2.2055ZM0.87207 3.14816L1.81474 2.2055L3.22874 3.61883L2.28674 4.56283L0.87207 3.14816ZM3.66674 8.3335C3.66674 7.44944 4.01793 6.60159 4.64305 5.97647C5.26817 5.35135 6.11601 5.00016 7.00007 5.00016V6.3335C6.46964 6.3335 5.96093 6.54421 5.58586 6.91928C5.21078 7.29436 5.00007 7.80306 5.00007 8.3335H3.66674Z" />
110+
</svg>
111+
)

0 commit comments

Comments
 (0)