update DisabledContentView to support reporting broken sites

src/features/shields/display.ts

@@ -191,6 +191,7 @@ export const DisabledContentText = styled<{}, 'div'>('div')`
   font-size: 12px;
   font-weight: normal;
   line-height: 18px;
+  text-align: center;
 `
 
 /**

src/features/shields/structure/index.ts

@@ -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;
 `
 
 /**

src/theme/brave-dark.ts

@@ -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
   }
 }
 

src/theme/shields-dark.ts

@@ -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',

stories/features/shields/components/advancedView/header.tsx

@@ -19,7 +19,7 @@ import {
   TotalBlockedStatsNumber,
   TotalBlockedStatsText,
   DisabledContentView,
-  ShieldIcon,
+  ShieldsButton,
   DisabledContentText,
   Toggle
  } from '../../../../../src/features/shields'
@@ -37,6 +37,7 @@ interface Props {
   httpsUpgrades: number
   fingerprintingBlocked: number
   fakeOnChangeShieldsEnabled: () => void
+  fakeOnReportBrokenSite: () => void
 }
 
 export default class Header extends React.PureComponent<Props, {}> {
@@ -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'}>
@@ -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>
             )
           }

stories/features/shields/components/advancedView/index.tsx

@@ -27,6 +27,7 @@ interface Props {
   fakeOnChangeShieldsEnabled: () => void
   fakeOnChangeAdvancedView: () => void
   fakeToggleFirstAccess: () => void
+  fakeOnReportBrokenSite: () => void
 }
 
 interface State {
@@ -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 (
@@ -69,6 +71,7 @@ export default class ShieldsAdvancedView extends React.PureComponent<Props, Stat
           scriptsBlocked={scriptsBlocked}
           fingerprintingBlocked={fingerprintingBlocked}
           fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
+          fakeOnReportBrokenSite={fakeOnReportBrokenSite}
         />
         {
           enabled ? (

stories/features/shields/components/simpleView/header.tsx

@@ -20,7 +20,7 @@ import {
   TotalBlockedStatsNumber,
   TotalBlockedStatsText,
   DisabledContentView,
-  ShieldIcon,
+  ShieldsButton,
   DisabledContentText,
   Toggle
  } from '../../../../../src/features/shields'
@@ -39,6 +39,7 @@ interface Props {
   fingerprintingBlocked: number
   fakeOnChangeShieldsEnabled: () => void
   fakeOnChangeReadOnlyView: () => void
+  fakeOnReportBrokenSite: () => void
 }
 
 export default class Header extends React.PureComponent<Props, {}> {
@@ -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'}>
@@ -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>
             )
           }

stories/features/shields/components/simpleView/index.tsx

@@ -23,6 +23,7 @@ interface Props {
   fakeOnChangeShieldsEnabled: () => void
   fakeOnChangeAdvancedView: () => void
   fakeOnChangeReadOnlyView: () => void
+  fakeOnReportBrokenSite: () => void
 }
 
 interface State {
@@ -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 (
@@ -64,6 +66,7 @@ export default class ShieldsSimpleView extends React.PureComponent<Props, State>
           fingerprintingBlocked={fingerprintingBlocked}
           fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
           fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
+          fakeOnReportBrokenSite={fakeOnReportBrokenSite}
         />
         <Footer
           advancedView={false}

stories/features/shields/fakeLocale.ts

@@ -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',

stories/features/shields/index.tsx

@@ -22,6 +22,7 @@ interface Props {
   fakeOnChangeAdvancedView: () => void
   fakeOnChangeReadOnlyView: () => void
   fakeToggleFirstAccess: () => void
+  fakeOnReportBrokenSite: () => void
 }
 
 interface State {
@@ -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
@@ -69,6 +71,7 @@ export default class Shields extends React.PureComponent<Props, State> {
           fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
           fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
           fakeToggleFirstAccess={fakeToggleFirstAccess}
+          fakeOnReportBrokenSite={fakeOnReportBrokenSite}
         />
       ) : (
         <SimpleView
@@ -83,6 +86,7 @@ export default class Shields extends React.PureComponent<Props, State> {
           fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
           fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
           fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
+          fakeOnReportBrokenSite={fakeOnReportBrokenSite}
         />
       )
   }

stories/features/shields/story.tsx

@@ -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' }}>
         {
@@ -60,6 +61,7 @@ storiesOf('Feature Components/Shields', module)
               fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
               fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
               fakeToggleFirstAccess={fakeToggleFirstAccess}
+              fakeOnReportBrokenSite={fakeOnReportBrokenSite}
             />
           )
         }