From df1968848886cd3627c565747a9c2f581d335fb9 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Thu, 27 Feb 2025 15:13:20 +0000
Subject: [PATCH] FINISH: ScreenShot Theme

---
 frontend/src/assets/styles/index.css          | 30 ++++++++++++++++++-
 .../components/Functionality/Screenshot.tsx   |  4 ++-
 .../src/components/Settings/QuickSettings.tsx |  2 +-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 1832a2a..d276cc6 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -65,6 +65,12 @@ body[data-theme="light"] {
 
   --user-bg: rgb(255, 255, 255);
   --user-live-bg: rgb(127, 161, 5);
+
+  /* Screenshot */
+  --screenshot-bg: rgb(183, 149, 214);
+  --screenshot-bg-hover: rgb(65, 34, 93);
+  --screenshot-text: rgb(255, 255, 255);
+  --screenshot-text-hover: rgb(255, 255, 255);
 }
 
 body[data-theme="dark"] {
@@ -107,6 +113,12 @@ body[data-theme="dark"] {
 
   --user-bg: rgb(16, 16, 16);
   --user-live-bg: rgb(127, 161, 5);
+
+  /* Screenshot */
+  --screenshot-bg: rgb(78, 78, 78);
+  --screenshot-bg-hover: rgb(231, 231, 231);
+  --screenshot-text: rgb(255, 255, 255);
+  --screenshot-text-hover: rgb(78, 78, 78);
 }
 
 body[data-theme="blue"] {
@@ -149,7 +161,11 @@ body[data-theme="blue"] {
   --user-bg: rgba(167, 245, 244, 0.886);
   --user-live-bg: rgb(127, 161, 5);
 
-
+  /* Screenshot */
+  --screenshot-bg: rgb(74, 185, 250);
+  --screenshot-bg-hover: rgb(18, 137, 255);
+  --screenshot-text: rgb(255, 255, 255);
+  --screenshot-text-hover: rgb(255, 255, 255);
 }
 
 body[data-theme="green"] {
@@ -191,6 +207,12 @@ body[data-theme="green"] {
   --user-follow-bg: #ffffff;
   --user-bg: rgb(0, 78, 38);
   --user-live-bg: rgb(217, 240, 133);
+
+  /* Screenshot */
+  --screenshot-bg: rgb(250, 215, 74);
+  --screenshot-bg-hover: rgb(0, 151, 73);
+  --screenshot-text: rgb(1, 61, 30);
+  --screenshot-text-hover: rgb(255, 255, 0);
 }
 
 body[data-theme="orange"] {
@@ -232,6 +254,12 @@ body[data-theme="orange"] {
 
   --user-bg: rgb(255, 145, 0);
   --user-live-bg: rgb(127, 161, 5);
+
+  /* Screenshot */
+  --screenshot-bg: rgb(244, 160, 75);
+  --screenshot-bg-hover: rgb(255, 128, 0);
+  --screenshot-text: rgb(255, 255, 255);
+  --screenshot-text-hover: rgb(255, 255, 5);
 }
 
 body {
diff --git a/frontend/src/components/Functionality/Screenshot.tsx b/frontend/src/components/Functionality/Screenshot.tsx
index 51dd654..1d0f869 100644
--- a/frontend/src/components/Functionality/Screenshot.tsx
+++ b/frontend/src/components/Functionality/Screenshot.tsx
@@ -40,7 +40,9 @@ const Screenshot: React.FC = () => {
   return (
     <button
       onClick={captureScreenshot}
-      className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
+      className="bg-[var(--screenshot-bg)] text-[var(--screenshot-text)] px-4 py-2 
+      rounded-md hover:bg-[var(--screenshot-bg-hover)] hover:text-[var(--screenshot-text-hover)] 
+      transition ease-in duration-250"
     >
       Capture Full Page Screenshot
     </button>
diff --git a/frontend/src/components/Settings/QuickSettings.tsx b/frontend/src/components/Settings/QuickSettings.tsx
index e02327a..9ef6634 100644
--- a/frontend/src/components/Settings/QuickSettings.tsx
+++ b/frontend/src/components/Settings/QuickSettings.tsx
@@ -23,7 +23,7 @@ const QuickSettings: React.FC = () => {
       </div>
       <div
         id="quick-settings-menu"
-        className="flex flex-col flex-grow my-8 gap-4"
+        className="flex flex-col my-8 gap-4 mb-20"
       >
         <ThemeSetting />
       </div>