Merge pull request #75 from Calebux/restart-modal-fix

refac: modify restart modal
sivicstudio · Oct 4, 2024 · c43c6f1 · c43c6f1
2 parents af41474 + a5e3095
commit c43c6f1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 13 deletions.
diff --git 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}
         />

diff --git 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
@@ -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);
   }