Skip to content

Commit 159e0a6

Browse files
mdomaseviciusmdomasevicius
authored
Merge pull request #510 from mysteriumnetwork/improvements/nodeui-header
NodeUI Header rework
2 parents 1ed9fca + 4b7fffe commit 159e0a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+432
-303
lines changed

‎src/Components/Header/HeaderItem.tsx‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,24 @@ import styled from 'styled-components'
88
import { themeCommon } from '../../theme/themeCommon'
99
import { devices } from '../../theme/themes'
1010
import { ReactNode } from 'react'
11+
import { InfoIcon } from '../Icons/Icons'
12+
import { Tooltip } from '../Tooltip/Tooltip'
13+
import * as React from 'react'
1114

1215
const Item = styled.div`
1316
display: flex;
1417
flex-direction: row;
1518
align-items: center;
1619
gap: 16px;
17-
flex-shrink: 0;
20+
height: 40px;
21+
padding-right: 10px;
22+
min-width: fit-content;
23+
1824
@media ${devices.tablet} {
19-
margin-bottom: 25px;
25+
width: 100%;
26+
min-width: unset;
27+
padding-right: 0;
28+
gap: 4px;
2029
}
2130
`
2231

@@ -25,22 +34,45 @@ const Title = styled.div`
2534
font-size: ${themeCommon.fontSizeSmall};
2635
font-weight: 400;
2736
@media ${devices.tablet} {
28-
color: ${themeCommon.colorWhite};
37+
width: 40px;
38+
color: ${({ theme }) => theme.common.fontSizeSmall};
2939
}
3040
`
3141

42+
const ToolTipIcon = styled(InfoIcon)`
43+
height: 10px;
44+
width: 10px;
45+
`
46+
47+
const TooltipContainer = styled.div`
48+
display: flex;
49+
flex-direction: column;
50+
height: 100%;
51+
min-height: 10px;
52+
width: 10px;
53+
max-width: 10px;
54+
margin-left: auto;
55+
`
56+
3257
interface Props {
3358
minWidth?: number
3459
title?: string
35-
dataTestId?: string
3660
content: ReactNode
61+
tooltip?: ReactNode
3762
}
3863

39-
export const HeaderItem = ({ title, dataTestId, content, minWidth = 0 }: Props) => {
64+
export const HeaderItem = ({ title, content, minWidth, tooltip }: Props) => {
4065
return (
41-
<Item data-test-id={dataTestId} style={{ minWidth: `${minWidth}px` }}>
66+
<Item style={minWidth ? { minWidth: `${minWidth}px` } : undefined}>
4267
{title && <Title>{title}</Title>}
4368
{content}
69+
{tooltip && (
70+
<TooltipContainer>
71+
<Tooltip content={tooltip}>
72+
<ToolTipIcon />
73+
</Tooltip>
74+
</TooltipContainer>
75+
)}
4476
</Item>
4577
)
4678
}

‎src/Components/Icons/Icons.tsx‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { ReactComponent as WalletSvg } from '../../assets/images/wallet.svg'
1414
import { ReactComponent as StopwatchSvg } from '../../assets/images/stopwatch.svg'
1515
import { ReactComponent as CloudSvg } from '../../assets/images/cloud.svg'
1616
import { ReactComponent as StopwatchSimpleSvg } from '../../assets/images/stopwatch_simple.svg'
17-
import { ReactComponent as QualityBarsSvg } from '../../assets/images/quality-bars.svg'
1817
import { ReactComponent as DragIndicatorSvg } from '../../assets/images/drag-indicator.svg'
1918
import { ReactComponent as FileSvg } from '../../assets/images/file.svg'
2019
import { ReactComponent as ChatSvg } from '../../assets/images/chat.svg'
@@ -100,25 +99,6 @@ export const SessionsIcon = styled(HistoryNavSvg)<AccentedProps>`
10099

101100
export const StopwatchSimpleIcon = styled(StopwatchSimpleSvg)``
102101

103-
interface QualityBarsProps {
104-
$quality?: number
105-
}
106-
107-
export const QualityBarsIcon = styled(QualityBarsSvg)<QualityBarsProps>`
108-
rect {
109-
fill: ${themeCommon.colorKeyLight}33;
110-
}
111-
#bar-1 {
112-
fill: ${({ $quality = 0 }) => $quality > 0 && themeCommon.colorKey} !important;
113-
}
114-
#bar-2 {
115-
fill: ${({ $quality = 0 }) => $quality > 1 && themeCommon.colorKey} !important;
116-
}
117-
#bar-3 {
118-
fill: ${({ $quality = 0 }) => $quality > 2 && themeCommon.colorKey} !important;
119-
}
120-
`
121-
122102
export const DragIndicatorIcon = styled(DragIndicatorSvg)``
123103

124104
export const FileIcon = styled(FileSvg)``

‎src/Components/Inputs/Button.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,6 @@ export const Button = ({
167167
onClick,
168168
type,
169169
rounded,
170-
dataTestId,
171170
}: ButtonProps) => {
172171
return (
173172
<StyledButton
@@ -178,7 +177,6 @@ export const Button = ({
178177
type={type}
179178
disabled={disabled}
180179
onClick={onClick}
181-
data-test-id={dataTestId}
182180
>
183181
{loading && (
184182
<LoadingOverlay $size={size} $rounded={rounded} $variant={variant}>

‎src/Components/Inputs/InputGroup.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,16 @@ const Error = styled.div`
4747
`
4848

4949
interface Props {
50-
dataTestId?: string
5150
title?: string
5251
subTitle?: ReactNode
5352
input: ReactNode
5453
fluid?: boolean
5554
error?: string
5655
}
5756

58-
export const InputGroup = ({ dataTestId, input, title, subTitle, fluid, error }: Props) => {
57+
export const InputGroup = ({ input, title, subTitle, fluid, error }: Props) => {
5958
return (
60-
<Container data-test-id={dataTestId} $fluid={fluid}>
59+
<Container $fluid={fluid}>
6160
<Header>
6261
<Title>{title}</Title>
6362
{subTitle && <SubTitle>{subTitle}</SubTitle>}

‎src/Components/Inputs/types.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,5 @@ export type ButtonProps = {
2727
rounded?: boolean
2828
onClick?: () => void
2929
type?: 'submit' | 'reset' | 'button'
30-
dataTestId?: string
3130
className?: string
3231
}

‎src/Components/LayoutHeader/PageTitle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const PageTitle = ({ logo, name }: Props) => {
4141
return (
4242
<Container>
4343
<Logo>{logo}</Logo>
44-
<PageName data-test-id="PageTitle">{name}</PageName>
44+
<PageName>{name}</PageName>
4545
</Container>
4646
)
4747
}

‎src/Components/Modals/Modal.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ const Spinner = styled(CircularSpinner)`
169169
`
170170

171171
interface Props {
172-
dataTestId?: string
173172
show?: boolean
174173
icon?: ReactNode
175174
title?: string
@@ -184,7 +183,6 @@ interface Props {
184183
}
185184

186185
export const Modal = ({
187-
dataTestId,
188186
show,
189187
icon,
190188
title,
@@ -214,9 +212,7 @@ export const Modal = ({
214212
</SpinnerOverlay>
215213
)}
216214
{icon && <Icon>{icon}</Icon>}
217-
<CloseButtonPlacement data-test-id="Modal.closeButton">
218-
{!disableX && <XButtonIcon onClick={onClickX} />}
219-
</CloseButtonPlacement>
215+
<CloseButtonPlacement>{!disableX && <XButtonIcon onClick={onClickX} />}</CloseButtonPlacement>
220216
{title && <Title>{title}</Title>}
221217
{subTitle && <SubTitle>{subTitle}</SubTitle>}
222218
{children}

‎src/Components/Tooltip/Tooltip.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,7 @@ export const Tooltip = ({ children, content, delay, disabled, placement = 'botto
3737
<Floating.Anchor state={state} asChild>
3838
{children}
3939
</Floating.Anchor>
40-
{!disabled && (
41-
<StyledTooltip data-test-id="Tooltip" state={state}>
42-
{content}
43-
</StyledTooltip>
44-
)}
40+
{!disabled && <StyledTooltip state={state}>{content}</StyledTooltip>}
4541
</>
4642
)
4743
}

‎src/Pages/Authenticated/Components/Activity/Activity.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const Activity = () => {
8181
Last 24 hours <StopwatchSimpleIcon />
8282
</SubTitle>
8383
</Header>
84-
<Content data-test-id="Activity.content">
84+
<Content>
8585
<StatGauge
8686
progress={online}
8787
fill={activity.online.fill}

‎src/Pages/Authenticated/Components/Layout/Header.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ import { ReactNode } from 'react'
1313
import { NodeStatus } from '../NodeStatus/NodeStatus'
1414
import { Quality } from '../Quality/Quality'
1515
import { Notifications } from '../Notifications/Notifications'
16+
import { NATStatus } from '../NATStatus/NATStatus'
17+
import { themeCommon } from '../../../../theme/themeCommon'
18+
import { useMediaQuery } from 'react-responsive'
19+
import { media } from '../../../../commons/media'
20+
import { MobileHeader } from '../../Navigation/Mobile/MobileHeader'
21+
import { LayoutRow } from './Layout'
1622

1723
const Container = styled.div`
1824
display: flex;
@@ -21,6 +27,16 @@ const Container = styled.div`
2127
align-items: center;
2228
justify-content: space-between;
2329
gap: 20px;
30+
31+
> div:not(:nth-last-of-type(2)) {
32+
border-right: ${`1px solid ${themeCommon.colorGrayBlue}`};
33+
}
34+
35+
> div:first-child,
36+
div:last-child {
37+
border-right: none;
38+
}
39+
2440
@media ${devices.tablet} {
2541
display: none;
2642
}
@@ -36,17 +52,36 @@ const Group = styled.div`
3652
gap: 15px;
3753
}
3854
`
55+
56+
const MobileHeaderMargin = styled.div`
57+
display: flex;
58+
justify-content: center;
59+
margin-top: 86px;
60+
width: 100%;
61+
`
62+
3963
interface Props {
4064
logo?: ReactNode
4165
title?: string
4266
}
4367

4468
export const Header = ({ logo, title }: Props) => {
69+
const isMobile = useMediaQuery(media.isMobileQuery)
70+
if (isMobile) {
71+
return (
72+
<LayoutRow>
73+
<MobileHeaderMargin>
74+
<MobileHeader />
75+
</MobileHeaderMargin>
76+
</LayoutRow>
77+
)
78+
}
4579
return (
4680
<Container>
4781
<PageTitle logo={logo} name={title} />
4882
<NodeStatus />
4983
<Quality />
84+
<NATStatus />
5085
<SettlementStatus />
5186
<Group>
5287
<Notifications />

0 commit comments

Comments
 (0)