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

Commit

Permalink
update DisabledContentView to support reporting broken sites
Browse files Browse the repository at this point in the history
  • Loading branch information
antonok-edm committed Sep 19, 2019
1 parent 8870019 commit bb68161
Show file tree
Hide file tree
Showing 11 changed files with 41 additions and 19 deletions.
1 change: 1 addition & 0 deletions src/features/shields/display.ts
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ export const DisabledContentText = styled<{}, 'div'>('div')`
font-size: 12px;
font-weight: normal;
line-height: 18px;
text-align: center;
`

/**
Expand Down
11 changes: 6 additions & 5 deletions src/features/shields/structure/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -428,11 +428,12 @@ export const BlockedListFooterWithOptions = styled<{}, 'footer'>('footer')`
export const DisabledContentView = styled<{}, 'section'>('section')`
box-sizing: border-box;
display: grid;
grid-template-columns: 2fr 5fr;
grid-gap: 4px;
align-items: center;
max-width: 80%;
margin: 5px auto 8px;
grid-template-rows: auto auto;
flex-direction: column;
grid-gap: 12px;
justify-items: center;
max-width: 70%;
margin: 10px auto -5px;
`

/**
Expand Down
5 changes: 4 additions & 1 deletion src/theme/brave-dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ const darkTheme: ITheme = {
color: {
...defaultTheme.color,
contextMenuBackground: colors.black,
contextMenuForeground: colors.white
contextMenuForeground: colors.white,
defaultControl: colors.grey400,
defaultControlInteracting: colors.white,
defaultControlActive: colors.grey500
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/theme/shields-dark.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import ITheme from './theme-interface'
import defaultTheme from './brave-default'
import darkTheme from './brave-dark'
import colors from './colors'

const shieldsDarkTheme: ITheme = {
...defaultTheme,
...darkTheme,
name: 'Shields Dark',
color: {
...defaultTheme.color,
...darkTheme.color,
lionLogo: colors.grey700,
text: colors.white,
panelBackground: '#17171F',
Expand Down
8 changes: 5 additions & 3 deletions stories/features/shields/components/advancedView/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
TotalBlockedStatsNumber,
TotalBlockedStatsText,
DisabledContentView,
ShieldIcon,
ShieldsButton,
DisabledContentText,
Toggle
} from '../../../../../src/features/shields'
Expand All @@ -37,6 +37,7 @@ interface Props {
httpsUpgrades: number
fingerprintingBlocked: number
fakeOnChangeShieldsEnabled: () => void
fakeOnReportBrokenSite: () => void
}

export default class Header extends React.PureComponent<Props, {}> {
Expand Down Expand Up @@ -74,7 +75,8 @@ export default class Header extends React.PureComponent<Props, {}> {
favicon,
hostname,
isBlockedListOpen,
fakeOnChangeShieldsEnabled
fakeOnChangeShieldsEnabled,
fakeOnReportBrokenSite
} = this.props
return (
<ShieldsHeader status={enabled ? 'enabled' : 'disabled'}>
Expand Down Expand Up @@ -108,8 +110,8 @@ export default class Header extends React.PureComponent<Props, {}> {
)
: (
<DisabledContentView>
<div><ShieldIcon /></div>
<DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
<ShieldsButton level='secondary' type='default' size='small' onClick={fakeOnReportBrokenSite} text={getLocale('reportBrokenSite')}/>
</DisabledContentView>
)
}
Expand Down
5 changes: 4 additions & 1 deletion stories/features/shields/components/advancedView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface Props {
fakeOnChangeShieldsEnabled: () => void
fakeOnChangeAdvancedView: () => void
fakeToggleFirstAccess: () => void
fakeOnReportBrokenSite: () => void
}

interface State {
Expand All @@ -53,7 +54,8 @@ export default class ShieldsAdvancedView extends React.PureComponent<Props, Stat
fingerprintingBlocked,
fakeOnChangeShieldsEnabled,
fakeOnChangeAdvancedView,
fakeToggleFirstAccess
fakeToggleFirstAccess,
fakeOnReportBrokenSite
} = this.props
const { isBlockedListOpen } = this.state
return (
Expand All @@ -69,6 +71,7 @@ export default class ShieldsAdvancedView extends React.PureComponent<Props, Stat
scriptsBlocked={scriptsBlocked}
fingerprintingBlocked={fingerprintingBlocked}
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
fakeOnReportBrokenSite={fakeOnReportBrokenSite}
/>
{
enabled ? (
Expand Down
8 changes: 5 additions & 3 deletions stories/features/shields/components/simpleView/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
TotalBlockedStatsNumber,
TotalBlockedStatsText,
DisabledContentView,
ShieldIcon,
ShieldsButton,
DisabledContentText,
Toggle
} from '../../../../../src/features/shields'
Expand All @@ -39,6 +39,7 @@ interface Props {
fingerprintingBlocked: number
fakeOnChangeShieldsEnabled: () => void
fakeOnChangeReadOnlyView: () => void
fakeOnReportBrokenSite: () => void
}

export default class Header extends React.PureComponent<Props, {}> {
Expand All @@ -58,7 +59,8 @@ export default class Header extends React.PureComponent<Props, {}> {
hostname,
isBlockedListOpen,
fakeOnChangeReadOnlyView,
fakeOnChangeShieldsEnabled
fakeOnChangeShieldsEnabled,
fakeOnReportBrokenSite
} = this.props
return (
<ShieldsHeader status={enabled ? 'enabled' : 'disabled'}>
Expand Down Expand Up @@ -93,8 +95,8 @@ export default class Header extends React.PureComponent<Props, {}> {
)
: (
<DisabledContentView>
<div><ShieldIcon /></div>
<DisabledContentText>{getLocale('disabledMessage')}</DisabledContentText>
<ShieldsButton level='secondary' type='default' size='small' onClick={fakeOnReportBrokenSite} text={getLocale('reportBrokenSite')}/>
</DisabledContentView>
)
}
Expand Down
5 changes: 4 additions & 1 deletion stories/features/shields/components/simpleView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ interface Props {
fakeOnChangeShieldsEnabled: () => void
fakeOnChangeAdvancedView: () => void
fakeOnChangeReadOnlyView: () => void
fakeOnReportBrokenSite: () => void
}

interface State {
Expand All @@ -48,7 +49,8 @@ export default class ShieldsSimpleView extends React.PureComponent<Props, State>
fingerprintingBlocked,
fakeOnChangeShieldsEnabled,
fakeOnChangeReadOnlyView,
fakeOnChangeAdvancedView
fakeOnChangeAdvancedView,
fakeOnReportBrokenSite
} = this.props
const { isBlockedListOpen } = this.state
return (
Expand All @@ -64,6 +66,7 @@ export default class ShieldsSimpleView extends React.PureComponent<Props, State>
fingerprintingBlocked={fingerprintingBlocked}
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
fakeOnReportBrokenSite={fakeOnReportBrokenSite}
/>
<Footer
advancedView={false}
Expand Down
3 changes: 2 additions & 1 deletion stories/features/shields/fakeLocale.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ const locale: { [key: string]: string } = {
down: 'down',
forThisSite: 'for this site',
enabledMessage: 'If a site appears broken, try shields down',
disabledMessage: 'You’re browsing this site without any privacy and security protections.',
disabledMessage: 'You’re browsing this site without Brave\'s privacy and security protections. Does it not work right with Shields up?',
reportBrokenSite: 'Report a broken site',
// Total stats blocked
itemsBlocked: 'Items blocked',
itemBlocked: 'Item blocked',
Expand Down
6 changes: 5 additions & 1 deletion stories/features/shields/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface Props {
fakeOnChangeAdvancedView: () => void
fakeOnChangeReadOnlyView: () => void
fakeToggleFirstAccess: () => void
fakeOnReportBrokenSite: () => void
}

interface State {
Expand Down Expand Up @@ -51,7 +52,8 @@ export default class Shields extends React.PureComponent<Props, State> {
fakeOnChangeShieldsEnabled,
fakeOnChangeAdvancedView,
fakeOnChangeReadOnlyView,
fakeToggleFirstAccess
fakeToggleFirstAccess,
fakeOnReportBrokenSite
} = this.props
const { advancedView } = this.props
return advancedView
Expand All @@ -69,6 +71,7 @@ export default class Shields extends React.PureComponent<Props, State> {
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
fakeToggleFirstAccess={fakeToggleFirstAccess}
fakeOnReportBrokenSite={fakeOnReportBrokenSite}
/>
) : (
<SimpleView
Expand All @@ -83,6 +86,7 @@ export default class Shields extends React.PureComponent<Props, State> {
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
fakeOnReportBrokenSite={fakeOnReportBrokenSite}
/>
)
}
Expand Down
2 changes: 2 additions & 0 deletions stories/features/shields/story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ storiesOf('Feature Components/Shields', module)
const fakeToggleFirstAccess = () => {
store.set({ firstAccess: !store.state.firstAccess })
}
const fakeOnReportBrokenSite = () => { /* noop */ }
return (
<div style={{ margin: '120px' }}>
{
Expand All @@ -60,6 +61,7 @@ storiesOf('Feature Components/Shields', module)
fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
fakeToggleFirstAccess={fakeToggleFirstAccess}
fakeOnReportBrokenSite={fakeOnReportBrokenSite}
/>
)
}
Expand Down

0 comments on commit bb68161

Please sign in to comment.