Update UI and remove legacy props from private tab page #134
+826
−351
Update UI and remove legacy props from private tab page
closes #129
- Loading branch information
cezaraugusto
committed
Sep 7, 2018
cezaraugusto
Cezar Augusto
commit 206723fdd11360493193c1c03ce2d3767ff9c418
Verified
This commit was signed with a verified signature.
cezaraugusto
Cezar Augusto
| @@ -1,36 +1 @@ | ||
| <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='44' height='44'> | ||
| <defs> | ||
| <path id='a' d='M39 19.55c0 10.75-8.75 19.5-19.5 19.5A19.52 19.52 0 0 1 0 19.55C0 8.8 8.75.05 19.5.05S39 8.8 39 19.55z'/> | ||
| <linearGradient id='c' x1='0%' x2='100.01%' y1='49.99%' y2='49.99%'> | ||
| <stop offset='.56%' stop-color='#6176B9'/> | ||
| <stop offset='69.1%' stop-color='#394A9F'/> | ||
| </linearGradient> | ||
| <linearGradient id='d' x1='.01%' y1='50%' y2='50%'> | ||
| <stop offset='.56%' stop-color='#6176B9'/> | ||
| <stop offset='69.1%' stop-color='#394A9F'/> | ||
| </linearGradient> | ||
| </defs> | ||
| <g fill='none' fill-rule='evenodd' transform='translate(1 1)'> | ||
| <path fill='#FFF' fill-rule='nonzero' d='M21 40.5a19.5 19.5 0 1 0 0-39 19.5 19.5 0 0 0 0 39zm0 1.5a21 21 0 1 1 0-42 21 21 0 0 1 0 42z'/> | ||
| <circle cx='21' cy='21' r='19.5' fill='#DE5833'/> | ||
| <g transform='translate(1.5 1.58)'> | ||
| <mask id='b' fill='#fff'> | ||
| <use xlink:href='#a'/> | ||
| </mask> | ||
| <g mask='url(#b)'> | ||
| <path fill='#D5D7D8' d='M27.39 48.27c-.69-3.15-4.67-10.3-6.18-13.3-1.5-3.03-3.02-7.28-2.33-10.03.13-.5-1.3-4.3-.9-4.57 3.2-2.09 4.05.23 5.33-.7.66-.49 1.56.4 1.79-.4.82-2.89-1.15-7.9-3.34-10.1a5.89 5.89 0 0 0-3.05-1.4 6.77 6.77 0 0 0-2.34-1.86 22.66 22.66 0 0 0-5.22-1.73c-.95-.15-1.16.11-1.57.18.38.03 2.17.92 2.52.97-.35.23-1.37-.01-2.03.28-.33.15-.57.71-.57.98 1.87-.19 4.79 0 6.5.76-1.36.16-3.45.33-4.34.8-2.61 1.38-3.76 4.58-3.07 8.43.68 3.83 3.7 17.82 4.66 22.5a7.55 7.55 0 0 1-3.98 8.5l2.06.14-.68 1.51c2.46.27 5.2-.55 5.2-.55-.54 1.51-4.25 2.06-4.25 2.06s1.79.55 4.67-.55l4.66-1.78 1.38 3.56 2.6-2.6 1.1 2.74s2.07-.69 1.38-3.84z'/> | ||
| <path fill='#FFF' d='M28.22 47.63c-.68-3.16-4.66-10.3-6.18-13.31-1.5-3.02-3.02-7.27-2.33-10.02.13-.5.13-2.54.54-2.8 3.2-2.1 2.98-.08 4.26-1.01a3.53 3.53 0 0 0 1.42-1.87c.83-2.88-1.14-7.9-3.33-10.1a5.87 5.87 0 0 0-3.06-1.4 6.75 6.75 0 0 0-2.33-1.86 10.97 10.97 0 0 0-6.95-1.1c.38.04 1.24.82 1.59.87-.53.36-1.93.31-1.92 1.1 1.87-.18 3.92.11 5.65.88-1.37.15-2.65.5-3.55.96-2.6 1.38-3.29 4.12-2.6 7.96.68 3.85 3.7 17.84 4.66 22.5a7.55 7.55 0 0 1-3.98 8.5l2.06.15-.68 1.5c2.46.28 5.2-.54 5.2-.54-.54 1.51-4.25 2.06-4.25 2.06s1.79.54 4.67-.55l4.67-1.79 1.37 3.57 2.6-2.6 1.1 2.74s2.06-.69 1.37-3.84z'/> | ||
| <path fill='#2D4F8E' d='M12.45 16.13a1.44 1.44 0 1 1 2.88 0 1.44 1.44 0 0 1-2.88 0z'/> | ||
| <path fill='#FFF' d='M14.15 15.65a.37.37 0 1 1 .75 0 .37.37 0 0 1-.75 0z'/> | ||
| <path fill='#2D4F8E' d='M22.28 15.27a1.24 1.24 0 1 1 2.48 0 1.24 1.24 0 0 1-2.48 0z'/> | ||
| <path fill='#FFF' d='M23.75 14.86c0-.18.14-.32.32-.32s.32.14.32.32-.14.32-.32.32a.32.32 0 0 1-.32-.32z'/> | ||
| <path fill='url(#c)' d='M6.05 8.26s-1.1-.49-2.15.18c-1.05.66-1 1.34-1 1.34s-.56-1.25.93-1.86c1.5-.62 2.23.34 2.23.34z' transform='translate(8.25 3.69)'/> | ||
| <path fill='url(#d)' d='M16.01 8.17s-.78-.45-1.38-.44c-1.25.01-1.59.56-1.59.56s.21-1.3 1.8-1.04c.87.14 1.17.92 1.17.92z' transform='translate(8.25 3.69)'/> | ||
| </g> | ||
| </g> | ||
| <path fill='#FDD20A' d='M19.8 23.26c.14-.87 2.4-2.52 3.99-2.62 1.6-.1 2.1-.08 3.43-.4a53.4 53.4 0 0 0 5.72-1.61c.95-.44 4.99.21 2.14 1.8a46.13 46.13 0 0 1-6.91 2.66c-2.37.7-3.8-.68-4.6.49-.62.92-.12 2.19 2.7 2.45 3.83.36 7.5-1.72 7.9-.62.4 1.1-3.29 2.48-5.53 2.52-2.25.05-6.77-1.48-7.44-1.95-.68-.47-1.59-1.57-1.4-2.72z'/> | ||
| <path fill='#65BC46' d='M21.53 34.79s-5.37-2.86-5.46-1.7c-.09 1.16 0 5.9.63 6.26.62.35 5.1-2.33 5.1-2.33l-.27-2.23zm2.05-.19s3.67-2.76 4.48-2.59c.8.19.98 5.9.26 6.18-.71.26-4.9-1.45-4.9-1.45l.16-2.13z'/> | ||
| <path fill='#43A244' d='M20.23 35.1c0 1.87-.27 2.67.53 2.85a5 5 0 0 0 2.87-.35c.53-.36.08-2.77-.1-3.23-.17-.44-3.3-.08-3.3.72z'/> | ||
| <path fill='#65BC46' d='M20.57 34.67c0 1.88-.27 2.69.54 2.87.8.18 2.32 0 2.86-.36.53-.36.08-2.77-.1-3.22-.17-.45-3.3-.09-3.3.71z'/> | ||
| </g> | ||
| </svg> | ||
| <svg width="114" height="114" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-2.5%" y="-2.6%" width="105.1%" height="107.1%" filterUnits="objectBoundingBox" id="a"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0352941176 0 0 0 0 0.0352941176 0 0 0 0 0.0352941176 0 0 0 0.2 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(19.5 9.5)" filter="url(#a)" fill="none" fill-rule="evenodd"><path d="M75 37.5C75 58.213 58.213 75 37.5 75S0 58.213 0 37.5 16.787 0 37.5 0 75 16.787 75 37.5z" fill="#FF3D00" fill-rule="nonzero"/><path d="M41.25 22.873c-1.129-1.121-2.813-1.684-4.688-2.059-.746-.937-1.874-1.875-3.558-2.812C30 16.5 26.44 15.746 23.064 16.31h-.753c-.184 0-.373.19-.747.19.373 0 1.875.747 3.004 1.122-.564.38-1.502.38-2.066.754h-.191l-.375.373c-.184.373-.373.746-.373.938 2.439-.192 5.998 0 8.628.746-2.066.191-3.941.755-5.252 1.502-.937.564-1.875 1.128-2.439 2.066-2.248 2.44-3.186 6.562-2.44 11.059.938 5.06 4.504 21.378 6.38 30.564l.474 3.007s6.6.743 10.586.743c2.231 0 6.054.585 6.915-.353-.1.02-1.133-1.171-1.48-2.086a103.307 103.307 0 0 0-2.62-4.872c-2.249-4.687-4.688-11.066-3.56-15.19.184-.747.184-3.942.747-4.315 4.879-3.186 4.496-.184 6.562-1.502.938-.746 1.875-1.684 2.248-2.813 1.31-4.303-1.685-11.994-5.062-15.37z" fill="#FFF" fill-rule="nonzero"/><circle stroke="#FFF" stroke-width="2.7" cx="37.5" cy="37.5" r="31.875"/><path d="M28.125 32.066c-1.129 0-2.248.938-2.248 2.248 0 1.122.937 2.248 2.248 2.248 1.129 0 2.248-.937 2.248-2.248-.182-1.128-1.12-2.248-2.248-2.248zm.938 2.057c-.374 0-.565-.184-.565-.564 0-.373.191-.557.564-.557.374 0 .565.184.565.557 0 .382-.373.564-.564.564zm13.689-2.994c-1.129 0-1.875.937-1.875 1.875 0 1.121.937 1.875 1.875 1.875 1.121 0 1.875-.938 1.875-1.875 0-.938-.938-1.875-1.875-1.875zm.746 1.683c-.184 0-.564-.19-.564-.564 0-.184.191-.564.564-.564.191 0 .565.191.565.564 0 .373-.192.565-.565.565z" fill="#0277BD" fill-rule="nonzero"/><path d="M36.19 59.436s-8.065-4.315-8.254-2.622c-.184 1.684 0 8.811.937 9.375.938.565 7.691-3.566 7.691-3.566l-.375-3.187zm3.185-.182s5.434-4.13 6.754-3.941c1.121.19 1.494 8.81.373 9.183-1.129.38-7.316-2.248-7.316-2.248l.189-2.994z" fill="#8BC34A" fill-rule="nonzero"/><path d="M34.688 59.436c0 2.812-.374 3.94.746 4.314 1.129.191 3.566 0 4.314-.564.754-.565.191-4.123-.184-4.872-.189-.562-4.877.002-4.877 1.122" fill="#689F38" fill-rule="nonzero"/><path d="M34.314 42.752c.184-1.31 3.75-3.941 6.19-4.123 2.432-.191 3.185-.191 5.244-.565 2.066-.564 7.316-1.875 8.818-2.439 1.495-.746 7.684.373 3.37 2.813C56.06 39.566 51 41.44 47.25 42.56c-3.559 1.128-5.809-1.122-7.127.753-.937 1.495-.184 3.37 4.13 3.75 5.81.557 11.624-2.628 12.188-.937.557 1.684-5.068 3.75-8.629 3.934-3.376 0-10.503-2.248-11.44-2.997-.938-.753-2.249-2.437-2.058-4.312" fill="#FFCA28" fill-rule="nonzero"/></g></svg> | ||
|
||
| @@ -0,0 +1 @@ | ||
| <svg width="116" height="116" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-2.5%" y="-2.6%" width="105.1%" height="107.1%" filterUnits="objectBoundingBox" id="a"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0352941176 0 0 0 0 0.0352941176 0 0 0 0 0.0352941176 0 0 0 0.2 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-316 -621)" fill="none" fill-rule="evenodd"><path d="M411.5 706.5h-75v-72.917c0-1.253.83-2.083 2.083-2.083h70.833c1.253 0 2.084.83 2.084 2.083V706.5z" fill="#0796FA"/><path fill="#0069B3" d="M340.666 702.334h66.667v-56.25h-66.667z"/><path d="M381.5 646.083h25.834v-3.333a.938.938 0 0 0-.938-.938h-23.959a.937.937 0 0 0-.937.938v3.333z" fill="#002735"/><path d="M344.833 637.75a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167 0M353.167 637.75a2.084 2.084 0 1 1-4.168-.001 2.084 2.084 0 0 1 4.168 0M361.5 637.75a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167 0" fill="#FFF"/><path d="M352.54 673.366s7.592-9.448 20.626-9.448c13.033 0 20.625 9.448 20.625 9.448s-9.9 13.052-20.625 13.052c-10.726 0-20.625-13.052-20.625-13.052" fill="#FAFAFA"/><path d="M383.478 673.293c0 5.694-4.619 10.312-10.313 10.312-5.694 0-10.312-4.618-10.312-10.312 0-5.694 4.618-10.313 10.312-10.313 5.694 0 10.313 4.619 10.313 10.313" fill="#0796FA"/><path d="M352.54 673.366s7.592 15.865 20.626 15.865c13.033 0 20.625-15.865 20.625-15.865s-9.9 11.214-20.625 11.214c-10.726 0-20.625-11.214-20.625-11.214M352.54 673.366s7.592-7.573 20.626-7.573c13.033 0 20.625 7.573 20.625 7.573s-6.27-14.135-20.625-14.135c-14.356 0-20.625 14.135-20.625 14.135" fill="#002735"/><path d="M377.853 673.293a4.687 4.687 0 1 1-9.375 0 4.687 4.687 0 1 1 9.375 0" fill="#0069B3"/><path d="M355.25 654.417l37.5 37.5" stroke="#FFF" stroke-width="2.1" stroke-linecap="square"/></g></svg> | ||
|
||
| @@ -0,0 +1,94 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import * as React from 'react' | ||
|
|
||
| import { | ||
| StyledClock, | ||
| StyledPeriod, | ||
| StyledTime, | ||
| StyledTimeSeparator | ||
| } from './style' | ||
|
|
||
| export interface ClockTheme { | ||
| color?: string | ||
| } | ||
| export interface ClockProps { | ||
| id?: string | ||
| customStyle?: ClockTheme | ||
|
||
| } | ||
|
|
||
| export interface ClockState { | ||
| currentTime: Array<{type: string, value: string}> | ||
| date: Date | ||
| } | ||
|
|
||
| class Clock extends React.PureComponent<ClockProps, ClockState> { | ||
| constructor (props: ClockProps) { | ||
| super(props) | ||
| this.state = this.getClockState(new Date()) | ||
| } | ||
|
|
||
| get dateTimeFormat (): any { | ||
| return new Intl.DateTimeFormat([], { hour: '2-digit', minute: '2-digit' }) | ||
| } | ||
|
|
||
| get formattedTime () { | ||
| return this.state.currentTime.map((component, i) => { | ||
| if (component.type === 'literal') { | ||
| // wrap ':' in a span with a class, so it can be centered | ||
| if (component.value === ':') { | ||
| return <StyledTimeSeparator key={i}>{component.value}</StyledTimeSeparator> | ||
| } else if (component.value.trim() === '') { | ||
| // hide blank strings | ||
| return null | ||
| } | ||
| } else if (component.type === 'dayperiod') { | ||
| // hide day-period (AM / PM), it's rendered in a separate component | ||
| return null | ||
| } | ||
| return component.value | ||
| }) | ||
| } | ||
|
|
||
| get formattedTimePeriod () { | ||
| const time: any = this.state.currentTime | ||
| const period = time.find((component: {type: string}) => component.type === 'dayperiod') | ||
| return period ? period.value : '' | ||
| } | ||
|
|
||
| getMinutes (date: any) { | ||
| return Math.floor(date / 1000 / 60) | ||
| } | ||
|
|
||
| maybeUpdateClock () { | ||
| const now = new Date() | ||
| if (this.getMinutes(this.state.date) !== this.getMinutes(now)) { | ||
| this.setState(this.getClockState(now)) | ||
| } | ||
| } | ||
|
|
||
| getClockState (now: Date) { | ||
| return { | ||
| date: now, | ||
| currentTime: this.dateTimeFormat.formatToParts(now) | ||
| } | ||
| } | ||
|
|
||
| componentDidMount () { | ||
| window.setInterval(this.maybeUpdateClock.bind(this), 2000) | ||
| } | ||
|
|
||
| render () { | ||
| const { id, customStyle } = this.props | ||
| return ( | ||
| <StyledClock id={id} customStyle={customStyle}> | ||
| <StyledTime>{this.formattedTime}</StyledTime> | ||
| <StyledPeriod>{this.formattedTimePeriod}</StyledPeriod> | ||
| </StyledClock> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default Clock | ||
| @@ -0,0 +1,57 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License. v. 2.0. If a copy of the MPL was not distributed with this file. | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import styled from 'styled-components' | ||
|
|
||
| const StyledClock = styled.div` | ||
| color: inherit; | ||
| box-sizing: border-box; | ||
| line-height: 1; | ||
| user-select: none; | ||
| display: flex; | ||
| cursor: default; | ||
| -webkit-font-smoothing: antialiased; | ||
|
||
| font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | ||
| color: rgb(255, 255, 255); | ||
| ` as any | ||
|
|
||
| const StyledTime = styled.span` | ||
| box-sizing: border-box; | ||
| letter-spacing: 0; | ||
| font-size: 75px; | ||
| font-weight: 300; | ||
| color: inherit; | ||
| font-family: inherit; | ||
| display: inline-flex; | ||
| ` as any | ||
|
|
||
| const StyledPeriod = styled.span` | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font-family: inherit; | ||
| display: inline-block; | ||
| font-size: 20px; | ||
| letter-spacing: -0.2px; | ||
| font-weight: 300; | ||
| margin-top: 8px; | ||
| margin-left: 3px; | ||
| vertical-align: top; | ||
| ` as any | ||
|
|
||
| const StyledTimeSeparator = styled.span` | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font-size: inherit; | ||
| font-family: inherit; | ||
| font-weight: 300; | ||
| /* center colon vertically in the text-content line */ | ||
| margin-top: -0.1em; | ||
| ` as any | ||
|
|
||
| export { | ||
| StyledClock, | ||
| StyledTime, | ||
| StyledPeriod, | ||
| StyledTimeSeparator | ||
| } | ||
| @@ -0,0 +1,30 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import * as React from 'react' | ||
| import { StyledFeatureBlock } from './style' | ||
|
|
||
| export interface FeatureBlockProps { | ||
| testId?: string | ||
| grid?: boolean | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| /** | ||
| * Styled block around features in the new tab page | ||
| * divided by a grid of 3 columns | ||
| * @prop {string} testId - the component's id used for testing purposes | ||
| * @prop {boolean} grid - whether or not the styled block should behave like a grid | ||
| * @prop {React.ReactNode} children - the child elements | ||
| */ | ||
| export class FeatureBlock extends React.PureComponent<FeatureBlockProps, {}> { | ||
| render () { | ||
| const { testId, grid, children } = this.props | ||
| return ( | ||
| <StyledFeatureBlock data-test-id={testId} grid={grid}> | ||
| {children} | ||
| </StyledFeatureBlock> | ||
| ) | ||
| } | ||
| } |
| @@ -0,0 +1,23 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import styled from 'styled-components' | ||
| import { FeatureBlockProps } from './index' | ||
|
|
||
| export const StyledFeatureBlock = styled<{}, 'div'>('div')` | ||
|
||
| display: grid; | ||
| height: 100%; | ||
| grid-gap: ${(p: FeatureBlockProps) => p.grid ? '30px' : '0'}; | ||
| grid-template-columns: ${(p: FeatureBlockProps) => p.grid ? '1fr 5fr 1fr' : '1fr'}; | ||
| grid-template-rows: 1fr; | ||
| max-width: 800px; | ||
| border-top: solid 1px rgba(255,255,255,.1); | ||
| padding: 30px 0 30px; | ||
| aside { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| } | ||
| ` | ||
| @@ -0,0 +1,39 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import * as React from 'react' | ||
| import { StyledPage, StyledPageWrapper } from './style' | ||
|
|
||
| export interface PageProps { | ||
| testId?: string | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| /** | ||
| * First parent wrapper around a webUI page | ||
| * @prop {string} testId - the component's id used for testing purposes | ||
| * @prop {React.ReactNode} children - the child elements | ||
| */ | ||
| export class Page extends React.PureComponent<PageProps, {}> { | ||
| render () { | ||
| const { testId, children } = this.props | ||
| return ( | ||
| <StyledPage data-test-id={testId}>{children}</StyledPage> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Content wrapper acting as achild of the main component <Page> | ||
| * @prop {string} testId - the component's id used for testing purposes | ||
| * @prop {React.ReactNode} children - the child elements | ||
| */ | ||
| export class PageWrapper extends React.PureComponent<PageProps, {}> { | ||
| render () { | ||
| const { testId, children } = this.props | ||
| return ( | ||
| <StyledPageWrapper data-test-id={testId}>{children}</StyledPageWrapper> | ||
| ) | ||
| } | ||
| } |
| @@ -0,0 +1,35 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import styled from 'styled-components' | ||
| import theme from '../../../../../src/theme/brave-default' | ||
|
||
| import palette from '../../../../../src/theme/palette' | ||
|
|
||
| export const StyledPage = styled<{}, 'div'>('div')` | ||
| -webkit-font-smoothing: antialiased; | ||
| background: linear-gradient( | ||
| ${theme.color.privateTabBackground}, | ||
|
||
| ${theme.color.privateTabBackground2} | ||
| ); | ||
| min-height: 100%; | ||
| height: initial; | ||
| padding: 40px 60px; | ||
| ` | ||
|
|
||
| export const StyledPageWrapper = styled<{}, 'main'>('main')` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| h1 { | ||
| max-width: 800px; | ||
| font-size: 26px; | ||
| font-family: ${theme.fontFamily.heading}; | ||
|
||
| color: ${palette.white}; | ||
| letter-spacing: -0.4px; | ||
| margin: 20px 0 40px; | ||
| align-self: flex-start; | ||
| } | ||
| ` | ||
| @@ -0,0 +1,27 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import * as React from 'react' | ||
| import { StyledPageHeader } from './style' | ||
|
|
||
| export interface PageHeaderProps { | ||
| testId?: string | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| /** | ||
| * Styled block around the stats and clock component | ||
| * @prop {string} testId - the component's id used for testing purposes | ||
| * @prop {React.ReactNode} children - the child elements | ||
| */ | ||
| export default class PageHeader extends React.PureComponent<PageHeaderProps, {}> { | ||
| render () { | ||
| const { children } = this.props | ||
| return ( | ||
| <StyledPageHeader> | ||
| {children} | ||
| </StyledPageHeader> | ||
| ) | ||
| } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import styled from 'styled-components' | ||
|
|
||
| export const StyledPageHeader = styled<{}, 'header'>('header')` | ||
| width: 100%; | ||
| padding: 40px 0; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| ` |
Oops, something went wrong.
ProTip!
Use n and p to navigate between commits in a pull request.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
I'm unsure if we should add these specific entries to the theme, considering these are not for a core component (could be part of a brave-core theme extension to the brave-ui core theme). Normally I'd say let's put them in and refactor a brave-core theme out later, but I don't see that this page background would change between light and dark, and we have other occurances of color in Private Tab that aren't using theme properties, so my suggestion is that we remove these and keep the theme clean of this pre-theme designed page, since it doesn't yet give us any advantage.