Merge pull request #6324 from luixxiul/fix-buttons-margin

Small fixes of buttons on about:certerror and .noScriptInfo

Author: bsclifton

js/about/certerror.js

@@ -138,10 +138,9 @@ class CertErrorPage extends React.Component {
       <div className='buttons'>
         <Button l10nId='certErrorSafety' className='actionButton' onClick={this.onSafety.bind(this)} />
         {this.state.url ? (this.state.advanced
-          ? (<div>
-            <Button l10nId='certErrorButtonText' className='subtleButton' onClick={this.onAccept.bind(this)} />
-            <Button l10nId='certErrorShowCertificate' className='subtleButton' onClick={this.onDetail.bind(this)} />
-          </div>)
+          ? (<Button l10nId='certErrorButtonText' className='subtleButton' onClick={this.onAccept.bind(this)} />) : null) : null}
+        {this.state.url ? (this.state.advanced
+          ? (<Button l10nId='certErrorShowCertificate' className='subtleButton' onClick={this.onDetail.bind(this)} />)
           : <Button l10nId='certErrorAdvanced' className='subtleButton' onClick={this.onAdvanced.bind(this)} />) : null}
       </div>
     </div>

js/components/noScriptInfo.js

@@ -64,7 +64,7 @@ class NoScriptInfo extends ImmutableComponent {
       site: this.props.frameProps.get('location') || 'this page'
     }
     return <Dialog onHide={this.props.onHide} className='noScriptInfo' isClickDismiss>
-      <div>
+      <div className='dialogInner'>
         <div className='truncate' data-l10n-args={JSON.stringify(l10nArgs)}
           data-l10n-id={this.numberBlocked === 1 ? 'scriptBlocked' : 'scriptsBlocked'} />
         {this.buttons}

less/about/error.less

@@ -20,6 +20,18 @@
         padding-bottom: 1rem;
       }
 
+      .buttons {
+        display: flex;
+        flex-flow: row wrap;
+        position: relative;
+        right: .2em; // cancel margin: .2em to align .buttons and .certErrorText
+
+        > .browserButton {
+          margin: .2em;
+          font-size: 14px;
+        }
+      }
+
       .errorLogo {
         margin-bottom: 2rem;
 

less/forms.less

@@ -515,14 +515,18 @@ select {
 }
 
 .noScriptInfo {
-  >div {
+  .dialogInner {
     .flyoutDialog;
     right: 20px;
     width: auto;
     max-width: 350px;
     text-align: center;
     font-size: 15px;
     cursor: default;
+
+    .truncate {
+      margin-bottom: 5px;
+    }
   }
 }