arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

Styled bridge page better

Browse Source
pull/147/head
Vladimir Volek 6 years ago committed by Szymon Lesisz
parent 2831b7d254
commit 29e5dc2314
4 changed files with 107 additions and 63 deletions
Show Stats Download Patch File Download Diff File

7
src/components/Heading/index.js
Unescape View File

@ -6,13 +6,14 @@ const baseStyles = css`
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
font-weight: bold; font-weight: bold;
padding: 0;
margin: 0; margin: 0;
padding: 0;
`; `;
const H1 = styled.h1` const H1 = styled.h1`
${baseStyles}; ${baseStyles};
font-size: 18px; font-size: 18px;
padding-bottom: 10px;
`; `;
const H2 = styled.h2` const H2 = styled.h2`
@ -23,16 +24,20 @@ const H2 = styled.h2`
font-size: 36px; font-size: 36px;
padding-bottom: 24px padding-bottom: 24px
`} `}
padding-bottom: 10px;
`; `;
const H3 = styled.h3` const H3 = styled.h3`
${baseStyles}; ${baseStyles};
font-size: 14px; font-size: 14px;
border: 1px solid red;
margin-bottom: 10px;
`; `;
const H4 = styled.h4` const H4 = styled.h4`
${baseStyles}; ${baseStyles};
font-size: 12px; font-size: 12px;
padding-bottom: 10px;
`; `;
export { export {

1
src/components/Paragraph/index.js
Unescape View File

@ -9,6 +9,7 @@ const Wrapper = styled.p`
line-height: ${LINE_HEIGHT.BASE}; line-height: ${LINE_HEIGHT.BASE};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
padding: 0; padding: 0;
margin: 0;
${props => props.isSmaller && css` ${props => props.isSmaller && css`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};

158
src/views/Landing/components/InstallBridge/index.js
Unescape View File

@ -3,9 +3,11 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import PropTypes from 'prop-types';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { Select } from 'components/Select'; import { Select } from 'components/Select';
import Link from 'components/Link'; import Link from 'components/Link';
import { H1 } from 'components/Heading';
import Button from 'components/Button'; import Button from 'components/Button';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
@ -30,26 +32,39 @@ type State = {
} }
type Props = { type Props = {
selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice,
transport: $ElementType<TrezorConnectState, 'transport'>; transport: $ElementType<TrezorConnectState, 'transport'>;
} }
const InstallBridgeWrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-top: 0px; align-items: center;
max-width: 500px; max-width: 500px;
`; `;
const TitleHeader = styled.h3` const Top = styled.div`
font-size: ${FONT_SIZE.BIGGEST};
display: flex; display: flex;
flex-direction: column;
justify-content: center;
max-width: 500px;
flex: 1;
padding-top: 30px;
`;
const Bottom = styled.div`
padding-bottom: 20px;
`;
const TitleHeader = styled(H1)`
display: flex;
font-size: ${FONT_SIZE.BIGGEST};
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 24px;
`; `;
const BridgeVersion = styled.span` const Version = styled.span`
color: ${colors.GREEN_PRIMARY}; color: ${colors.GREEN_PRIMARY};
padding: 6px 10px; padding: 6px 10px;
border: 1px solid ${colors.GREEN_PRIMARY}; border: 1px solid ${colors.GREEN_PRIMARY};
@ -68,7 +83,7 @@ const SelectWrapper = styled(Select)`
width: 180px; width: 180px;
`; `;
const DownloadBridgeWrapper = styled.div` const Download = styled.div`
margin: 24px auto; margin: 24px auto;
display: flex; display: flex;
align-items: center; align-items: center;
@ -81,7 +96,29 @@ const DownloadBridgeButton = styled(Button)`
align-items: center; align-items: center;
`; `;
export default class InstallBridge extends Component<Props, State> { const GoBack = styled.span`
color: ${colors.GREEN_PRIMARY};
text-decoration: underline;
&:hover {
cursor: pointer;
text-decoration: none;
}
`;
const Ol = styled.ul`
margin: 0 auto;
color: ${colors.TEXT_SECONDARY};
font-size: ${FONT_SIZE.BASE};
padding: 10px 0 15px 25px;
text-align: left;
`;
const Li = styled.li`
text-align: justify;
`;
class InstallBridge extends Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -113,67 +150,68 @@ export default class InstallBridge extends Component<Props, State> {
if (!target) { if (!target) {
return <Loader text="Loading" size={100} />; return <Loader text="Loading" size={100} />;
} }
const changelog = this.props.transport.bridge.changelog.map(entry => (
<li key={entry}>{entry}</li>
));
const url = `${this.state.uri}${target.value}`;
return ( return (
<InstallBridgeWrapper> <Wrapper>
<TitleHeader>TREZOR Bridge.<BridgeVersion>{this.state.currentVersion}</BridgeVersion></TitleHeader> <Top>
<P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P> <TitleHeader>TREZOR Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
<DownloadBridgeWrapper> <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
<SelectWrapper <Download>
isSearchable={false} <SelectWrapper
isClearable={false} isSearchable={false}
value={target} isClearable={false}
onChange={v => this.onChange(v)} value={target}
options={this.state.installers} onChange={v => this.onChange(v)}
/> options={this.state.installers}
<Link href={url}> />
<DownloadBridgeButton> <Link href={`${this.state.uri}${target.value}`}>
<Icon <DownloadBridgeButton>
icon={ICONS.DOWNLOAD} <Icon
color={colors.WHITE} icon={ICONS.DOWNLOAD}
size={30} color={colors.WHITE}
/> size={30}
/>
Download latest Bridge {this.state.latestVersion} Download latest Bridge {this.state.latestVersion}
</DownloadBridgeButton> </DownloadBridgeButton>
</Link> </Link>
</DownloadBridgeWrapper> </Download>
{target.signature && ( <Ol>
<P> {this.props.transport.bridge.changelog.map(entry => (
<Li key={entry}>{entry}</Li>
))}
</Ol>
<P isSmaller>
<LearnMoreText>Learn more about latest versions in</LearnMoreText>
<Link <Link
href={this.state.uri + target.signature} href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
isGreen isGreen
>Check PGP signature >Changelog
</Link> </Link>
</P> </P>
)} <P>
<P> {target.signature && (
{ changelog } <Link
<LearnMoreText>Learn more about latest versions in</LearnMoreText> href={this.state.uri + target.signature}
<Link target="_blank"
href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md" rel="noreferrer noopener"
target="_blank" isGreen
rel="noreferrer noopener" >Check PGP signature
isGreen </Link>
>Changelog )}
</Link> </P>
</P> </Top>
{this.props.transport.type && ( <Bottom>
<React.Fragment> {this.props.transport.type && (
<P>
No, i dont want to upgrade Bridge now,
</P>
<P> <P>
Take me <Link href="#/">back to the wallet</Link> No, i dont want to upgrade Bridge now<br />
Take me <GoBack onClick={() => this.props.selectFirstAvailableDevice()}>back to the wallet</GoBack>
</P> </P>
</React.Fragment> )}
)} </Bottom>
</InstallBridgeWrapper> </Wrapper>
); );
} }
} }
export default InstallBridge;

4
src/views/Landing/index.js
Unescape View File

@ -36,7 +36,6 @@ const LandingWrapper = styled.div`
const LandingContent = styled.div` const LandingContent = styled.div`
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
`; `;
@ -85,6 +84,7 @@ export default (props: Props) => {
const shouldShowUnsupportedBrowser = browserState.supported === false; const shouldShowUnsupportedBrowser = browserState.supported === false;
const isLoading = !shouldShowInitializationError && !shouldShowInstallBridge && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser && !localStorageError; const isLoading = !shouldShowInitializationError && !shouldShowInstallBridge && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser && !localStorageError;
return ( return (
<LandingWrapper> <LandingWrapper>
{isLoading && <LandingLoader text="Loading" size={100} />} {isLoading && <LandingLoader text="Loading" size={100} />}
@ -103,7 +103,7 @@ export default (props: Props) => {
<Log /> <Log />
<LandingContent> <LandingContent>
{shouldShowUnsupportedBrowser && <BrowserNotSupported />} {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
{shouldShowInstallBridge && <InstallBridge transport={transport} />} {shouldShowInstallBridge && <InstallBridge selectFirstAvailableDevice={props.selectFirstAvailableDevice} transport={transport} />}
{(shouldShowConnectDevice || shouldShowDisconnectDevice) && ( {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
<div> <div>

Write Preview
Loading…
Cancel
Save