From 6a39a69afeed7b0737cff70b4d3314e668b67308 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 15:01:11 -0700 Subject: Added Circle component --- packages/website/ts/components/ui/circle.tsx | 16 ++++++++++++++++ packages/website/ts/components/ui/identicon.tsx | 5 ++--- 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 packages/website/ts/components/ui/circle.tsx (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx new file mode 100644 index 000000000..75103d066 --- /dev/null +++ b/packages/website/ts/components/ui/circle.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface CircleProps { + className?: string; + diameter: number; + fillColor: string; +} + +export const Circle: React.StatelessComponent = ({ className, diameter, fillColor }) => { + const radius = diameter / 2; + return ( + + + + ); +}; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index cc1655962..d8036f0c1 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -2,6 +2,7 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; import { Image } from 'ts/components/ui/image'; import { colors } from 'ts/style/colors'; @@ -40,9 +41,7 @@ export class Identicon extends React.Component { width={diameter} /> ) : ( - - - + )} ); -- cgit v1.2.3 From f76c9bc2263b81ab895d3ddec1afa2c3f901b32a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 15:01:20 -0700 Subject: Implement loading body rows --- packages/website/ts/components/ui/container.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index a747ef01f..2abcc00f6 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { borderRadius?: StringOrNum; maxWidth?: StringOrNum; width?: StringOrNum; + height?: StringOrNum; minHeight?: StringOrNum; isHidden?: boolean; className?: string; -- cgit v1.2.3 From 7ee37fb62af7014f8a2aae435458302887781be0 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:17:58 -0700 Subject: Implement new locked and uninstalled states --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 3 +++ 2 files changed, 4 insertions(+) (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 2abcc00f6..fb718d731 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -14,6 +14,7 @@ export interface ContainerProps { backgroundColor?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; + maxHeight?: StringOrNum; width?: StringOrNum; height?: StringOrNum; minHeight?: StringOrNum; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 1e2a123b7..88f216d4e 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -15,6 +15,7 @@ export interface TextProps { minHeight?: string; center?: boolean; fontWeight?: number | string; + textDecorationLine?: string; onClick?: () => void; } @@ -28,6 +29,7 @@ export const Text = styled(PlainText)` font-family: ${props => props.fontFamily}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; @@ -45,6 +47,7 @@ Text.defaultProps = { fontColor: colors.black, fontSize: '15px', lineHeight: '1.5em', + textDecorationLine: 'none', Tag: 'div', }; -- cgit v1.2.3 From 08f7666d210317d8caaca72f5a81c860478a2387 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:24:57 -0700 Subject: Create AccountConnection component --- .../ts/components/ui/account_connection.tsx | 40 ++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/website/ts/components/ui/account_connection.tsx (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx new file mode 100644 index 000000000..0f61ecde4 --- /dev/null +++ b/packages/website/ts/components/ui/account_connection.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; + +import { Circle } from 'ts/components/ui/circle'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { AccountState } from 'ts/types'; + +export interface AccountConnectionProps { + accountState: AccountState; + injectedProviderName: string; +} + +export const AccountConnection: React.StatelessComponent = ({ + accountState, + injectedProviderName, +}) => { + return ( + + + + + {injectedProviderName} + + + + ); +}; + +function getInjectedProviderColor(accountState: AccountState): string { + switch (accountState) { + case AccountState.Ready: + return colors.limeGreen; + case AccountState.Locked: + case AccountState.Loading: + case AccountState.Disconnected: + default: + return colors.red; + } +} -- cgit v1.2.3 From 2b5f45676f4c8e478b9de82a6313eb727d8845ff Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 01:07:50 -0700 Subject: Remove unused imports and variables --- packages/website/ts/components/ui/identicon.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index d8036f0c1..b5b374973 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -21,7 +21,6 @@ export class Identicon extends React.Component { public render(): React.ReactNode { const address = this.props.address; const diameter = this.props.diameter; - const radius = diameter / 2; return (
Date: Fri, 29 Jun 2018 11:56:31 -0700 Subject: Change function to a const --- packages/website/ts/components/ui/account_connection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components/ui') diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx index 0f61ecde4..6d0b90922 100644 --- a/packages/website/ts/components/ui/account_connection.tsx +++ b/packages/website/ts/components/ui/account_connection.tsx @@ -27,7 +27,7 @@ export const AccountConnection: React.StatelessComponent ); }; -function getInjectedProviderColor(accountState: AccountState): string { +const getInjectedProviderColor = (accountState: AccountState) => { switch (accountState) { case AccountState.Ready: return colors.limeGreen; @@ -37,4 +37,4 @@ function getInjectedProviderColor(accountState: AccountState): string { default: return colors.red; } -} +}; -- cgit v1.2.3