Skip to content

Commit b19c6c5

Browse files
jamaljsrjamaljsr
committed
styles: standardize icons throughout the site
1 parent b8ac723 commit b19c6c5

File tree

13 files changed

+127
-121
lines changed

13 files changed

+127
-121
lines changed

‎app/src/components/NodeStatus.tsx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,22 @@ const Styled = {
1717
margin: 20px 0;
1818
opacity: 0.5;
1919
`,
20-
BoltIcon: styled(Bolt)`
21-
width: 10px;
22-
height: 10px;
23-
margin-right: 5px;
24-
`,
25-
BitcoinIcon: styled(Bitcoin)`
26-
width: 10px;
27-
height: 10px;
28-
margin-right: 5px;
29-
`,
3020
};
3121

3222
const NodeStatus: React.FC = () => {
3323
const { l } = usePrefixedTranslation('cmps.NodeStatus');
3424
const { nodeStore } = useStore();
3525

36-
const { Wrapper, BoltIcon, BitcoinIcon, Divider } = Styled;
26+
const { Wrapper, Divider } = Styled;
3727
return (
3828
<Wrapper>
3929
<HeaderFour>{l('title')}</HeaderFour>
4030
<Jumbo>
41-
<BoltIcon title="bolt" />
31+
<Bolt title="bolt" size="small" />
4232
<Unit sats={nodeStore.wallet.channelBalance} />
4333
</Jumbo>
4434
<Small>
45-
<BitcoinIcon title="bitcoin" />
35+
<Bitcoin title="bitcoin" size="small" />
4636
<Unit sats={nodeStore.wallet.walletBalance} suffix={false} />
4737
</Small>
4838
<Divider />

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const Styled = {
1818
}
1919
`,
2020
CheckIcon: styled(Check)`
21+
padding: 0;
2122
width: 20px;
2223
height: 20px;
2324
`,
@@ -47,7 +48,7 @@ const Checkbox: React.FC<Props> = ({ checked, disabled, onChange, className }) =
4748
disabled={disabled}
4849
onClick={handleClick}
4950
>
50-
{checked && <CheckIcon />}
51+
{checked && <CheckIcon size="small" />}
5152
</Box>
5253
);
5354
};

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { observer } from 'mobx-react-lite';
33
import { styled } from 'components/theme';
4-
import { ArrowLeft, Icon } from './icons';
4+
import { ArrowLeft, Clock, Download } from './icons';
55
import { HeaderThree } from './text';
66

77
const Styled = {
@@ -20,23 +20,21 @@ const Styled = {
2020
Right: styled.span`
2121
flex: 1;
2222
text-align: right;
23+
24+
svg {
25+
margin-left: 50px;
26+
}
2327
`,
2428
BackLink: styled.a`
2529
text-transform: uppercase;
2630
font-size: ${props => props.theme.sizes.xs};
2731
cursor: pointer;
28-
color: ${props => props.theme.colors.whitish};
32+
line-height: 36px;
2933
3034
&:hover {
3135
opacity: 80%;
3236
}
3337
`,
34-
BackIcon: styled(ArrowLeft)`
35-
margin-right: 5px;
36-
`,
37-
ActionIcon: styled(Icon)`
38-
margin-left: 50px;
39-
`,
4038
};
4139

4240
interface Props {
@@ -54,13 +52,13 @@ const PageHeader: React.FC<Props> = ({
5452
onHistoryClick,
5553
onExportClick,
5654
}) => {
57-
const { Wrapper, Left, Center, Right, BackLink, BackIcon, ActionIcon } = Styled;
55+
const { Wrapper, Left, Center, Right, BackLink } = Styled;
5856
return (
5957
<Wrapper>
6058
<Left>
6159
{onBackClick && (
6260
<BackLink onClick={onBackClick}>
63-
<BackIcon />
61+
<ArrowLeft />
6462
{backText}
6563
</BackLink>
6664
)}
@@ -69,8 +67,8 @@ const PageHeader: React.FC<Props> = ({
6967
<HeaderThree>{title}</HeaderThree>
7068
</Center>
7169
<Right>
72-
{onHistoryClick && <ActionIcon icon="clock" onClick={onHistoryClick} />}
73-
{onExportClick && <ActionIcon icon="download" onClick={onExportClick} />}
70+
{onHistoryClick && <Clock size="large" onClick={onHistoryClick} />}
71+
{onExportClick && <Download size="large" onClick={onExportClick} />}
7472
</Right>
7573
</Wrapper>
7674
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ interface Props {
2525

2626
const StatusDot: React.FC<Props> = ({ status }) => {
2727
const { DotIcon } = Styled;
28-
return <DotIcon className={status} aria-label={status} />;
28+
return <DotIcon size="small" className={status} aria-label={status} />;
2929
};
3030

3131
export default StatusDot;

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export const Button = styled.button<ButtonProps>`
4242
height: 44px;
4343
padding-left: 15px;
4444
padding-right: 15px;
45-
margin-left: 10px;
4645
text-align: center;
4746
color: ${props => props.theme.colors.whitish};
4847
background-color: ${props => props.theme.colors.blue};
@@ -98,9 +97,11 @@ export const Button = styled.button<ButtonProps>`
9897
`}
9998
10099
svg {
101-
margin-right: 10px;
102-
width: ${props => props.theme.sizes.m};
103-
height: ${props => props.theme.sizes.m};
100+
margin: 0 5px 0 0;
101+
102+
&:hover {
103+
background-color: transparent;
104+
}
104105
}
105106
`;
106107

@@ -117,8 +118,8 @@ export const RadioButton = styled.span<RadioButtonProps>`
117118
width: 14px;
118119
height: 14px;
119120
border-radius: 14px;
120-
border: 1px solid ${props => props.theme.colors.lightPurple};
121-
background-color: ${props => (props.checked ? props.theme.colors.lightPurple : 'none')};
121+
border: 1px solid ${props => props.theme.colors.whitish};
122+
background-color: ${props => (props.checked ? props.theme.colors.whitish : 'none')};
122123
123124
&:hover {
124125
opacity: 0.8;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import React, { CSSProperties } from 'react';
66
export const Row: React.FC<{
77
className?: string;
88
style?: CSSProperties;
9-
}> = ({ children, className, style }) => {
9+
onClick?: () => void;
10+
}> = ({ children, className, style, onClick }) => {
1011
const cn: string[] = ['row'];
1112
className && cn.push(className);
1213
return (
13-
<div className={cn.join(' ')} style={style}>
14+
<div className={cn.join(' ')} style={style} onClick={onClick}>
1415
{children}
1516
</div>
1617
);

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

Lines changed: 60 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,71 @@
1-
import React, { ReactNode } from 'react';
2-
import { ReactComponent as ArrowRight } from 'assets/icons/arrow-right.svg';
3-
import { ReactComponent as Clock } from 'assets/icons/clock.svg';
4-
import { ReactComponent as Download } from 'assets/icons/download.svg';
1+
import { ReactComponent as ArrowLeftIcon } from 'assets/icons/arrow-left.svg';
2+
import { ReactComponent as ArrowRightIcon } from 'assets/icons/arrow-right.svg';
3+
import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
4+
import { ReactComponent as BoltIcon } from 'assets/icons/bolt.svg';
5+
import { ReactComponent as CheckIcon } from 'assets/icons/check.svg';
6+
import { ReactComponent as ChevronsIcon } from 'assets/icons/chevrons.svg';
7+
import { ReactComponent as ClockIcon } from 'assets/icons/clock.svg';
8+
import { ReactComponent as CloseIcon } from 'assets/icons/close.svg';
9+
import { ReactComponent as DotIcon } from 'assets/icons/dot.svg';
10+
import { ReactComponent as DownloadIcon } from 'assets/icons/download.svg';
11+
import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
12+
import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
13+
import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
14+
import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
515
import { styled } from 'components/theme';
616

7-
export { ReactComponent as ArrowLeft } from 'assets/icons/arrow-left.svg';
8-
export { ReactComponent as Bolt } from 'assets/icons/bolt.svg';
9-
export { ReactComponent as Bitcoin } from 'assets/icons/bitcoin.svg';
10-
export { ReactComponent as Check } from 'assets/icons/check.svg';
11-
export { ReactComponent as Chevrons } from 'assets/icons/chevrons.svg';
12-
export { ReactComponent as Close } from 'assets/icons/close.svg';
13-
export { ReactComponent as Dot } from 'assets/icons/dot.svg';
14-
export { ReactComponent as Menu } from 'assets/icons/menu.svg';
15-
export { ReactComponent as Minimize } from 'assets/icons/minimize.svg';
16-
export { ReactComponent as Maximize } from 'assets/icons/maximize.svg';
17-
export { ReactComponent as Refresh } from 'assets/icons/refresh-cw.svg';
18-
19-
interface IconComponents {
20-
'arrow-right': ReactNode;
21-
clock: ReactNode;
22-
download: ReactNode;
17+
interface IconProps {
18+
size?: 'small' | 'medium' | 'large';
19+
onClick?: () => void;
2320
}
2421

25-
const components: IconComponents = {
26-
'arrow-right': <ArrowRight />,
27-
clock: <Clock />,
28-
download: <Download />,
29-
};
22+
const Icon = styled.span<IconProps>`
23+
display: inline-block;
24+
padding: 6px;
3025
31-
const Styled = {
32-
Wrapper: styled.span`
33-
display: inline-block;
26+
${props =>
27+
props.onClick &&
28+
`
29+
border-radius: 36px;
3430
cursor: pointer;
35-
color: ${props => props.theme.colors.whitish};
36-
3731
&:hover {
38-
opacity: 80%;
32+
background-color: ${props.theme.colors.purple};
3933
}
40-
`,
41-
Label: styled.span`
42-
margin-left: 5px;
43-
`,
44-
};
34+
`}
4535
46-
interface Props {
47-
icon: keyof IconComponents;
48-
text?: string;
49-
onClick?: () => void;
50-
className?: string;
51-
}
36+
${props =>
37+
props.size === 'small' &&
38+
`
39+
width: 24px;
40+
height: 24px;
41+
`}
42+
43+
${props =>
44+
(props.size === 'medium' || !props.size) &&
45+
`
46+
width: 30px;
47+
height: 30px;
48+
`}
5249
53-
export const Icon: React.FC<Props> = ({ icon, text, onClick, className }) => {
54-
const { Wrapper, Label } = Styled;
50+
${props =>
51+
props.size === 'large' &&
52+
`
53+
width: 36px;
54+
height: 36px;
55+
`}
56+
`;
5557

56-
return (
57-
<Wrapper onClick={onClick} className={className}>
58-
{components[icon]}
59-
{text && <Label>{text}</Label>}
60-
</Wrapper>
61-
);
62-
};
58+
export const ArrowRight = Icon.withComponent(ArrowRightIcon);
59+
export const Clock = Icon.withComponent(ClockIcon);
60+
export const Download = Icon.withComponent(DownloadIcon);
61+
export const ArrowLeft = Icon.withComponent(ArrowLeftIcon);
62+
export const Bolt = Icon.withComponent(BoltIcon);
63+
export const Bitcoin = Icon.withComponent(BitcoinIcon);
64+
export const Check = Icon.withComponent(CheckIcon);
65+
export const Chevrons = Icon.withComponent(ChevronsIcon);
66+
export const Close = Icon.withComponent(CloseIcon);
67+
export const Dot = Icon.withComponent(DotIcon);
68+
export const Menu = Icon.withComponent(MenuIcon);
69+
export const Minimize = Icon.withComponent(MinimizeIcon);
70+
export const Maximize = Icon.withComponent(MaximizeIcon);
71+
export const Refresh = Icon.withComponent(RefreshIcon);

‎app/src/components/layout/Layout.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,17 @@ const Styled = {
1818
width: 100%;
1919
margin: 0 auto;
2020
`,
21-
MenuIcon: styled(Menu)`
21+
Hamburger: styled.span`
22+
display: inline-block;
2223
position: absolute;
2324
top: 20px;
2425
left: 20px;
2526
z-index: 1;
2627
cursor: pointer;
28+
29+
&:hover {
30+
opacity: 0.8;
31+
}
2732
`,
2833
Aside: styled.aside<CollapsedProps>`
2934
position: fixed;
@@ -52,11 +57,13 @@ const Styled = {
5257
const Layout: React.FC = ({ children }) => {
5358
const { settingsStore } = useStore();
5459

55-
const { Container, MenuIcon, Aside, Content } = Styled;
60+
const { Container, Hamburger, Aside, Content } = Styled;
5661
return (
5762
<Background>
5863
<Container>
59-
<MenuIcon title="menu" onClick={settingsStore.toggleSidebar} />
64+
<Hamburger onClick={settingsStore.toggleSidebar}>
65+
<Menu title="menu" />
66+
</Hamburger>
6067
<Aside collapsed={!settingsStore.sidebarVisible}>
6168
<Sidebar />
6269
</Aside>

‎app/src/components/loop/ChannelRow.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,22 @@ import ChannelBalance from './ChannelBalance';
2020
export const ROW_HEIGHT = 60;
2121

2222
const Styled = {
23-
Row: styled(Row)<{ dimmed?: boolean }>`
23+
Row: styled(Row)<{ dimmed?: boolean; selectable?: boolean }>`
2424
border-bottom: 0.5px solid ${props => props.theme.colors.darkGray};
2525
opacity: ${props => (props.dimmed ? '0.4' : '1')};
2626
2727
&:last-child {
2828
border-bottom-width: 0;
2929
}
30+
31+
${props =>
32+
props.selectable &&
33+
`
34+
&:hover {
35+
cursor: pointer;
36+
background-color: ${props.theme.colors.tileBack};
37+
}
38+
`}
3039
`,
3140
Column: styled(Column)<{ last?: boolean }>`
3241
overflow: hidden;
@@ -105,10 +114,15 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
105114

106115
const { Row, Column, StatusIcon, Check, Balance } = Styled;
107116
return (
108-
<Row dimmed={dimmed} style={style}>
117+
<Row
118+
dimmed={dimmed}
119+
style={style}
120+
selectable={editable && !disabled}
121+
onClick={editable && !disabled ? handleRowChecked : undefined}
122+
>
109123
<Column right>
110124
{editable ? (
111-
<Check checked={checked} disabled={disabled} onChange={handleRowChecked} />
125+
<Check checked={checked} disabled={disabled} />
112126
) : (
113127
<StatusIcon>
114128
<ChannelDot channel={channel} />

‎app/src/components/loop/LoopActions.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ const Styled = {
1818
background-color: ${props => props.theme.colors.darkBlue};
1919
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
2020
border-radius: 35px;
21+
22+
> button {
23+
margin-left: 10px;
24+
background-color: ${props => props.theme.colors.tileBack};
25+
}
2126
`,
2227
CloseIcon: styled(Close)`
23-
cursor: pointer;
24-
width: 16px;
25-
height: 16px;
2628
margin-right: 25px;
2729
`,
2830
Selected: styled.span`

0 commit comments

Comments
 (0)