fix: plain view logo UI

packages/web-runtime/src/layouts/Plain.vue

@@ -1,43 +1,35 @@
 <template>
   <div class="oc-login h-screen" :style="backgroundImgStyle">
     <h1 class="sr-only" v-text="pageTitle" />
-    <router-view />
+    <router-view class="relative z-1" />
     <img
-      v-if="!backgroundImg"
+      v-if="!backgroundImg && route.fullPath !== '/'"
       alt="OpenCloud emblem"
       src="/packages/design-system/src/assets/images/icon-lilac.svg"
+      class="hidden sm:block fixed w-3xs xs:w-xs md:w-md lg:w-lg bottom-[-40px] right-[-40px]"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, defineComponent, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteMeta, useThemeStore } from '@opencloud-eu/web-pkg'
+import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'PlainLayout',
-  setup() {
-    const { $gettext } = useGettext()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
+const { $gettext } = useGettext()
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
 
-    const title = useRouteMeta('title')
+const title = useRouteMeta('title')
+const route = useRoute()
 
-    const pageTitle = computed(() => {
-      return $gettext(unref(title) || '')
-    })
-    const backgroundImg = computed(() => unref(currentTheme).background)
-    const backgroundImgStyle = computed(() => {
-      return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
-    })
-
-    return {
-      pageTitle,
-      backgroundImg,
-      backgroundImgStyle
-    }
-  }
+const pageTitle = computed(() => {
+  return $gettext(unref(title) || '')
+})
+const backgroundImg = computed(() => unref(currentTheme).background)
+const backgroundImgStyle = computed(() => {
+  return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
 })
 </script>

packages/web-runtime/src/pages/accessDenied.vue

@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <oc-button

packages/web-runtime/src/pages/logout.vue

@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <template #footer>

packages/web-runtime/src/pages/missingOrInvalidConfig.vue

@@ -7,7 +7,7 @@
       :logo-url="logoImg"
       :title="$gettext('Missing or invalid config')"
       body-class="text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="$gettext('Please check if the file config.json exists and is correct.')" />
       <p v-text="$gettext('Also, make sure to check the browser console for more information.')" />

packages/web-runtime/src/pages/oidcCallback.vue

@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <template #footer>

packages/web-runtime/src/pages/resolvePrivateLink.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <oc-card
-      :title="headerTitle"
-      body-class="w-lg text-center"
-      class="bg-role-surface-container rounded-lg"
-    >
+    <oc-card :title="headerTitle" body-class="w-lg text-center" class="rounded-lg">
       <oc-spinner v-if="loading" data-testid="loading-spinner" :aria-hidden="true" />
       <p v-else-if="errorMessage" data-testid="error-message" class="text-xl">{{ errorMessage }}</p>
     </oc-card>

packages/web-runtime/src/pages/resolvePublicLink.vue

@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="headerTitle"
       body-class="w-lg text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-if="errorMessage" data-testid="error-message" class="text-xl">
         {{ errorMessage }}

packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`access denied page > renders component 1`] = `
 "<div class="h-screen flex flex-col justify-center items-center">
-  <div class="oc-card bg-role-surface-container rounded-lg">
+  <div class="oc-card rounded-lg">
     <div class="oc-card-header"><img src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true" class="max-w-48 max-h-48 absolute -translate-y-16">
       <h2 class="mt-0">Not logged in</h2>
     </div>