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 { ) : ( -
{getLocale('disabledMessage')} + {}} text={getLocale('reportBrokenSite')}/>
) } 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 { ) : ( -
{getLocale('disabledMessage')} + {}} text={getLocale('reportBrokenSite')}/>
) } 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',