Fix invisible status

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

4 files changed, 17 insertions, 6 deletions

diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css
index 9966be2f4ff..88b456f4800 100644
--- a/apps/user_status/css/user-status-menu.css
+++ b/apps/user_status/css/user-status-menu.css
@@ -94,8 +94,7 @@
 }
 
 .icon-user-status-invisible {
-  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
-  background-image: var(--icon-user-status-invisible-dark);
+  background-image: url("../img/user-status-invisible.svg");
 }
 
 /*# sourceMappingURL=user-status-menu.css.map */
diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map
index 0363c914a41..6380d5dd687 100644
--- a/apps/user_status/css/user-status-menu.css.map
+++ b/apps/user_status/css/user-status-menu.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;ACsBC;EAEA","file":"user-status-menu.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC","file":"user-status-menu.css"}
\ No newline at end of file
diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss
index 6dc681c1448..1a2066436f0 100644
--- a/apps/user_status/css/user-status-menu.scss
+++ b/apps/user_status/css/user-status-menu.scss
@@ -38,7 +38,7 @@
 	background-image: url('../img/user-status-dnd.svg');
 }
 
-// TODO: debug why icon-black-white does not work here
 .icon-user-status-invisible {
-	@include icon-color('user-status-invisible', 'user_status', variables.$color-black, 1);
+	background-image: url('../img/user-status-invisible.svg');
+	filter: var(--background-invert-if-dark);
 }
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
index d9ce249ad13..f920189fce1 100644
--- a/apps/user_status/src/components/OnlineStatusSelect.vue
+++ b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -27,8 +27,9 @@
 			type="radio"
 			name="user-status-online"
 			@change="onChange">
-		<label :for="id" :class="icon" class="user-status-online-select__label">
+		<label :for="id" class="user-status-online-select__label">
 			{{ label }}
+			<span :class="icon" role="img" />
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
@@ -76,6 +77,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
 $icon-size: 24px;
 $label-padding: 8px;
 
@@ -91,6 +93,7 @@ $label-padding: 8px;
 	}
 
 	&__label {
+		position: relative;
 		display: block;
 		margin: $label-padding;
 		padding: $label-padding;
@@ -105,6 +108,15 @@ $label-padding: 8px;
 		& {
 			cursor: pointer;
 		}
+
+		span {
+			position: absolute;
+			top: calc(50% - math.div($icon-size, 2));
+			left: $label-padding;
+			display: block;
+			width: $icon-size;
+			height: $icon-size;
+		}
 	}
 
 	&__input:checked + &__label,