From f30a45d1fdacb460a97969fae5035eee3a0bf501 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Mon, 12 Feb 2024 16:14:02 +0100
Subject: [PATCH] UI improvements (fix some colors):

* Fix #310: autocomplete background color.
* Fix #314: input colors.
* Autocomplete: adding a border, for better UI/UX.
---
 CHANGELOG.md                                        |  3 +++
 conversejs/custom/shared/styles/_peertubetheme.scss |  5 +++++
 conversejs/custom/shared/styles/_variables.scss     | 12 +++++++-----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a168adb..83116131 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@
   * Fix inconsistency between browsers on textarea outlines.
   * Fix ConverseJS input borders/outline/shadow.
 * Updated translations: german, french.
+* Fix #310: autocomplete background color.
+* Fix #314: input colors.
+* Autocomplete: adding a border, for better UI/UX.
 
 ## 8.1.0
 
diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss
index 6fabbc9b..59bf6e83 100644
--- a/conversejs/custom/shared/styles/_peertubetheme.scss
+++ b/conversejs/custom/shared/styles/_peertubetheme.scss
@@ -129,6 +129,11 @@
     background-color: var(--peertube-grey-background) !important;
   }
 
+  .suggestion-box__results {
+    // To make the autocompletes results more readable, adding a border (orange for the default theme)
+    border-color: var(--peertube-button-background);
+  }
+
   // hidding avatars when screen width is not big enough.
   @media screen and (max-width: 250px) {
     .message {
diff --git a/conversejs/custom/shared/styles/_variables.scss b/conversejs/custom/shared/styles/_variables.scss
index 4d2d4c52..86285a82 100644
--- a/conversejs/custom/shared/styles/_variables.scss
+++ b/conversejs/custom/shared/styles/_variables.scss
@@ -20,6 +20,8 @@
 .conversejs-bg.theme-peertube,
 #conversejs-bg.theme-peertube,
 body.converse-fullscreen.theme-peertube {
+  --foreground: var(--peertube-main-foreground);
+  --background: var(--peertube-main-background);
   --subdued-color: #a8aba1;
   --green: #3aa569; // only in this file
   --redder-orange: #e77051; // only in this file
@@ -39,10 +41,10 @@ body.converse-fullscreen.theme-peertube {
   --global-background-color: var(--peertube-main-background);
   --inverse-link-color: var(--peertube-button-foreground);
   --text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
-  --text-color: var(--peertube-main-foreground);
-  --controlbox-text-color: var(--peertube-main-foreground); // Note: controlbox is not used
-  --text-color-lighten-15-percent: var(--peertube-main-foreground);
-  --message-text-color: var(--peertube-main-foreground);
+  --text-color: var(--peertube-input-foreground);
+  --controlbox-text-color: var(--peertube-input-foreground); // Note: controlbox is not used
+  --text-color-lighten-15-percent: var(--peertube-input-foreground);
+  --message-text-color: var(--peertube-input-foreground);
   --message-receipt-color: var(--green);
   --save-button-color: var(--green);
   --button-text-color: var(--peertube-button-foreground);
@@ -61,7 +63,7 @@ body.converse-fullscreen.theme-peertube {
   --chat-head-color-darker: #0e763b; // should not be used in this plugin
   --chat-head-color-lighten-50-percent: #e7f7ee;  // should not be used in this plugin
   --chat-head-color: var(--green);
-  --chat-head-text-color: var(--peertube-main-foreground);
+  --chat-head-text-color: var(--peertube-input-foreground);
   --chat-toolbar-btn-color: var(--peertube-button-background);
   --chat-toolbar-btn-disabled-color: var(--peertube-grey-background);
   --toolbar-btn-text-color: var(--peertube-button-foreground);