From 3d09a4e019b16a52694efedd1c2da3399e0df3ca Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 25 Apr 2019 13:08:13 +0200 Subject: [PATCH 1/2] use Header from tuc --- src/components/Header/index.js | 252 ++++----------------------------- 1 file changed, 31 insertions(+), 221 deletions(-) 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; From 4380b2c269c70fba7d2403e6fbfdebd03a99f798 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 25 Apr 2019 14:16:06 +0200 Subject: [PATCH 2/2] bump tuc --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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/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"