del inline css & form padding, wrong password fix

Signed-off-by: Rajan Patel <bitbucket@fobiopatel.com>

src/components/login/ForgotPassword.tsx

@@ -43,22 +43,21 @@ class ForgotPassword extends Component<
     const { t } = this.props;
 
     return (
-      <div style={{ width: "100%" }}>
+      <div className="full-width">
         <div
           className={
-            "card " + (this.props.error ? "border-danger" : "border-white")
+            "card mb0 " + (this.props.error ? "border-danger" : "border-white")
           }
-          style={{ marginBottom: "0px" }}
         >
           <div
-            className={this.props.error ? "bg-danger" : "bg-white"}
-            style={{ paddingRight: "0px" }}
+            className={this.props.error ? "bg-danger" : "bg-white pr0"}
           >
-            <span className="pull-right">
+            <span className={this.props.error ? "pull-left" : "pull-right"}>
               <button
                 type="button"
-                className="btn btn-link"
-                style={{ paddingRight: "0px" }}
+                className={
+                  "pr0 " + (this.props.error ? "btn disabled" : "btn btn-link")
+                }
                 onClick={this.onClick}
               >
                 {t("Forgot Password")}
@@ -67,9 +66,8 @@ class ForgotPassword extends Component<
           </div>
           <div
             className={
-              "card-body bg-white" + (this.isExpanded() ? "" : " collapse")
+              "card-body bg-white " + (this.isExpanded() ? "" : " collapse ") + (this.props.error ? "p12" : "p0")
             }
-            style={{ padding: "0px" }}
           >
             {t("forgot_password_description")}
             <pre>

src/scss/_custom.scss

@@ -34,14 +34,17 @@
   color: rgb(248, 108, 107);
 }
 
-#loginform {
-  padding: 15px;
-}
-
 #loginform div.row {
   margin: 0;
 }
 
+#loginform .btn.disabled {
+  /* because the forgot password button becomes a title on failed login */
+  color: #fff;
+  opacity: 1;
+  cursor: auto;
+}
+
 .login-box-msg {
   margin: 0;
   text-align: center;
@@ -109,6 +112,22 @@
   font-weight: bold;
 }
 
+.p0 {
+  padding: 0;
+}
+
+.p12 {
+  padding: 12px;
+}
+
+.pr0 {
+  padding-right: 0;
+}
+
+.mb0 {
+  margin-bottom: 0;
+}
+
 .background-image {
   background: url("../img/backgroundLight.png") repeat fixed;
 }