CSS Tweaks and Locale Text

- updated text strings for buttons and paragraphs. few grammatical changes - general aesthetic tweaks to typography and coloring - updated 3 icons that were not rendering correctly - updated input type to be body copy
brave · Oct 10, 2018 · 32444f2 · 32444f2
1 parent 2910f73
commit 32444f2
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 84 deletions.
diff --git a/src/components/buttonsIndicators/button/style.ts b/src/components/buttonsIndicators/button/style.ts
@@ -116,7 +116,7 @@ export const StyledText = styled<Props, 'div'>('div')`
   align-items: center;
   text-align: center;
   letter-spacing: 0;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: ${p => p.size === 'call-to-action' ? 'uppercase' : 'none'};
   line-height: 1;
 `

diff --git a/src/components/dataTables/table/style.ts b/src/components/dataTables/table/style.ts
@@ -14,7 +14,7 @@ export const StyledNoContent = styled<{}, 'div'>('div')`
 
 export const StyledTable = styled<{}, 'table'>('table')`
   width: 100%;
-  margin-bottom: 11px;
+  margin-bottom: 20px;
 `
 
 export const StyledTH = styled<Partial<Cell>, 'th'>('th')`

diff --git a/src/components/formControls/input/style.ts b/src/components/formControls/input/style.ts
@@ -36,7 +36,7 @@ export const StyledInput = styled<InputProps, 'input'>('input')`
   width: calc(100% - 30px);
   max-width: 100%;
   font-size: 14px;
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${theme.fontFamily.body};
   border: none;
   color: ${p => p.disabled ? '#D1D1DB' : '#686978'};
   outline: unset;

diff --git a/src/components/icons/alert-shield.tsx b/src/components/icons/alert-shield.tsx
@@ -9,8 +9,9 @@ import GenerateComponentForGraphic from './template'
 
 // Direct access to SVG
 export const Graphic = (
-<svg width='27' height='32' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M26.667 6.649v4.003c0 .738-.007 1.945-.015 2.683-.001.139-.295 14.01-12.863 18.584-.009.003-.018.003-.028.005a1.29 1.29 0 0 1-.428.076c-.148 0-.292-.028-.429-.076-.008-.002-.017-.002-.027-.005C.31 27.345.016 13.474.015 13.335.007 12.597 0 11.39 0 10.652V6.649A2.67 2.67 0 0 1 2.667 3.98H4c5.6 0 8.121-3.314 8.225-3.455a1.315 1.315 0 0 1 1.027-.52c.452-.038.91.131 1.193.526.1.135 2.622 3.45 8.222 3.45H24a2.67 2.67 0 0 1 2.667 2.668zM13.333 9.985c-.736 0-1.333.596-1.333 1.334v5.337a1.333 1.333 0 1 0 2.667 0v-5.337c0-.738-.598-1.334-1.334-1.334zm.947 9.727c.24.252.387.6.387.947 0 .173-.027.347-.107.507a1.56 1.56 0 0 1-.28.44 1.325 1.325 0 0 1-.947.387c-.36 0-.693-.135-.946-.387a1.56 1.56 0 0 1-.28-.44 1.12 1.12 0 0 1-.107-.507c0-.347.147-.695.387-.947a1.36 1.36 0 0 1 1.453-.28c.173.066.307.16.44.28z' fillRule='evenodd' />
+<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M26 8.99v3L25.99 14c0 0.1-0.22 10.5-9.65 13.94h-0.02a0.97 0.97 0 0 1-0.64 0h-0.02C6.23 24.5 6 14.1 6 14A225 225 0 0 1 6 12v-3a2 2 0 0 1 2-2h1c4.2 0 6.1-2.5 6.17-2.6A0.99 0.99 0 0 1 15.94 4a0.98 0.98 0 0 1 0.9 0.4C16.9 4.5 18.8 6.99 23 6.99h1a2 2 0 0 1 2 2zM16 10a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1zm0.71 8.29a1.03 1.03 0 0 0-1.42 0 1.05 1.05 0 0 0-0.29 0.7 0.84 0.84 0 0 0 0.08 0.39 1.17 1.17 0 0 0 0.21 0.33A1 1 0 0 0 16 20a1 1 0 0 0 0.71-0.3 1.17 1.17 0 0 0 0.21-0.32A0.84 0.84 0 0 0 17 19a1.05 1.05 0 0 0-0.29-0.71z'
+    />
 </svg>
 )
 

diff --git a/src/components/icons/bat-color.tsx b/src/components/icons/bat-color.tsx
@@ -6,26 +6,14 @@ import * as React from 'react'
 import GenerateComponentForGraphic from './template'
 // Direct access to SVG
 export const Graphic = (
-    <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+    <svg width='32' height='32'>
         <g fill='none' fillRule='evenodd'>
-            <path
-                d='M11.7529 21.0875l3.469-5.945c.174-.298.475-.448.778-.448v-8.695c-.303 0-.604.15-.778.447l-11.098 19.025c-.174.299-.154.635-.006.897l7.608-4.437c-.123-.254-.135-.565.027-.844'
-                fill='#FF5000'
-            />
-            <path
-                d='M16.7783 15.1422l3.469 5.945c.162.28.15.59.027.844l7.608 4.438c.148-.263.167-.599-.006-.898l-11.098-19.024c-.174-.298-.476-.448-.778-.448v8.696c.302 0 .604.149.778.447'
-                fill='#9E1F63'
-            />
-            <path
-                d='M27.8818 26.3687l-7.607-4.437c-.143.292-.435.511-.807.511h-6.936c-.372 0-.664-.219-.806-.511l-7.608 4.437c.152.267.435.459.785.459h22.195c.349 0 .633-.192.784-.459'
-                fill='#662D91'
-            />
-            <path
-                d='M11.7256 21.9312c.143.293.435.512.807.512h6.935c.372 0 .664-.219.807-.512.123-.254.135-.564-.028-.844l-3.468-5.945c-.174-.298-.476-.447-.779-.447-.302 0-.604.149-.778.447l-3.469 5.945c-.162.28-.15.59-.027.844'
-                fill='#FFF'
-            />
+            <path d='M2.05 27.5l8.2-4.87 5.65-10V3c-.15 0-.3.1-.42.3L8.8 15.14 2.1 26.98c-.1.2-.12.38-.04.51' fill='#FF4724' />
+            <path d='M15.9 3v9.64l5.65 10 8.2 4.85c.07-.13.06-.3-.06-.5L23 15.13 16.3 3.3c-.1-.2-.25-.3-.4-.3' fill='#9E1F63' />
+            <path d='M29.74 27.5l-8.2-4.87h-11.3l-8.2 4.86c.08.14.24.22.47.22h26.78c.22 0 .38-.08.45-.22' fill='#662D91' />
+            <path fill='#FFF' d='M10.24 22.63h11.31l-5.65-9.99z' />
         </g>
-    </svg>
+</svg>
 )
 // Styled Component for SVG
 export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/bat-grey.tsx b/src/components/icons/bat-grey.tsx
@@ -4,30 +4,16 @@
 
 import * as React from 'react'
 import GenerateComponentForGraphic from './template'
-
 // Direct access to SVG
 export const Graphic = (
-    <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+    <svg width='32' height='32'>
         <g fill='none' fillRule='evenodd'>
-            <path
-                d='M11.7529 21.0875l3.469-5.945c.174-.298.475-.448.778-.448v-8.695c-.303 0-.604.15-.778.447l-11.098 19.025c-.174.299-.154.635-.006.897l7.608-4.437c-.123-.254-.135-.565.027-.844'
-                fill='#B0B0B0'
-            />
-            <path
-                d='M16.7783 15.1422l3.469 5.945c.162.28.15.59.027.844l7.608 4.438c.148-.263.167-.599-.006-.898l-11.098-19.024c-.174-.298-.476-.448-.778-.448v8.696c.302 0 .604.149.778.447'
-                fill='#6C6C6C'
-            />
-            <path
-                d='M27.8818 26.3687l-7.607-4.437c-.143.292-.435.511-.807.511h-6.936c-.372 0-.664-.219-.806-.511l-7.608 4.437c.152.267.435.459.785.459h22.195c.349 0 .633-.192.784-.459'
-                fill='#464646'
-            />
-            <path
-                d='M11.7256 21.9312c.143.293.435.512.807.512h6.935c.372 0 .664-.219.807-.512.123-.254.135-.564-.028-.844l-3.468-5.945c-.174-.298-.476-.447-.779-.447-.302 0-.604.149-.778.447l-3.469 5.945c-.162.28-.15.59-.027.844'
-                fill='#FFF'
-            />
+            <path d='M2.05 27.5l8.2-4.87 5.65-10V3c-.15 0-.3.1-.42.3L8.8 15.14 2.1 26.98c-.1.2-.12.38-.04.51' fill='#B0B0B0' />
+            <path d='M15.9 3v9.64l5.65 10 8.2 4.85c.07-.13.06-.3-.06-.5L23 15.13 16.3 3.3c-.1-.2-.25-.3-.4-.3' fill='#6C6C6C' />
+            <path d='M29.74 27.5l-8.2-4.87h-11.3l-8.2 4.86c.08.14.24.22.47.22h26.78c.22 0 .38-.08.45-.22' fill='#464646' />
+            <path fill='#FFF' d='M10.24 22.63h11.31l-5.65-9.99z' />
         </g>
-    </svg>
+</svg>
 )
-
 // Styled Component for SVG
 export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/open-new.tsx b/src/components/icons/open-new.tsx
@@ -9,12 +9,9 @@ import GenerateComponentForGraphic from './template'
 
 // Direct access to SVG
 export const Graphic = (
-  <svg width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
-    <defs>
-      <path d='M29.332 29.333v-11.97a1.333 1.333 0 1 1 2.667 0v13.304c0 .736-.597 1.333-1.334 1.333H1.333A1.333 1.333 0 0 1 0 30.667V1.333C0 .597.597 0 1.333 0h12.5a1.333 1.333 0 0 1 0 2.667H2.666v26.666h26.665zM27.448 2.667h-7.45a1.333 1.333 0 0 1 0-2.667h10.669C31.403 0 32 .597 32 1.333V12a1.333 1.333 0 1 1-2.667 0V4.552L11.61 22.276a1.333 1.333 0 1 1-1.886-1.886L27.448 2.667z' id='a' />
-    </defs>
-    <use fill='#4A4A4A' xlinkHref='#a' />
-  </svg>
+<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M26 26v-8.98a1 1 0 1 1 2 0V27a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9.37a1 1 0 0 1 0 2H6v20h20zM24.59 6h-5.6a1 1 0 0 1 0-2H27a1 1 0 0 1 1 1v8a1 1 0 0 1-2 0V7.41l-13.3 13.3a1 1 0 0 1-1.4-1.42L24.58 6z'/>
+</svg>
 )
 
 // Styled Component for SVG

diff --git a/src/features/sync/text/index.ts b/src/features/sync/text/index.ts
@@ -6,33 +6,35 @@ import styled from '../../../theme'
 import Heading from '../../../components/text/heading'
 
 export const Title = styled(Heading)`
-  font-weight: 700;
-  font-size: 36px;
-  margin: 0 0 10px;
+  font-weight: 500;
+  font-size: 26px;
+  margin: 0 0 20px 0;
 `
 
 export const SubTitle = styled(Heading)`
-  font-weight: 700;
-  font-size: 24px;
-  margin: 30px 0 20px;
+  font-weight: 500;
+  font-size: 20px;
+  margin: 30px 0 10px 0;
 `
 
 export const Paragraph = styled<{}, 'p'>('p')`
   font-size: 16px;
   font-weight: 300;
-  line-height: 1.63;
+  line-height: 1.75;
   margin: 0;
+  font-family: 'Muli', sans-serif;
+  padding: 0 0 10px 0
 `
 
 export const EmphasisText = styled(Paragraph.withComponent('em'))`
   display: block;
-  font-weight: 500;
+  font-weight: 400;
   margin: 0px 0 10px;
   font-style: normal;
 `
 
 export const SecondaryText = styled(EmphasisText)`
-  color: ${p => p.theme.color.subtle};
+  color: #7C7D8C;
   margin: 0px 0 20px;
 `
 
@@ -45,12 +47,11 @@ export const Link = styled<{}, 'a'>('a')`
 `
 
 export const Label = styled<{}, 'label'>('label')`
-  font-family: ${p => p.theme.fontFamily.heading};
-  color: ${p => p.theme.color.subtle};
+  font-family: ${p => p.theme.fontFamily.body};
+  color: ${p => p.theme.color.defaultControlActive};
   margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.5;
+  font-size: 14px;
+  font-weight: 400;
   letter-spacing: normal;
 `
 
@@ -61,17 +62,16 @@ export const SwitchLabel = styled(Label)`
 export const List = styled<{}, 'ul'>('ul')`
   font-size: 16px;
   font-weight: 300;
-  line-height: 1.63;
   margin: 20px 0;
   padding: 0 0 0 20px;
+  list-style-type: decimal;
 `
 
 export const ListOrdered = List.withComponent('ol')
 
 export const ListBullet = styled(Paragraph.withComponent('li'))`
-  margin: 10px 0;
 
   .syncButton {
-    margin: 10px 0 15px;
+    margin: 15px 0
   }
 `
diff --git a/src/theme/brave-default.ts b/src/theme/brave-default.ts
@@ -22,11 +22,11 @@ const theme: ITheme = {
     // warning controls
     warn: colors.red500,
     warnInteracting: colors.red600,
-    warnActive: colors.red300,
+    warnActive: colors.red700,
     // subtle controls
-    subtle: colors.grey300,
-    subtleInteracting: colors.grey400,
-    subtleActive: colors.grey200,
+    subtle: colors.grey400,
+    subtleInteracting: colors.grey500,
+    subtleActive: colors.grey600,
     // disabled controls
     disabled: colors.grey300,
     // backgrounds

diff --git a/stories/features/sync/modals/existingSyncCode.tsx b/stories/features/sync/modals/existingSyncCode.tsx
@@ -22,7 +22,7 @@ interface ExistingSyncCodeModalProps {
 
 class ExistingSyncCodeModal extends React.PureComponent<ExistingSyncCodeModalProps, {}> {
   get fakeDeviceName () {
-    return 'Your favorite coding OS'
+    return 'Work Computer'
   }
 
   setUpSync = () => {

diff --git a/stories/features/sync/modals/syncNewDevice.tsx b/stories/features/sync/modals/syncNewDevice.tsx
@@ -74,7 +74,7 @@ class SyncANewDeviceModal extends React.PureComponent<SyncANewDeviceModalProps,
                 className='syncButton'
                 level='secondary'
                 type='accent'
-                size='small'
+                size='medium'
                 onClick={this.showQRCode}
                 text={locale.showSecretQRCode}
               />
@@ -90,7 +90,7 @@ class SyncANewDeviceModal extends React.PureComponent<SyncANewDeviceModalProps,
                 className='syncButton'
                 level='secondary'
                 type='accent'
-                size='small'
+                size='medium'
                 onClick={this.showCodeWords}
                 text={locale.showSecretCodeWords}
               />
@@ -103,7 +103,7 @@ class SyncANewDeviceModal extends React.PureComponent<SyncANewDeviceModalProps,
         </List>
         <FlexColumn items='center' content='flex-end'>
           <Button
-            level='secondary'
+            level='primary'
             type='accent'
             size='medium'
             onClick={onClose}

diff --git a/stories/features/sync/page/fakeLocale.ts b/stories/features/sync/page/fakeLocale.ts
@@ -19,30 +19,30 @@ const locale = {
   deviceName: 'Device name',
   id: 'id',
   lastActive: 'Last active',
-  syncANewDevice: 'Sync a new device...',
+  syncANewDevice: 'Sync a new device',
   syncData: 'Sync Data',
   syncDataInfo: 'Sync the following data from this device:',
   bookmarks: 'Bookmarks',
   savedSiteSettings: 'Saved Site Settings',
   browsingHistory: 'Browsing History',
   clearData: 'Clear Data',
-  resetSync: 'Reset Sync...',
+  resetSync: 'Reset Sync',
   // i am new to sync modal
-  enterAnOptionalName: 'Enter an optional name for this device',
+  enterAnOptionalName: 'Enter a name for this device',
   setUpSync: 'Set up Sync',
   // i have an existing sync code modal
   enterYourSyncCodeWords: 'Enter your Sync code words:',
-  enterAnOptionalNameForThisDevice: 'Enter an optional name for this device:',
+  enterAnOptionalNameForThisDevice: 'Enter a name for this device:',
   // sync a new device modal
-  syncANewDeviceFirstBulletText: 'Open Brave on your new device and go to Preferences > Sync > "I have an existing synced device."',
-  syncANewDeviceSecondBulletText: 'If it asks you to scan a QR code, click the button below and point your camera at the QR code.',
-  syncANewDeviceThirdBulletText: 'If asks you to enter code words, type in the words below.',
-  showSecretQRCode: 'Show secret QR code. (Do not share!)',
-  showSecretCodeWords: 'Show secret code words. (Do not share!)',
+  syncANewDeviceFirstBulletText: 'Open Brave on your target device and go to Preferences > Sync > I have an existing synced device.',
+  syncANewDeviceSecondBulletText: 'If asked to scan a QR code, click the button below and scan the code using the device\'s camera.',
+  syncANewDeviceThirdBulletText: 'If prompted for security codes, type in the words below.',
+  showSecretQRCode: 'Show Sync QR Code',
+  showSecretCodeWords: 'Show Sync Code Words',
   // reset sync modal
   resetSyncFirstBullet: 'Resetting Sync clears data stored on the Sync server and resets this device\'s Sync settings.',
   resetSyncSecondBullet: 'You will keep any bookmarks, history and other browsing data currently on this device.',
-  resetSyncThirdBullet: 'If you\'ve synced other devices, they will continue to sync their future browsing data. If you don\'t want that, you should reset Sync on those devices as well'
+  resetSyncThirdBullet: 'If you\'ve synced other devices, they will continue to sync their future browsing data. If you don\'t want that, you should reset Sync on those devices as well.'
 }
 
 export default locale