From 11ea63e65633834095c4fc8243374ef0d129a9b4 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 7 Dec 2019 14:40:57 +0200
Subject: [PATCH 1/2] Remove unused SCSS and use Bootstrap's classes more

Signed-off-by: XhmikosR <xhmikosr@gmail.com>
---
 src/components/log/QueryLog.tsx         |  4 +--
 src/components/login/ForgotPassword.tsx |  2 +-
 src/scss/_custom.scss                   | 38 ++++---------------------
 src/views/Login.tsx                     |  4 +--
 4 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/src/components/log/QueryLog.tsx b/src/components/log/QueryLog.tsx
index 3ad483c..6a3c04e 100644
--- a/src/components/log/QueryLog.tsx
+++ b/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 w-100"
             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 w-100"
             onClick={() => api.addExactBlacklist(data.row.domain)}
           >
             {t("Blacklist")}
diff --git a/src/components/login/ForgotPassword.tsx b/src/components/login/ForgotPassword.tsx
index ee6df5c..ea10ecd 100644
--- a/src/components/login/ForgotPassword.tsx
+++ b/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")
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 8dcd636..b5b62dc 100644
--- a/src/scss/_custom.scss
+++ b/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;
 }
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index 4278a4d..d9ba661 100644
--- a/src/views/Login.tsx
+++ b/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>

From 537098175da76de1f40880bbb513d4e362d8ff2e Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Tue, 28 Jan 2020 14:18:33 +0200
Subject: [PATCH 2/2] Switch to `btn-block`

Signed-off-by: XhmikosR <xhmikosr@gmail.com>
---
 src/components/log/QueryLog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/log/QueryLog.tsx b/src/components/log/QueryLog.tsx
index 6a3c04e..94277ba 100644
--- a/src/components/log/QueryLog.tsx
+++ b/src/components/log/QueryLog.tsx
@@ -525,7 +525,7 @@ const columns = (t: TFunction) => [
         return (
           <button
             type="button"
-            className="btn btn-success w-100"
+            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 w-100"
+            className="btn btn-danger btn-block"
             onClick={() => api.addExactBlacklist(data.row.domain)}
           >
             {t("Blacklist")}