From 2ad10b2cfc37f9c52aa23fa5ab428574e41065be Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Wed, 5 Apr 2023 14:15:05 +0200
Subject: [PATCH] Frontend: Update legal info links in footer.vue and
 navigation.vue

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 frontend/src/component/auth/footer.vue | 13 ++-----------
 frontend/src/component/navigation.vue  | 20 ++++++++++++++------
 frontend/src/css/navigation.css        | 14 +++++++++-----
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/auth/footer.vue b/frontend/src/component/auth/footer.vue
index 2d88b05db..a7696cff1 100644
--- a/frontend/src/component/auth/footer.vue
+++ b/frontend/src/component/auth/footer.vue
@@ -21,17 +21,8 @@
         <v-flex xs12 sm6 class="pa-0 body-2 text-xs-center text-sm-left white--text text-selectable">
           <strong>{{ config.siteTitle }}</strong> – {{ config.siteCaption }}
         </v-flex>
-        <v-flex xs12 sm6 class="pa-0 body-2 text-xs-center text-sm-right white--text">
-          <v-btn
-              href="https://www.photoprism.app/"
-              target="_blank"
-              color="transparent"
-              class="white--text px-3 py-2 ma-0 action-about"
-              round depressed small
-          >
-            <translate>Learn more</translate>
-            <v-icon :left="rtl" :right="!rtl" size="16" class="ml-2" dark>diamond</v-icon>
-          </v-btn>
+        <v-flex xs12 sm6 class="pa-0 body-2 text-selectable text-xs-center text-sm-right">
+          <router-link to="/about" class="text-link"><span class="white--text">Made with ❤️ in Berlin</span></router-link>
         </v-flex>
       </v-layout>
     </footer>
diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue
index 85be8fbae..3d5357ecf 100644
--- a/frontend/src/component/navigation.vue
+++ b/frontend/src/component/navigation.vue
@@ -650,16 +650,17 @@
             <v-icon>auto_stories</v-icon>
             <translate>User Guide</translate>
           </a></div>
-          <div v-if="config.legalUrl && isSponsor" class="menu-action nav-legal"><a :href="config.legalUrl"
-                                                                                      target="_blank">
-            <v-icon>info</v-icon>
-            <translate>Legal Information</translate>
-          </a></div>
+          <div v-if="config.legalUrl && isSponsor" class="menu-action nav-legal">
+            <a :href="config.legalUrl" target="_blank">
+              <v-icon>info</v-icon>
+              <translate>Legal Information</translate>
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <div v-if="config.legalInfo && visible" id="legal-info">
-      <a v-if="config.legalUrl" :href="config.legalUrl" target="_blank">{{ config.legalInfo }}</a>
+      <span v-if="config.legalUrl" class="clickable" @click.stop.prevent="onInfo()">{{ config.legalInfo }}</span>
       <span v-else>{{ config.legalInfo }}</span>
     </div>
     <p-reload-dialog :show="reload.dialog" @close="reload.dialog = false"></p-reload-dialog>
@@ -828,6 +829,13 @@ export default {
     onAccount: function () {
       this.$router.push({name: "settings_account"});
     },
+    onInfo() {
+      if (this.isSponsor && this.config.legalUrl) {
+        window.open(this.config.legalUrl, '_blank').focus();
+      } else {
+        this.$router.push({name: "about"});
+      }
+    },
     onLogout() {
       this.$session.logout();
     },
diff --git a/frontend/src/css/navigation.css b/frontend/src/css/navigation.css
index d4f501988..12af8fa6e 100644
--- a/frontend/src/css/navigation.css
+++ b/frontend/src/css/navigation.css
@@ -258,10 +258,6 @@ nav .v-list__tile__title.title {
     background: rgba(250, 250, 255,.08);
 }
 
-#mobile-menu .menu-icons a i {
-    font-size: 22px;
-}
-
 #mobile-menu .menu-actions {
     display: block;
     overflow-y: auto;
@@ -291,11 +287,19 @@ nav .v-list__tile__title.title {
     margin: 0;
 }
 
-#mobile-menu .menu-action a i {
+#mobile-menu .menu-icons a .v-icon {
+    font-size: 22px;
+}
+
+#mobile-menu .menu-action a .v-icon {
     padding: 0 16px 0 0;
     font-size: 20px;
 }
 
+#photoprism #mobile-menu .menu-action.nav-membership a .v-icon {
+    color: #d9b8ff;
+}
+
 #photoprism #mobile-menu .menu-icons a:hover i,
 #photoprism #mobile-menu .menu-icons a:hover .v-icon,
 #photoprism #mobile-menu .menu-action:hover a,