From 5bb4894148bc5cf05399e376119845c3d163cb20 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        |  4 ++--
 .../features/shields/components/simpleView/header.tsx |  4 ++--
 stories/features/shields/fakeLocale.ts                |  3 ++-
 7 files changed, 20 insertions(+), 14 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..8e95ef84e 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..533cb0671 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'
@@ -108,8 +108,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={() => {}} text={getLocale('reportBrokenSite')}/>
               </DisabledContentView>
             )
           }
diff --git a/stories/features/shields/components/simpleView/header.tsx b/stories/features/shields/components/simpleView/header.tsx
index 12738a70e..fa4f11646 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'
@@ -93,8 +93,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={() => {}} text={getLocale('reportBrokenSite')}/>
               </DisabledContentView>
             )
           }
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',