fix btn-fill layout

src/client/js/components/LoginForm.jsx

@@ -98,19 +98,19 @@ class LoginForm extends React.Component {
   renderExternalAuthInput(auth) {
     const { t, csrf } = this.props;
     return (
-      <div key={auth} className="input-group justify-content-center d-flex mt-5">
+      <div className="col-6">
         {/* [TODO][GW-1913] use onClick, and delete form tag */}
-        <form role="form" action={`/passport/${auth}`} className="d-inline-flex flex-column">
+        <form key={auth} role="form" action={`/passport/${auth}`}>
           {/* [TODO][GW-1913] An AppContainer gets csrf data */}
           <input type="hidden" name="_csrf" value={csrf} />
-          <button type="submit" className="btn btn-fill px-0 py-2" id={auth}>
+          <button type="submit" className="btn btn-fill w-100" id={auth}>
             <div className="eff"></div>
-            <span className="btn-label p-3">
+            <span className="btn-label">
               <i className={`fa fa-${auth}`}></i>
             </span>
-            <span className="btn-label-text p-3">{t('Sign in')}</span>
+            <span className="btn-label-text">{t('Sign in')}</span>
           </button>
-          <div className="small text-center">by {auth} Account</div>
+          <div className="small text-right">by {auth} Account</div>
         </form>
       </div>
     );
@@ -124,8 +124,7 @@ class LoginForm extends React.Component {
       <>
         <div className="border-bottom"></div>
         <div id="external-auth" className={`external-auth ${collapsibleClass}`}>
-          <div className="spacer"></div>
-          <div className="d-flex flex-row justify-content-between flex-wrap">
+          <div className="row my-2">
             {Object.keys(this.objOfIsExternalAuthEnableds).map((auth) => {
               if (!this.objOfIsExternalAuthEnableds[auth]) {
                 return;
@@ -133,7 +132,6 @@ class LoginForm extends React.Component {
               return this.renderExternalAuthInput(auth);
             })}
           </div>
-          <div className="spacer"></div>
         </div>
         <div className="border-bottom"></div>
         <div className="text-center">

src/client/styles/scss/_login.scss

@@ -105,20 +105,6 @@
     }
   }
 
-  .external-auth {
-    form {
-      flex: 1;
-
-      @media (min-width: 350px) {
-        flex: 0.49;
-      }
-    }
-
-    .spacer {
-      height: 10px;
-    }
-  }
-
   .collapse-external-auth {
     overflow: hidden;
 
@@ -128,100 +114,53 @@
     }
   }
 
-  // button style
-  .btn-fill.login {
-    .btn-label {
-      background-color: rgba($danger, 0.4);
-    }
-    .eff {
-      background-color: rgba(#7e4153, 0.5);
-    }
-  }
-
-  // google
-  .btn-fill#google {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // github
-  .btn-fill#github {
-    .btn-label {
-      background-color: rgba(lighten(black, 20%), 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // facebook
-  .btn-fill#facebook {
-    .btn-label {
-      background-color: rgba(#29487d, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // twitter
-  .btn-fill#twitter {
-    .btn-label {
-      background-color: rgba(#1da1f2, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // oidc
-  .btn-fill#oidc {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // saml
-  .btn-fill#saml {
-    .btn-label {
-      background-color: rgba(#55a79a, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // basic
-  .btn-fill#basic {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-  // register
-  .btn-fill#register {
-    .btn-label {
-      background-color: rgba($success, 0.4);
-    }
-
-    .eff {
-      background-color: rgba(#3f7263, 0.5);
+  $btn-fill-colors: (
+    'login': (
+      rgba($danger, 0.4),
+      rgba(#7e4153, 0.5),
+    ),
+    'register': (
+      rgba($success, 0.4),
+      rgba(#3f7263, 0.5),
+    ),
+    'google': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+    'github': (
+      rgba(lighten(black, 20%), 0.4),
+      #555,
+    ),
+    'facebook': (
+      rgba(#29487d, 0.4),
+      #555,
+    ),
+    'twitter': (
+      rgba(#1da1f2, 0.4),
+      #555,
+    ),
+    'oidc': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+    'saml': (
+      rgba(#55a79a, 0.4),
+      #555,
+    ),
+    'basic': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+  );
+
+  @each $label, $colors in $btn-fill-colors {
+    .btn-fill##{$label} {
+      .btn-label {
+        background-color: nth($colors, 1);
+      }
+      .eff {
+        background-color: nth($colors, 2);
+      }
     }
   }
 

src/client/styles/scss/atoms/_buttons.scss

@@ -31,7 +31,7 @@
 }
 
 // fill button style
-.btn-fill {
+:root .btn.btn-fill {
   position: relative;
   overflow: hidden;
   color: white;
@@ -45,6 +45,7 @@
     z-index: 1;
     color: white;
     text-decoration: none;
+    padding: 10px 15px;
   }
 
   .btn-label-text {