From be3696ff8c9f0e5eaceeedc6a7853ed870ee88e2 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 21 May 2025 11:05:15 +0200
Subject: [PATCH] Some polish to the branding page

---
 dashboard/src/views/BrandingView.vue | 31 +++++++++++++---------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/views/BrandingView.vue b/dashboard/src/views/BrandingView.vue
index 47d572a65..10d0cb5be 100644
--- a/dashboard/src/views/BrandingView.vue
+++ b/dashboard/src/views/BrandingView.vue
@@ -18,7 +18,6 @@ const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random
 const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
 
 const features = inject('features');
-const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
 
 // Cloudron name
 const editingName = ref(false);
@@ -97,6 +96,18 @@ onMounted(async () => {
 <template>
   <div class="content">
     <Section :title="$t('branding.title')" :title-badge="!features.branding ? 'Pro' : ''">
+      <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
+        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+          <label>{{ $t('branding.logo') }}</label>
+          <ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+          <label>{{ $t('branding.backgroundImage') }}</label>
+          <ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
+        </div>
+      </div>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.cloudronName') }}</label>
@@ -114,28 +125,14 @@ onMounted(async () => {
         </Transition>
       </SettingsItem>
 
-      <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('branding.logo') }}</label>
-          <ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="100px" :disabled="!features.branding"/>
-        </FormGroup>
-      </SettingsItem>
-
-      <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('branding.backgroundImage') }}</label>
-          <ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
-        </FormGroup>
-      </SettingsItem>
-
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.footer.title') }}</label>
           <div>{{ $t('branding.footer.description') }} <sup><a href="https://docs.cloudron.io/branding/#footer" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
         </FormGroup>
         <Transition name="slide-up" mode="out-in">
-          <div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px">
-            <TextInput v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy"/>
+          <div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px; flex-grow: 1; justify-content: right;">
+            <textarea v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy" style="flex-grow: 1; height: 120px;"></textarea>
             <Button tool @click="onChangeFooterSubmit()" :disabled="editFooterBusy" :loading="editFooterBusy">{{ $t('main.dialog.save') }}</Button>
             <Button tool plain secondary @click="editingFooter = false" :disabled="editFooterBusy">{{ $t('main.dialog.cancel') }}</Button>
           </div>