Merge pull request #447 from XhmikosR/css

Remove unused SCSS and use Bootstrap's classes more

src/components/log/QueryLog.tsx

@@ -525,7 +525,7 @@ const columns = (t: TFunction) => [
         return (
           <button
             type="button"
-            className="btn btn-success full-width"
+            className="btn btn-success btn-block"
             onClick={() => api.addExactWhitelist(data.row.domain)}
           >
             {t("Whitelist")}
@@ -539,7 +539,7 @@ const columns = (t: TFunction) => [
         return (
           <button
             type="button"
-            className="btn btn-danger full-width"
+            className="btn btn-danger btn-block"
             onClick={() => api.addExactBlacklist(data.row.domain)}
           >
             {t("Blacklist")}

src/components/login/ForgotPassword.tsx

@@ -43,7 +43,7 @@ class ForgotPassword extends Component<
     const { t } = this.props;
 
     return (
-      <div className="full-width">
+      <div className="w-100">
         <div
           className={
             "card mb-0 " + (this.props.error ? "border-danger" : "border-white")

src/scss/_custom.scss

@@ -1,15 +1,3 @@
-@include media-breakpoint-down(xs) {
-  .hidden-xs-down {
-    display: none;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .hidden-sm-up {
-    display: none;
-  }
-}
-
 @media (max-width: 992px) and (min-width: 576px) {
   .sidebar-show.sidebar-fixed.sidebar-minimized .main,
   .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
@@ -26,31 +14,17 @@
   text-overflow: clip;
 }
 
-.full-width {
-  width: 100%;
-}
-
 .has-error {
   color: #f86c6b;
 }
 
-#loginform div.row {
-  margin: 0;
-}
-
 #loginform .btn.disabled {
   /* because the forgot password button becomes a title on failed login */
-  color: #fff;
+  color: $white;
   opacity: 1;
   cursor: auto;
 }
 
-.login-box-msg {
-  margin: 0;
-  text-align: center;
-  padding: 0 20px 20px;
-}
-
 .stat-height-lock {
   height: 100px;
 }
@@ -67,12 +41,10 @@
   opacity: 1;
   position: absolute;
   background-color: rgba(0, 0, 0, .7);
-  color: #fff;
+  color: $white;
   border-radius: 3px;
-  -webkit-transition: all .1s ease;
   transition: all .1s ease;
   pointer-events: none;
-  -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
 }
 
@@ -150,14 +122,14 @@
 
 .boxcontainer .app-header {
   max-width: 1250px;
-  border-bottom-color: #3c8dbc;
+  border-bottom-color: $navbar-bg;
 }
 
 .card-icon {
   position: absolute;
   right: 5%;
   top: 10%;
-  color: #000;
+  color: $black;
   opacity: .15;
   font-size: 3em;
 }
@@ -194,7 +166,7 @@
 
 pre {
   color: #a9a9a9;
-  background-color: #000;
+  background-color: $black;
   padding: 10px;
   margin: 10px 0;
 }

src/views/Login.tsx

@@ -111,7 +111,7 @@ class Login extends Component<LoginProps, LoginState> {
                 <b>hole</b>
               </span>
             </div>
-            <div className="login-box-msg">
+            <div className="m-0 text-center pt-0 pr-3 pb-3 pl-3">
               {t("Sign in to start your session")}
               {// If the user tried to go to a protected page and is not logged in,
               // tell them they will be redirected once login is successful
@@ -134,7 +134,7 @@ class Login extends Component<LoginProps, LoginState> {
               ) : null}
             </div>
             {this.state.error ? (
-              <div className="form-group has-error login-box-msg">
+              <div className="form-group has-error m-0 text-center pt-0 pr-3 pb-3 pl-3">
                 <label className="control-label">
                   <i className="fa fa-times-circle-o" /> {t("Wrong Password!")}
                 </label>