From bb68161252b64647bd9187a7cb8b7e119ee6b3c0 Mon Sep 17 00:00:00 2001
From: Anton Lazarev <antonok35@gmail.com>
Date: Wed, 11 Sep 2019 18:49:52 -0700
Subject: [PATCH] update DisabledContentView to support reporting broken sites

---
 src/features/shields/display.ts                       |  1 +
 src/features/shields/structure/index.ts               | 11 ++++++-----
 src/theme/brave-dark.ts                               |  5 ++++-
 src/theme/shields-dark.ts                             |  6 +++---
 .../shields/components/advancedView/header.tsx        |  8 +++++---
 .../shields/components/advancedView/index.tsx         |  5 ++++-
 .../features/shields/components/simpleView/header.tsx |  8 +++++---
 .../features/shields/components/simpleView/index.tsx  |  5 ++++-
 stories/features/shields/fakeLocale.ts                |  3 ++-
 stories/features/shields/index.tsx                    |  6 +++++-
 stories/features/shields/story.tsx                    |  2 ++
 11 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/features/shields/display.ts b/src/features/shields/display.ts
index 588690eea..a145fab7d 100644
--- a/src/features/shields/display.ts
+++ b/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;
 `
 
 /**
diff --git a/src/features/shields/structure/index.ts b/src/features/shields/structure/index.ts
index df77c8c32..a56dc7ceb 100644
--- a/src/features/shields/structure/index.ts
+++ b/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;
 `
 
 /**
diff --git a/src/theme/brave-dark.ts b/src/theme/brave-dark.ts
index 21a8f3468..01e9c9c54 100644
--- a/src/theme/brave-dark.ts
+++ b/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
   }
 }
 
diff --git a/src/theme/shields-dark.ts b/src/theme/shields-dark.ts
index 8ac8cfee9..1f6f86c1f 100644
--- a/src/theme/shields-dark.ts
+++ b/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',
diff --git a/stories/features/shields/components/advancedView/header.tsx b/stories/features/shields/components/advancedView/header.tsx
index df956b97c..804229ed2 100644
--- a/stories/features/shields/components/advancedView/header.tsx
+++ b/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>
             )
           }
diff --git a/stories/features/shields/components/advancedView/index.tsx b/stories/features/shields/components/advancedView/index.tsx
index 8629dc63e..fae182b71 100644
--- a/stories/features/shields/components/advancedView/index.tsx
+++ b/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 ? (
diff --git a/stories/features/shields/components/simpleView/header.tsx b/stories/features/shields/components/simpleView/header.tsx
index 12738a70e..19cfa0860 100644
--- a/stories/features/shields/components/simpleView/header.tsx
+++ b/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>
             )
           }
diff --git a/stories/features/shields/components/simpleView/index.tsx b/stories/features/shields/components/simpleView/index.tsx
index 02c17dbaa..6ead9fd0e 100644
--- a/stories/features/shields/components/simpleView/index.tsx
+++ b/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}
diff --git a/stories/features/shields/fakeLocale.ts b/stories/features/shields/fakeLocale.ts
index f7b0b144a..0b617915d 100644
--- a/stories/features/shields/fakeLocale.ts
+++ b/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',
diff --git a/stories/features/shields/index.tsx b/stories/features/shields/index.tsx
index 5e2c4199b..dc7cb6e73 100644
--- a/stories/features/shields/index.tsx
+++ b/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}
         />
       )
   }
diff --git a/stories/features/shields/story.tsx b/stories/features/shields/story.tsx
index cdc96bb72..96b1f2f2d 100644
--- a/stories/features/shields/story.tsx
+++ b/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}
             />
           )
         }