Add <styled-button> component; need to address index.html.tpl usage of btn

client/components/ConfirmDialog.vue

@@ -6,8 +6,8 @@
 				<p>{{ data.text }}</p>
 			</div>
 			<div class="confirm-buttons">
-				<button class="btn btn-cancel" @click="close(false)">Cancel</button>
+				<styled-button type="cancel" @click="close(false)">Cancel</styled-button>
-				<button class="btn btn-danger" @click="close(true)">{{ data.button }}</button>
+				<styled-button @click="close(true)">{{ data.button }}</styled-button>
 			</div>
 		</div>
 	</div>
@@ -52,9 +52,12 @@
 
 <script>
 import eventbus from "../js/eventbus";
-
+import StyledButton from "./StyledButton.vue";
 export default {
 	name: "ConfirmDialog",
+	components: {
+		StyledButton,
+	},
 	data() {
 		return {
 			data: null,

client/components/JoinChannel.vue

@@ -31,7 +31,7 @@
 			title="The channel password may not contain spaces"
 			autocomplete="new-password"
 		/>
-		<button type="submit" class="btn btn-small">Join</button>
+		<styled-button small="true">Join</styled-button>
 	</form>
 </template>
 
@@ -54,9 +54,13 @@
 
 <script>
 import socket from "../js/socket";
+import StyledButton from "./StyledButton.vue";
 
 export default {
 	name: "JoinChannel",
+	components: {
+		StyledButton,
+	},
 	directives: {
 		focus: {
 			inserted(el) {
@@ -79,23 +83,19 @@ export default {
 			const existingChannel = this.$store.getters.findChannelOnCurrentNetwork(
 				this.inputChannel
 			);
-
 			if (existingChannel) {
 				this.$root.switchToChannel(existingChannel);
 			} else {
 				const chanTypes = this.network.serverOptions.CHANTYPES;
 				let channel = this.inputChannel;
-
 				if (chanTypes && chanTypes.length > 0 && !chanTypes.includes(channel[0])) {
 					channel = chanTypes[0] + channel;
 				}
-
 				socket.emit("input", {
 					text: `/join ${channel} ${this.inputPassword}`,
 					target: this.channel.id,
 				});
 			}
-
 			this.inputChannel = "";
 			this.inputPassword = "";
 			this.$emit("toggle-join-channel");

client/components/Mentions.vue

@@ -8,13 +8,13 @@
 		<div class="mentions-popup">
 			<div class="mentions-popup-title">
 				Recent mentions
-				<button
+				<styled-button
 					v-if="resolvedMessages.length"
-					class="btn dismiss-all-mentions"
+					class="dismiss-all-mentions"
 					@click="dismissAllMentions()"
 				>
 					Dismiss all
-				</button>
+				</styled-button>
 			</div>
 			<template v-if="resolvedMessages.length === 0">
 				<p v-if="isLoading">Loading…</p>
@@ -158,6 +158,7 @@ import eventbus from "../js/eventbus";
 import localetime from "../js/helpers/localetime";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import StyledButton from "./StyledButton.vue";
 
 dayjs.extend(relativeTime);
 
@@ -166,6 +167,7 @@ export default {
 	components: {
 		Username,
 		ParsedMessage,
+		StyledButton,
 	},
 	data() {
 		return {

client/components/MessageList.vue

@@ -1,15 +1,13 @@
 <template>
 	<div ref="chat" class="chat" tabindex="-1">
-		<div v-show="channel.moreHistoryAvailable" class="how-more">
+		<div v-show="channel.moreHistoryAvailable" ref="loadMoreButton" class="show-more">
-			<button
+			<styled-button
-				ref="loadMoreButton"
 				:disabled="channel.historyLoading || !$store.state.isConnected"
-				class="btn"
 				@click="onShowMoreClick"
 			>
 				<span v-if="channel.historyLoading">Loading…</span>
 				<span v-else>Show older messages</span>
-			</button>
+			</styled-button>
 		</div>
 		<div
 			class="messages"
@@ -92,6 +90,7 @@ import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
 import DateMarker from "./DateMarker.vue";
+import StyledButton from "./StyledButton.vue";
 
 let unreadMarkerShown = false;
 
@@ -101,6 +100,7 @@ export default {
 		Message,
 		MessageCondensed,
 		DateMarker,
+		StyledButton,
 	},
 	props: {
 		network: Object,

client/components/NetworkForm.vue

@@ -398,10 +398,10 @@ the server tab on new connection"
 			</template>
 
 			<div>
-				<button type="submit" class="btn" :disabled="disabled ? true : false">
+				<styled-button :disabled="disabled ? true : false">
 					<template v-if="defaults.uuid">Save network</template>
 					<template v-else>Connect</template>
-				</button>
+				</styled-button>
 			</div>
 		</form>
 	</div>
@@ -504,12 +504,14 @@ input[name="proxyEnabled"] {
 <script>
 import RevealPassword from "./RevealPassword.vue";
 import SidebarToggle from "./SidebarToggle.vue";
+import StyledButton from "./StyledButton.vue";
 
 export default {
 	name: "NetworkForm",
 	components: {
 		RevealPassword,
 		SidebarToggle,
+		StyledButton,
 	},
 	props: {
 		handleSubmit: Function,

client/components/Session.vue

@@ -15,10 +15,10 @@
 			</p>
 		</div>
 		<div class="session-item-btn">
-			<button class="btn" @click.prevent="signOut">
+			<styled-button @click.prevent="signOut">
 				<template v-if="session.current">Sign out</template>
 				<template v-else>Revoke</template>
-			</button>
+			</styled-button>
 		</div>
 	</div>
 </template>
@@ -49,9 +49,13 @@
 import localetime from "../js/helpers/localetime";
 import Auth from "../js/auth";
 import socket from "../js/socket";
+import StyledButton from "./StyledButton.vue";
 
 export default {
 	name: "Session",
+	components: {
+		StyledButton,
+	},
 	props: {
 		session: Object,
 	},

client/components/StyledButton.vue

@@ -0,0 +1,104 @@
+<template>
+	<component
+		:is="componentType"
+		:type="type"
+		:disabled="disabled"
+		:class="['btn', classes]"
+		:small="small"
+		v-on="$listeners"
+	>
+		<slot />
+	</component>
+</template>
+<style scoped>
+.btn {
+	border: 2px solid var(--button-color);
+	border-radius: 3px;
+	color: var(--button-color);
+	display: inline-block;
+	font-size: 12px;
+	font-weight: bold;
+	letter-spacing: 1px;
+	margin-bottom: 10px;
+	padding: 9px 17px;
+	text-transform: uppercase;
+	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
+	word-spacing: 3px;
+	cursor: pointer; /* This is useful for `<button>` elements */
+}
+
+.btn-cancel {
+	border-color: var(--body-color-muted);
+}
+
+.btn-danger {
+	border-color: red;
+}
+
+.btn:disabled,
+.btn:hover,
+.btn:focus {
+	background: var(--button-color);
+	color: var(--button-text-color-hover);
+	opacity: 1;
+}
+
+.btn:active,
+.btn:focus {
+	outline: 0;
+	box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
+}
+
+.btn:active {
+	opacity: 0.8;
+}
+
+.btn:disabled {
+	opacity: 0.6;
+}
+
+.btn-small {
+	padding: 4px 8px;
+	border-width: 1px;
+	letter-spacing: 0;
+	word-spacing: 0;
+	text-transform: none;
+}
+</style>
+
+<script>
+export default {
+	name: "StyledButton",
+	props: {
+		componentType: {
+			type: String,
+			default: "button",
+		},
+		text: {
+			type: String,
+			default: "",
+		},
+		small: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		type: {
+			type: String,
+			default: "submit",
+		},
+	},
+	computed: {
+		classes() {
+			return {
+				"btn-small": this.small,
+				"btn-cancel": this.type === "cancel",
+				"btn-danger": this.type === "danger",
+			};
+		},
+	},
+};
+</script>

client/components/VersionChecker.vue

@@ -18,19 +18,19 @@
 		<template v-if="$store.state.versionStatus === 'up-to-date'">
 			<p>The Lounge is up to date!</p>
 
-			<button
+			<styled-button
 				v-if="$store.state.versionDataExpired"
 				id="check-now"
-				class="btn btn-small"
+				:small="true"
 				@click="checkNow"
 			>
 				Check now
-			</button>
+			</styled-button>
 		</template>
 		<template v-if="$store.state.versionStatus === 'error'">
 			<p>Information about latest release could not be retrieved.</p>
 
-			<button id="check-now" class="btn btn-small" @click="checkNow">Try again</button>
+			<styled-button id="check-now" :small="true" @click="checkNow">Try again</styled-button>
 		</template>
 	</div>
 </template>
@@ -102,9 +102,11 @@
 </style>
 <script>
 import socket from "../js/socket";
+import StyledButton from "./StyledButton.vue";
 
 export default {
 	name: "VersionChecker",
+	components: {StyledButton},
 	mounted() {
 		if (!this.$store.state.versionData) {
 			this.checkNow();

client/components/Windows/SearchResults.vue

@@ -30,19 +30,17 @@
 				</div>
 				<div class="chat-content">
 					<div ref="chat" class="chat" tabindex="-1">
-						<div v-show="moreResultsAvailable" class="show-more">
+						<div v-show="moreResultsAvailable" ref="loadMoreButton" class="show-more">
-							<button
+							<styled-button
-								ref="loadMoreButton"
 								:disabled="
 									$store.state.messageSearchInProgress ||
 									!$store.state.isConnected
 								"
-								class="btn"
 								@click="onShowMoreClick"
 							>
 								<span v-if="$store.state.messageSearchInProgress">Loading…</span>
 								<span v-else>Show older messages</span>
-							</button>
+							</styled-button>
 						</div>
 
 						<div
@@ -108,6 +106,7 @@ import SidebarToggle from "../SidebarToggle.vue";
 import Message from "../Message.vue";
 import MessageSearchForm from "../MessageSearchForm.vue";
 import DateMarker from "../DateMarker.vue";
+import StyledButton from "../StyledButton.vue";
 
 export default {
 	name: "SearchResults",
@@ -116,6 +115,7 @@ export default {
 		Message,
 		DateMarker,
 		MessageSearchForm,
+		StyledButton,
 	},
 	data() {
 		return {

client/components/Windows/Settings.vue

@@ -25,22 +25,12 @@
 
 			<div v-if="canRegisterProtocol || hasInstallPromptEvent">
 				<h2>Native app</h2>
-				<button
+				<styled-button v-if="hasInstallPromptEvent" @click.prevent="nativeInstallPrompt">
-					v-if="hasInstallPromptEvent"
-					type="button"
-					class="btn"
-					@click.prevent="nativeInstallPrompt"
-				>
 					Add The Lounge to Home screen
-				</button>
+				</styled-button>
-				<button
+				<styled-button v-if="canRegisterProtocol" @click.prevent="registerProtocol">
-					v-if="canRegisterProtocol"
-					type="button"
-					class="btn"
-					@click.prevent="registerProtocol"
-				>
 					Open irc:// URLs with The Lounge
-				</button>
+				</styled-button>
 			</div>
 
 			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
@@ -63,9 +53,9 @@
 							Use the button below to enable synchronization, and override any
 							settings already synced to the server.
 						</p>
-						<button type="button" class="btn btn-small" @click="onForceSyncClick">
+						<styled-button :small="true" @click="onForceSyncClick">
 							Sync settings and enable
-						</button>
+						</styled-button>
 					</div>
 					<div v-else class="settings-sync-panel">
 						<p>
@@ -267,10 +257,8 @@ This may break orientation if your browser does not support that."
 			<template v-if="!$store.state.serverConfiguration.public">
 				<h2>Push Notifications</h2>
 				<div>
-					<button
+					<styled-button
 						id="pushNotifications"
-						type="button"
-						class="btn"
 						:disabled="
 							$store.state.pushNotificationState !== 'supported' &&
 							$store.state.pushNotificationState !== 'subscribed'
@@ -284,7 +272,7 @@ This may break orientation if your browser does not support that."
 							Loading…
 						</template>
 						<template v-else> Subscribe to push notifications </template>
-					</button>
+					</styled-button>
 					<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
 						<strong>Warning</strong>: Push notifications are only supported over HTTPS
 						connections.
@@ -479,9 +467,7 @@ your nickname or expressions defined in custom highlights."
 					{{ passwordErrors[passwordChangeStatus.error] }}
 				</div>
 				<div>
-					<button type="submit" class="btn" @click.prevent="changePassword">
+					<styled-button @click.prevent="changePassword"> Change password </styled-button>
-						Change password
-					</button>
 				</div>
 			</div>
 
@@ -633,6 +619,7 @@ import webpush from "../../js/webpush";
 import RevealPassword from "../RevealPassword.vue";
 import Session from "../Session.vue";
 import SidebarToggle from "../SidebarToggle.vue";
+import StyledButton from "../StyledButton.vue";
 
 let installPromptEvent = null;
 
@@ -647,6 +634,7 @@ export default {
 		RevealPassword,
 		Session,
 		SidebarToggle,
+		StyledButton,
 	},
 	data() {
 		return {

client/components/Windows/SignIn.vue

@@ -50,7 +50,7 @@
 
 			<div v-if="errorShown" class="error">Authentication failed.</div>
 
-			<button :disabled="inFlight" type="submit" class="btn">Sign in</button>
+			<styled-button :disabled="inFlight">Sign in</styled-button>
 		</form>
 	</div>
 </template>
@@ -99,11 +99,13 @@ label {
 import storage from "../../js/localStorage";
 import socket from "../../js/socket";
 import RevealPassword from "../RevealPassword.vue";
+import StyledButton from "../StyledButton.vue";
 
 export default {
 	name: "SignIn",
 	components: {
 		RevealPassword,
+		StyledButton,
 	},
 	data() {
 		return {

client/css/style.css

@@ -172,57 +172,11 @@ p {
 	margin: 0 0 10px;
 }
 
-.btn {
+.input:focus {
-	border: 2px solid var(--button-color);
-	border-radius: 3px;
-	color: var(--button-color);
-	display: inline-block;
-	font-size: 12px;
-	font-weight: bold;
-	letter-spacing: 1px;
-	margin-bottom: 10px;
-	padding: 9px 17px;
-	text-transform: uppercase;
-	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
-	word-spacing: 3px;
-	cursor: pointer; /* This is useful for `<button>` elements */
-}
-
-.btn-small {
-	padding: 5px 13px;
-}
-
-.btn:disabled,
-.btn:hover,
-.btn:focus {
-	background: var(--button-color);
-	color: var(--button-text-color-hover);
-	opacity: 1;
-}
-
-.input:focus,
-.btn:active,
-.btn:focus {
 	outline: 0;
 	box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
 }
 
-.btn:active {
-	opacity: 0.8;
-}
-
-.btn:disabled {
-	opacity: 0.6;
-}
-
-.btn-sm {
-	padding: 4px 8px;
-	border-width: 1px;
-	letter-spacing: 0;
-	word-spacing: 0;
-	text-transform: none;
-}
-
 #js-copy-hack,
 #loading pre,
 #help .container,