Adds additional dismissal option for tutorial

ucfopen · Oct 17, 2024 · 41052a3 · 41052a3
1 parent b1f966b
commit 41052a3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/common.scss b/src/common.scss
@@ -248,6 +248,28 @@ span.strong {
 				position: absolute;
 				bottom: 15px;
 			}
+
+			button.modal-close-x {
+				top: 15px;
+				right: 15px;
+				left: auto;
+				bottom: auto;
+				width: 1em;
+				height: 1em;
+
+				margin: 0;
+				padding: 0;
+
+				background: none;
+				border: none;
+				outline: none;
+
+				color: #000;
+
+				&:hover span:before, &:focus span:before {
+					color: #850000;
+				}
+			}
 		}
 
 		.select-wrapper {

diff --git a/src/components/player/player-tutorial.js b/src/components/player/player-tutorial.js
@@ -40,7 +40,8 @@ const PlayerTutorial = (props) => {
 						<p>Some questions may have hints. Press <span className='strong'>H</span> to play the hint if it's available.</p>
 					</div>
 				</div>
-				<button onClick={toggle} id="tutorial-ready-btn">I'm Ready</button>
+				<button className='modal-dismiss' onClick={toggle} id="tutorial-ready-btn">I'm Ready</button>
+				<button className='modal-close-x' onClick={toggle}><span className='icon icon-cross'></span></button>
 			</div>
 
 			<div className='modal-bg' onClick={toggle}>