From 990364e6510788a5c97895a2e6795bf61f44b5c7 Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Thu, 18 Dec 2025 17:41:00 -0500
Subject: [PATCH] Made changes to CSS and merged together.

---
 web/vue-app/src/assets/global.css             | 15 ++++++
 .../src/components/reward/RewardEditView.vue  | 46 +------------------
 .../src/components/reward/RewardList.vue      |  2 +-
 .../src/components/task/TaskEditView.vue      | 22 ++++-----
 web/vue-app/src/components/task/TaskList.vue  |  2 +-
 5 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/web/vue-app/src/assets/global.css b/web/vue-app/src/assets/global.css
index d77f504..4001acd 100644
--- a/web/vue-app/src/assets/global.css
+++ b/web/vue-app/src/assets/global.css
@@ -158,4 +158,19 @@
 
   --pending-block-bg: #222b;
   --pending-block-color: #62ff7a;
+
+  /* TaskEditView styles */
+  --toggle-btn-bg: #f3f3f3;
+  --toggle-btn-color: #444;
+  --toggle-btn-border: #cbd5e1;
+
+  --toggle-btn-good-bg: #38c172;
+  --toggle-btn-good-color: #fff;
+  --toggle-btn-good-shadow: #38c17233;
+  --toggle-btn-good-border: #38c172;
+
+  --toggle-btn-bad-bg: #e53e3e;
+  --toggle-btn-bad-color: #fff;
+  --toggle-btn-bad-shadow: #e53e3e33;
+  --toggle-btn-bad-border: #e53e3e;
 }
diff --git a/web/vue-app/src/components/reward/RewardEditView.vue b/web/vue-app/src/components/reward/RewardEditView.vue
index 3b5ac48..fa352a0 100644
--- a/web/vue-app/src/components/reward/RewardEditView.vue
+++ b/web/vue-app/src/components/reward/RewardEditView.vue
@@ -160,48 +160,4 @@ const submit = async () => {
 }
 </script>
 
-<style scoped>
-.good-bad-toggle {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.1rem;
-  justify-content: flex-start;
-}
-
-button.toggle-btn {
-  flex: 1 1 0;
-  padding: 0.5rem 1.2rem;
-  border-width: 2px;
-  border-radius: 7px;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  background: #f3f3f3;
-  color: #444;
-  transition:
-    background 0.18s,
-    color 0.18s,
-    border-style 0.18s;
-  outline: none;
-  border-style: outset; /* Default style */
-  border-color: #cbd5e1;
-}
-
-button.toggle-btn.good-active {
-  background: #38c172;
-  color: #fff;
-  box-shadow: 0 2px 8px #38c17233;
-  transform: translateY(2px) scale(0.97);
-  border-style: ridge;
-  border-color: #38c172;
-}
-
-button.toggle-btn.bad-active {
-  background: #e53e3e;
-  color: #fff;
-  box-shadow: 0 2px 8px #e53e3e33;
-  transform: translateY(2px) scale(0.97);
-  border-style: ridge;
-  border-color: #e53e3e;
-}
-</style>
+<style scoped></style>
diff --git a/web/vue-app/src/components/reward/RewardList.vue b/web/vue-app/src/components/reward/RewardList.vue
index 242ea27..9894ce9 100644
--- a/web/vue-app/src/components/reward/RewardList.vue
+++ b/web/vue-app/src/components/reward/RewardList.vue
@@ -153,7 +153,7 @@ const listHeight = computed(() => {
           />
           <button
             v-if="props.deletable"
-            class="btn btn-danger"
+            class="delete-btn"
             @click.stop="handleDelete(reward.id)"
             aria-label="Delete reward"
             type="button"
diff --git a/web/vue-app/src/components/task/TaskEditView.vue b/web/vue-app/src/components/task/TaskEditView.vue
index b0ea13f..4640110 100644
--- a/web/vue-app/src/components/task/TaskEditView.vue
+++ b/web/vue-app/src/components/task/TaskEditView.vue
@@ -203,32 +203,32 @@ button.toggle-btn {
   font-weight: 600;
   font-size: 1rem;
   cursor: pointer;
-  background: #f3f3f3;
-  color: #444;
   transition:
     background 0.18s,
     color 0.18s,
     border-style 0.18s;
   outline: none;
   border-style: outset; /* Default style */
-  border-color: #cbd5e1;
+  background: var(--toggle-btn-bg);
+  color: var(--toggle-btn-color);
+  border-color: var(--toggle-btn-border);
 }
 
 button.toggle-btn.good-active {
-  background: #38c172;
-  color: #fff;
-  box-shadow: 0 2px 8px #38c17233;
+  background: var(--toggle-btn-good-bg);
+  color: var(--toggle-btn-good-color);
+  box-shadow: 0 2px 8px var(--toggle-btn-good-shadow);
   transform: translateY(2px) scale(0.97);
   border-style: ridge;
-  border-color: #38c172;
+  border-color: var(--toggle-btn-good-border);
 }
 
 button.toggle-btn.bad-active {
-  background: #e53e3e;
-  color: #fff;
-  box-shadow: 0 2px 8px #e53e3e33;
+  background: var(--toggle-btn-bad-bg);
+  color: var(--toggle-btn-bad-color);
+  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow);
   transform: translateY(2px) scale(0.97);
   border-style: ridge;
-  border-color: #e53e3e;
+  border-color: var(--toggle-btn-bad-border);
 }
 </style>
diff --git a/web/vue-app/src/components/task/TaskList.vue b/web/vue-app/src/components/task/TaskList.vue
index b315ff0..3d69c5f 100644
--- a/web/vue-app/src/components/task/TaskList.vue
+++ b/web/vue-app/src/components/task/TaskList.vue
@@ -174,7 +174,7 @@ const filteredTasks = computed(() => {
             @click.stop="handleDelete(task.id)"
             aria-label="Delete task"
             type="button"
-            class="btn btn-danger"
+            class="delete-btn"
           >
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
               <circle cx="10" cy="10" r="9" fill="#fff" stroke="#ef4444" stroke-width="2" />