diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index e37b515960..0556a73e0c 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -3,7 +3,6 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { BareProps } from '@polkadot/ui-app/types'; -import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD } from './constants'; // this is disabled, Chrome + WASM memory leak makes it slow & laggy. If enabled // we also need to export the default as hot(Apps) (last line) @@ -11,17 +10,17 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD import React from 'react'; import store from 'store'; -import { ThemeProvider } from 'styled-components'; +import styled, { ThemeProvider } from 'styled-components'; +import { media } from '@polkadot/ui-app'; import Signer from '@polkadot/ui-signer'; import settings from '@polkadot/ui-settings'; import ConnectingOverlay from './overlays/Connecting'; import AccountsOverlay from './overlays/Accounts'; +import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD } from './constants'; import Content from './Content'; import SideBar from './SideBar'; -import { Wrapper } from './styles'; - type Props = BareProps & {}; type State = { @@ -31,7 +30,23 @@ type State = { transition: SideBarTransition }; -class Apps extends React.Component { +const Wrapper = styled.div` + align-items: stretch; + box-sizing: border-box; + display: flex; + min-height: 100vh; + + header { + margin-bottom: 1.4rem; + text-align: center; + + ${media.TABLET` + margin-bottom: 2rem; + `} + } +`; + +export default class Apps extends React.Component { state: State; constructor (props: Props) { @@ -178,5 +193,3 @@ class Apps extends React.Component { } } } - -export default Apps; diff --git a/packages/apps/src/TopBar.tsx b/packages/apps/src/TopBar.tsx index 1f451dc253..ff78bd5056 100644 --- a/packages/apps/src/TopBar.tsx +++ b/packages/apps/src/TopBar.tsx @@ -5,17 +5,19 @@ // Unused atm, experiment as a replacement for NodeInfo on the SideBar import React from 'react'; - +import styled from 'styled-components'; import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive'; -import { TopBar as Wrapper } from './styles'; +type Props = { + className?: string +}; -type Props = {}; - -export default class TopBar extends React.PureComponent { +class TopBar extends React.PureComponent { render () { + const { className } = this.props; + return ( - +
  @@ -24,7 +26,35 @@ export default class TopBar extends React.PureComponent {  
- +
); } } + +export default styled(TopBar)` + background: #f2f2f2; + font-size: 0.85rem; + line-height: 1rem; + overflow: hidden; + padding: 0.5rem 1rem; + position: fixed; + right: 0; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + top: 0; + + div { + display: inline-block; + vertical-align: middle; + } + + > div { + border-left: 1px solid #ccc; + padding: 0 0.5rem; + + &:first-child { + border-width: 0; + } + } +`; diff --git a/packages/apps/src/overlays/Accounts.tsx b/packages/apps/src/overlays/Accounts.tsx index 8828d428b2..2d39623342 100644 --- a/packages/apps/src/overlays/Accounts.tsx +++ b/packages/apps/src/overlays/Accounts.tsx @@ -9,27 +9,26 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types'; import React from 'react'; import { Trans } from 'react-i18next'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; import { withApi, withMulti, withObservable } from '@polkadot/ui-api'; -import { Icon } from '@polkadot/ui-app'; import accountObservable from '@polkadot/ui-keyring/observable/accounts'; -import { Accounts as Wrapper, OverlayClose } from '../styles'; - import translate from '../translate'; +import BaseOverlay from './Base'; type Props = I18nProps & ApiProps & { allAccounts?: SubjectInfo }; type State = { - isDismissed: boolean, - hasAccounts: boolean + hasAccounts: boolean, + isHidden: boolean }; class Accounts extends React.PureComponent { state: State = { - isDismissed: false, - hasAccounts: false + hasAccounts: false, + isHidden: false }; static getDerivedStateFromProps ({ allAccounts }: Props, prevState: State): State | null { @@ -49,42 +48,43 @@ class Accounts extends React.PureComponent { } render () { - const { isApiReady } = this.props; - const { isDismissed, hasAccounts } = this.state; + const { isApiReady, className, t } = this.props; + const { hasAccounts, isHidden } = this.state; - if (!isApiReady || isDismissed || hasAccounts) { + if (!isApiReady || hasAccounts || isHidden) { return null; } return ( - + - You have no accounts. Some features are currently hidden and will only become available once you have accounts. + You don't have any accounts. Some features are currently hidden and will only become available once you have accounts. {' '} - Create an account now. + {t('Create an account now.')} - - - - + ); } - private dismiss = () => { - this.setState({ isDismissed: true }); + private onClose = () => { + this.setState({ isHidden: true }); } } export default withMulti( - Accounts, + styled(Accounts as any)` + background: #fff6cb; + border-color: #e7c000; + color: #6b5900; + `, translate, withApi, withObservable(accountObservable.subject, { propName: 'allAccounts' }) diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx new file mode 100644 index 0000000000..df4abac3a3 --- /dev/null +++ b/packages/apps/src/overlays/Base.tsx @@ -0,0 +1,95 @@ +// Copyright 2017-2019 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React from 'react'; +import styled from 'styled-components'; +import { Icon } from '@polkadot/ui-app'; + +type Props = { + children: React.ReactNode, + className?: string, + icon: string +}; + +type State = { + isHidden: boolean +}; + +class BaseOverlay extends React.PureComponent { + state: State = { + isHidden: false + }; + + render () { + const { children, className, icon } = this.props; + const { isHidden } = this.state; + + if (isHidden) { + return null; + } + + return ( +
+
+ +
+ {children} +
+ +
+
+ ); + } + + private onClose = () => { + this.setState({ isHidden: true }); + } +} + +export default styled(BaseOverlay)` + border-bottom: 1px solid transparent; + left: 0; + line-height: 1.5em; + padding: 0 2rem; + position: fixed; + right: 0; + top: 0; + z-index: 500; + + .content { + display: flex; + margin: 0 auto; + max-width: 50rem; + padding: 1em 2rem; + position: relative; + + .contentIcon { + flex: 0; + } + + .contentItem { + flex: 1; + padding: 0 1rem; + + > div+div { + margin-top: 0.5rem; + } + } + } + + .closeIcon { + cursor: pointer; + position: absolute; + right: 0.75em; + top: 0.75em; + } +`; diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx index 065df037e4..ac43113e60 100644 --- a/packages/apps/src/overlays/Connecting.tsx +++ b/packages/apps/src/overlays/Connecting.tsx @@ -6,12 +6,12 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { ApiProps } from '@polkadot/ui-api/types'; import React from 'react'; +import styled from 'styled-components'; import { withApi, withMulti } from '@polkadot/ui-api'; import settings from '@polkadot/ui-settings'; -import { Connecting as Wrapper } from '../styles'; - import translate from '../translate'; +import BaseOverlay from './Base'; type Props = I18nProps & ApiProps; // @ts-ignore @@ -23,21 +23,24 @@ class Connecting extends React.PureComponent { } private renderExtension () { - const { isWaitingInjected, t } = this.props; + const { className, isWaitingInjected, t } = this.props; if (!isWaitingInjected) { return null; } return ( - +
{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}
- + ); } private renderConnecting () { - const { isApiConnected, t } = this.props; + const { className, isApiConnected, t } = this.props; if (isApiConnected) { return null; @@ -49,7 +52,10 @@ class Connecting extends React.PureComponent { const isHttps = window.location.protocol.indexOf('https:') === 0; return ( - +
{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}
{ isFirefox && isWs @@ -61,13 +67,17 @@ class Connecting extends React.PureComponent { ?
{t(`You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure 'wss' endpoint.`, { replace: { wsUrl } })}
: undefined } - + ); } } export default withMulti( - Connecting, + styled(Connecting)` + background: #ffe6e6; + border-color: #c00; + color: #4d0000; + `, translate, withApi ); diff --git a/packages/apps/src/styles.ts b/packages/apps/src/styles.ts deleted file mode 100644 index 720d7c1e19..0000000000 --- a/packages/apps/src/styles.ts +++ /dev/null @@ -1,78 +0,0 @@ -// Copyright 2017-2019 @polkadot/apps authors & contributors -// This software may be modified and distributed under the terms -// of the Apache-2.0 license. See the LICENSE file for details. - -import styled from 'styled-components'; -import { media } from '@polkadot/ui-app'; - -export const Wrapper = styled.div` - align-items: stretch; - box-sizing: border-box; - display: flex; - min-height: 100vh; - - header { - margin-bottom: 1.4rem; - text-align: center; - - ${media.TABLET` - margin-bottom: 2rem; - `} - } -`; - -export const TopBar = styled.div` - background: #f2f2f2; - font-size: 0.85rem; - line-height: 1rem; - overflow: hidden; - padding: 0.5rem 1rem; - position: fixed; - right: 0; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - top: 0; - - div { - display: inline-block; - vertical-align: middle; - } - - > div { - border-left: 1px solid #ccc; - padding: 0 0.5rem; - - &:first-child { - border-width: 0; - } - } -`; - -export const Overlay = styled.div` - bottom: 0; - left: 0; - line-height: 1.5em; - padding: 1em 5em; - position: fixed; - right: 0; - text-align: center; - z-index: 500; -`; - -export const OverlayClose = styled.div` - cursor: pointer; - position: absolute; - right: 1em; - top: 1em; -`; - -export const Connecting = styled(Overlay)` - background: red; - color: white; - opacity: 0.9; -`; - -export const Accounts = styled(Overlay)` - background: #FFFACD; -`;