From dd8fb021efc0dec20b1bf288f45c358a6c5476e8 Mon Sep 17 00:00:00 2001
From: Lawrence Hook <lawrencehook@gmail.com>
Date: Sat, 18 Feb 2023 17:56:35 -0500
Subject: [PATCH] flesh out the feedback page

---
 src/options/feedback.css  |  9 +++++++--
 src/options/feedback.html | 27 ++++++++++++++++++---------
 src/options/feedback.js   |  9 +++++++++
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/options/feedback.css b/src/options/feedback.css
index 089e773..fa3210f 100644
--- a/src/options/feedback.css
+++ b/src/options/feedback.css
@@ -9,6 +9,13 @@ html[dark_mode='false'], html:not([dark_mode]) {
 	--box-shadow-color: rgba(0, 0, 0, 0.30);
 }
 
+html[dark_mode='true'] {
+  --body-color: #DDDDDD;
+  --body-background-color: #393939;
+  --label-color: #E9E9E9;
+  --box-shadow-color: rgba(127, 127, 127, 0.90);
+}
+
 body {
 	padding: var(--header-height) 10px 0;
 
@@ -49,9 +56,7 @@ header {
 
 main {
 	width: 500px;
-	margin-bottom: 20px;
 
 	display: flex;
 	flex-direction: column;
-	gap: 30px;
 }
diff --git a/src/options/feedback.html b/src/options/feedback.html
index 95905ba..1b45ea4 100644
--- a/src/options/feedback.html
+++ b/src/options/feedback.html
@@ -29,22 +29,31 @@
     <main>
 
       <article>
-        <h3>Github</h3>
+        <h3>Have a feature idea?</h3>
+        <p>Here are a number of ways to contact me:</p>
+        <p><a href="https://github.com/lawrencehook/remove-youtube-suggestions/issues">Github</a> • <a href="https://docs.google.com/forms/d/1AzQQxTWgG6M5N87jinvXKQkGS6Mehzg19XV4mjteTK0/edit">Google Form</a> • <a href="https://discord.gg/bBY7FhHYEA">Discord</a> • or simply email.</p>
       </article>
 
       <article>
-        <h3>Google Form</h3>
-      </article>
+        <h3>Is RYS not working?</h3>
 
-      <article>
-        <h3>Email</h3>
-      </article>
+        <p>Try the following:</p>
+        <ul>
+          <li>refresh the YouTube page</li>
+          <li>disable and re-enable RYS</li>
+          <li>uninstall and reinstall RYS</li>
+        </ul>
 
-      <article>
-        <h3>Discord</h3>
+        <p>If that doesn't work, email me at lawrencehook@gmail.com.</p>
+        <p>To help me diagnose, please include the following:</p>
+        <ul>
+          <li>description of the issue</li>
+          <li>screenshot or video</li>
+          <li>browser: <span id='browser-version'>firefox</span></li>
+          <li>version of RYS: <span id='extension-version'>1.0.0</span></li>
+        </ul>
       </article>
 
-
     </main>
   </body>
 </html>
diff --git a/src/options/feedback.js b/src/options/feedback.js
index aef132a..b59475d 100644
--- a/src/options/feedback.js
+++ b/src/options/feedback.js
@@ -3,3 +3,12 @@ const HTML = document.documentElement;
 browser.storage.local.get('dark_mode', ({ dark_mode }) => {
 	HTML.setAttribute('dark_mode', dark_mode)
 });
+
+const extensionVersion = document.getElementById('extension-version');
+extensionVersion.innerText = browser.runtime.getManifest().version;
+
+const browserVersion = document.getElementById('browser-version');
+const path = browser.runtime.getURL('/');
+const isFirefox = path.startsWith('moz');
+const isChrome = path.startsWith('chrome');
+browserVersion.innerText = isFirefox ? 'firefox' : 'chrome';