style(user_status): adjust status modal styles

- remove modal name
- propagate box-sizing
- reduce gap between sections 12px -> 8px
- align icons vertically
- add hover effect to status labels

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

apps/user_status/src/components/ClearAtSelect.vue

@@ -14,6 +14,7 @@
 			:value="option"
 			:clearable="false"
 			placement="top"
+			label-outside
 			@option:selected="select" />
 	</div>
 </template>
@@ -72,12 +73,9 @@ export default {
 <style lang="scss" scoped>
 .clear-at-select {
 	display: flex;
-	margin-bottom: 10px;
+	gap: calc(2 * var(--default-grid-baseline));
 	align-items: center;
-
-	&__label {
-		margin-inline-end: 12px;
-	}
+	margin-block: 0 calc(2 * var(--default-grid-baseline));
 
 	&__select {
 		flex-grow: 1;

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -11,9 +11,10 @@
 			name="user-status-online"
 			@change="onChange">
 		<label :for="id" class="user-status-online-select__label">
-			{{ label }}
 			<NcUserStatusIcon :status="type"
+				class="user-status-online-select__icon"
 				aria-hidden="true" />
+			{{ label }}
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
@@ -63,45 +64,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use 'sass:math';
-$icon-size: 24px;
-$label-padding: 8px;
-
 .user-status-online-select {
 	&__label {
-		position: relative;
-		display: block;
-		margin: $label-padding;
-		padding: $label-padding;
-		padding-inline-start: $icon-size + $label-padding * 2;
-		border: 2px solid var(--color-main-background);
+		box-sizing: inherit;
+		display: grid;
+		grid-template-columns: var(--default-clickable-area) 1fr 2fr;
+		align-items: center;
+		gap: var(--default-grid-baseline);
+		min-height: var(--default-clickable-area);
+		padding: var(--default-grid-baseline);
 		border-radius: var(--border-radius-large);
 		background-color: var(--color-background-hover);
-		background-position: $label-padding center;
-		background-size: $icon-size;
 
-		span,
-		& {
+		&, & * {
 			cursor: pointer;
 		}
 
-		span {
-			position: absolute;
-			top: calc(50% - 10px);
-			inset-inline-start: 10px;
-			display: block;
-			width: $icon-size;
-			height: $icon-size;
+		&:hover {
+			background-color: var(--color-background-dark);
 		}
 	}
 
+	&__icon {
+		flex-shrink: 0;
+		max-width: 34px;
+		max-height: 100%;
+	}
+
 	&__input:checked + &__label {
 		outline: 2px solid var(--color-main-text);
+		background-color: var(--color-background-dark);
 		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
 	&__input:focus-visible + &__label {
 		outline: 2px solid var(--color-primary-element) !important;
+		background-color: var(--color-background-dark);
 	}
 
 	&__subline {

apps/user_status/src/components/PredefinedStatus.vue

@@ -81,10 +81,19 @@ export default {
 		flex-basis: 100%;
 		border-radius: var(--border-radius);
 		align-items: center;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
+		padding-inline: var(--default-grid-baseline);
+
+		&, & * {
+			cursor: pointer;
+		}
+
+		&:hover {
+			background-color: var(--color-background-dark);
+		}
 
 		&--icon {
-			flex-basis: 40px;
+			flex-basis: var(--default-clickable-area);
 			text-align: center;
 		}
 
@@ -106,11 +115,13 @@ export default {
 	&__label:active {
 		outline: 2px solid var(--color-main-text);
 		box-shadow: 0 0 0 4px var(--color-main-background);
+		background-color: var(--color-background-dark);
 		border-radius: var(--border-radius-large);
 	}
 
 	&__input:focus-visible + &__label {
 		outline: 2px solid var(--color-primary-element) !important;
+		background-color: var(--color-background-dark);
 		border-radius: var(--border-radius-large);
 	}
 }

apps/user_status/src/components/PredefinedStatusesList.vue

@@ -78,6 +78,7 @@ export default {
 .predefined-statuses-list {
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 10px;
+	gap: var(--default-grid-baseline);
+	margin-block: 0 calc(2 * var(--default-grid-baseline));
 }
 </style>

apps/user_status/src/components/PreviousStatus.vue

@@ -65,7 +65,8 @@ export default {
 	flex-basis: 100%;
 	border-radius: var(--border-radius);
 	align-items: center;
-	min-height: 44px;
+	min-height: var(--default-clickable-area);
+	padding-inline: var(--default-grid-baseline);
 
 	&:hover,
 	&:focus {
@@ -77,7 +78,7 @@ export default {
 	}
 
 	&__icon {
-		flex-basis: 40px;
+		flex-basis: var(--default-clickable-area);
 		text-align: center;
 	}
 

apps/user_status/src/components/SetStatusModal.vue

@@ -5,8 +5,8 @@
 
 <template>
 	<NcModal size="normal"
-		:name="$t('user_status', 'Set status')"
-		aria-labelledby="user_status-set-dialog"
+		label-id="user_status-set-dialog"
+		dark
 		:set-return-focus="setReturnFocus"
 		@close="closeModal">
 		<div class="set-status-modal">
@@ -336,19 +336,25 @@ export default {
 .set-status-modal {
 	padding: 8px 20px 20px 20px;
 
+	&, & * {
+		box-sizing: border-box;
+	}
+
 	&__header {
 		font-size: 21px;
 		text-align: center;
 		height: fit-content;
 		min-height: var(--default-clickable-area);
 		line-height: var(--default-clickable-area);
 		overflow-wrap: break-word;
-		margin-block: 0 12px;
+		margin-block: 0 calc(2 * var(--default-grid-baseline));
 	}
 
 	&__online-status {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
+		display: flex;
+		flex-direction: column;
+		gap: calc(2 * var(--default-grid-baseline));
+		margin-block: 0 calc(2 * var(--default-grid-baseline));
 	}
 
 	&__custom-input {
@@ -357,13 +363,14 @@ export default {
 		align-items: center;
 		gap: var(--default-grid-baseline);
 		width: 100%;
-		margin-bottom: 10px;
+		padding-inline-start: var(--default-grid-baseline);
+		margin-block: 0 calc(2 * var(--default-grid-baseline));
 	}
 
 	&__automation-hint {
 		display: flex;
 		width: 100%;
-		margin-bottom: 10px;
+		margin-block: 0 calc(2 * var(--default-grid-baseline));
 		color: var(--color-text-maxcontrast);
 	}