UI: toggle buttons

src/Components/CardSelector.jsx

@@ -145,7 +145,8 @@ export default function CardSelector(props) {
 			{props.shiny === undefined && (
 				<input
 					type="button"
-					value="Toggle Shiny"
+					value="Shiny"
+					class={opts.toggleshiny ? 'selected' : ''}
 					style="position:absolute;left:4px;top:578px"
 					onClick={() => setOpt('toggleshiny', !opts.toggleshiny)}
 				/>

src/views/Alts.jsx

@@ -28,7 +28,7 @@ function Preset(props) {
 			<input
 				type="button"
 				value={props.name}
-				class={selected() ? 'selectedbutton' : ''}
+				class={selected() ? 'selected' : ''}
 				style="width:192px;margin-right:8px"
 				onClick={[props.setChecked, chked]}
 			/>
@@ -72,8 +72,8 @@ function AltCreator(props) {
 					<input
 						type="button"
 						value="Custom"
+						class={showCustom() ? 'selected' : ''}
 						style="width:192px;margin-right:8px"
-						class={showCustom() ? 'selectedbutton' : ''}
 						onClick={() => setShowCustom(x => !x)}
 					/>
 					Configure custom restrictions. Trade limited to matching restrictions.

src/views/Bazaar.jsx

@@ -245,8 +245,9 @@ export default function Bazaar() {
 			<input
 				type="button"
 				value="All Offers"
-				onClick={() => setShowOrders(showOrders => !showOrders)}
+				class={showOrders() ? 'selected' : ''}
 				style="position:absolute;top:96px;left:8px;"
+				onClick={() => setShowOrders(showOrders => !showOrders)}
 			/>
 			{!!bcard() && bz() && (
 				<>

src/views/DeckEditor.jsx

@@ -40,17 +40,15 @@ function Qecks(props) {
 				type="button"
 				style="margin-right:18px"
 				value="Bind to #"
-				class={setting() ? 'selectedbutton' : undefined}
+				class={setting() ? 'selected' : undefined}
 				onClick={() => setSetting(value => !value)}
 			/>
 			{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
 				<input
 					type="button"
 					value={`${i + 1}`}
 					class={`editbtn${
-						props.user.selectedDeck === props.user.qecks[i] ?
-							' selectedbutton'
-						:	''
+						props.user.selectedDeck === props.user.qecks[i] ? ' selected' : ''
 					}`}
 					onClick={() => {
 						if (setting()) {
@@ -294,8 +292,9 @@ export default function DeckEditor() {
 			<input
 				type="button"
 				value="Decks"
-				onClick={deckModeToggle}
+				class={viewDecks() ? 'selected' : ''}
 				style="position:absolute;left:8px;top:58px"
+				onClick={deckModeToggle}
 			/>
 			<input
 				type="button"

src/views/Leaderboards.jsx

@@ -45,7 +45,7 @@ export default function Leaderboards() {
 					{categories.map(category => (
 						<input
 							type="button"
-							class={getCategory() === category ? 'selectedbutton' : ''}
+							class={getCategory() === category ? 'selected' : ''}
 							value={category}
 							onClick={[setCategory, category]}
 						/>
@@ -54,14 +54,14 @@ export default function Leaderboards() {
 				<div style="display:flex;flex-direction:column;row-gap:4px;flex-grow:1">
 					<input
 						type="button"
-						class={getFlags().length === 0 ? 'selectedbutton' : ''}
+						class={getFlags().length === 0 ? 'selected' : ''}
 						value="Main"
 						onClick={[setFlags, []]}
 					/>
 					{presets.map(preset => (
 						<input
 							type="button"
-							class={getFlags() === preset[1] ? 'selectedbutton' : ''}
+							class={getFlags() === preset[1] ? 'selected' : ''}
 							value={preset[0]}
 							onClick={[setFlags, preset[1]]}
 						/>

src/views/MainMenu.jsx

@@ -183,7 +183,7 @@ export default function MainMenu(props) {
 						type="button"
 						value={i + 1}
 						class={`editbtn ${
-							rx.user.selectedDeck === rx.user.qecks[i] ? ' selectedbutton' : ''
+							rx.user.selectedDeck === rx.user.qecks[i] ? ' selected' : ''
 						}`}
 						onMouseOver={() => setTip(rx.user.qecks[i] ?? '')}
 						onClick={() => {

src/views/Upgrade.jsx

@@ -131,9 +131,10 @@ export default function Upgrade() {
 			</div>
 			<input
 				type="button"
-				value="Toggle Bound"
+				value="Bound"
+				class={showBound() ? 'selected' : ''}
 				style="position:absolute;left:5px;top:554px"
-				onClick={() => setShowBound(showBound => !showBound)}
+				onClick={() => setShowBound(!showBound())}
 			/>
 			<CardSelector
 				cards={Cards}

ui.css

@@ -22,8 +22,8 @@ td {
 	background-color: #567;
 	cursor: pointer;
 }
-input[type='button'] {
-	background: linear-gradient(to bottom, #def, #89a);
+input[type="button"]{
+	background-image:linear-gradient(to bottom,#def,#89a);
 	border-radius: 4px;
 	border: solid #000 1px;
 	width: 80px;
@@ -33,10 +33,10 @@ input[type='button'] {
 }
 input[type='button']:hover,
 input[type='button']:disabled {
-	background: linear-gradient(to bottom, #cde, #567);
+	background-image linear-gradient(to bottom, #cde, #567);
 }
 input[type='button']:hover:active:not([disabled]) {
-	background: linear-gradient(to bottom, #abc, #456);
+	background-image: linear-gradient(to bottom, #abc, #456);
 }
 input[type='button']:hover:disabled {
 	cursor: not-allowed;
@@ -183,8 +183,8 @@ select:hover:active {
 	max-width: 196px;
 	position: absolute;
 }
-.selectedbutton {
-	background: linear-gradient(to bottom, #344, #89f) !important;
+input[type="button"].selected {
+	background-image: linear-gradient(to bottom, #344, #89f) !important;
 }
 .editbtn {
 	width: 32px !important;