Skip to content

Commit fa3e703

Browse files
jamaljsrjamaljsr
committed
ui: add tooltips to icons and some labels
1 parent c1a3708 commit fa3e703

File tree

18 files changed

+264
-62
lines changed

18 files changed

+264
-62
lines changed

‎app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"mobx": "5.15.4",
3333
"mobx-react-lite": "2.0.6",
3434
"mobx-utils": "5.5.7",
35+
"rc-tooltip": "4.2.0",
3536
"react": "^16.13.1",
3637
"react-dom": "^16.13.1",
3738
"react-i18next": "11.4.0",

‎app/src/App.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
@import '../node_modules/bootstrap/scss/grid';
1515
@import '../node_modules/bootstrap/scss/custom-forms';
1616

17+
// rc-tooltip component styles
18+
@import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
19+
1720
@font-face {
1821
font-family: 'OpenSans Light';
1922
src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype');

‎app/src/assets/icons/bolt.svg

Lines changed: 1 addition & 1 deletion
Loading

‎app/src/assets/icons/menu.svg

Lines changed: 1 addition & 1 deletion
Loading

‎app/src/components/NodeStatus.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { usePrefixedTranslation } from 'hooks';
44
import { useStore } from 'store';
55
import { HeaderFour, Jumbo, Small } from 'components/common/text';
66
import { Bitcoin, Bolt } from './common/icons';
7+
import Tip from './common/Tip';
78
import Unit from './common/Unit';
89
import { styled } from './theme';
910

@@ -31,18 +32,22 @@ const NodeStatus: React.FC = () => {
3132
return (
3233
<Wrapper>
3334
<HeaderFour>{l('title')}</HeaderFour>
34-
<Jumbo>
35-
<Balance>
36-
<Bolt title="bolt" size="small" />
37-
<Unit sats={nodeStore.wallet.channelBalance} />
38-
</Balance>
39-
</Jumbo>
40-
<Small>
41-
<Balance>
42-
<Bitcoin title="bitcoin" size="small" />
43-
<Unit sats={nodeStore.wallet.walletBalance} suffix={false} />
44-
</Balance>
45-
</Small>
35+
<Tip overlay={l('offchainTip')}>
36+
<Jumbo>
37+
<Balance>
38+
<Bolt title="bolt" size="small" />
39+
<Unit sats={nodeStore.wallet.channelBalance} />
40+
</Balance>
41+
</Jumbo>
42+
</Tip>
43+
<Tip overlay={l('onchainTip')}>
44+
<Small>
45+
<Balance>
46+
<Bitcoin title="bitcoin" size="small" />
47+
<Unit sats={nodeStore.wallet.walletBalance} suffix={false} />
48+
</Balance>
49+
</Small>
50+
</Tip>
4651
<Divider />
4752
</Wrapper>
4853
);

‎app/src/components/common/PageHeader.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
22
import { observer } from 'mobx-react-lite';
3+
import { usePrefixedTranslation } from 'hooks';
34
import { styled } from 'components/theme';
45
import { ArrowLeft, Clock, Download } from './icons';
56
import { HeaderThree } from './text';
7+
import Tip from './Tip';
68

79
const Styled = {
810
Wrapper: styled.div`
@@ -52,6 +54,8 @@ const PageHeader: React.FC<Props> = ({
5254
onHistoryClick,
5355
onExportClick,
5456
}) => {
57+
const { l } = usePrefixedTranslation('cmps.common.PageHeader');
58+
5559
const { Wrapper, Left, Center, Right, BackLink } = Styled;
5660
return (
5761
<Wrapper>
@@ -67,8 +71,16 @@ const PageHeader: React.FC<Props> = ({
6771
<HeaderThree>{title}</HeaderThree>
6872
</Center>
6973
<Right>
70-
{onHistoryClick && <Clock size="large" onClick={onHistoryClick} />}
71-
{onExportClick && <Download size="large" onClick={onExportClick} />}
74+
{onHistoryClick && (
75+
<Tip placement="bottom" overlay={l('historyTip')}>
76+
<Clock size="large" onClick={onHistoryClick} />
77+
</Tip>
78+
)}
79+
{onExportClick && (
80+
<Tip placement="bottomRight" overlay={l('exportTip')}>
81+
<Download size="large" onClick={onExportClick} />
82+
</Tip>
83+
)}
7284
</Right>
7385
</Wrapper>
7486
);

‎app/src/components/common/Tile.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { ReactNode } from 'react';
2+
import { usePrefixedTranslation } from 'hooks';
23
import { styled } from 'components/theme';
34
import { Maximize } from './icons';
45
import { HeaderFour } from './text';
6+
import Tip from './Tip';
57

68
const Styled = {
79
TileWrap: styled.div`
@@ -19,11 +21,9 @@ const Styled = {
1921
height: 20px;
2022
padding: 4px;
2123
margin-top: -5px;
22-
cursor: pointer;
2324
2425
&:hover {
2526
border-radius: 24px;
26-
background-color: ${props => props.theme.colors.purple};
2727
}
2828
`,
2929
Text: styled.div`
@@ -52,13 +52,18 @@ interface Props {
5252
}
5353

5454
const Tile: React.FC<Props> = ({ title, text, onMaximizeClick, children }) => {
55-
const { TileWrap, Header, MaximizeIcon, Text } = Styled;
55+
const { l } = usePrefixedTranslation('cmps.common.Tile');
5656

57+
const { TileWrap, Header, MaximizeIcon, Text } = Styled;
5758
return (
5859
<TileWrap>
5960
<Header>
6061
<HeaderFour marginless>{title}</HeaderFour>
61-
{onMaximizeClick && <MaximizeIcon title="maximize" onClick={onMaximizeClick} />}
62+
{onMaximizeClick && (
63+
<Tip overlay={l('maximizeTip')}>
64+
<MaximizeIcon onClick={onMaximizeClick} />
65+
</Tip>
66+
)}
6267
</Header>
6368
{text ? <Text>{text}</Text> : children}
6469
</TileWrap>

‎app/src/components/common/Tip.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from 'react';
2+
import Tooltip from 'rc-tooltip';
3+
import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
4+
import { styled } from 'components/theme';
5+
6+
/**
7+
* Returns an offset array to create a 10px gap between the
8+
* tooltip arrow and the target element
9+
* @param placement the placement of the tooltip
10+
*/
11+
const getOffset = (placement: string) => {
12+
let offset: number[] | undefined = undefined;
13+
14+
switch (placement) {
15+
case 'top':
16+
case 'topLeft':
17+
case 'topRight':
18+
offset = [0, 10];
19+
break;
20+
case 'bottom':
21+
case 'bottomLeft':
22+
case 'bottomRight':
23+
offset = [0, -10];
24+
break;
25+
case 'left':
26+
offset = [10, 0];
27+
break;
28+
case 'right':
29+
offset = [-10, 0];
30+
break;
31+
}
32+
33+
return offset;
34+
};
35+
36+
interface Props extends TooltipProps {
37+
className?: string;
38+
}
39+
40+
/**
41+
* Wrap the Tooltip component to add some reusable configuration
42+
* for all tooltips throughout the entire site and to pass
43+
* className as overlayClassName to the Tooltip component
44+
*/
45+
const TooltipWrapper: React.FC<Props> = ({
46+
className,
47+
placement = 'top',
48+
children,
49+
...props
50+
}) => {
51+
const targetOffset = getOffset(placement);
52+
return (
53+
<Tooltip
54+
{...props}
55+
placement={placement}
56+
align={{ targetOffset }}
57+
overlayClassName={className}
58+
>
59+
{children}
60+
</Tooltip>
61+
);
62+
};
63+
64+
/**
65+
* Style our wrapper component so that our styles can be passed into the
66+
* `overlayClassName` prop of the Tooltip component. We cannot style the
67+
* Tooltip component directly because it does not accept a `className`
68+
* prop. So we basically proxy the className using the TooltipWrapper
69+
* above, then export this styled component for the rest of the app to use
70+
*/
71+
const Tip = styled(TooltipWrapper)`
72+
color: ${props => props.theme.colors.blue};
73+
font-family: ${props => props.theme.fonts.open.semiBold};
74+
font-size: ${props => props.theme.sizes.xs};
75+
text-transform: uppercase;
76+
opacity: 0.95;
77+
78+
&.rc-tooltip-placement-bottom .rc-tooltip-arrow,
79+
&.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
80+
&.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
81+
border-bottom-color: ${props => props.theme.colors.white};
82+
}
83+
84+
&.rc-tooltip-placement-top .rc-tooltip-arrow,
85+
&.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
86+
&.rc-tooltip-placement-topRight .rc-tooltip-arrow {
87+
border-top-color: ${props => props.theme.colors.white};
88+
}
89+
90+
&.rc-tooltip-placement-left .rc-tooltip-arrow {
91+
border-left-color: ${props => props.theme.colors.white};
92+
}
93+
94+
&.rc-tooltip-placement-right .rc-tooltip-arrow {
95+
border-right-color: ${props => props.theme.colors.white};
96+
}
97+
98+
.rc-tooltip-inner {
99+
text-align: center;
100+
border: 1px solid ${props => props.theme.colors.white};
101+
}
102+
`;
103+
104+
export default Tip;

‎app/src/components/common/icons.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ const Icon = styled.span<IconProps>`
2929
border-radius: 36px;
3030
cursor: pointer;
3131
&:hover {
32-
background-color: ${props.theme.colors.purple};
32+
color: ${props.theme.colors.blue};
33+
background-color: ${props.theme.colors.offWhite};
3334
}
3435
`}
3536

‎app/src/components/common/text.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const HeaderFive = styled.h5`
3838
font-size: ${props => props.theme.sizes.m};
3939
`;
4040

41-
export const Small = styled.p`
41+
export const Small = styled.span`
4242
font-size: ${props => props.theme.sizes.xs};
4343
line-height: 20px;
4444
`;

0 commit comments

Comments
 (0)