diff --git a/package.json b/package.json
index 37ae1f73..abd37fa3 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
"styled-normalize": "^8.0.6",
"trezor-bridge-communicator": "1.0.2",
"trezor-connect": "7.0.2",
- "trezor-ui-components": "^1.0.0-beta.14",
+ "trezor-ui-components": "^1.0.0-beta.15",
"wallet-address-validator": "^0.2.4",
"web3": "1.0.0-beta.35",
"webpack": "^4.29.3",
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 24a7fc8b..668f7d08 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,10 +1,7 @@
/* eslint-disable jsx-a11y/accessible-emoji */
/* @flow */
-import React from 'react';
-import styled from 'styled-components';
-import { NavLink } from 'react-router-dom';
-import { SCREEN_SIZE } from 'config/variables';
-import { Icon, icons, colors } from 'trezor-ui-components';
+import * as React from 'react';
+import { Header } from 'trezor-ui-components';
import { FormattedMessage } from 'react-intl';
import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
@@ -12,226 +9,39 @@ import l10nMessages from './index.messages';
import LanguagePicker from './components/LanguagePicker/Container';
-const Wrapper = styled.header`
- width: 100%;
- height: 52px;
- background: ${colors.HEADER};
- z-index: 200;
-`;
-
-const LayoutWrapper = styled.div`
- width: 100%;
- height: 100%;
- max-width: 1170px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- @media screen and (max-width: 1170px) {
- padding: 0 25px;
- }
-`;
-
-const Left = styled.div`
- display: none;
- flex: 0 0 33%;
-
- @media screen and (max-width: ${SCREEN_SIZE.SM}) {
- display: initial;
- }
-`;
-
-const MenuToggler = styled.div`
- display: none;
- white-space: nowrap;
- color: ${colors.WHITE};
- align-self: center;
- align-items: center;
- cursor: pointer;
- user-select: none;
- padding: 10px 0px;
- transition: all 0.1s ease-in;
-
- @media screen and (max-width: ${SCREEN_SIZE.SM}) {
- display: flex;
- }
-`;
-
-const TogglerText = styled.div`
- margin-left: 6px;
-`;
-
-const TREZOR = styled.div``;
-const T = styled.div``;
-
-const Logo = styled.div`
- flex: 1;
- justify-content: flex-start;
- display: flex;
-
- ${T} {
- display: none;
- width: 20px;
- }
-
- ${TREZOR} {
- width: 100px;
- }
-
- svg {
- fill: ${colors.WHITE};
- height: 28px;
- }
-
- @media screen and (max-width: ${SCREEN_SIZE.SM}) {
- flex: 1 0 33%;
- justify-content: center;
- }
-
- @media screen and (max-width: ${SCREEN_SIZE.XS}) {
- /* hides full width trezor logo, shows only trezor icon */
- ${TREZOR} {
- display: none;
- }
-
- ${T} {
- display: inherit;
- }
- }
-`;
-
-const MenuLinks = styled.div`
- display: flex;
- align-content: center;
- justify-content: flex-end;
- flex: 0;
- height: 100%;
-
- @media screen and (max-width: ${SCREEN_SIZE.SM}) {
- flex: 0 1 33%;
- }
-`;
-
-const Projects = styled.div`
- display: flex;
- align-items: center;
- height: 100%;
- border-right: 1px solid ${colors.HEADER_DIVIDER};
- padding-right: 24px;
- margin-right: 24px;
-
- @media screen and (max-width: ${SCREEN_SIZE.SM}) {
- display: none;
- }
-`;
-
-const A = styled.a`
- color: ${colors.WHITE};
- margin-left: 24px;
- transition: all 0.1s ease-in;
- white-space: nowrap;
-
- &:visited {
- color: ${colors.WHITE};
- margin-left: 24px;
- }
-
- &:first-child {
- margin: 0px;
- }
-
- &:hover,
- &:active {
- color: ${colors.TEXT_SECONDARY};
- }
-`;
-
-type Props = {
+type MyProps = {
sidebarEnabled?: boolean,
sidebarOpened?: ?boolean,
toggleSidebar?: toggleSidebarType,
};
-const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
-
-
-
- {sidebarEnabled && (
-
- {sidebarOpened ? (
- <>
-
-
-
-
- >
- ) : (
- <>
-
-
-
-
- >
- )}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+const MyHeader = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: MyProps) => (
+ }
+ togglerCloseText={}
+ links={[
+ {
+ href: 'https://trezor.io/',
+ title: ,
+ },
+ {
+ href: 'https://wiki.trezor.io/',
+ title: ,
+ },
+ {
+ href: 'https://blog.trezor.io/',
+ title: ,
+ },
+ {
+ href: 'https://trezor.io/support/',
+ title: ,
+ },
+ ]}
+ rightAddon={}
+ />
);
-export default Header;
+export default MyHeader;
diff --git a/yarn.lock b/yarn.lock
index 9780960c..cb2cdecd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11194,10 +11194,10 @@ trezor-translations-manager@^1.0.5:
request "^2.88.0"
request-promise-native "^1.0.5"
-trezor-ui-components@^1.0.0-beta.14:
- version "1.0.0-beta.14"
- resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.14.tgz#5d6dd3a8f5e1ace33a03eae7bb6d089ae0866575"
- integrity sha512-jJ8hMn6Y97lg1a3YMUgQoCosYiPH3L43IJPapAw1c6PSVCPk43QUcbPxtA629Iv32EdCiMlDvANlZgyY9kH98g==
+trezor-ui-components@^1.0.0-beta.15:
+ version "1.0.0-beta.15"
+ resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.15.tgz#936c72b67ed324e5fdac292f50055e8f4ce53290"
+ integrity sha512-Vp6iyRcwSfN+zxRlzbZTfmS8xBk/ERpHs16uxof5o05CGppZb6X0rMpWfauOb05k/fMwH8owPWKs1F+D6J2mLQ==
dependencies:
"@tippy.js/react" "^2.1.1"
prop-types "^15.7.2"