Fix subline hint

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -28,7 +28,8 @@
 			name="user-status-online"
 			@change="onChange">
 		<label :for="id" :class="icon" class="user-status-online-select__label">
-			<slot />
+			{{ label }}
+			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
 </template>
@@ -50,6 +51,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		label: {
+			type: String,
+			required: true,
+		},
+		subline: {
+			type: String,
+			default: null,
+		},
 	},
 
 	computed: {
@@ -91,6 +100,11 @@ $label-padding: 8px;
 		background-color: var(--color-background-hover);
 		background-position: $label-padding center;
 		background-size: $icon-size;
+
+		span,
+		& {
+			cursor: pointer;
+		}
 	}
 
 	&__input:checked + &__label,
@@ -98,6 +112,11 @@ $label-padding: 8px;
 	&__label:hover {
 		border-color: var(--color-primary);
 	}
+
+	&__subline {
+		display: block;
+		color: var(--color-text-lighter);
+	}
 }
 
 </style>

apps/user_status/src/components/SetStatusModal.vue

@@ -34,10 +34,7 @@
 					:key="status.type"
 					v-bind="status"
 					:checked="status.type === statusType"
-					@select="changeStatus">
-					{{ status.label }}
-					<em class="subline">{{ status.subline }}</em>
-				</OnlineStatusSelect>
+					@select="changeStatus" />
 			</div>
 
 			<!-- Status message -->
@@ -248,10 +245,6 @@ export default {
 		// Space between the two sections
 		margin-bottom: 40px;
 		grid-template-columns: 1fr 1fr;
-
-		.subline {
-			display: block;
-		}
 	}
 
 	&__custom-input {