From 7f2e04452d807af4724f01c21fa627bbc255c623 Mon Sep 17 00:00:00 2001
From: matryer <thatmatryer@gmail.com>
Date: Mon, 8 Mar 2021 18:50:12 +0000
Subject: [PATCH] colour and style fixes

---
 app/frontend/src/App.svelte                       | 2 +-
 app/frontend/src/InstalledPluginView.svelte       | 3 +--
 app/frontend/src/elements/Button.svelte           | 4 ++--
 app/frontend/src/elements/Duration.svelte         | 4 ++--
 app/frontend/src/elements/PluginCollection.svelte | 4 ++--
 app/frontend/src/elements/PluginDetails.svelte    | 2 +-
 app/frontend/src/elements/VariableInput.svelte    | 8 ++++----
 app/frontend/src/styles.css                       | 2 +-
 8 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/frontend/src/App.svelte b/app/frontend/src/App.svelte
index 833f5ddb5..f893ef446 100644
--- a/app/frontend/src/App.svelte
+++ b/app/frontend/src/App.svelte
@@ -155,7 +155,7 @@
 			<div class='flex-grow' ></div>
 			<div>
 				<Button on:click='{ openBugPage }'>
-					🕷
+					Report bug
 				</Button>
 			</div>
 			<div>
diff --git a/app/frontend/src/InstalledPluginView.svelte b/app/frontend/src/InstalledPluginView.svelte
index 56c7e3bbd..7640b2a5f 100644
--- a/app/frontend/src/InstalledPluginView.svelte
+++ b/app/frontend/src/InstalledPluginView.svelte
@@ -172,7 +172,6 @@
 				</div>
 				<div slot='footer'>
 					{#if refreshInterval}
-						<hr>
 						<div class='p-4 text-right'>
 							<span class='mr-1'>Refresh every:</span>
 							<Duration 
@@ -217,7 +216,7 @@
 		</div>
 	{/if}
 	{#if installedPlugin}
-		<div class='flex-grow bg-white dark:bg-gray-700 p-3 border-t border-gray-200 dark:border-gray-800 bg-opacity-75'>
+		<div class='flex-grow bg-white dark:bg-gray-700 p-3 border-t border-gray-200 dark:border-gray-600 bg-opacity-75'>
 			<PluginSourceBrowser files={installedPlugin.files} />
 		</div>
 	{/if}
diff --git a/app/frontend/src/elements/Button.svelte b/app/frontend/src/elements/Button.svelte
index 4f7a9e1d6..4acee3ff0 100644
--- a/app/frontend/src/elements/Button.svelte
+++ b/app/frontend/src/elements/Button.svelte
@@ -2,8 +2,8 @@
 	export let style = 'default'
 
 	const classes = {
-		'default': 'bg-gray-100 active:bg-gray-300 text-sm dark:text-gray-800 rounded shadow-sm px-4 border border-gray-300 dark:opacity-75',
-		'primary': 'bg-purple-800 active:bg-purple-700 text-sm text-white rounded shadow-sm px-4 border border-purple-900',
+		'default': 'text-sm rounded shadow-sm px-4 border bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50 hover:bg-opacity-75',
+		'primary': 'bg-blue-900 active:bg-blue-800 text-sm text-white rounded shadow-sm px-4 border border-blue-900 dark:bg-opacity-50',
 	}
 
 	$: cssClass = classes[style]
diff --git a/app/frontend/src/elements/Duration.svelte b/app/frontend/src/elements/Duration.svelte
index fccb339c0..bce9d4c2b 100644
--- a/app/frontend/src/elements/Duration.svelte
+++ b/app/frontend/src/elements/Duration.svelte
@@ -30,14 +30,14 @@
 </style>
 
 <input 
-    class='val border dark:text-gray-800' 
+    class='val border bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50' 
     type='number' 
     bind:value={value.n}
     on:change={ onChange }
     disabled={disabled}
 >
 <select 
-    class='mr-1 dark:text-gray-800'
+    class='mr-1 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
     bind:value={value.unit}
     on:change={ onChange }
     disabled={disabled}
diff --git a/app/frontend/src/elements/PluginCollection.svelte b/app/frontend/src/elements/PluginCollection.svelte
index 3469efea0..2eefa98ba 100644
--- a/app/frontend/src/elements/PluginCollection.svelte
+++ b/app/frontend/src/elements/PluginCollection.svelte
@@ -51,7 +51,7 @@
 	<div class='flex flex-wrap p-3'>
 		{#each plugins as plugin}
 			<div
-				class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-25 m-3 mt-0 mb-6 w-80 rounded shadow-lg'
+				class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 m-3 mt-0 mb-6 w-80 rounded shadow-lg'
 			>
 				<div class='flex-grow'>
 					<h2 class='text-black flex-grow dark:text-white text-lg p-4 pb-0'>
@@ -74,7 +74,7 @@
 					</div>
 				</div>
 				{#if plugin.authors && plugin.authors.length}
-					<div class='flex items-center space-x-2 border-t dark:border-gray-500 p-4'>
+					<div class='flex items-center space-x-2 p-4'>
 						<img 
 							class='author-pic rounded-full'
 							src='{plugin.authors[0].imageURL}'
diff --git a/app/frontend/src/elements/PluginDetails.svelte b/app/frontend/src/elements/PluginDetails.svelte
index 2e37c009b..d8a190c0c 100644
--- a/app/frontend/src/elements/PluginDetails.svelte
+++ b/app/frontend/src/elements/PluginDetails.svelte
@@ -34,7 +34,7 @@
 </style>
 
 {#if plugin}
-	<div class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-25 mt-0 mb-6 rounded shadow-lg'>
+	<div class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 mt-0 mb-6 rounded shadow-lg'>
 
 		{#if $$slots.action}
 			<div class='pt-4 px-4 flex'>
diff --git a/app/frontend/src/elements/VariableInput.svelte b/app/frontend/src/elements/VariableInput.svelte
index 27c1c26d2..18b5f4ed8 100644
--- a/app/frontend/src/elements/VariableInput.svelte
+++ b/app/frontend/src/elements/VariableInput.svelte
@@ -28,7 +28,7 @@
     {#if variable.type === 'string'}
         <input 
             id='{variable.name}'
-            class='border px-2 dark:text-gray-800'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
             type='text' 
             bind:value='{ values[variable.name] }'
             disabled={disabled}
@@ -37,7 +37,7 @@
         <label class='flex items-center'>
             <input 
                 id='{variable.name}'
-                class='border px-2 dark:text-gray-800'
+                class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
                 type='checkbox' 
                 bind:checked='{ values[variable.name] }'
                 disabled={disabled}
@@ -51,7 +51,7 @@
     {:else if variable.type === 'number'}
         <input 
             id='{variable.name}'
-            class='border px-2 dark:text-gray-800'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
             type='number' 
             bind:value='{ values[variable.name] }'
             disabled={disabled}
@@ -59,7 +59,7 @@
     {:else if variable.type === 'list'}
         <select 
             id='{variable.name}'
-            class='border px-2 dark:text-gray-800'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
             bind:value='{ values[variable.name] }'
             disabled={disabled}
         >
diff --git a/app/frontend/src/styles.css b/app/frontend/src/styles.css
index 693a0dad5..b6fb41b1b 100644
--- a/app/frontend/src/styles.css
+++ b/app/frontend/src/styles.css
@@ -15,7 +15,7 @@ html {
 
 @media (prefers-color-scheme: dark) {
 	html {
-		background-color: rgba(93, 35, 159, 0.1);
+		background-color: rgba(53, 35, 159, 0.1);
 	}
 }