update DisabledContentView to support reporting broken sites

brave · Sep 12, 2019 · 5bb4894 · 5bb4894
1 parent 0ca5339
commit 5bb4894
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',