From aaf6aa44d8de0817014cac8cb64ef78199c804d4 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 15 Aug 2022 13:42:03 +0700
Subject: [PATCH] search items styling for darkmode

---
 packages/fakeyou/src/AppNew.scss                  | 15 +++++++++++++++
 packages/fakeyou/src/scss/site-refresh.scss       |  7 +++++++
 .../tts/tts_model_list/AutocompleteSearch.tsx     | 13 +++++--------
 packages/storyteller-stream/.env                  |  2 ++
 4 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 packages/storyteller-stream/.env

diff --git a/packages/fakeyou/src/AppNew.scss b/packages/fakeyou/src/AppNew.scss
index 5bb8037ed1..046064a9b8 100644
--- a/packages/fakeyou/src/AppNew.scss
+++ b/packages/fakeyou/src/AppNew.scss
@@ -195,6 +195,21 @@ $headings-font-family: "Merriweather", serif;
         }
       }
 
+      .menu-item {
+        color: $white;
+        background-color: $input-dark;
+        border-bottom: 1px solid;
+        border-color: rgba($white, 0.05);
+
+        &:hover {
+          background-color: lighten($input-dark, 10%);
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
       .form-control::placeholder {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: rgba($white, 0.5) !important;
diff --git a/packages/fakeyou/src/scss/site-refresh.scss b/packages/fakeyou/src/scss/site-refresh.scss
index 0d22a0c409..5a7e1e3b77 100644
--- a/packages/fakeyou/src/scss/site-refresh.scss
+++ b/packages/fakeyou/src/scss/site-refresh.scss
@@ -252,6 +252,13 @@ styles with important tags:
     padding-left: 2.375rem;
     padding-right: 2.375rem;
     cursor: pointer;
+    background-color: $white;
+    border-bottom: 1px solid;
+    border-color: rgba(#000, 0.06);
+
+    &:hover {
+      background-color: darken($white, 10%);
+    }
   }
 
   .login-panel {
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx
index 7df9ad4bf7..3cecab0fe3 100644
--- a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx
+++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx
@@ -31,12 +31,14 @@ export function AutocompleteSearch(props: Props) {
 
   // NB: Hack to constrain number of matches.
   // It would be nice if the library stopped searching.
-  const maxMenuItems = 15;
+  const maxMenuItems = 14;
 
   return (
     <>
       <div>
-        <label className="sub-title">{t("tts.TtsModelListPage.form.searchLabel")}</label>
+        <label className="sub-title">
+          {t("tts.TtsModelListPage.form.searchLabel")}
+        </label>
         <div className="form-group input-icon">
           {/* NB: See note above about this library. */}
           <span className="form-control-feedback">
@@ -61,12 +63,7 @@ export function AutocompleteSearch(props: Props) {
               </div>
             )}
             renderItem={(item: TtsModelListItem, isHighlighted: boolean) => (
-              <div
-                className="menu-item"
-                style={{ background: isHighlighted ? "lightgray" : "white" }}
-              >
-                {item.title}
-              </div>
+              <div className="menu-item">{item.title}</div>
             )}
             value={searchValue}
             onChange={(e: any) => setSearchValue(e.target.value)}
diff --git a/packages/storyteller-stream/.env b/packages/storyteller-stream/.env
new file mode 100644
index 0000000000..ecf547b24e
--- /dev/null
+++ b/packages/storyteller-stream/.env
@@ -0,0 +1,2 @@
+BROWSER=none
+HTTPS=true