update to confirmation message styling

cherryontech · Apr 27, 2024 · 14bcff6 · 14bcff6
1 parent 4cb4165
commit 14bcff6
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/components/ConfirmationMessage.js b/components/ConfirmationMessage.js
@@ -3,8 +3,8 @@ export default function ConfirmationMessage({
 	hideConfirmationMessage,
 }) {
 	return (
-		<div className=' border border-black'>
-			<h1>Welcome {userDisplayName} </h1>
+		<div className='absolute left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2 transform border border-black p-8'>
+			<h1 className='text-3xl'>Welcome, {userDisplayName} </h1>
 			<p>
 				You can now start logging your reflections. Let’s get started with your
 				first one!
@@ -15,7 +15,12 @@ export default function ConfirmationMessage({
 				Gain clarity on your goals and identify areas for focus through these
 				exercises.
 			</p>
-			<button onClick={hideConfirmationMessage}>Get started</button>
+			<button
+				className='w-1/2 rounded-full bg-slate-400 p-2'
+				onClick={hideConfirmationMessage}
+			>
+				Get started
+			</button>
 		</div>
 	);
 }