From 2e5d4a6df997fb8003641e3c5868ac0f17b2f64e Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 11 Jan 2023 13:37:49 +0400
Subject: [PATCH] Dark mode inputs

---
 .../search-form/search-form.component.html    |  2 +-
 .../search-form/search-form.component.scss    |  3 --
 frontend/src/styles.scss                      | 32 +++++++++++++++++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index 4e38ea6e0..b881c6ea7 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -5,7 +5,7 @@
       <app-search-results #searchResults [hidden]="dropdownHidden" [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     </div>
     <div>
-      <button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary">
+      <button [disabled]="isSearching" type="submit" class="btn btn-block btn-purple">
         <fa-icon *ngIf="!(isTypeaheading$ | async) else searchLoading" [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon>
       </button>
     </div>
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index 7c8161196..d59acadb9 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -43,9 +43,6 @@ form {
   @media (min-width: 1200px) {
     min-width: 300px;
   }
-  input {
-    border: 0px;
-  }
   .btn {
     width: 100px;
   }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index d3d16d12e..b0cdb5ef6 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -115,10 +115,38 @@ body {
 }
 
 .form-control {
-  color: #495057;
+  color: #fff;
+  background-color: #2d3348;
+  border: 1px solid rgba(17, 19, 31, 0.2);
 }
+
 .form-control:focus {
-  color: #000;
+  color: #fff;
+  background-color: #2d3348;
+}
+
+.btn-purple {
+  background-color: #653b9c;
+  border-color: #653b9c;
+}
+
+.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
+  color: #fff;
+  background-color: #4d2d77;
+  border-color: #472a6e;
+}
+
+.btn-purple:focus, .btn-purple.focus {
+  color: #fff;
+  background-color: #533180;
+  border-color: #4d2d77;
+  box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
+}
+
+.btn-purple:hover {
+  color: #fff;
+  background-color: #533180;
+  border-color: #4d2d77;
 }
 
 .form-control.form-control-secondary {