Fix run button aesthetic (#2472)

fix run button aesthetic
hackclub · Oct 22, 2024 · 8ac3816 · 8ac3816
1 parent f33a353
commit 8ac3816
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/src/components/navbar-editor.tsx b/src/components/navbar-editor.tsx
@@ -1010,12 +1010,19 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 
 				<li>
 					<div class={styles.runButtonContainer}>
-						<button className={styles.runButton} onClick={() => onRun()}>
-							Run
-						</button>
-						<button className={styles.dropdownButton} onClick={() => (showDropdown.value = !showDropdown.value)}>
-							<IoChevronDown />
-						</button>
+					<Button
+						accent
+						icon={IoPlay}
+						onClick={onRun}
+					>
+						Run
+					</Button>
+
+					<Button
+						accent
+						icon={IoChevronDown}
+						onClick={() => (showDropdown.value = !showDropdown.value)}
+					/>
 
 						{showDropdown.value && (
 							<div class={styles.playPopup}>

diff --git a/src/components/navbar.module.css b/src/components/navbar.module.css
@@ -269,7 +269,7 @@
 	z-index: 9;
 	position: absolute;
 	top: 48px;
-	right: 140px;
+	right: 100px;
 	box-shadow: 0 4px 8px 0 #0000005e;
 	min-width: 160px;
 	border-radius: 4px;
@@ -401,24 +401,9 @@
 
 .runButtonContainer {
 	display: inline-flex;
-	border: 1px solid #004d40;
 	overflow: hidden;
 	height: 35px;
   }
-
-  .runButton, .dropdownButton {
-	background-color: var(--accent);
-	color: white;
-	border: none;
-	padding: 10px 20px;
-	cursor: pointer;
-	font-size: 14px;
-	width: 60%;
-  }
-
-  .runButton {
-	border-right: 1px solid #004d40;
-  }
 
 .publishButton {
 	padding: 10px 15px;