make button styles consistent

brave · Dec 1, 2016 · 43e8923 · 43e8923
1 parent 6035541
commit 43e8923
Show file tree

Hide file tree

Showing 18 changed files with 193 additions and 157 deletions.
diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties
@@ -9,9 +9,16 @@ h3=This is an h3
 h4=This is an h4
 forms=Forms
 inputs=Inputs
+switches=Switches
+onByDefault=On by default
+offByDefault=Off by default
+
 buttons=Buttons
+browserButton=Browser Button
 whiteButton=White Button
+inlineButton=Inline Button
+wideButton=Wide Button
+smallButton=Small Button
 primaryButton=Primary Button
-switches=Switches
-onByDefault=On by default
-offByDefault=Off by default
+actionButton=Action Button
+subtleButton=Subtle Button
diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
@@ -42,7 +42,7 @@ class CheckDefaultBrowserDialog extends ImmutableComponent {
         <SwitchControl className='checkDefaultOnStartup' rightl10nId='checkDefaultOnStartup'
           checkedOn={this.props.checkDefaultOnStartup} onClick={this.onCheckDefaultOnStartup} />
         <div className='checkDefaultBrowserButtons'>
-          <Button l10nId='notNow' className='secondaryAltButton' onClick={this.onNotNow} />
+          <Button l10nId='notNow' className='whiteButton' onClick={this.onNotNow} />
           <Button l10nId='useBrave' className='primaryButton' onClick={this.onUseBrave} />
         </div>
       </div>

diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
@@ -135,7 +135,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
           <div data-l10n-id='importDataCloseBrowserWarning' />
         </div>
         <div className='formSection importBrowserDataButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
         </div>
         <div className='formSection importBrowserDataWarning'>

diff --git a/app/renderer/components/widevinePanel.js b/app/renderer/components/widevinePanel.js
@@ -45,7 +45,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
           <WidevineInfo newFrameAction={windowActions.newFrame} />
         </div>
         <div className='formSection commonFormButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='installAndAllow' className='primaryButton' onClick={this.onInstallAndAllow} />
         </div>
         <div className='formSection commonFormBottom'>

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -370,9 +370,11 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
       </div>
       <div className='settingsPanelDivider'>
-        <a target='_blank' className='browserButton primaryButton' href='https://www.buybitcoinworldwide.com/'>
-          buybitcoinworldwide.com
-        </a>
+        <button className='browserButton primaryButton'>
+          <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
+            buybitcoinworldwide.com
+          </a>
+        </button>
       </div>
     </div>
   }
@@ -415,9 +417,11 @@ class BitcoinDashboard extends ImmutableComponent {
           <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
         </div>
         <div className='settingsPanelDivider'>
-          <a target='_blank' className='browserButton primaryButton' href={url}>
-            {name}
-          </a>
+          <button className='browserButton primaryButton'>
+            <a target='_blank' href={url}>
+              {name}
+            </a>
+          </button>
         </div>
       </div>
     }

diff --git a/js/about/styles.js b/js/about/styles.js
@@ -44,17 +44,67 @@ class AboutStyle extends ImmutableComponent {
           &lt;/select>
         </code></pre>
       </div>
+
       <h2 data-l10n-id='buttons' />
-      <span data-l10n-id='whiteButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
+      <button data-l10n-id='browserButton' className='browserButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} />
       <pre><code>
-        &lt;span data-l10n-id='cancel' className='browserButton whiteButton inlineButton'{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
         onClick={'{this.onRemoveBookmark}'} />
       </code></pre>
-      <span data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+
+      <button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
       <pre><code>
-        &lt;span data-l10n-id='done' className='browserButton primaryButton'{'\n'}
+        &lt;button data-l10n-id='done' className='browserButton whiteButton inlineButton'{'\n'}
         onClick={'{this.onRemoveBookmark}'} />
       </code></pre>
+
+      <button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='smallButton' className='browserButton whiteButton smallButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton whiteButton smallButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton actionButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+      </code></pre>
     </div>
   }
 }

diff --git a/js/components/autofillAddressPanel.js b/js/components/autofillAddressPanel.js
@@ -150,7 +150,7 @@ class AutofillAddressPanel extends ImmutableComponent {
               value={this.props.currentDetail.get('email')} />
           </div>
           <div className='formRow manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveAddressButton' onClick={this.onSave}
               disabled={this.disableSaveButton} />
           </div>

diff --git a/js/components/autofillCreditCardPanel.js b/js/components/autofillCreditCardPanel.js
@@ -103,7 +103,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
             </select>
           </div>
           <div className='formRow manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveCreditCardButton' onClick={this.onSave}
               disabled={this.disableSaveButton} />
           </div>

diff --git a/js/components/button.js b/js/components/button.js
@@ -9,7 +9,7 @@ const cx = require('../lib/classSet')
 class Button extends ImmutableComponent {
   render () {
     if (this.props.iconClass) {
-      return <span disabled={this.props.disabled}
+      return <button disabled={this.props.disabled}
         data-l10n-id={this.props.l10nId}
         style={this.props.inlineStyles}
         data-button-value={this.props.dataButtonValue}
@@ -21,7 +21,7 @@ class Button extends ImmutableComponent {
         })}
         onClick={this.props.onClick} />
     }
-    return <span disabled={this.props.disabled}
+    return <button disabled={this.props.disabled}
       data-l10n-id={this.props.l10nId}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.props.inlineStyles}
@@ -30,7 +30,7 @@ class Button extends ImmutableComponent {
         [this.props.className]: !!this.props.className
       })} onClick={this.props.onClick}>
       {this.props.label}
-    </span>
+    </button>
   }
 }
 

diff --git a/js/components/clearBrowsingDataPanel.js b/js/components/clearBrowsingDataPanel.js
@@ -52,7 +52,7 @@ class ClearBrowsingDataPanel extends ImmutableComponent {
           <SwitchControl className='siteSettingsSwitch' rightl10nId='savedSiteSettings' checkedOn={this.props.clearBrowsingDataDetail.get('savedSiteSettings')} onClick={this.onToggleSavedSiteSettings} />
         </div>
         <div className='formSection clearBrowsingDataButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='clear' className='primaryButton clearDataButton' onClick={this.onClear} />
         </div>
         <div className='formSection clearBrowsingDataWarning'>

diff --git a/js/components/longPressButton.js b/js/components/longPressButton.js
@@ -68,7 +68,7 @@ class LongPressButton extends ImmutableComponent {
   }
 
   render () {
-    return <span data-l10n-id={this.props.l10nId}
+    return <button data-l10n-id={this.props.l10nId}
       className={this.props.className}
       disabled={this.props.disabled}
       onClick={this.onClick}

diff --git a/js/components/navigationBar.js b/js/components/navigationBar.js
@@ -131,20 +131,20 @@ class NavigationBar extends ImmutableComponent {
         ? null
         : this.loading
           ? <span className='navigationButtonContainer'>
-            <span data-l10n-id='stopButton'
+            <button data-l10n-id='stopButton'
               className='navigationButton stopButton'
               onClick={this.onStop} />
           </span>
           : <span className='navigationButtonContainer'>
-            <span data-l10n-id='reloadButton'
+            <button data-l10n-id='reloadButton'
               className='navigationButton reloadButton'
               onClick={this.onReload} />
           </span>
       }
       {
         !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
         ? <span className='navigationButtonContainer'>
-          <span data-l10n-id='homeButton'
+          <button data-l10n-id='homeButton'
             className='navigationButton homeButton'
             onClick={this.onHome} />
         </span>
@@ -154,7 +154,7 @@ class NavigationBar extends ImmutableComponent {
         {
           !this.titleMode
           ? <span className='bookmarkButtonContainer'>
-            <span data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+            <button data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
               className={cx({
                 navigationButton: true,
                 bookmarkButton: true,
@@ -192,12 +192,14 @@ class NavigationBar extends ImmutableComponent {
           {
             !this.showNoScriptInfo
             ? null
-            : <Button iconClass='fa-ban'
-              l10nId='noScriptButton'
-              className={cx({
-                'noScript': true
-              })}
-              onClick={this.onNoScript} />
+            : <span className='noScriptButtonContainer'>
+              <Button iconClass='fa-ban'
+                l10nId='noScriptButton'
+                className={cx({
+                  'noScript': true
+                })}
+                onClick={this.onNoScript} />
+            </span>
           }
         </div>
       }

diff --git a/js/components/siteInfo.js b/js/components/siteInfo.js
@@ -84,7 +84,7 @@ class SiteInfo extends ImmutableComponent {
           <ul>
             <li><span className='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' /></li>
             <li>
-              <Button l10nId='allowRunInsecureContent' className='secondaryAltButton allowRunInsecureContentButton' onClick={this.onAllowRunInsecureContent} />
+              <Button l10nId='allowRunInsecureContent' className='whiteButton allowRunInsecureContentButton' onClick={this.onAllowRunInsecureContent} />
               <Button l10nId='dismissAllowRunInsecureContent' className='primaryButton dismissAllowRunInsecureContentButton' onClick={this.props.onHide} />
             </li>
           </ul>
@@ -96,7 +96,7 @@ class SiteInfo extends ImmutableComponent {
             <li><span className='denyRunInsecureContentWarning' data-l10n-id='denyRunInsecureContentWarning' /></li>
             <li>
               <Button l10nId='denyRunInsecureContent' className='primaryButton denyRunInsecureContentButton' onClick={this.onDenyRunInsecureContent} />
-              <Button l10nId='dismissDenyRunInsecureContent' className='secondaryAltButton dismissDenyRunInsecureContentButton' onClick={this.props.onHide} />
+              <Button l10nId='dismissDenyRunInsecureContent' className='whiteButton dismissDenyRunInsecureContentButton' onClick={this.props.onHide} />
             </li>
           </ul>
         </li>

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -15,6 +15,7 @@ body {
 
 #paymentsSwitches {
   margin-top: 15px;
+  padding: 5px;
 
   .enablePaymentsSwitch {
     float: left;
@@ -375,38 +376,6 @@ span.settingsListCopy {
   }
 }
 
-span.browserButton {
-  &.advancedSettings {
-    font-size: 0.9em;
-  }
-
-  &.primaryButton {
-    &.addFunds {
-      font-size: 0.9em;
-      margin-right: 50px;
-    }
-
-    &.clearBrowsingDataButton,
-    &.importNowButton,
-    &.setAsDefaultButton,
-    &.manageAdblockSettings,
-    &.viewExtensionsInfo,
-    &.manageAutofillDataButton {
-      font-size: 0.9em;
-      margin-top: 20px;
-      padding: 5px 20px;
-    }
-
-    &.importNowButton {
-      margin-top: 5px;
-    }
-
-    &.setAsDefaultButton {
-      margin-top: 5px;
-    }
-  }
-}
-
 .settingsList {
   .settingItem {
 
@@ -430,10 +399,6 @@ span.browserButton {
       font-size: 0.95em;
     }
 
-    .browserButton {
-      font-size: 0.95em;
-    }
-
     span.linkText {
       text-align: left;
       display: inline;
@@ -703,12 +668,6 @@ div.nextPaymentSubmission {
       top: 1px;
       left: 5px;
     }
-    .addFunds {
-      margin: 0;
-      height: 30px;
-      line-height: 24px;
-      box-sizing: border-box;
-    }
     .accountBalanceError, .nextReconcileDate {
       font-size: 14px;
       margin: 10px 0;
@@ -919,6 +878,11 @@ div.nextPaymentSubmission {
     a {
       text-decoration: none;
     }
+
+    button > a {
+      color: #fff;
+    }
+
     .labelText {
       clear: both;
       font-size: 1em;
@@ -934,12 +898,11 @@ div.nextPaymentSubmission {
         transform: rotate(12deg);
       }
     }
+
     .primaryButton {
       display: block;
       float: right;
-      font-size: 14px;
       width: 180px;
-      padding: 4px 0px;
       margin-bottom: 15px;
     }