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,7 +24,8 @@ export default class ConnectedStatusIndicator extends Component {
     const { status } = this.props
 
     return (
-      <div className={classnames({
+      <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,7 +132,8 @@ export default class PermissionPageContainerContent extends PureComponent {
     }
 
     return (
-      <div className={classnames('permission-approval-container__content', {
+      <div
+        className={classnames('permission-approval-container__content', {
           'permission-approval-container__content--redirect': redirect,
         })}
       >

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

@@ -121,7 +121,8 @@ export default class EthBalance extends Component {
 
     return (
       <div className="ether-balance ether-balance-amount" style={style}>
-        <div style={{
+        <div
+          style={{
             display: 'inline',
             width,
           }}

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

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