From 664af88520b935ca88565cf9f541b459d4b9a3f9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 4 Jun 2017 01:30:17 +0900
Subject: [PATCH 1/3] Increase notification buttons height with px

from a viewpoint of accessibility

Fixes #9237

Auditors:

Test Plan:
1. Open about:preferences#general
2. Change lang setting
3. Click 'No' with a mouse using an arm opposite to a dominant arm
4. Check if you could click the button more easily than the current one
---
 app/renderer/components/common/browserButton.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index 6e9db23dda7..13bd41f3703 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -88,9 +88,9 @@ const styles = StyleSheet.create({
     boxShadow: globalStyles.button.default.boxShadow,
     cursor: 'pointer',
     width: 'auto',
-    height: 'auto',
 
     // TODO: #9223
+    height: '32px', // 32px == 1rem * 2
     fontSize: globalStyles.spacing.defaultFontSize,
     lineHeight: 1.25,
 
@@ -163,11 +163,10 @@ const styles = StyleSheet.create({
   },
 
   browserButton_notificationItem: {
-    fontSize: '13px',
     marginRight: '10px',
-    padding: '2px 15px',
     textTransform: 'capitalize',
-    width: 'auto'
+    width: 'auto',
+    height: '28px'
   },
 
   browserButton_subtleItem: {

From 1cc467e56e6a7276d198e086a5d6c78150070701 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 4 Jun 2017 01:52:12 +0900
Subject: [PATCH 2/3] Polish buttons on about:styles

Fixes #9238
Closes #9280

- Reorganize secondaryColor and primaryColor buttons
- Add overflow-x to pre
- Add secondaryColor to notificationItem

Auditors:

Test Plan:
1. Open about:styles#buttons
2. Make sure the notificationItem button is rendered as a white button
3. Make sure the code sample boxes are scrollable
---
 js/about/styles.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/js/about/styles.js b/js/about/styles.js
index 58491d03ee2..4ff53efbf4d 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -270,13 +270,17 @@ class AboutStyle extends ImmutableComponent {
 
         <BrowserButton primaryColor l10nId='primaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton primaryColor l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+        </Code></Pre>
+
+        <BrowserButton secondaryColor l10nId='secondaryColor' onClick={this.onRemoveBookmark} />
+        <Pre><Code>
+          &lt;BrowserButton secondaryColor l10nId='secondaryColor' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <BrowserButton actionItem l10nId='actionButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton actionItem l10nId='done'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton actionItem l10nId='done' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <BrowserButton subtleItem l10nId='subtleButton' onClick={this.onRemoveBookmark} />
@@ -284,9 +288,9 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton subtleItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
-        <BrowserButton secondaryColor groupedItem l10nId='whiteButton' onClick={this.onRemoveBookmark} />
-        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryColor' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor groupedItem l10nId='secondaryColor' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
           &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
           &lt;BrowserButton secondaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
@@ -298,9 +302,9 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton extensionItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <BrowserButton notificationItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
+        <BrowserButton notificationItem secondaryColor l10nId='notificationItem' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton notificationItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton notificationItem secondaryColor l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <GoTop />
@@ -694,15 +698,18 @@ const styles = StyleSheet.create({
 
   wrapper: common,
   container: common,
+
   pre: {
     background: '#1d1f21',
-    color: '#FFFFFF',
+    color: '#fff',
     fontSize: '14px',
-    padding: '5px',
+    padding: '1rem',
     borderRadius: globalStyles.radius.borderRadius,
     tabSize: '2',
-    wordBreak: 'normal'
+    wordBreak: 'normal',
+    overflowX: 'scroll'
   },
+
   code: {
     fontFamily: 'monospace',
     whiteSpace: 'pre'

From bdb27c7f6abd025de326f006fd9ad715f2f23233 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 4 Jun 2017 03:26:23 +0900
Subject: [PATCH 3/3] Add groupedItem to notification buttons

---
 app/renderer/components/common/browserButton.js | 2 --
 app/renderer/components/main/notificationBar.js | 2 +-
 js/about/styles.js                              | 6 ++++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index 13bd41f3703..71469d3dfa8 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -163,9 +163,7 @@ const styles = StyleSheet.create({
   },
 
   browserButton_notificationItem: {
-    marginRight: '10px',
     textTransform: 'capitalize',
-    width: 'auto',
     height: '28px'
   },
 
diff --git a/app/renderer/components/main/notificationBar.js b/app/renderer/components/main/notificationBar.js
index 93e49d43390..979de732847 100644
--- a/app/renderer/components/main/notificationBar.js
+++ b/app/renderer/components/main/notificationBar.js
@@ -83,7 +83,7 @@ class NotificationItem extends ImmutableComponent {
           }
           {
             this.props.detail.get('buttons').map((button) =>
-              <BrowserButton notificationItem secondaryColor
+              <BrowserButton secondaryColor notificationItem groupedItem
                 iconClass={button.get('className')}
                 testId='notificationButton'
                 label={button.get('text')}
diff --git a/js/about/styles.js b/js/about/styles.js
index 4ff53efbf4d..0edb83eabaa 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -302,9 +302,11 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton extensionItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <BrowserButton notificationItem secondaryColor l10nId='notificationItem' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor notificationItem groupedItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor notificationItem groupedItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;BrowserButton notificationItem secondaryColor l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton secondaryColor notificationItem groupedItem l10nId='Yes' onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;BrowserButton secondaryColor notificationItem groupedItem l10nId='No' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <GoTop />