smaller switch in settings, add show all

src/actions/LocalStorageActions.js

@@ -380,6 +380,8 @@ export const handleCoinVisibility = (
     });
 };
 
+// export const handleAllCoinsVisibility => ();
+
 export const getHiddenCoins = (): Array<string> => {
     const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS);
     if (coinsConfig) {

src/views/Wallet/views/WalletSettings/Container.js

@@ -23,6 +23,7 @@ type DispatchProps = {|
     setLocalCurrency: typeof WalletActions.setLocalCurrency,
     setHideBalance: typeof WalletActions.setHideBalance,
     handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
+    // handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility,
 |};
 
 export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
@@ -37,6 +38,10 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
     setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
     setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
     handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch),
+    // handleAllCoinsVisibility: bindActionCreators(
+    //     LocalStorageActions.handleAllCoinsVisibility,
+    //     dispatch
+    // ),
 });
 
 export default injectIntl<OwnProps>(

src/views/Wallet/views/WalletSettings/components/Coins/index.js

@@ -35,6 +35,7 @@ const Content = styled.div`
 const Label = styled.div`
     display: flex;
     padding: 10px 0;
+    justify-content: space-between;
     color: ${colors.TEXT_SECONDARY};
     align-items: center;
 `;
@@ -66,7 +67,10 @@ const Left = styled.div`
     align-items: center;
 `;
 
-const Right = styled.div``;
+const Right = styled.div`
+    display: flex;
+    align-items: center;
+`;
 
 const Name = styled.div`
     display: flex;
@@ -86,14 +90,23 @@ const CoinsSettings = (props: Props) => (
         <Row>
             <Content>
                 <Label>
-                    <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
+                    <Left>
-                    <Tooltip
+                        <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
-                        content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
+                        <Tooltip
-                        maxWidth={210}
+                            content={
-                        placement="right"
+                                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
-                    >
+                            }
-                        <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
+                            maxWidth={210}
-                    </Tooltip>
+                            placement="right"
+                        >
+                            <TooltipIcon
+                                icon={ICONS.HELP}
+                                color={colors.TEXT_SECONDARY}
+                                size={12}
+                            />
+                        </Tooltip>
+                    </Left>
+                    <Right>Show all</Right>
                 </Label>
                 {props.networks
                     .filter(network => !network.isHidden)
@@ -107,6 +120,11 @@ const CoinsSettings = (props: Props) => (
                             </Left>
                             <Right>
                                 <Switch
+                                    width={36}
+                                    height={18}
+                                    handleDiameter={14}
+                                    checkedIcon={false}
+                                    uncheckedIcon={false}
                                     onChange={visible => {
                                         props.handleCoinVisibility(network.shortcut, visible);
                                     }}
@@ -118,14 +136,23 @@ const CoinsSettings = (props: Props) => (
             </Content>
             <Content>
                 <Label>
-                    <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
+                    <Left>
-                    <Tooltip
+                        <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
-                        content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
+                        <Tooltip
-                        maxWidth={210}
+                            content={
-                        placement="right"
+                                <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
-                    >
+                            }
-                        <TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
+                            maxWidth={210}
-                    </Tooltip>
+                            placement="right"
+                        >
+                            <TooltipIcon
+                                icon={ICONS.HELP}
+                                color={colors.TEXT_SECONDARY}
+                                size={12}
+                            />
+                        </Tooltip>
+                    </Left>
+                    <Right>Show all</Right>
                 </Label>
                 {coins
                     .sort((a, b) => a.order - b.order)
@@ -139,6 +166,11 @@ const CoinsSettings = (props: Props) => (
                             </Left>
                             <Right>
                                 <Switch
+                                    width={36}
+                                    height={18}
+                                    handleDiameter={14}
+                                    checkedIcon={false}
+                                    uncheckedIcon={false}
                                     onChange={visible => {
                                         props.handleCoinVisibility(network.id, visible);
                                     }}

src/views/Wallet/views/WalletSettings/index.js

@@ -103,6 +103,11 @@ const WalletSettings = (props: Props) => (
                     </Tooltip>
                 </Label>
                 <Switch
+                    width={36}
+                    height={18}
+                    handleDiameter={14}
+                    checkedIcon={false}
+                    uncheckedIcon={false}
                     onChange={checked => {
                         props.setHideBalance(checked);
                     }}