fix: join room button css

adityathakurxd · Mar 1, 2024 · 1ca79bc · 1ca79bc
1 parent 1121e8e
commit 1ca79bc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/app/components/JoinForm.tsx b/app/components/JoinForm.tsx
@@ -101,6 +101,11 @@ const JoinForm = () => {
 						click on create poll. That’s it.
 					</p>
 				</div>
+				{roomCodeParam ? (
+					<div className="bottom-banner">
+						<div className="bottom-notif body-regular-text">{"You've been invited!"}</div>
+					</div>
+				) : null}
 				<form onSubmit={handleSubmit}>
 					<div className="input-container">
 						<div className="input-label">Your Name</div>
@@ -128,14 +133,11 @@ const JoinForm = () => {
 					)}
 
 					<button type="submit" className="btn-primary primary">
-						Join Room {roomCodeParam}
-						<ArrowRightIcon style={{ height: '15px', width: '15px', paddingLeft: '5px' }} />
+						{roomCodeParam ? 'Accept Invite' : 'Join Room'}
+						<ArrowRightIcon height={20} width={20} style={{ marginLeft: '4px' }} />
 					</button>
 				</form>
-				<div className="bottom-banner">
-					<div className="bottom-room-info">PUBLIC ROOM</div>
-					<div className="bottom-notif body-regular-text ">There might be others in the room</div>
-				</div>
+
 				<div className="responsive-banner">
 					<div className="responsive-banner-info">PLEASE VIEW IN A DESKTOP</div>
 				</div>

diff --git a/app/globals.css b/app/globals.css
@@ -212,11 +212,10 @@ h4 {
 }
 
 .body-regular-text {
-	/* Body 2-Regular */
 	text-align: center;
 	font-size: 14px;
 	font-style: normal;
-	font-weight: 400;
+	font-weight: 500;
 	line-height: 20px;
 	letter-spacing: 0.25px;
 }
@@ -287,6 +286,8 @@ form {
 	margin: 30px auto;
 	border-radius: 8px;
 	padding: 20px;
+	padding-top: 0;
+	margin-top: 12px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -497,7 +498,7 @@ button:disabled {
 	border: none;
 	display: flex;
 	height: 40px;
-	width: 120px;
+	min-width: 120px;
 	padding: 8px;
 	justify-content: center;
 	align-items: center;