Skip to content

Commit 66648b7

Browse files
thisconnectthisconnect
committed
Merge branch 'sidebar-show-connected'
2 parents d7186af + 0a4d41b commit 66648b7

File tree

8 files changed

+74
-27
lines changed

8 files changed

+74
-27
lines changed

‎frontends/web/src/components/badge/badge.module.css

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
.badge {
2-
padding: var(--space-eight) 10px;
32
border-radius: var(--space-half);
43
border: 1px solid;
4+
display: inline-block;
55
font-size: var(--size-small);
66
line-height: 14px;
7+
padding: var(--space-eight) 10px;
8+
white-space: nowrap;
9+
}
10+
11+
.badge.iconOnly {
12+
align-items: center;
13+
display: inline-flex;
14+
height: 18px;
15+
justify-content: center;
16+
padding: 0;
17+
width: 18px;
18+
}
19+
20+
.badgeIcon {
21+
max-width: 9px;
22+
}
23+
24+
.withChildren .badgeIcon {
25+
margin-right: var(--space-eight);
726
}
827

928
@media (max-width: 382px) {

‎frontends/web/src/components/badge/badge.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,31 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { ReactNode } from 'react';
17+
import { ReactElement, ReactNode } from 'react';
1818
import style from './badge.module.css';
1919

2020
type TBadgeStyles = 'success' | 'warning'; // TODO: not yet implemented 'info' | 'danger'
2121

2222
type TProps = {
23-
children: ReactNode;
23+
children?: ReactNode;
2424
type?: TBadgeStyles;
25-
}
25+
icon?: (props: { className: string }) => ReactElement;
26+
} & JSX.IntrinsicElements['span'];
2627

2728
export const Badge = ({
2829
children,
30+
className,
31+
icon,
2932
type = 'success',
33+
...props
3034
}: TProps) => {
35+
const withChildrenStyle = children !== undefined ? style.withChildren : '';
36+
const iconOnlyStyle = (children === undefined && icon) ? style.iconOnly : '';
3137
return (
32-
<span className={`${style.badge} ${style[type]}`}>
38+
<span
39+
className={`${style.badge} ${style[type]} ${withChildrenStyle} ${iconOnlyStyle} ${className || ''}`}
40+
{...props}>
41+
{icon && icon({ className: style.badgeIcon })}
3342
{children}
3443
</span>
3544
);

‎frontends/web/src/components/icon/assets/icons/usb-success.svg

Lines changed: 3 additions & 0 deletions
Loading

‎frontends/web/src/components/icon/icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import saveLightSVG from './assets/icons/save-light.svg';
6363
import starSVG from './assets/icons/star.svg';
6464
import starInactiveSVG from './assets/icons/star-inactive.svg';
6565
import selectedCheckLightSVG from './assets/icons/selected-check-light.svg';
66+
import usbSuccessSVG from './assets/icons/usb-success.svg';
6667
import style from './icon.module.css';
6768

6869
export const ExpandOpen = () => (
@@ -178,6 +179,7 @@ export const SaveLight = (props: ImgProps) => (<img src={saveLightSVG} draggable
178179
export const Star = (props: ImgProps) => (<img src={starSVG} draggable={false} {...props} />);
179180
export const StarInactive = (props: ImgProps) => (<img src={starInactiveSVG} draggable={false} {...props} />);
180181
export const SelectedCheckLight = (props: ImgProps) => (<img src={selectedCheckLightSVG} draggable={false} {...props} />);
182+
export const USBSuccess = (props: ImgProps) => (<img src={usbSuccessSVG} draggable={false} {...props} />);
181183
/**
182184
* @deprecated Alert is only used for BitBox01 use `Warning` icon instead
183185
*/

‎frontends/web/src/components/sidebar/sidebar.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@
8282
align-items: center;
8383
}
8484

85+
.sidebarPortfolio + .sidebarHeaderContainer {
86+
margin-top: 28px;
87+
}
88+
8589
.sidebarHeader {
8690
font-size: var(--sidebar-header-size);
8791
line-height: var(--sidebar-header-line-height);

‎frontends/web/src/components/sidebar/sidebar.tsx

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@ import { debug } from '../../utils/env';
3030
import { apiPost } from '../../utils/request';
3131
import Logo, { AppLogoInverted } from '../icon/logo';
3232
import { useLocation } from 'react-router';
33-
import { CloseXWhite } from '../icon';
33+
import { CloseXWhite, USBSuccess } from '../icon';
3434
import { getAccountsByKeystore, isAmbiguiousName, isBitcoinOnly } from '../../routes/account/utils';
3535
import { SkipForTesting } from '../../routes/device/components/skipfortesting';
3636
import { Store } from '../../decorators/store';
37+
import { Badge } from '../badge/badge';
3738
import style from './sidebar.module.css';
3839

3940
interface SidebarProps {
@@ -196,37 +197,47 @@ class Sidebar extends Component<Props> {
196197
</div>
197198

198199
{ accounts.length ? (
199-
<div className={style.sidebarItem}>
200+
<div className={`${style.sidebarItem} ${style.sidebarPortfolio}`}>
200201
<NavLink
201202
className={({ isActive }) => isActive ? style.sidebarActive : ''}
202203
to={'/account-summary'}
203204
title={t('accountSummary.title')}
204205
onClick={this.handleSidebarItemClick}>
205206
<div className={style.single}>
206-
<img draggable={false} src={info} alt={t('sidebar.addAccount')} />
207+
<img draggable={false} src={info} />
207208
</div>
208209
<span className={style.sidebarLabel}>{t('accountSummary.title')}</span>
209210
</NavLink>
210211
</div>
211212
) : null }
212213

213-
{
214-
accountsByKeystore.map(keystore => (<React.Fragment key={keystore.keystore.rootFingerprint}>
214+
{ accountsByKeystore.map(keystore => (
215+
<React.Fragment key={keystore.keystore.rootFingerprint}>
215216
<div className={style.sidebarHeaderContainer}>
216-
<span className={style.sidebarHeader} hidden={!keystore.accounts.length}>
217-
{t('sidebar.accounts')} - {keystore.keystore.name} {keystore.keystore.connected ? '- CONNECTED' : null}
218-
{ isAmbiguiousName(keystore.keystore.name, accountsByKeystore) ? (
219-
// Disambiguate accounts group by adding the fingerprint.
220-
// The most common case where this would happen is when adding accounts from the
221-
// same seed using different passphrases.
222-
<> ({keystore.keystore.rootFingerprint})</>
223-
) : null }
217+
<span
218+
className={style.sidebarHeader}
219+
hidden={!keystore.accounts.length}>
220+
<span className="p-right-quarter">
221+
{`${keystore.keystore.name} `}
222+
{ isAmbiguiousName(keystore.keystore.name, accountsByKeystore) ? (
223+
// Disambiguate accounts group by adding the fingerprint.
224+
// The most common case where this would happen is when adding accounts from the
225+
// same seed using different passphrases.
226+
<> ({keystore.keystore.rootFingerprint})</>
227+
) : null }
228+
</span>
229+
{keystore.keystore.connected ? (
230+
<Badge
231+
icon={props => <USBSuccess {...props} />}
232+
type="success"
233+
title={t('device.keystoreConnected')} />
234+
) : null}
224235
</span>
225236
</div>
226237

227238
{ keystore.accounts.map(acc => <GetAccountLink key={acc.code} {...acc} handleSidebarItemClick={this.handleSidebarItemClick }/>) }
228-
</React.Fragment>))
229-
}
239+
</React.Fragment>
240+
)) }
230241

231242
<div className={[style.sidebarHeaderContainer, style.end].join(' ')}></div>
232243
{ accounts.length ? (

‎frontends/web/src/locales/en/app.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,8 @@
499499
"toggle": "Dark mode"
500500
},
501501
"device": {
502-
"appUpradeRequired": "Your BitBox is not compatible with this desktop application. Please download and install the latest version."
502+
"appUpradeRequired": "Your BitBox is not compatible with this desktop application. Please download and install the latest version.",
503+
"keystoreConnected": "Connected wallet"
503504
},
504505
"deviceLock": {
505506
"button": "Enable two factor authorization (2FA)",
@@ -1495,8 +1496,6 @@
14951496
},
14961497
"setup": "Setup device",
14971498
"sidebar": {
1498-
"accounts": "Accounts",
1499-
"addAccount": "Add account",
15001499
"buy": "Buy crypto",
15011500
"device": "Manage device",
15021501
"leave": "Leave",

‎frontends/web/src/style/variables.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
/* colors */
33
--color-darkgreen: #4f9879;
44
--color-green: #7aba7a;
5-
--color-lightgreen: #aecfc1;
6-
--color-palegreen: #dceae4;
5+
--color-lightgreen: rgba(79, 152, 121, .33); /* #aecfc1; */
6+
--color-palegreen: rgba(79, 152, 121, .2); /* #dceae4; */
77
--color-softred: #EC644B;
88
--color-lightred: #F28E72;
99
--color-swissred: #E30613;
@@ -15,8 +15,8 @@
1515
--color-softblack: #333333;
1616
--color-dark: #1D1D1B;
1717
--color-yellow: #fef160;
18-
--color-darkyellow: #F3EA00;
19-
--color-lightyellow: #FFFCB1;
18+
--color-darkyellow: rgb(243, 234, 0, .66); /* #F3EA00 */
19+
--color-lightyellow: rgba(255, 252, 177, .15); /* #FFFCB1 */
2020
--color-darkblue: #4f7998;
2121
--color-blue: #5E94BF;
2222
--color-lightblue: #73A5CD;

0 commit comments

Comments
 (0)