From 9481823e2cba08aadb64cbcd8f0585edb800fd6c Mon Sep 17 00:00:00 2001
From: Cheshier <chungup5495@gmail.com>
Date: Tue, 26 Sep 2023 17:52:07 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=C2=A0Style:=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=EB=A8=B8=20=EC=83=81=ED=83=9C=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=ED=85=8C=EB=91=90=EB=A6=AC=20=EC=83=89=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meditation/components/MeditationTimer.style.ts    | 11 +++++++++--
 src/pages/meditation/components/MeditationTimer.tsx   |  2 +-
 src/styles/colors.ts                                  |  1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/meditation/components/MeditationTimer.style.ts b/src/pages/meditation/components/MeditationTimer.style.ts
index 7580bb5b..62ca3654 100644
--- a/src/pages/meditation/components/MeditationTimer.style.ts
+++ b/src/pages/meditation/components/MeditationTimer.style.ts
@@ -1,11 +1,18 @@
 import styled from '@emotion/styled';
 
-export const TimerContainer = styled.div`
+interface TimerContainerProps {
+  timerPaused: boolean;
+}
+
+export const TimerContainer = styled.div<TimerContainerProps>`
   ${({ theme }) => theme.style.flexCenter};
   width: 170px;
   height: 170px;
   border-radius: 50%;
-  background: ${({ theme }) => theme.color.linearGradientPurpleVivid};
+  background: ${({ theme, timerPaused }) =>
+    timerPaused
+      ? theme.color.linearGradientRedVivid
+      : theme.color.linearGradientPurpleVivid};
   margin-top: 100px;
 `;
 
diff --git a/src/pages/meditation/components/MeditationTimer.tsx b/src/pages/meditation/components/MeditationTimer.tsx
index 2bdf3e7c..c97bcbc6 100644
--- a/src/pages/meditation/components/MeditationTimer.tsx
+++ b/src/pages/meditation/components/MeditationTimer.tsx
@@ -52,7 +52,7 @@ const MeditationTimer = () => {
   };
 
   return (
-    <TimerContainer>
+    <TimerContainer timerPaused={timerId && paused}>
       <TimerElement
         onClick={() => toggleTimer()}
         onMouseOver={() => setHovered(true)}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index bd9fcfab..59b31f82 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -27,5 +27,6 @@ export const color = {
   linearGradientPurple:
     'linear-gradient(160deg, #2a2427 0%, #47346d 50%, #7e4ea4 75%, #b796d0 100%)',
   linearGradientPurpleVivid: `linear-gradient(90deg, #47346d 0%, #5e12ff 100%)`,
+  linearGradientRedVivid: `linear-gradient(90deg, #4b111f 0%, #ff2012 100%)`,
   transparentGreyBackground: 'rgba(126, 126, 126, 0.5)'
 };

From 89ae2401198ad302469070c8babf0cf6aa39a0a0 Mon Sep 17 00:00:00 2001
From: Cheshier <chungup5495@gmail.com>
Date: Tue, 26 Sep 2023 18:20:05 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=C2=A0Style:=20=EC=9D=BC?=
 =?UTF-8?q?=EC=8B=9C=EC=A0=95=EC=A7=80=20=EC=8B=9C=20=ED=9A=8C=EC=83=89=20?=
 =?UTF-8?q?=ED=85=8C=EB=91=90=EB=A6=AC=20&=20=ED=9A=8C=EC=83=89=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EB=A0=88=EC=9D=B4=EB=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meditation/components/MeditationTimer.style.ts  | 13 +++++--------
 src/pages/meditation/components/MeditationTimer.tsx |  1 +
 src/styles/colors.ts                                |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/pages/meditation/components/MeditationTimer.style.ts b/src/pages/meditation/components/MeditationTimer.style.ts
index 62ca3654..ae0ae84e 100644
--- a/src/pages/meditation/components/MeditationTimer.style.ts
+++ b/src/pages/meditation/components/MeditationTimer.style.ts
@@ -1,22 +1,18 @@
 import styled from '@emotion/styled';
 
-interface TimerContainerProps {
-  timerPaused: boolean;
-}
-
-export const TimerContainer = styled.div<TimerContainerProps>`
+export const TimerContainer = styled.div<{ timerPaused: boolean }>`
   ${({ theme }) => theme.style.flexCenter};
   width: 170px;
   height: 170px;
   border-radius: 50%;
   background: ${({ theme, timerPaused }) =>
     timerPaused
-      ? theme.color.linearGradientRedVivid
+      ? theme.color.linearGradientGreyVivid
       : theme.color.linearGradientPurpleVivid};
   margin-top: 100px;
 `;
 
-export const TimerElement = styled.button`
+export const TimerElement = styled.button<{ timerPaused: boolean }>`
   ${({ theme }) => theme.style.flexCenter};
   border: none;
   outline: none;
@@ -25,7 +21,8 @@ export const TimerElement = styled.button`
   height: 150px;
   border-radius: 50%;
   background-color: #211730;
-  color: ${({ theme }) => theme.color.white};
+  color: ${({ theme, timerPaused }) =>
+    timerPaused ? theme.color.greyLight : theme.color.white};
   font-size: 1.5rem;
   font-weight: bold;
   &:hover {
diff --git a/src/pages/meditation/components/MeditationTimer.tsx b/src/pages/meditation/components/MeditationTimer.tsx
index c97bcbc6..6ec9ab71 100644
--- a/src/pages/meditation/components/MeditationTimer.tsx
+++ b/src/pages/meditation/components/MeditationTimer.tsx
@@ -54,6 +54,7 @@ const MeditationTimer = () => {
   return (
     <TimerContainer timerPaused={timerId && paused}>
       <TimerElement
+        timerPaused={timerId && paused}
         onClick={() => toggleTimer()}
         onMouseOver={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index 59b31f82..1dd28ce3 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -27,6 +27,6 @@ export const color = {
   linearGradientPurple:
     'linear-gradient(160deg, #2a2427 0%, #47346d 50%, #7e4ea4 75%, #b796d0 100%)',
   linearGradientPurpleVivid: `linear-gradient(90deg, #47346d 0%, #5e12ff 100%)`,
-  linearGradientRedVivid: `linear-gradient(90deg, #4b111f 0%, #ff2012 100%)`,
+  linearGradientGreyVivid: `linear-gradient(90deg, #3e3e3e 0%, #b3b3b3 100%)`,
   transparentGreyBackground: 'rgba(126, 126, 126, 0.5)'
 };