Merge pull request #2319 from Emurgo/redesign-top-navbar

Redesign top navbar

packages/yoroi-extension/app/components/layout/TopBarLayout.js

@@ -1,9 +1,10 @@
 // @flow
 import React, { Component } from 'react';
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import styles from './TopBarLayout.scss';
+import { withLayout } from '../../themes/context/layout';
 
 type Props = {|
   +banner?: Node,
@@ -17,9 +18,10 @@ type Props = {|
   +showAsCard?: boolean,
 |};
 
+type InjectedProps = {| isRevampLayout: boolean |};
 /** Adds a top bar above the wrapped node */
 @observer
-export default class TopBarLayout extends Component<Props> {
+class TopBarLayout extends Component<Props & InjectedProps> {
   static defaultProps: {|
     banner: void,
     children: void,
@@ -82,10 +84,12 @@ export default class TopBarLayout extends Component<Props> {
     );
   }
 
-  optionallyWrapInContainer: Node => Node = (content) => {
-    const { showInContainer } = this.props;
+  optionallyWrapInContainer: Node => Node = content => {
+    const { showInContainer, isRevampLayout } = this.props;
     if (showInContainer === true) {
-      return (
+      return isRevampLayout ? (
+        <div className={styles.containerContentRevamp}>{content}</div>
+      ) : (
         <div
           className={
             classnames([
@@ -99,7 +103,7 @@ export default class TopBarLayout extends Component<Props> {
       );
     }
     return content;
-  }
+  };
 
   getContentUnderBanner: void => Node = () => {
     const {
@@ -108,20 +112,13 @@ export default class TopBarLayout extends Component<Props> {
       children,
       notification,
       showInContainer,
-      showAsCard
+      showAsCard,
+      isRevampLayout,
     } = this.props;
 
-    const topbarComponent = (
-      <div className={styles.topbar}>
-        {topbar}
-      </div>
-    );
+    const topbarComponent = <div className={styles.topbar}>{topbar}</div>;
 
-    const navbarComponent = (
-      <div className={styles.navbar}>
-        {navbar}
-      </div>
-    );
+    const navbarComponent = <div className={styles.navbar}>{navbar}</div>;
 
     const content = (
       <>
@@ -137,13 +134,17 @@ export default class TopBarLayout extends Component<Props> {
             ])
           }
         >
-          <div className={styles.content}>
-            {children}
-          </div>
+          {isRevampLayout ? (
+            <div className={styles.contentRevamp}>{children}</div>
+          ) : (
+            <div className={styles.content}>{children}</div>
+          )}
         </div>
       </>
     );
 
     return this.optionallyWrapInContainer(content);
-  }
+  };
 }
+
+export default (withLayout(TopBarLayout): ComponentType<Props>);

packages/yoroi-extension/app/components/layout/TopBarLayout.scss

@@ -8,7 +8,8 @@
   width: 100%;
 }
 
-.topbar, .navbar {
+.topbar,
+.navbar {
   // Show elements that overflow the topbar above the content area
   z-index: 2;
 }
@@ -68,6 +69,13 @@
   min-height: 200px;
 }
 
+.contentRevamp {
+  height: 100%;
+  min-height: 200px;
+  padding: 40px;
+  background-color: #f0f3f5;
+}
+
 .containerContent {
   max-width: var(--theme-page-container-width);
   padding-left: var(--theme-page-container-side-padding);
@@ -80,6 +88,16 @@
   max-height: calc(100% - var(--theme-page-content-box-bottom) - var(--theme-banner-height));
 }
 
+.containerContentRevamp {
+  max-width: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - var(--theme-page-content-box-bottom) - var(--theme-banner-height));
+}
+
 // avoid background image overlapping with language select form
 
 @media

packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js

@@ -3,13 +3,11 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import SettingsMenuItem from './SettingsMenuItem';
-import styles from './SettingsMenu.scss';
 import environmnent from '../../../environment';
 import { ROUTES } from '../../../routes-config';
-import type { Theme } from '../../../themes';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import SubMenu from '../../topbar/SubMenu';
 
 const messages = defineMessages({
   general: {
@@ -33,77 +31,57 @@ const messages = defineMessages({
 type Props = {|
   +isActiveItem: string => boolean,
   +onItemClick: string => void,
-  +currentLocale: string,
-  +currentTheme: Theme,
 |};
-
 @observer
 export default class SettingsMenu extends Component<Props> {
-
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
-    const { onItemClick, isActiveItem, } = this.props;
-
-    return (
-      <div className={styles.componentWrapper}>
-        <div className={styles.component}>
-          <SettingsMenuItem
-            label={intl.formatMessage(messages.general)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.GENERAL)}
-            active={isActiveItem(ROUTES.SETTINGS.GENERAL)}
-            className="general"
-          />
-
-          <SettingsMenuItem
-            label={intl.formatMessage(messages.blockchain)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.BLOCKCHAIN)}
-            active={isActiveItem(ROUTES.SETTINGS.BLOCKCHAIN)}
-            className="blockchain"
-          />
+    const { onItemClick, isActiveItem } = this.props;
 
-          <SettingsMenuItem
-            label={intl.formatMessage(globalMessages.walletLabel)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.WALLET)}
-            active={isActiveItem(ROUTES.SETTINGS.WALLET)}
-            className="wallet"
-          />
+    const settingOptions: Array<Object> = [
+      {
+        label: intl.formatMessage(messages.general),
+        route: ROUTES.SETTINGS.GENERAL,
+        className: 'general',
+      },
+      {
+        label: intl.formatMessage(messages.blockchain),
+        route: ROUTES.SETTINGS.BLOCKCHAIN,
+        className: 'blockchain',
+      },
+      {
+        label: intl.formatMessage(globalMessages.walletLabel),
+        route: ROUTES.SETTINGS.WALLET,
+        className: 'wallet',
+      },
+      !environmnent.isProduction() && {
+        label: intl.formatMessage(messages.externalStorage),
+        route: ROUTES.SETTINGS.EXTERNAL_STORAGE,
+        className: 'externalStorage',
+      },
+      {
+        label: intl.formatMessage(globalMessages.termsOfUse),
+        route: ROUTES.SETTINGS.TERMS_OF_USE,
+        className: 'termsOfUse',
+      },
+      {
+        label: intl.formatMessage(globalMessages.support),
+        route: ROUTES.SETTINGS.SUPPORT,
+        className: 'support',
+      },
+      {
+        label: intl.formatMessage(messages.levelOfComplexity),
+        route: ROUTES.SETTINGS.LEVEL_OF_COMPLEXITY,
+        className: 'levelOfComplexity',
+      },
+    ];
 
-          {!environmnent.isProduction() &&
-            <SettingsMenuItem
-              label={intl.formatMessage(messages.externalStorage)}
-              onClick={() => onItemClick(ROUTES.SETTINGS.EXTERNAL_STORAGE)}
-              active={isActiveItem(ROUTES.SETTINGS.EXTERNAL_STORAGE)}
-              className="externalStorage"
-            />
-          }
-
-          <SettingsMenuItem
-            label={intl.formatMessage(globalMessages.termsOfUse)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.TERMS_OF_USE)}
-            active={isActiveItem(ROUTES.SETTINGS.TERMS_OF_USE)}
-            className="termsOfUse"
-          />
-
-          <SettingsMenuItem
-            label={intl.formatMessage(globalMessages.support)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.SUPPORT)}
-            active={isActiveItem(ROUTES.SETTINGS.SUPPORT)}
-            className="support"
-          />
-
-          <SettingsMenuItem
-            label={intl.formatMessage(messages.levelOfComplexity)}
-            onClick={() => onItemClick(ROUTES.SETTINGS.LEVEL_OF_COMPLEXITY)}
-            active={isActiveItem(ROUTES.SETTINGS.LEVEL_OF_COMPLEXITY)}
-            className="levelOfComplexity"
-          />
-        </div>
-      </div>
+    return (
+      <SubMenu options={settingOptions} onItemClick={onItemClick} isActiveItem={isActiveItem} />
     );
   }
-
 }

packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js

@@ -1,37 +1,57 @@
 // @flow
 import React, { Component } from 'react';
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
-import { intlShape, } from 'react-intl';
+import { intlShape } from 'react-intl';
 import styles from './BuySellAdaButton.scss';
 import globalMessages from '../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import classnames  from 'classnames';
+import classnames from 'classnames';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { withLayout } from '../../themes/context/layout';
+import type { LayoutComponentMap } from '../../themes/context/layout';
 
 type Props = {|
   +onBuySellClick: void => void,
 |};
 
-@observer
-export default class BuySellAdaButton extends Component<Props> {
+type InjectedProps = {|
+  +renderLayoutComponent: LayoutComponentMap => Node,
+|};
 
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+@observer
+class BuySellAdaButton extends Component<Props & InjectedProps> {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
-
     const { intl } = this.context;
 
-    return (
+    const BuyAdaButtonClassic = (
       <Button
         label={intl.formatMessage(globalMessages.buyAda)}
         className={classnames([styles.button, 'secondary'])}
         onClick={() => this.props.onBuySellClick()}
         skin={ButtonSkin}
       />
     );
+
+    const BuyAdaButtonRevamp = (
+      <Button
+        label={intl.formatMessage(globalMessages.buySellAda)}
+        className={styles.buttonRevamp}
+        onClick={() => this.props.onBuySellClick()}
+        skin={ButtonSkin}
+      />
+    );
+
+    return this.props.renderLayoutComponent({
+      CLASSIC: BuyAdaButtonClassic,
+      REVAMP: BuyAdaButtonRevamp,
+    });
   }
 }
+
+export default (withLayout(BuySellAdaButton): ComponentType<Props>);

packages/yoroi-extension/app/components/topbar/BuySellAdaButton.scss

@@ -1,4 +1,23 @@
 .button {
   display: block !important;
   width: 230px !important;
-}
+}
+
+.buttonRevamp {
+  border: 1px solid #a7afc0 !important;
+  background: white !important;
+  width: 160px !important;
+  max-height: 44px;
+  padding: 11px 0 !important;
+  color: #6b7384 !important;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  line-height: 22px;
+  &:hover {
+    background: transparent;
+  }
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}