Merge pull request #5442 from brave/element-styling

clean up element styling

app/extensions/brave/locales/en-US/styles.properties

@@ -1,7 +1,17 @@
+introTitle=Welcome to the Brave Browser style guide
+intro=The following are examples of the UI components available on the browser and how to use them.
 styleGuide=Style Guide
 typography=Typography
 titles=Titles
 h1=This is an h1
 h2=This is an h2
 h3=This is an h3
-h4=This is an h4
+h4=This is an h4
+forms=Forms
+inputs=Inputs
+buttons=Buttons
+whiteButton=White Button
+primaryButton=Primary Button
+switches=Switches
+onByDefault=On by default
+offByDefault=Off by default

js/about/preferences.js

@@ -55,6 +55,7 @@ const hintCount = 3
 
 require('../../less/switchControls.less')
 require('../../less/about/preferences.less')
+require('../../less/forms.less')
 require('../../less/button.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
@@ -643,15 +644,15 @@ class GeneralTab extends ImmutableComponent {
       <div className='sectionTitle' data-l10n-id='generalSettings' />
       <SettingsList>
         <SettingItem dataL10nId='startsWith'>
-          <select value={getSetting(settings.STARTUP_MODE, this.props.settings)}
+          <select className='form-control' value={getSetting(settings.STARTUP_MODE, this.props.settings)}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.STARTUP_MODE)} >
             <option data-l10n-id='startsWithOptionLastTime' value={startsWithOption.WINDOWS_TABS_FROM_LAST_TIME} />
             <option data-l10n-id='startsWithOptionHomePage' value={startsWithOption.HOMEPAGE} />
             <option data-l10n-id='startsWithOptionNewTabPage' value={startsWithOption.NEW_TAB_PAGE} />
           </select>
         </SettingItem>
         <SettingItem dataL10nId='newTabMode'>
-          <select value={getSetting(settings.NEWTAB_MODE, this.props.settings)}
+          <select className='form-control' value={getSetting(settings.NEWTAB_MODE, this.props.settings)}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.NEWTAB_MODE)} >
             <option data-l10n-id='newTabNewTabPage' value={newTabMode.NEW_TAB_PAGE} />
             <option data-l10n-id='newTabHomePage' value={newTabMode.HOMEPAGE} />
@@ -660,6 +661,7 @@ class GeneralTab extends ImmutableComponent {
         </SettingItem>
         <SettingItem dataL10nId='myHomepage'>
           <input spellCheck='false'
+            className='form-control'
             data-l10n-id='homepageInput'
             value={homepageValue}
             onChange={changeSetting.bind(null, this.onChangeSetting, settings.HOMEPAGE)} />
@@ -672,7 +674,7 @@ class GeneralTab extends ImmutableComponent {
         }
         <SettingCheckbox dataL10nId='disableTitleMode' prefKey={settings.DISABLE_TITLE_MODE} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingItem dataL10nId='bookmarkToolbarSettings'>
-          <select id='bookmarksBarSelect' value={getSetting(settings.BOOKMARKS_TOOLBAR_MODE, this.props.settings)}
+          <select className='form-control' id='bookmarksBarSelect' value={getSetting(settings.BOOKMARKS_TOOLBAR_MODE, this.props.settings)}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.BOOKMARKS_TOOLBAR_MODE)} >
             <option data-l10n-id='bookmarksBarTextOnly' value={bookmarksToolbarMode.TEXT_ONLY} />
             <option data-l10n-id='bookmarksBarTextAndFavicon' value={bookmarksToolbarMode.TEXT_AND_FAVICONS} />
@@ -683,7 +685,7 @@ class GeneralTab extends ImmutableComponent {
             onChangeSetting={this.props.onChangeSetting} />
         </SettingItem>
         <SettingItem dataL10nId='selectedLanguage'>
-          <select value={getSetting(settings.LANGUAGE, this.props.settings) || defaultLanguage}
+          <select className='form-control' value={getSetting(settings.LANGUAGE, this.props.settings) || defaultLanguage}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.LANGUAGE)} >
             {languageOptions}
           </select>
@@ -790,6 +792,7 @@ class TabsTab extends ImmutableComponent {
       <SettingsList>
         <SettingItem dataL10nId='tabsPerTabPage'>
           <select
+            className='form-control'
             value={getSetting(settings.TABS_PER_PAGE, this.props.settings)}
             data-type='number'
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
@@ -870,7 +873,7 @@ class PaymentsTab extends ImmutableComponent {
     return <div>
       {
       !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
-        ? <input className='fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
+        ? <input className='form-control fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
         : <span><span data-l10n-id='accountBalanceLoading' /></span>
       }
       <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
@@ -986,6 +989,7 @@ class PaymentsTab extends ImmutableComponent {
           <SettingsList>
             <SettingItem>
               <select
+                className='form-control'
                 defaultValue={minDuration || 8}
                 onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>>
                 <option value='5'>5 seconds</option>
@@ -998,6 +1002,7 @@ class PaymentsTab extends ImmutableComponent {
           <SettingsList>
             <SettingItem>
               <select
+                className='form-control'
                 defaultValue={minPublisherVisits || 5}
                 onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>>>
                 <option value='2'>2 visits</option>
@@ -1094,9 +1099,9 @@ class PaymentsTab extends ImmutableComponent {
         <SettingsList>
           <SettingItem>
             <h3 data-l10n-id='firstRecoveryKey' />
-            <input onChange={this.handleFirstRecoveryKeyChange} type='text' />
+            <input className='form-control' onChange={this.handleFirstRecoveryKeyChange} type='text' />
             <h3 data-l10n-id='secondRecoveryKey' />
-            <input onChange={this.handleSecondRecoveryKeyChange} type='text' />
+            <input className='form-control' onChange={this.handleSecondRecoveryKeyChange} type='text' />
           </SettingItem>
         </SettingsList>
       </div>
@@ -1178,7 +1183,7 @@ class PaymentsTab extends ImmutableComponent {
               <td>
                 <SettingsList>
                   <SettingItem>
-                    <select id='fundsSelectBox'
+                    <select className='form-control' id='fundsSelectBox'
                       value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
                         this.props.settings)}
                       onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)} >
@@ -1450,14 +1455,18 @@ class ShieldsTab extends ImmutableComponent {
       <div className='sectionTitle' data-l10n-id='braveryDefaults' />
       <SettingsList>
         <SettingItem dataL10nId='adControl'>
-          <select value={this.props.braveryDefaults.get('adControl')} onChange={this.onChangeAdControl}>
+          <select className='form-control'
+            value={this.props.braveryDefaults.get('adControl')}
+            onChange={this.onChangeAdControl}>
             <option data-l10n-id='showBraveAds' value='showBraveAds' />
             <option data-l10n-id='blockAds' value='blockAds' />
             <option data-l10n-id='allowAdsAndTracking' value='allowAdsAndTracking' />
           </select>
         </SettingItem>
         <SettingItem dataL10nId='cookieControl'>
-          <select value={this.props.braveryDefaults.get('cookieControl')} onChange={this.onChangeCookieControl}>
+          <select className='form-control'
+            value={this.props.braveryDefaults.get('cookieControl')}
+            onChange={this.onChangeCookieControl}>
             <option data-l10n-id='block3rdPartyCookie' value='block3rdPartyCookie' />
             <option data-l10n-id='allowAllCookies' value='allowAllCookies' />
           </select>
@@ -1517,7 +1526,9 @@ class SecurityTab extends ImmutableComponent {
       <div className='sectionTitle' data-l10n-id='passwordsAndForms' />
       <SettingsList>
         <SettingItem dataL10nId='passwordManager'>
-          <select value={getSetting(settings.ACTIVE_PASSWORD_MANAGER, this.props.settings)} onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.ACTIVE_PASSWORD_MANAGER)} >
+          <select className='form-control'
+            value={getSetting(settings.ACTIVE_PASSWORD_MANAGER, this.props.settings)}
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.ACTIVE_PASSWORD_MANAGER)} >
             <option data-l10n-id='builtInPasswordManager' value={passwordManagers.BUILT_IN} />
             <option data-l10n-id='onePassword' value={passwordManagers.ONE_PASSWORD} />
             <option data-l10n-id='dashlane' value={passwordManagers.DASHLANE} />
@@ -1592,6 +1603,7 @@ class AdvancedTab extends ImmutableComponent {
       <SettingsList>
         <SettingItem dataL10nId='defaultZoomLevel'>
           <select
+            className='form-control'
             value={defaultZoomSetting === undefined || defaultZoomSetting === null ? config.zoom.defaultValue : defaultZoomSetting}
             data-type='float'
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.DEFAULT_ZOOM_LEVEL)}>

js/about/styles.js

@@ -6,15 +6,55 @@ const React = require('react')
 const ImmutableComponent = require('../components/immutableComponent')
 
 // Stylesheets go here
+require('../../less/about/styles.less')
+require('../../less/button.less')
+require('../../less/forms.less')
 
 class AboutStyle extends ImmutableComponent {
   render () {
-    return <div>
+    return <div className='wrapper'>
+      <h1 data-l10n-id='introTitle' />
+      <p data-l10n-id='intro' />
       <h1 className='typography' data-l10n-id='typography' />
       <h1 data-l10n-id='h1' />
       <h2 data-l10n-id='h2' />
       <h3 data-l10n-id='h3' />
       <h4 data-l10n-id='h4' />
+
+      <h1 data-l10n-id='forms' />
+      <h2 data-l10n-id='inputs' />
+      <div className='container'>
+        <input placeholder='Input box' className='form-control' type='text' />
+        <pre><code>
+          // require('less/forms.less'){'\n'}{'\n'}
+          &lt;input className='form-control' type='text' />
+        </code></pre>
+      </div>
+      <div className='container'>
+        <select className='form-control'>
+          <option>Select Box</option>
+          <option>Second Choice</option>
+          <option>Third Choice</option>
+        </select>
+        <pre><code>
+          &lt;select className='form-control'>{'\n'}
+            &lt;option>Select Box&lt;/option>{'\n'}
+            &lt;option>Second Choice&lt;/option>{'\n'}
+            &lt;option>Third Choice&lt;/option>{'\n'}
+          &lt;/select>
+        </code></pre>
+      </div>
+      <h2 data-l10n-id='buttons' />
+      <span data-l10n-id='whiteButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;span data-l10n-id='cancel' className='browserButton whiteButton inlineButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+      <span data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;span data-l10n-id='done' className='browserButton primaryButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
     </div>
   }
 }

js/components/braveryPanel.js

@@ -287,7 +287,7 @@ class BraveryPanel extends ImmutableComponent {
                     braverySelectTitle: true,
                     disabled: !shieldsUp
                   })} data-l10n-id='adControl' />
-                  <select value={adControl} onChange={this.onToggleAdControl} disabled={!shieldsUp}>
+                  <select className='form-control' value={adControl} onChange={this.onToggleAdControl} disabled={!shieldsUp}>
                     <option data-l10n-id='showBraveAds' value='showBraveAds' />
                     <option data-l10n-id='blockAds' value='blockAds' />
                     <option data-l10n-id='allowAdsAndTracking' value='allowAdsAndTracking' />

less/about/preferences.less

@@ -424,27 +424,6 @@ span.browserButton.primaryButton {
       margin-left: 10px;
     }
 
-    input,
-    select {
-      display: block;
-      border-radius: @borderRadius;
-      height: 2.25em;
-      font-size: 0.9em;
-      padding: 0.4em;
-      border: solid 1px @lightGray;
-      background: white;
-      color: @darkGray;
-      outline: none;
-    }
-
-    input {
-      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-    }
-
-    select  {
-      box-shadow: @lightBoxShadow;
-    }
-
     input[type="number"] {
       width: 50px;
       min-width: 50px;
@@ -469,9 +448,11 @@ span.browserButton.primaryButton {
 }
 
 input:not([type="checkbox"]), select {
-  box-sizing: border-box;
-  padding-left: 2px;
-  width: 280px;
+  &.form-control {
+    box-sizing: border-box;
+    padding-left: 2px;
+    width: 280px;
+  }
 }
 
 input[type="checkbox"][disabled] {

less/about/styles.less

@@ -0,0 +1,20 @@
+.wrapper,
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+pre {
+  background: #1d1f21;
+  color: #FFFFFF;
+  font-size: 14px;
+  padding: 5px;
+  border-radius: 4px;
+  tab-size: 2;
+  word-break: normal;
+}
+
+code {
+  font-family: monospace;
+  white-space: pre;
+}

less/forms.less

@@ -1,5 +1,19 @@
 @import "variables.less";
 
+.form-control {
+  display: block;
+  background: white;
+  border: solid 1px @lightGray;
+  border-radius: @borderRadius;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  color: @darkGray;
+  font-size: 14.5px;
+  height: 2.25em;
+  outline: none;
+  padding: 0.4em;
+  width: 100%;
+}
+
 .flyoutDialog {
   background-color: @toolbarBackground;
   border-radius: @borderRadius;