Enable react/jsx-first-prop-new-line for multiline, single prop JSX (#8276)

* Enable react/jsx-first-prop-new-line for multiline, single prop JSX
* yarn lint --fix

.eslintrc.js

@@ -74,7 +74,7 @@ module.exports = {
     'react/jsx-closing-tag-location': 'error',
     'react/jsx-no-duplicate-props': 'error',
     'react/jsx-closing-bracket-location': 'error',
-    'react/jsx-first-prop-new-line': 'error',
+    'react/jsx-first-prop-new-line': ['error', 'multiline'],
     'react/jsx-max-props-per-line': ['error', { 'maximum': 1, 'when': 'multiline' } ],
     'react/jsx-tag-spacing': ['error', {
       'closingSlash': 'never',

ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js

@@ -24,11 +24,12 @@ export default class ConnectedStatusIndicator extends Component {
     const { status } = this.props
 
     return (
-      <div className={classnames({
-        'connected-status-indicator__green-circle': status === STATUS_CONNECTED,
-        'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
-        'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
-      })}
+      <div
+        className={classnames({
+          'connected-status-indicator__green-circle': status === STATUS_CONNECTED,
+          'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
+          'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
+        })}
       />
     )
   }

ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@@ -132,9 +132,10 @@ export default class PermissionPageContainerContent extends PureComponent {
     }
 
     return (
-      <div className={classnames('permission-approval-container__content', {
-        'permission-approval-container__content--redirect': redirect,
-      })}
+      <div
+        className={classnames('permission-approval-container__content', {
+          'permission-approval-container__content--redirect': redirect,
+        })}
       >
         <div className="permission-approval-container__title">
           { t(...titleArgs) }

ui/app/components/ui/eth-balance/eth-balance.component.js

@@ -121,10 +121,11 @@ export default class EthBalance extends Component {
 
     return (
       <div className="ether-balance ether-balance-amount" style={style}>
-        <div style={{
-          display: 'inline',
-          width,
-        }}
+        <div
+          style={{
+            display: 'inline',
+            width,
+          }}
         >
           {this.renderBalance(formattedValue)}
         </div>

ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -196,10 +196,11 @@ export default class ConfirmApproveContent extends Component {
                   <div className="confirm-approve-content__small-blue-text">
                     View full transaction details
                   </div>
-                  <i className={classnames({
-                    'fa fa-caret-up': showFullTxDetails,
-                    'fa fa-caret-down': !showFullTxDetails,
-                  })}
+                  <i
+                    className={classnames({
+                      'fa fa-caret-up': showFullTxDetails,
+                      'fa fa-caret-down': !showFullTxDetails,
+                    })}
                   />
                 </div>
               </div>