Frontend: Improve about and connect page layout

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/page/about/about.vue

@@ -36,18 +36,43 @@
           </v-btn>
         </p>
       </template>
-
+      <template v-else-if="isAdmin && !isPublic">
-      <h3 class="subheading py-2"><translate>User Guide</translate></h3>
+        <h3 class="subheading py-2"><translate>Membership</translate></h3>
         <p class="text-selectable">
+          <translate>PhotoPrism is 100% self-funded and independent.</translate>
+          <translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
+          <translate>Feel free to contact us at hello@photoprism.app if you have any questions.</translate>
+        </p>
+        <p class="text-xs-center my-4">
+          <v-btn
+              href="https://my.photoprism.app/dashboard" target="_blank"
+              color="primary-button"
+              class="white--text px-3 py-2 action-upgrade"
+              round depressed
+          >
+            <translate>Manage account</translate>
+            <v-icon v-if="rtl" left dark>navigate_before</v-icon>
+            <v-icon v-else right dark>navigate_next</v-icon>
+          </v-btn>
+        </p>
+      </template>
+
+      <div class="text-columns py-2">
+        <h3 class="subheading py-2"><translate>User Guide</translate></h3>
+        <p class="text-selectable" style="break-inside: avoid-column">
           <translate>Visit docs.photoprism.app/user-guide to learn how to sync, organize, and share your pictures.</translate>
           <translate>Our User Guide also covers many advanced topics, such as migrating from Google Photos and thumbnail quality settings.</translate>
           <translate>Common issues can be quickly diagnosed and solved using the troubleshooting checklists we provide.</translate>
+          <br>
+          <a href="https://link.photoprism.app/docs" class="text-link d-inline-block pt-2" target="_blank"><translate>Read the Docs</translate> ›</a>
         </p>
-      <p><a href="https://link.photoprism.app/docs" class="text-link" target="_blank"><translate>Read the Docs</translate> ›</a></p>
 
         <h3 class="subheading py-2"><translate>Knowledge Base</translate></h3>
-      <p class="text-selectable"><translate>Browse the Knowledge Base for detailed information on specific product features, services, and related resources.</translate></p>
+        <p class="text-selectable" style="break-inside: avoid-column">
-      <p><a href="https://www.photoprism.app/kb" class="text-link" target="_blank"><translate>Learn more</translate> ›</a></p>
+          <translate>Browse the Knowledge Base for detailed information on specific product features, services, and related resources.</translate>
+          <br>
+          <a href="https://www.photoprism.app/kb" class="text-link d-inline-block pt-2" target="_blank"><translate>Learn more</translate> ›</a>
+        </p>
 
         <h3 class="subheading py-2">
           <translate>Getting Support</translate>
@@ -63,12 +88,15 @@
           <li><a target="_blank" href="https://link.photoprism.app/discussions"><translate>post your question in GitHub Discussions</translate></a></li>
           <li><a target="_blank" href="https://link.photoprism.app/chat"><translate>or ask in our Community Chat</translate></a></li>
         </ul>
-      <p class="body-1 text-selectable">
+        <p class="body-1 text-selectable" style="break-inside: avoid-column">
           <a target="_blank" href="https://www.photoprism.app/contact"><translate>In addition, sponsors receive direct technical support via email.</translate></a>
           <span v-if="!isSponsor">
             <translate>We'll do our best to answer all your questions. In return, we ask you to back us on Patreon or GitHub Sponsors.</translate>
           </span>
+          <br>
+          <a href="https://www.photoprism.app/kb/getting-support" class="text-link d-inline-block pt-2" target="_blank"><translate>Learn more</translate> ›</a>
         </p>
+      </div>
 
       <p class="text-xs-center pt-4 ma-0 pb-0">
         <router-link to="/license">

frontend/src/page/connect.vue

@@ -14,14 +14,11 @@
         <span v-else-if="error">
           <translate>Invalid</translate>
         </span>
-        <span v-else-if="form.token">
+        <span v-else-if="form.token || !membership || membership === 'ce'">
           <translate>Upgrade</translate>
         </span>
-        <span v-else-if="membership && membership !== 'ce'">
-          <translate>Successfully Connected</translate>
-        </span>
         <span v-else>
-          <translate>Support Our Mission</translate>
+          <translate>Successfully Connected</translate>
         </span>
       </v-toolbar-title>
 
@@ -116,7 +113,7 @@
                    :disabled="busy">
               <translate>Manage account</translate>
             </v-btn>
-            <v-btn v-else color="secondary-dark" :block="$vuetify.breakpoint.xsOnly"
+            <v-btn v-else color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly"
                    class="ml-0"
                    outline
                    :disabled="busy"