From ce4c524c5415d73393b14c08eac38ae109930ead Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Thu, 18 Feb 2021 10:29:27 -0600
Subject: [PATCH] #85 - clean up styles in search interface

---
 src/app/components/search/Search.component.html |  2 +-
 src/app/components/search/Search.component.scss | 11 +++++++++--
 src/app/components/search/Search.component.ts   |  4 ++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/components/search/Search.component.html b/src/app/components/search/Search.component.html
index 1fe893f..665d2b5 100644
--- a/src/app/components/search/Search.component.html
+++ b/src/app/components/search/Search.component.html
@@ -1,4 +1,4 @@
-<div class="container" style="display: flex; flex-direction: column; height: 100%;">
+<div [ngClass]="'container' + (isDark() ? ' dark' : '')" style="display: flex; flex-direction: column; height: 100%;">
     <ion-header class="search-header">
         <ion-input
             placeholder="Start typing to search..."
diff --git a/src/app/components/search/Search.component.scss b/src/app/components/search/Search.component.scss
index d162161..b136e7a 100644
--- a/src/app/components/search/Search.component.scss
+++ b/src/app/components/search/Search.component.scss
@@ -12,10 +12,11 @@
 
   .type {
     padding: 5px 20px;
+    border: 1px solid rgba(0,0,0,0);
+    border-radius: 30px;
 
     &.current-type {
       border: 1px solid #ccc;
-      border-radius: 30px;
     }
 
     &:hover {
@@ -144,4 +145,10 @@
       border: 1px solid var(--noded-background-note-hover);
     }
   }
-}
\ No newline at end of file
+}
+
+.container.dark {
+  .types {
+    color: #eeeeee;
+  }
+}
diff --git a/src/app/components/search/Search.component.ts b/src/app/components/search/Search.component.ts
index 679f1de..6f9a7fc 100644
--- a/src/app/components/search/Search.component.ts
+++ b/src/app/components/search/Search.component.ts
@@ -73,6 +73,10 @@ export class SearchComponent implements OnInit {
         await this.ionModalController.dismiss();
     }
 
+    public isDark() {
+        return document.body.classList.contains('dark');
+    }
+
     filterView(name: string) {
         this.selectedType = name;
         this.results.next((this.allResults.getValue() || []).filter(x => {