Small overlay adjustments (#1261)

* Small overlay adjustments * Adjust radius * Remove unneeded any * Remove apps/tyles.ts * Adjust styles, always with close
2019-06-02 16:29:55 +02:00 · 2019-06-02 16:29:55 +02:00 · c9f023c1a2
commit c9f023c1a2
parent 783ca2c5c0
6 changed files with 195 additions and 125 deletions
--- 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<Props, State> {
+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<Props, State> {
  state: State;

  constructor (props: Props) {
@ -178,5 +193,3 @@ class Apps extends React.Component<Props, State> {
    }
  }
 }
-
-export default Apps;
--- 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<Props> {
+class TopBar extends React.PureComponent<Props> {
  render () {
+    const { className } = this.props;
+
    return (
-      <Wrapper>
+      <div className={className}>
        <div>
          <NodeName />&nbsp;
          <NodeVersion label='v' />
@ -24,7 +26,35 @@ export default class TopBar extends React.PureComponent<Props> {
          <Chain />&nbsp;
          <BestNumber label='#' />
        </div>
-      </Wrapper>
+      </div>
    );
  }
 }
+
+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;
+    }
+  }
+`;
--- 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<Props, State> {
  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<Props, State> {
  }

  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 (
-      <Wrapper>
+      <BaseOverlay
+        className={className}
+        icon='users'
+      >
        <Trans i18nKey='noAccounts'>
-          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.
          {' '}
          <Link
            to ='/accounts'
-            onClick={this.dismiss}
+            onClick={this.onClose}
          >
-            Create an account now.
+            {t('Create an account now.')}
          </Link>
        </Trans>
-        <OverlayClose>
-          <Icon
-            name='close'
-            onClick={this.dismiss}
-          />
-        </OverlayClose>
-      </Wrapper>
+      </BaseOverlay>
    );
  }

-  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' })
--- a/packages/apps/src/overlays/Base.tsx
+++ 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<Props, State> {
+  state: State = {
+    isHidden: false
+  };
+
+  render () {
+    const { children, className, icon } = this.props;
+    const { isHidden } = this.state;
+
+    if (isHidden) {
+      return null;
+    }
+
+    return (
+      <div className={className}>
+        <div className='content'>
+          <Icon
+            className='contentIcon'
+            name={icon as any}
+            size='big'
+          />
+          <div className='contentItem'>
+            {children}
+          </div>
+          <Icon
+            className='closeIcon'
+            name='close'
+            onClick={this.onClose}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  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;
+  }
+`;
--- 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<Props> {
  }

  private renderExtension () {
-    const { isWaitingInjected, t } = this.props;
+    const { className, isWaitingInjected, t } = this.props;

    if (!isWaitingInjected) {
      return null;
    }

    return (
-      <Wrapper>
+      <BaseOverlay
+        className={className}
+        icon='puzzle'
+      >
        <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
-      </Wrapper>
+      </BaseOverlay>
    );
  }

  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<Props> {
    const isHttps = window.location.protocol.indexOf('https:') === 0;

    return (
-      <Wrapper>
+      <BaseOverlay
+        className={className}
+        icon='globe'
+      >
        <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
        {
          isFirefox && isWs
@ -61,13 +67,17 @@ class Connecting extends React.PureComponent<Props> {
            ? <div>{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 } })}</div>
            : undefined
        }
-      </Wrapper>
+      </BaseOverlay>
    );
  }
 }

 export default withMulti(
-  Connecting,
+  styled(Connecting)`
+    background: #ffe6e6;
+    border-color: #c00;
+    color: #4d0000;
+  `,
  translate,
  withApi
 );
--- a/packages/apps/src/styles.ts
+++ b/packages/apps/src/styles.ts
@ -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;
-`;