Attempt to improve public view layout

dashboard/src/components/PublicPageLayout.vue

@@ -11,6 +11,10 @@ defineProps({
     type: String,
     default: `${API_ORIGIN}/api/v1/cloudron/avatar`,
   },
+  cloudronName: {
+    type: String,
+    default: 'Cloudron',
+  }
 });
 
 </script>
@@ -20,11 +24,13 @@ defineProps({
     <div class="public-page-layout-root">
       <div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
         <img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
+        <div>{{ cloudronName }}</div>
       </div>
 
       <div class="public-page-layout-right">
         <div class="public-page-layout-mobile-logo">
           <img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
+          <div>{{ cloudronName }}</div>
         </div>
         <div class="public-page-layout-right-slot">
           <slot></slot>
@@ -94,8 +100,8 @@ defineProps({
   }
 }
 
-.public-page-layout-left img {
-  margin-bottom: 20%;
+.public-page-layout-left .cloudron-avatar {
+  margin-bottom: 20px;
   border-radius: 10px;
 }
 

dashboard/src/components/SetupAccount.vue

@@ -104,13 +104,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :cloudron-name="cloudronName">
     <div>
       <div v-if="mode === MODE.SETUP">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
-        <div>{{ $t('setupAccount.description') }}</div>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
+        <p style="margin-bottom: 8px">{{ $t('setupAccount.description') }}</p>
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
@@ -151,24 +149,21 @@ onMounted(async () => {
       </div>
 
       <div v-if="mode === MODE.NO_USERNAME">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3>{{ $t('setupAccount.noUsername.title') }}</h3>
         <div>{{ $t('setupAccount.noUsername.description') }}</div>
       </div>
 
       <div v-if="mode === MODE.INVALID_TOKEN">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3 class="error-label">{{ $t('setupAccount.invalidToken.title') }}</h3>
         <div>{{ $t('setupAccount.invalidToken.description') }}</div>
       </div>
 
       <div v-if="mode === MODE.DONE">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3>{{ $t('setupAccount.success.title') }}</h3>
         <Button :href="dashboardUrl">{{ $t('setupAccount.success.openDashboardAction') }}</Button>