Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Don't vertically clip creator header images in tip UI #484

Merged
merged 3 commits into from
Jul 1, 2019
Merged

Don't vertically clip creator header images in tip UI #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2baf1c1
remove isMobile for rewards siteBanner
cg505 May 29, 2019
f3ccc52
fix walletSummary spec to use a constant date
cg505 Jun 3, 2019
8052f76
scale height of creator custom header image in siteBanner
cg505 May 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ exports[`List tests basic tests matches the snapshot 1`] = `
font-weight: 600;
line-height: 0.74;
color: #d1d1db;
height: 176px;
min-height: 176px;
overflow: hidden;
background: url(test-file-stub) no-repeat top left,url(test-file-stub) no-repeat top right,#9e9fab;
}

Expand Down
34 changes: 16 additions & 18 deletions src/features/rewards/siteBanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
StyledDonation,
StyledContent,
StyledBanner,
StyledBannerFiller,
StyledBannerImage,
StyledClose,
StyledContentWrapper,
Expand Down Expand Up @@ -71,7 +72,6 @@ export interface Props {
children?: React.ReactNode
onDonate: (amount: string, monthly: boolean) => void
onClose?: () => void
isMobile?: boolean
logoBgColor?: CSS.Color
showUnVerifiedNotice?: boolean
learnMoreNotice?: string
Expand All @@ -98,7 +98,7 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
}

return !logo
? <StyledLogoText isMobile={this.props.isMobile}>{letter}</StyledLogoText>
? <StyledLogoText>{letter}</StyledLogoText>
: <StyledLogoImage bg={logo} />
}

Expand Down Expand Up @@ -249,43 +249,42 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
currentAmount,
name,
screenName,
isMobile,
showUnVerifiedNotice,
learnMoreNotice,
addFundsLink
} = this.props

const isTwitterTip: boolean = !!(screenName && screenName !== '')

return (
<StyledWrapper
id={id}
isMobile={isMobile}
onKeyUp={this.onKeyUp}
tabIndex={0}
>
<StyledBanner isMobile={isMobile}>
<StyledBanner>
<StyledClose onClick={onClose}>
<CloseCircleOIcon />
</StyledClose>
<StyledBannerImage bgImage={bgImage}>
{
!isMobile && !bgImage
!bgImage
? this.getBannerImageContent(name, screenName, domain, provider)
: null
: <StyledBannerFiller />
}
</StyledBannerImage>
<StyledContentWrapper isMobile={isMobile}>
<StyledContentWrapper>
<StyledContent>
<StyledLogoWrapper isMobile={isMobile}>
<StyledLogoWrapper>
<StyledLogoBorder
isMobile={isMobile}
padding={!logo}
bg={logoBgColor}
>
{this.getLogo(logo, domain, name)}
</StyledLogoBorder>
</StyledLogoWrapper>
<StyledTextWrapper isMobile={isMobile}>
<StyledSocialWrapper isMobile={isMobile}>
<StyledTextWrapper>
<StyledSocialWrapper>
{this.getSocial(social)}
</StyledSocialWrapper>
{
Expand All @@ -301,20 +300,19 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
</StyledNoticeWrapper>
: null
}
<StyledTitle isMobile={isMobile} isTwitterTip={(screenName && screenName !== '') ? true : false}>
<StyledTitle isTwitterTip={isTwitterTip}>
{this.getTitle(title)}
</StyledTitle>
<StyledText isMobile={isMobile}>
<StyledText>
{this.getText(children)}
</StyledText>
</StyledTextWrapper>
</StyledContent>
<StyledDonation isMobile={isMobile}>
<StyledWallet isMobile={isMobile}>
<StyledDonation>
<StyledWallet>
{getLocale('walletBalance')} <StyledTokens>{balance} BAT</StyledTokens>
</StyledWallet>
<Donate
isMobile={isMobile}
balance={parseFloat(balance)}
donationAmounts={donationAmounts}
title={getLocale('donationAmount')}
Expand All @@ -327,7 +325,7 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
>
{
!recurringDonation
? <StyledCheckbox isMobile={isMobile}>
? <StyledCheckbox>
<Checkbox
testId={'monthlyCheckbox'}
value={{ make: this.state.monthly }}
Expand Down
84 changes: 30 additions & 54 deletions src/features/rewards/siteBanner/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,26 @@
* 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, { css } from 'styled-components'
import styled from 'styled-components'
import { Props } from './index'
import bg1Url from './assets/bg_bats.svg'
import bg2Url from './assets/bg_hearts.svg'

interface StyleProps {
padding?: boolean
bg?: string
isMobile?: boolean
isTwitterTip?: boolean
}

const getTextStyle = (isMobile?: boolean) => {
if (!isMobile) {
return css`
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 217px);
`
}

return css`
display: block;
margin-top: -60px;
`
}

const getDonationStyle = (isMobile?: boolean) => {
if (!isMobile) {
return null
}

return css`
width: 100%;
bottom: 0;
left: 0;
height: 237px;
position: fixed;
box-shadow: 0 -2px 8px 0 rgba(12,13,33,0.35);
`
}

export const StyledWrapper = styled<StyleProps, 'div'>('div')`
overflow-y: scroll;
height: ${p => p.isMobile ? 'calc(100% - 237px)' : 'auto'};
padding: ${p => p.isMobile ? '10px 15' : 0}px;
height: auto;
padding: 0px;
font-family: Poppins, sans-serif;
`

export const StyledContentWrapper = styled<StyleProps, 'div'>('div')`
display: ${p => p.isMobile ? 'block' : 'flex'};
display: flex;
justify-content: space-between;
align-items: stretch;
align-content: flex-start;
Expand All @@ -78,12 +47,11 @@ export const StyledDonation = styled<StyleProps, 'div'>('div')`
justify-content: space-between;
display: flex;
flex-direction: column;
${p => getDonationStyle(p.isMobile)}
`

export const StyledBanner = styled<StyleProps, 'div'>('div')`
position: relative;
min-width: ${p => p.isMobile ? 'unset' : '900px'};
min-width: 900px;
background: #DBE3F3;
`

Expand All @@ -92,13 +60,19 @@ export const StyledBannerImage = styled<Partial<Props>, 'div'>('div')`
font-weight: 600;
line-height: 0.74;
color: #d1d1db;
height: 176px;
min-height: 176px;
overflow: hidden;
background: ${p => p.bgImage
? `url(${p.bgImage}) no-repeat top center / cover`
: `url(${bg1Url}) no-repeat top left, url(${bg2Url}) no-repeat top right, #9e9fab`
};
`

// 900:176 is the aspect ratio for banner images.
export const StyledBannerFiller = styled<{}, 'div'>('div')`
padding-top: calc(176 / 900 * 100%);
`

export const StyledClose = styled<{}, 'button'>('button')`
top: 16px;
right: 16px;
Expand All @@ -114,7 +88,7 @@ export const StyledClose = styled<{}, 'button'>('button')`
`

export const StyledLogoWrapper = styled<StyleProps, 'div'>('div')`
padding-left: ${p => p.isMobile ? 20 : 45}px;
padding-left: 45px;
flex-basis: 217px;
`

Expand All @@ -123,38 +97,40 @@ export const StyledLogoText = styled<StyleProps, 'div'>('div')`
-webkit-background-clip: text;
color: transparent;
filter: invert(1) grayscale(1) contrast(9);
font-size: ${p => p.isMobile ? 50 : 80}px;
font-size: 80px;
font-weight: 600;
text-align: center;
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
user-select: none;
margin-top: ${p => p.isMobile ? -15 : 0}px;
margin-top: 0px;
`

export const StyledLogoBorder = styled<StyleProps, 'div'>('div')`
border: 6px solid #fff;
border-radius: 50%;
width: ${p => p.isMobile ? 100 : 160}px;
height: ${p => p.isMobile ? 100 : 160}px;
width: 160px;
height: 160px;
background: ${p => p.bg || '#DE4D26'};
padding-top: ${p => p.padding ? '35px' : 0};
margin: -66px 0 25px;
overflow: hidden;
`

export const StyledTextWrapper = styled<StyleProps, 'div'>('div')`
${p => getTextStyle(p.isMobile)}
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 217px);
`

export const StyledTitle = styled<StyleProps, 'div'>('div')`
font-size: ${p => p.isTwitterTip ? 18 : 28}px;
font-weight: 600;
line-height: 1;
color: #4b4c5c;
margin: ${p => p.isMobile ? 25 : 10}px 0 0;
padding-left: ${p => p.isMobile ? 25 : 0}px;
margin: 10px 0 0;
padding-left: 0px;
`

export const StyledText = styled<StyleProps, 'div'>('div')`
Expand All @@ -163,15 +139,15 @@ export const StyledText = styled<StyleProps, 'div'>('div')`
line-height: 1.5;
color: #686978;
padding-right: 37px;
padding-left: ${p => p.isMobile ? 25 : 0}px;
padding-left: 0px;
`

export const StyledWallet = styled<StyleProps, 'div'>('div')`
font-size: 12px;
color: #afb2f1;
text-align: right;
margin: ${p => p.isMobile ? 20 : 8}px 0 10px;
padding: 0 ${p => p.isMobile ? 20 : 19}px 0 55px;
margin: 8px 0 10px;
padding: 0 19px 0 55px;
`

export const StyledTokens = styled<{}, 'span'>('span')`
Expand Down Expand Up @@ -228,8 +204,8 @@ export const StyledSocialIcon = styled<{}, 'span'>('span')`

export const StyledSocialWrapper = styled<StyleProps, 'div'>('div')`
text-align: right;
padding-right: ${p => p.isMobile ? 0 : 40}px;
margin-top: ${p => p.isMobile ? 5 : 15}px;
padding-right: 40px;
margin-top: 15px;
`

export const StyledEmptyBox = styled<{}, 'div'>('div')`
Expand All @@ -245,9 +221,9 @@ export const StyledLogoImage = styled<StyleProps, 'div'>('div')`
`

export const StyledCheckbox = styled<StyleProps, 'div'>('div')`
width: ${p => p.isMobile ? 232 : 180}px;
padding-left: ${p => p.isMobile ? 40 : 0}px;
margin: ${p => p.isMobile ? '15px auto 5px auto' : '15px 0 5px'};
width: 180px;
padding-left: 0px;
margin: 15px 0 5px;
`
export const StyledNoticeWrapper = styled<{}, 'div'>('div')`
background: #fff;
Expand Down
7 changes: 7 additions & 0 deletions src/features/rewards/walletSummary/spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,16 @@ describe('WalletSummary tests', () => {

describe('basic tests', () => {
it('matches the snapshot', () => {
const RealDate = Date
global.Date = class extends RealDate {
constructor () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

return new RealDate('2019-06-02')
}
}
const component = baseComponent(props)
const tree = create(component).toJSON()
expect(tree).toMatchSnapshot()
global.Date = RealDate
})

it('renders the component', () => {
Expand Down
Loading