Extend welcome screen button click area to labels

Closes #738

frontend/src/components/widgets/buttons/TextButton.ts

@@ -7,6 +7,7 @@ export interface TextButtonWidget {
 	props: {
 		kind: "TextButton";
 		label: string;
+		icon?: string;
 		emphasized?: boolean;
 		minWidth?: number;
 		disabled?: boolean;

frontend/src/components/widgets/buttons/TextButton.vue

@@ -8,12 +8,14 @@
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
 	>
+		<IconLabel v-if="icon" :icon="icon" />
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
 
 <style lang="scss">
 .text-button {
+	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex: 0 0 auto;
@@ -52,17 +54,26 @@
 	& + .text-button {
 		margin-left: 8px;
 	}
+
+	.icon-label {
+		position: relative;
+		left: -4px;
+	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utility-functions/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },
+		icon: { type: String as PropType<IconName | undefined>, required: false },
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
@@ -70,6 +81,9 @@ export default defineComponent({
 		// Callbacks
 		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 	},
-	components: { TextLabel },
+	components: {
+		IconLabel,
+		TextLabel,
+	},
 });
 </script>