From 9817f5ac5d33a440f0f2b466adef850cc03ab9d7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 22 Nov 2016 09:47:31 +0900
Subject: [PATCH] Aligned Flash info icons

Fixes #5760

Auditors: @bbondy

Test Plan: Open about:preferences#security and make sure the info icons are aligned
---
 js/about/preferences.js     | 25 +++++++++++++++----------
 less/about/preferences.less | 14 ++++++++++----
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index 7d072849c7e..4a23264f330 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -1584,24 +1584,29 @@ class SecurityTab extends ImmutableComponent {
       <div className='sectionTitle' data-l10n-id='pluginSettings' />
       <SettingsList>
         <SettingCheckbox checked={this.props.flashInstalled ? this.props.braveryDefaults.get('flash') : false} dataL10nId='enableFlash' onChange={this.onToggleFlash} disabled={!this.props.flashInstalled} />
-        <span className='subtext'>
-          <span className='fa fa-info-circle' id='flashInfoIcon' />
+        <div className='subtext flashText'>
           {
             isDarwin || isWindows
-              ? <span><span data-l10n-id='enableFlashSubtext' />&nbsp;
+              ? <div>
+                <span className='fa fa-info-circle' id='flashInfoIcon' />
+                <span data-l10n-id='enableFlashSubtext' />&nbsp;
                 <span className='linkText' onClick={aboutActions.newFrame.bind(null, {
                   location: appConfig.flash.installUrl
-                }, true)}>{'Adobe'}</span>.</span>
-              : <span data-l10n-id='enableFlashSubtextLinux' />
+                }, true)}>{'Adobe'}</span>.
+                </div>
+              : <div>
+                <span className='fa fa-info-circle' id='flashInfoIcon' />
+                <span data-l10n-id='enableFlashSubtextLinux' />
+              </div>
           }
           <div>
             <span className='fa fa-info-circle' id='flashInfoIcon' />
-            <span><span data-l10n-id='flashTroubleshooting' />&nbsp;
-              <span className='linkText' onClick={aboutActions.newFrame.bind(null, {
-                location: 'https://github.com/brave/browser-laptop/wiki/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues'
-              }, true)}>{'wiki'}</span>.</span>
+            <span data-l10n-id='flashTroubleshooting' />&nbsp;
+            <span className='linkText' onClick={aboutActions.newFrame.bind(null, {
+              location: 'https://github.com/brave/browser-laptop/wiki/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues'
+            }, true)}>{'wiki'}</span>.
           </div>
-        </span>
+        </div>
       </SettingsList>
       { !isLinux
       ? <div>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index b6b36d434c1..a1c154d0b1f 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -333,6 +333,16 @@ a {
   margin: 1.2em 2px 7px;
 }
 
+.settingsList .subtext {
+  &.flashText {
+    margin-top: 0;
+
+    #flashInfoIcon {
+      padding: 5px 5px 5px 0;
+    }
+  }
+}
+
 .settingsListCopy {
   color: @braveOrange;
   cursor: pointer;
@@ -1002,10 +1012,6 @@ div.nextPaymentSubmission {
   }
 }
 
-#flashInfoIcon {
-  padding: 5px 5px 5px 0;
-}
-
 .widevineInfoIcon {
   padding: 5px;
 }