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

Commit d2f2c64

Browse files
Nursoltan SaipoldaNursoltan Saipolda
Nursoltan Saipolda
authored and
Nursoltan Saipolda
committed
final fix self service navbar
1 parent 26d688c commit d2f2c64

File tree

21 files changed

+664
-91
lines changed

21 files changed

+664
-91
lines changed

‎config/dev.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
TC_NOTIFICATION_URL: "https://api.topcoder-dev.com/v5/notifications",
66
CONNECT_DOMAIN: "https://connect.topcoder-dev.com",
77
COMMUNITY_DOMAIN: "https://www.topcoder-dev.com",
8+
PLATFORM_DOMAIN: "https://local.topcoder-dev.com",
89
TAAS_APP: "https://platform.topcoder-dev.com/taas/myteams",
910
},
1011
API: {

‎config/prod.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
TC_NOTIFICATION_URL: "https://api.topcoder.com/v5/notifications",
66
CONNECT_DOMAIN: "https://connect.topcoder.com",
77
COMMUNITY_DOMAIN: "https://www.topcoder.com",
8+
PLATFORM_DOMAIN: "https://platform.topcoder.com",
89
TAAS_APP: "https://platform.topcoder.com/taas/myteams",
910
},
1011
API: {

‎src/App.jsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React, { useState, useCallback, useMemo, useEffect } from "react";
55
import _ from "lodash";
66
import MainMenu from "./components/MainMenu";
77
import NavBar from "./components/NavBar";
8+
import SelfServiceNavbar from "./components/SelfService/NavBar";
89
import { navigate, Router, useLocation } from "@reach/router";
910
import { useSelector } from "react-redux";
1011
import useMatchSomeRoute from "./hooks/useMatchSomeRoute";
@@ -54,7 +55,15 @@ const App = () => {
5455

5556
return (
5657
<>
57-
<NavBar hideSwitchTools={isNavigationDisabled} />
58+
<Router>
59+
<SelfServiceNavbar path="/self-service/*" />
60+
<NavBar
61+
default
62+
noThrow
63+
hideSwitchTools={isNavigationDisabled}
64+
path="/*"
65+
/>
66+
</Router>
5867
{!isSideBarDisabled && (
5968
<div className="main-menu-wrapper">
6069
<Router>

‎src/assets/icons/icon-cross.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/user-menu-header-bg.svg

Lines changed: 11 additions & 0 deletions
Loading

‎src/components/Button/index.jsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* Button
3+
*
4+
* Supports:
5+
* - size - see BUTTON_SIZE values
6+
* - type - see BUTTON_TYPE values
7+
*
8+
* If `routeTo` is set, then button works as React Router Link
9+
*
10+
* if `href` is set, then button is rendered as a link `<a>`
11+
*/
12+
import { Link } from "@reach/router";
13+
import cn from "classnames";
14+
import { BUTTON_SIZE, BUTTON_TYPE } from "constants";
15+
import PT from "prop-types";
16+
import React from "react";
17+
import styles from "./styles.module.scss";
18+
19+
const Button = ({
20+
children,
21+
size = BUTTON_SIZE.SMALL,
22+
type = BUTTON_TYPE.PRIMARY,
23+
onClick,
24+
className,
25+
innerRef,
26+
disabled,
27+
routeTo,
28+
href,
29+
target,
30+
isSubmit,
31+
}) => {
32+
if (href) {
33+
return (
34+
<a
35+
href={href}
36+
target={target}
37+
onClick={onClick}
38+
className={cn(
39+
styles.button,
40+
styles[`type-${type}`],
41+
styles[`size-${size}`],
42+
className
43+
)}
44+
ref={innerRef}
45+
>
46+
{children}
47+
</a>
48+
);
49+
} else {
50+
const button = (
51+
<button
52+
onClick={onClick}
53+
className={cn(
54+
styles.button,
55+
styles[`type-${type}`],
56+
styles[`size-${size}`],
57+
className
58+
)}
59+
ref={innerRef}
60+
disabled={disabled}
61+
type={isSubmit ? "submit" : "button"}
62+
>
63+
{children}
64+
</button>
65+
);
66+
67+
return routeTo ? <Link to={routeTo}>{button}</Link> : button;
68+
}
69+
};
70+
71+
Button.propTypes = {
72+
children: PT.node,
73+
size: PT.oneOf(Object.values(BUTTON_SIZE)),
74+
type: PT.oneOf(Object.values(BUTTON_TYPE)),
75+
onClick: PT.func,
76+
className: PT.string,
77+
innerRef: PT.func,
78+
disabled: PT.bool,
79+
routeTo: PT.string,
80+
href: PT.string,
81+
isSubmit: PT.bool,
82+
};
83+
84+
export default Button;

‎src/components/Button/styles.module.scss

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@import "styles/variables";
2+
@import "styles/mixins";
3+
4+
.button {
5+
@include font-roboto;
6+
background: transparent;
7+
border: 0;
8+
box-sizing: border-box;
9+
cursor: pointer;
10+
align-items: center;
11+
display: flex;
12+
margin: 0;
13+
padding: 0;
14+
text-decoration: none;
15+
outline: none;
16+
white-space: nowrap;
17+
18+
&[disabled] {
19+
cursor: default;
20+
}
21+
}
22+
23+
.size-medium {
24+
border-radius: 20px;
25+
font-size: 14px;
26+
font-weight: 700;
27+
letter-spacing: 0.8px;
28+
line-height: 38px;
29+
height: 40px;
30+
padding: 0 19px;
31+
text-transform: uppercase;
32+
}
33+
34+
.size-small {
35+
border-radius: 15px;
36+
font-size: 12px;
37+
font-weight: 700;
38+
line-height: 28px;
39+
letter-spacing: 0.8px;
40+
height: 30px;
41+
padding: 0 14px;
42+
text-transform: uppercase;
43+
}
44+
45+
.size-tiny {
46+
border-radius: 12px;
47+
padding: 6px 15px;
48+
height: 24px;
49+
font-size: 10px;
50+
font-weight: 700;
51+
line-height: 22px;
52+
letter-spacing: 0.8px;
53+
text-transform: uppercase;
54+
}
55+
56+
.type-primary {
57+
border: 1px solid $green1;
58+
background-color: $green1;
59+
color: #fff;
60+
}
61+
62+
.type-warning {
63+
border: 1px solid #ef476f;
64+
background-color: #ef476f;
65+
color: #fff;
66+
}
67+
68+
.type-secondary {
69+
background-color: #fff;
70+
border: 1px solid $green1;
71+
color: #229174;
72+
}
73+
74+
.type-secondary[disabled] {
75+
border-color: #b5b5b5;
76+
color: #b5b5b5;
77+
}
78+
79+
.type-rounded {
80+
position: relative;
81+
width: 22px;
82+
border-radius: 50%;
83+
background-color: #fff;
84+
border: 1px solid $green1;
85+
color: #229174;
86+
87+
svg {
88+
position: absolute;
89+
left: 37%;
90+
}
91+
}
92+
93+
.type-text {
94+
background-color: #fff;
95+
border: 1px solid #fff;
96+
color: $green1;
97+
}
98+
99+
.type-text-inverted {
100+
background-color: transparent;
101+
border: 1px solid transparent;
102+
color: #fff;
103+
}
104+
105+
.type-rounded[disabled] {
106+
border-radius: 50%;
107+
border-color: #b5b5b5;
108+
color: #b5b5b5;
109+
}
110+
111+
.type-primary[disabled],
112+
.type-warning[disabled] {
113+
background-color: #b5b5b5;
114+
border-color: #b5b5b5;
115+
}

‎src/components/NavBar/index.jsx

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,17 @@ import React, {
1010
useEffect,
1111
useMemo,
1212
} from "react";
13-
import cn from "classnames";
1413
import _ from "lodash";
1514
import PropTypes from "prop-types";
1615
import UserMenu from "../UserMenu";
1716
import AllAppsMenu from "../AllAppsMenu";
1817
import { useSelector } from "react-redux";
1918
import { Link, useLocation } from "@reach/router";
2019
import TCLogo from "../../assets/images/tc-logo.svg";
21-
import { getLoginUrl, getSelfServiceLoginUrl } from "../../utils";
20+
import { getLoginUrl } from "../../utils";
2221
import "./styles.css";
2322
import { useMediaQuery } from "react-responsive";
2423
import NotificationsMenu from "../NotificationsMenu";
25-
import SelfServiceNotifications from "../SelfServiceNotificationsMenu";
26-
import SelfServiceUserMenu from "../SelfServiceUserMenu";
2724

2825
const NavBar = ({ hideSwitchTools }) => {
2926
// all menu options
@@ -39,9 +36,7 @@ const NavBar = ({ hideSwitchTools }) => {
3936

4037
const routerLocation = useLocation();
4138

42-
const loginUrl = routerLocation.pathname.startsWith("/self-service/wizard")
43-
? getSelfServiceLoginUrl()
44-
: getLoginUrl();
39+
const loginUrl = getLoginUrl();
4540

4641
// Check app title with route activated
4742
useEffect(() => {
@@ -68,7 +63,7 @@ const NavBar = ({ hideSwitchTools }) => {
6863
);
6964

7065
return (
71-
<div className={cn("navbar", { "self-service-navbar": hideSwitchTools })}>
66+
<div className="navbar">
7267
<div className="navbar-left">
7368
{isMobile ? (
7469
hideSwitchTools ? null : (
@@ -97,21 +92,15 @@ const NavBar = ({ hideSwitchTools }) => {
9792
<Fragment>
9893
{auth.isInitialized &&
9994
(auth.tokenV3 ? (
100-
auth.profile &&
101-
(hideSwitchTools ? (
102-
<Fragment>
103-
<SelfServiceNotifications />
104-
<SelfServiceUserMenu profile={auth.profile} />
105-
</Fragment>
106-
) : (
95+
auth.profile && (
10796
<Fragment>
10897
<NotificationsMenu />
10998
<UserMenu
11099
profile={auth.profile}
111100
hideSwitchTools={hideSwitchTools}
112101
/>
113102
</Fragment>
114-
))
103+
)
115104
) : (
116105
<a href={loginUrl} className="navbar-login">
117106
Login
@@ -128,21 +117,15 @@ const NavBar = ({ hideSwitchTools }) => {
128117
)}
129118
{auth.isInitialized &&
130119
(auth.tokenV3 ? (
131-
auth.profile &&
132-
(hideSwitchTools ? (
133-
<Fragment>
134-
<SelfServiceNotifications />
135-
<SelfServiceUserMenu profile={auth.profile} />
136-
</Fragment>
137-
) : (
120+
auth.profile && (
138121
<Fragment>
139122
<NotificationsMenu />
140123
<UserMenu
141124
profile={auth.profile}
142125
hideSwitchTools={hideSwitchTools}
143126
/>
144127
</Fragment>
145-
))
128+
)
146129
) : (
147130
<a href={loginUrl} className="navbar-login">
148131
Login

‎src/components/NavBar/styles.css

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
z-index: 1;
1111
font-family: "Roboto", Arial, Helvetica, sans-serif;
1212
}
13-
.navbar.self-service-navbar {
13+
.navbar {
1414
padding: 0 24px;
1515
background-color: #0C0C0C;
1616
}
@@ -30,25 +30,6 @@
3030
text-align: left;
3131
color: #fff;
3232
}
33-
.self-service-navbar .navbar-app-title {
34-
position: relative;
35-
font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;
36-
font-weight: 500;
37-
font-size: 20px;
38-
line-height: 18px;
39-
}
40-
.self-service-navbar .navbar-app-title::after {
41-
content: "";
42-
display: block;
43-
position: absolute;
44-
left: 8.5px;
45-
top: 100%;
46-
right: 8.5px;
47-
margin: 10px 0 0;
48-
border-radius: 2px;
49-
height: 2px;
50-
background-color: #0AB88A;
51-
}
5233
.navbar-divider {
5334
width: 1px;
5435
height: 30px;
@@ -57,9 +38,6 @@
5738
.navbar-left .navbar-divider {
5839
margin: 0 30px;
5940
}
60-
.self-service-navbar .navbar-left .navbar-divider {
61-
margin: 0 23px;
62-
}
6341
.navbar-center {
6442
left: 50%;
6543
position: absolute;

0 commit comments

Comments
 (0)