Add logic for predefined status to be visible.

Add styles for radio buttons to be visible in checked, active and focus-visible state.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

apps/user_status/src/components/PredefinedStatus.vue

@@ -119,13 +119,15 @@ export default {
 	}
 
 	&__input:checked + &__label,
-	&__input:focus + &__label,
-	&__label:hover {
-		background-color: var(--color-background-hover);
+	&__label:active {
+		outline: 2px solid var(--color-main-text);
+		box-shadow: 0 0 0 4px var(--color-main-background);
+		border-radius: var(--border-radius-large);
 	}
 
-	&__label:active {
-		background-color: var(--color-background-dark);
+	&__input:focus-visible + &__label {
+		outline: 2px solid var(--color-primary-element) !important;
+		border-radius: var(--border-radius-large);
 	}
 }
 </style>

apps/user_status/src/components/PredefinedStatusesList.vue

@@ -30,7 +30,7 @@
 			:icon="status.icon"
 			:message="status.message"
 			:clear-at="status.clearAt"
-			:selected="!isCustomStatus && lastSelected === status.id"
+			:selected="lastSelected === status.id"
 			@select="selectStatus(status)" />
 	</ul>
 	<div v-else
@@ -48,13 +48,6 @@ export default {
 	components: {
 		PredefinedStatus,
 	},
-	props: {
-		/** If the current selected status is a custom one */
-		isCustomStatus: {
-			type: Boolean,
-			required: true,
-		},
-	},
 	data() {
 		return {
 			lastSelected: null,
@@ -63,9 +56,20 @@ export default {
 	computed: {
 		...mapState({
 			predefinedStatuses: state => state.predefinedStatuses.predefinedStatuses,
+			messageId: state => state.userStatus.messageId,
 		}),
 		...mapGetters(['statusesHaveLoaded']),
 	},
+
+	watch: {
+		messageId: {
+		   immediate: true,
+		   handler() {
+			   this.lastSelected = this.messageId
+		   },
+	   },
+	},
+
 	/**
 	 * Loads all predefined statuses from the server
 	 * when this component is mounted

apps/user_status/src/components/SetStatusModal.vue

@@ -58,7 +58,7 @@
 					:icon="backupIcon"
 					:message="backupMessage"
 					@select="revertBackupFromServer" />
-				<PredefinedStatusesList :is-custom-status="isCustomStatus" @select-status="selectPredefinedMessage" />
+				<PredefinedStatusesList @select-status="selectPredefinedMessage" />
 				<ClearAtSelect :clear-at="clearAt"
 					@select-clear-at="setClearAt" />
 				<div class="status-buttons">