feat: improve naming and styles

src/App.vue

@@ -1,6 +1,5 @@
 <template>
 	<ready>
-		<Update/>
 		<template v-if="authUser">
 			<TheNavigation/>
 			<content-auth/>
@@ -9,9 +8,13 @@
 		<no-auth-wrapper v-else>
 			<router-view/>
 		</no-auth-wrapper>
-		<Notification/>
 		
 		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		
+		<Teleport to="body">
+			<UpdateNotification/>
+			<Notification/>
+		</Teleport>
 	</ready>
 </template>
 
@@ -22,13 +25,14 @@ import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 
 import Notification from '@/components/misc/notification.vue'
+import UpdateNotification from '@/components/home/UpdateNotification.vue'
 import KeyboardShortcuts from '@/components/misc/keyboard-shortcuts/index.vue'
+
 import TheNavigation from '@/components/home/TheNavigation.vue'
 import ContentAuth from '@/components/home/contentAuth.vue'
 import ContentLinkShare from '@/components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'
-import Update from '@/components/home/Update.vue'
 
 import {setLanguage} from '@/i18n'
 import AccountDeleteService from '@/services/accountDelete'

src/components/home/UpdateNotification.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
-		<p>{{ $t('update.available') }}</p>
+		<p class="update-notification__message">{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
+		<x-button
+			@click="refreshApp()"
+			:shadow="false"
+			:wrap="false"
+			>
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@@ -42,40 +46,30 @@ function refreshApp() {
 
 <style lang="scss" scoped>
 .update-notification {
+	position: fixed;
+	// FIXME: We should prevent usage of z-index or
+	// at least define it centrally
+	// the highest z-index of a modal is .hint-modal with 4500
+	z-index: 5000;
+	bottom: 1rem;
+	inset-inline: 1rem;
+	max-width: max-content;
+	margin-inline: auto;
+
 	display: flex;
 	align-items: center;
-	background: $warning;
+	justify-content: space-between;
+	gap: 1rem;
 	padding: .5rem;
+	background: $warning;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
-	justify-content: space-between;
-	z-index: 10;
 
-	position: fixed;
-	bottom: 1rem;
-	width: 450px;
-	left: calc(50vw - 225px);
-
-	@media screen and (max-width: $tablet) {
-		position: fixed;
-		left: 1rem;
-		right: 1rem;
-		bottom: 1rem;
-		width: auto;
 }
 
-	p {
+.update-notification__message {
-		text-align: center;
 	width: 100%;
-	}
+	text-align: center;
-
-	> * + * {
-		margin-left: .5rem;
-	}
-}
-
-:global(.dark) .update-notification {
-	color: var(--grey-200);
 }
 </style>

src/components/home/contentAuth.vue

@@ -224,9 +224,4 @@ labelStore.loadAllLabels()
 	position: relative;
 	z-index: 1;
 }
-
-.is-touch .content-auth,
-.content-auth.z-unset {
-	z-index: unset;
-}
 </style>

src/components/input/button.vue

@@ -8,17 +8,20 @@
 				'has-no-shadow': !shadow || variant === 'tertiary',
 			}
 		]"
+		:style="{
+			'--button-white-space': wrap ? 'break-spaces' : 'nowrap',
+		}"
 	>
 		<template v-if="icon">
 			<icon 
 				v-if="showIconOnly"
 				:icon="icon"
-				:style="{'color': iconColor !== '' ? iconColor : false}"
+				:style="{'color': iconColor !== '' ? iconColor : undefined}"
 			/>
 			<span class="icon is-small" v-else>
 				<icon 
 					:icon="icon"
-					:style="{'color': iconColor !== '' ? iconColor : false}"
+					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
 			</span>
 		</template>
@@ -50,6 +53,7 @@ export interface ButtonProps extends BaseButtonProps {
 	iconColor?: string
 	loading?: boolean
 	shadow?: boolean
+	wrap?: boolean
 }
 
 const {
@@ -58,6 +62,7 @@ const {
 	iconColor = '',
 	loading = false,
 	shadow = true,
+	wrap = true,
 } = defineProps<ButtonProps>()
 
 const variantClass = computed(() => BUTTON_TYPES_MAP[variant])
@@ -67,7 +72,7 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 </script>
 
 <style lang="scss" scoped>
-.button {
+:where(.button) {
   transition: all $transition;
   border: 0;
   text-transform: uppercase;
@@ -77,7 +82,7 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
-  white-space: break-spaces;
+  white-space: var(--button-white-space);
 
   &:hover {
     box-shadow: var(--shadow-md);
@@ -99,7 +104,6 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
   &.is-primary.is-outlined:hover {
     color: var(--white);
   }
-
 }
 
 .is-small {

src/i18n/lang/en.json

@@ -915,7 +915,7 @@
     }
   },
   "update": {
-    "available": "There is an update for Vikunja available!",
+    "available": "There is an update available!",
     "do": "Update Now"
   },
   "menu": {

src/styles/theme/helpers.scss

@@ -3,7 +3,3 @@
     display: none !important;
   }
 }
-
-.has-no-text-wrap {
-  white-space: nowrap !important;
-}