Attempt to improve public view layout

dashboard/src/views/LoginView.vue

@@ -89,11 +89,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer" :icon-url="iconUrl" v-if="ready">
+  <PublicPageLayout v-if="ready" :footerHtml="footer" :icon-url="iconUrl" :cloudron-name="name">
     <div>
-      <small>{{ $t('login.loginTo') }}</small>
-      <h1>{{ name }}</h1>
-      <p v-html="note"></p>
+      <h2>{{ $t('login.loginTo') }}</h2>
+      <p v-html="note" style="margin-bottom: 8px"></p>
 
       <form @submit.prevent="onSubmit" v-if="!totpTokenRequired">
         <fieldset :disabled="busy">
@@ -116,7 +115,7 @@ onMounted(async () => {
 
         <div class="actions">
           <Button id="loginSubmitButton" @click="onSubmit" :disabled="busy || (!username || !password)" :loading="busy">{{ $t('login.signInAction') }}</Button>
-          <a class="forgot" href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
+          <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
         </div>
       </form>
 
@@ -143,14 +142,14 @@ onMounted(async () => {
 <style scoped>
 
 .actions {
-  margin-top: 1.5em;
+  margin-top: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.actions .forgot {
-  margin-top: 1em;
+.actions a {
+  margin-top: 12px;
   font-size: 0.9em;
 }