fix: 💄 Make start/stop button more visible on low-contrast themes (Mi…

…nimal theme) (issue #67)
mcndt · Feb 22, 2022 · 70a0bd3 · 70a0bd3
1 parent 9d1f186
commit 70a0bd3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### 🐛 Fixes
 
 - Fix timers having "Unknown project" on opening Obsidian (issue #32)
+- Fixed the start/stop button accent color to be more accessible on Minimal Theme (issue #67)
 
 ## [0.7.1] 
 

diff --git a/lib/ui/components/current_timer/CurrentTimerStartButton.svelte b/lib/ui/components/current_timer/CurrentTimerStartButton.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { ApiStatus } from 'lib/toggl/TogglManager';
-	import { apiStatusStore, togglStore } from 'lib/util/stores';
+	import { togglStore } from 'lib/util/stores';
 
 	export let buttonSize = 36;
 
@@ -30,11 +29,11 @@
 <style>
 	.timer-start-button {
 		--button-fill-outer: var(--interactive-accent);
-		--button-fill-inner: var(--interactive-normal);
+		--button-fill-inner: var(--background-primary);
 	}
 
 	.timer-start-button:hover {
 		--button-fill-outer: var(--interactive-accent-hover);
-		--button-fill-inner: var(--interactive-hover);
+		--button-fill-inner: var(--background-secondary);
 	}
 </style>
diff --git a/lib/ui/components/current_timer/CurrentTimerStopButton.svelte b/lib/ui/components/current_timer/CurrentTimerStopButton.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { ApiStatus } from 'lib/toggl/TogglManager';
-	import { apiStatusStore, togglStore } from 'lib/util/stores';
+	import { togglStore } from 'lib/util/stores';
 
 	export let buttonSize = 36;
 
@@ -32,11 +31,11 @@
 <style>
 	.timer-stop-button {
 		--button-fill-outer: var(--interactive-accent);
-		--button-fill-inner: var(--interactive-normal);
+		--button-fill-inner: var(--background-primary);
 	}
 
 	.timer-stop-button:hover {
 		--button-fill-outer: var(--interactive-accent-hover);
-		--button-fill-inner: var(--interactive-hover);
+		--button-fill-inner: var(--background-secondary);
 	}
 </style>