From 3a59d12792fa1c452fa601cfb5013f2a4351c270 Mon Sep 17 00:00:00 2001
From: calebux <petersoncaleb275@gmail.com>
Date: Fri, 27 Sep 2024 19:39:07 +0100
Subject: [PATCH 1/2] refac: modify restart modal

---
 client/src/components/RestartGame.tsx   |  2 +-
 client/src/components/RestartModal.tsx  | 13 ++++--
 client/src/styles/RestartGameModal.scss | 59 +++++++++++++++++++++----
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/client/src/components/RestartGame.tsx b/client/src/components/RestartGame.tsx
index acc279c..c7d5402 100644
--- a/client/src/components/RestartGame.tsx
+++ b/client/src/components/RestartGame.tsx
@@ -32,7 +32,7 @@ const RestartGame: React.FC = () => {
           </div>
         </div>
       )}
-	  {restart && <RestartModal message="Are you sure you want to restart the gane?" onConfirm={handleConfirm} onCancel={handleCancle} />}
+	  {restart && <RestartModal message="Are you sure you want to start over?" extraMessage=" If you click yes , there is no going back." onConfirm={handleConfirm} onCancel={handleCancle} />}
     </React.Fragment>
   );
 };
diff --git a/client/src/components/RestartModal.tsx b/client/src/components/RestartModal.tsx
index ea36397..aa36297 100644
--- a/client/src/components/RestartModal.tsx
+++ b/client/src/components/RestartModal.tsx
@@ -5,18 +5,23 @@ interface ConfirmationModalProps {
 	message: string;
 	onConfirm: () => void;
 	onCancel: () => void;
+	extraMessage: string;
 }
 
-const ConfirmationModal: React.FC<ConfirmationModalProps> = ({message, onConfirm, onCancel}) => {
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({message, onConfirm, onCancel, extraMessage}) => {
   return (
 	<div className="restartCon">
+		<div className="innerRestartCon">
 		<div className="innerRestart">
-			<p>{message}</p>
+			<p className='restartMessage'>{message}<br /> {extraMessage}</p>
 			<div className="chooseAns">
-				<button onClick={onConfirm}>Yes</button>
-				<button onClick={onCancel}>No</button>
+			<button onClick={onCancel}><span>No</span></button>
+			<button onClick={onConfirm}><span>Yes</span></button>
+				
 			</div>
 		</div>
+		</div>
+		
 	</div>
   )
 }
diff --git a/client/src/styles/RestartGameModal.scss b/client/src/styles/RestartGameModal.scss
index 1d8335e..236ceb3 100644
--- a/client/src/styles/RestartGameModal.scss
+++ b/client/src/styles/RestartGameModal.scss
@@ -10,33 +10,76 @@
 	justify-content: center;
 	align-items: center;
 	z-index: 20;
+
+  }
+  .innerRestartCon{
+	background:  linear-gradient(180deg, #2dccfd 0%, #ff01ff 100%);
+	border-radius: 8px;
+	padding: 1px;
   }
-  
   .innerRestart {
-	background: #edeee9;
+    background-color: #0e0121;
+	color: white;
 	padding: 20px;
+	border-style: solid;
+	border-width: 0.2px;
 	border-radius: 8px;
+	border-color: transparent;
 	text-align: center;
+	width: 33rem;
+	height: 23rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+  }
+
+  .restartMessage{
+	text-align: center;
+	margin-top: 20%;
+	font-size: 1.4rem;
+	font-weight: 100;
   }
-  
   .chooseAns {
 	margin-top: 20px;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
   }
   
   .chooseAns button {
-	margin: 0 10px;
+	display: block;
 	padding: 10px 20px;
-	border: none;
+	border: 1px solid #007bff;
 	border-radius: 5px;
 	cursor: pointer;
+	width: 100%;
+	font-weight: bold;
+	color: #fff;
+	height: 50px;
+	span{
+		font-size: 24px;
+		display: inline-block;
+		transition: all .3s ease-in-out;
+		transform: scale(1); 
+	}
+	span:hover{
+		transform: scale(1.8);
+	}
   }
+
   
   .chooseAns button:first-of-type {
-	background: #007bff;
-	color: #fff;
+	background: transparent;
+	margin-right: 1rem;
+	text-shadow: 0 0 3px #fff;
   }
   
   .chooseAns button:last-of-type {
-	background: #ccc;
+	background: linear-gradient(
+		-180deg,
+		#2dccfd 0%,
+		#1b0043 100%
+	  );
+	  box-shadow: 0 0 10px rgba(255, 255,255, 0.3);
   }
   
\ No newline at end of file

From a5e3095c16869eaa7a9ae783e9d3a25722d8b8ce Mon Sep 17 00:00:00 2001
From: calebux <petersoncaleb275@gmail.com>
Date: Fri, 4 Oct 2024 18:33:59 +0100
Subject: [PATCH 2/2] fix: solve issues raised, design restart modal

---
 client/src/components/RestartGame.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/RestartGame.tsx b/client/src/components/RestartGame.tsx
index 7b30100..c2bf257 100644
--- a/client/src/components/RestartGame.tsx
+++ b/client/src/components/RestartGame.tsx
@@ -35,7 +35,8 @@ const RestartGame: React.FC = () => {
 
       {restart && (
         <RestartModal
-          message="Are you sure you want to restart the gane?"
+          message="Are you sure you want to restart the game?"
+          extraMessage="If you click yes, there’s no going back"
           onConfirm={handleConfirm}
           onCancel={handleCancle}
         />