From 4af30aa302dc3265aced38728cd46cafce9a6334 Mon Sep 17 00:00:00 2001 From: Ross Moody Date: Mon, 21 May 2018 14:50:39 -0700 Subject: [PATCH] Updated Tor private tab styling and layout Fixes #14167 - Updated svg icon code to larger consistent size - Updated padding and margins - Center justified private tab setting content - Condensed private tab descriptor paragraphs at footer - Updated styling of boxes to horizontal rules --- .../newtab/private_tab_pagearea_ddgicon.svg | 37 +-------- app/extensions/brave/img/newtab/toricon.svg | 48 +----------- .../brave/locales/en-US/newtab.properties | 4 +- js/about/newprivatetab.js | 75 +++++++++---------- 4 files changed, 37 insertions(+), 127 deletions(-) diff --git a/app/extensions/brave/img/newtab/private_tab_pagearea_ddgicon.svg b/app/extensions/brave/img/newtab/private_tab_pagearea_ddgicon.svg index ed12290eba1..179d01fddd7 100644 --- a/app/extensions/brave/img/newtab/private_tab_pagearea_ddgicon.svg +++ b/app/extensions/brave/img/newtab/private_tab_pagearea_ddgicon.svg @@ -1,36 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/app/extensions/brave/img/newtab/toricon.svg b/app/extensions/brave/img/newtab/toricon.svg index 5b0ba4cf158..7f337dddb94 100644 --- a/app/extensions/brave/img/newtab/toricon.svg +++ b/app/extensions/brave/img/newtab/toricon.svg @@ -1,47 +1 @@ - - - - icn_hide_isp - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/app/extensions/brave/locales/en-US/newtab.properties b/app/extensions/brave/locales/en-US/newtab.properties index 306c14d33d9..0013026ac40 100644 --- a/app/extensions/brave/locales/en-US/newtab.properties +++ b/app/extensions/brave/locales/en-US/newtab.properties @@ -23,9 +23,7 @@ photoBy=Photo By pinTopSiteButton.title=Unpin page from top sites list preferencesPage.title=Go to Preferences page privateTabsMore=More about private tabs -privateTabText1=Whether or not you use Tor, private tabs are not logged in page history or counted in Brave Payments calculations. Private tabs and their cookies always vanish when the browser is closed. -privateTabText2=If you use private tabs without Tor, the sites you visit will be visible to your ISP or your employer. You won’t be anonymous, and sites will learn your public IP address. -privateTabText3=With Tor, Brave works hard to ensure that you’re extremely difficult to track online while providing a delightful browsing experience. But if your personal safety depends on remaining anonymous you may wish to use the Tor Browser from https://torproject.org/ instead. +privateTabText1=Whether or not you use Tor, private tabs are not logged in page history or counted in Brave Payments calculations. Private tabs and their cookies always vanish when the browser is closed. If you use private tabs without Tor, the sites you visit will be visible to your ISP or your employer. You won’t be anonymous, and sites will learn your public IP address. With Tor, Brave works hard to ensure that you’re extremely difficult to track online while providing a delightful browsing experience. But if your personal safety depends on remaining anonymous you may wish to use the Tor Browser from https://torproject.org/ instead. privateTabTitle=This is a Private Tab privateTabTorTitle=Make private tabs much more private with privateTabTorText1=Tor hides your IP address from the sites you visit, and hides the sites you visit from your ISP or your employer. Tor can slow down browsing. Some sites treat anonymous users differently, or might not work at all. Some sites might even ask you to prove you’re human. diff --git a/js/about/newprivatetab.js b/js/about/newprivatetab.js index ae38baf2602..aa50d1bb466 100644 --- a/js/about/newprivatetab.js +++ b/js/about/newprivatetab.js @@ -63,7 +63,7 @@ class NewPrivateTab extends React.Component {

- DuckDuckGo +  DuckDuckGo

@@ -84,7 +84,7 @@ class NewPrivateTab extends React.Component {

- Tor +  Tor

@@ -102,10 +102,8 @@ class NewPrivateTab extends React.Component {

-

-

-

-

+

+

} @@ -117,12 +115,12 @@ const atBreakpointIconGutter = `@media screen and (max-width: 800px)` const atBreakpointPrivateSearchTitle = '@media screen and (max-width: 590px)' const styles = StyleSheet.create({ newPrivateTabVars: { - '--private-tab-section-title-font-size': '24px', + '--private-tab-section-title-font-size': '20px', '--private-tab-section-title-letter-spacing': globalStyles.typography.display.spacingMedium, '--private-tab-section-title-logo-height': 'calc((var(--private-tab-section-title-font-size) / 2) * 3)', [atBreakpointPrivateSearchTitle]: { - '--private-tab-section-title-font-size': '18px', + '--private-tab-section-title-font-size': '20px', '--private-tab-section-title-letter-spacing': globalStyles.typography.display.spacingRegular } }, @@ -146,17 +144,13 @@ const styles = StyleSheet.create({ animationTiming: 'ease-out', display: 'flex', flexDirection: 'column', - alignItems: 'flex-start', + alignItems: 'center', justifyContent: 'flex-start', minHeight: '100%', height: 'initial', padding: '40px 60px' // same as newtab }, - section_privateTab: { - margin: '0 0 10px 70px' - }, - wrapper: { fontFamily: globalStyles.typography.body.family, display: 'flex', @@ -171,7 +165,6 @@ const styles = StyleSheet.create({ fontFamily: 'inherit', marginBottom: 0, [atBreakpointIconGutter]: { - padding: '14px 0', alignSelf: 'center', display: 'flex', flexDirection: 'column' @@ -202,28 +195,31 @@ const styles = StyleSheet.create({ }, title: { - marginTop: '14px', - marginBottom: '22px', + marginTop: '20px', + marginBottom: '30px', + paddingBottom: '30px', fontFamily: globalStyles.typography.display.family, letterSpacing: globalStyles.typography.display.spacingLarge, - fontSize: '30px', - color: globalStyles.color.white100 + fontSize: '26px', + color: globalStyles.color.white100, + borderBottom: 'solid 1px rgba(255,255,255,.1)' }, text: { - lineHeight: '1.5', - fontSize: '17px', + lineHeight: '1.75', + fontSize: '16px', color: globalStyles.color.alphaWhite, maxWidth: '800px', fontFamily: 'inherit', - ':not(:last-of-type)': { - paddingBottom: '20px' - } + paddingRight: '40px' }, - text_privateSearch: { - fontSize: '17px', - lineHeight: '1.5' + text_footer: { + lineHeight: '1.5', + fontSize: '13px', + color: 'rgba(255, 255, 255, .5)', + maxWidth: '800px', + fontFamily: 'inherit' }, text_sectionTitle: { @@ -235,40 +231,38 @@ const styles = StyleSheet.create({ }, text_sectionTitleHighlight: { - fontWeight: '600', - marginLeft: '7px' + fontWeight: '600' }, text_clickable: { cursor: 'pointer', - textDecoration: 'underline' + textDecoration: 'underline', + color: '#FF6000', + marginTop: '20px' }, privateSearch: { - border: 'solid 2px', - borderRadius: '10px', - padding: '20px', - marginBottom: '10px' + borderBottom: 'solid 1px rgba(255,255,255,.1)', + marginBottom: '30px' }, privateSearch__setting: { - marginBottom: '25px', + marginBottom: '30px', display: 'flex', alignItems: 'center' }, privateSearch__ddgImage: { - width: '82px', - marginRight: '20px' + width: '114px', + marginRight: '30px' }, privateSearch__torImage: { - width: '70px', - marginRight: '14px' + width: '114px', + marginRight: '30px' }, privateSearch__switch: { - marginLeft: '14px', padding: 0, cursor: 'pointer' }, @@ -276,9 +270,8 @@ const styles = StyleSheet.create({ privateSearch__title: { maxWidth: '800px', whiteSpace: 'nowrap', - marginRight: '18px', + marginBottom: '10px', display: 'flex', - alignItems: 'center', cursor: 'pointer' } })