aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/top_bar
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-01-29 17:44:30 +0800
committerFabio Berger <me@fabioberger.com>2018-01-29 17:44:30 +0800
commit3c3f9ca85b1429821138840b6074503e58fab7e1 (patch)
tree09af836fd9b4603d5ead775a82e29073d9b9c9a0 /packages/website/ts/components/top_bar
parent005a02efeb5ac874e1c1a4dd6679bfa3cc21b1b1 (diff)
downloaddexon-0x-contracts-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.gz
dexon-0x-contracts-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.zst
dexon-0x-contracts-3c3f9ca85b1429821138840b6074503e58fab7e1.zip
Add network name to the select provider
Diffstat (limited to 'packages/website/ts/components/top_bar')
-rw-r--r--packages/website/ts/components/top_bar/provider_picker.tsx27
1 files changed, 15 insertions, 12 deletions
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index 418f8696b..4dc8ff0bd 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/packages/website/ts/components/top_bar/provider_picker.tsx
@@ -34,12 +34,6 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
paddingTop: 15,
paddingBottom: 15,
};
- const injectedLabel = (
- <div className="flex">
- <div>{this.props.injectedProviderName}</div>
- {this._renderNetwork()}
- </div>
- );
// Show dropdown with two options
return (
<div style={{ width: 225, overflow: 'hidden' }}>
@@ -51,29 +45,38 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
<RadioButton
style={{ ...menuStyle, backgroundColor: !isLedgerSelected && SELECTED_BG_COLOR }}
value={ProviderType.Injected}
- label={injectedLabel}
+ label={this._renderLabel(this.props.injectedProviderName, !isLedgerSelected)}
/>
<RadioButton
style={{ ...menuStyle, backgroundColor: isLedgerSelected && SELECTED_BG_COLOR }}
value={ProviderType.Ledger}
- label="Ledger Nano S"
+ label={this._renderLabel('Ledger Nano S', isLedgerSelected)}
/>
</RadioButtonGroup>
</div>
);
}
+ private _renderLabel(title: string, shouldShowNetwork: boolean) {
+ const label = (
+ <div className="flex">
+ <div style={{ fontSize: 14 }}>{title}</div>
+ {shouldShowNetwork && this._renderNetwork()}
+ </div>
+ );
+ return label;
+ }
private _renderNetwork() {
const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
return (
- <div className="flex">
- <div className="pr1 relative" style={{ width: 14, paddingLeft: 14 }}>
+ <div className="flex" style={{ marginTop: 1 }}>
+ <div className="relative" style={{ width: 14, paddingLeft: 14 }}>
<img
src={`/images/network_icons/${networkName.toLowerCase()}.png`}
className="absolute"
- style={{ top: 4, width: 14 }}
+ style={{ top: 6, width: 10 }}
/>
</div>
- <div style={{ color: '#BBBBBB' }}>{networkName}</div>
+ <div style={{ color: '#BBBBBB', fontSize: 11 }}>{networkName}</div>
</div>
);
}