[MS] Update About View

client/src/locales/en-US.json

@@ -6,7 +6,7 @@
         "projectLink": "https://parsec.cloud",
         "projectSources": "https://github.com/Scille/parsec-cloud",
         "license": "BUSL-1.1",
-        "licenseLink": "https://spdx.org/licenses/BUSL-1.1.html",
+        "licenseLink": "https://github.com/Scille/parsec-cloud/blob/master/LICENSE",
         "history": "https://docs.parsec.cloud/en/stable/history.html"
     },
     "quit": {

client/src/locales/fr-FR.json

@@ -6,7 +6,7 @@
         "projectLink": "https://parsec.cloud",
         "projectSources": "https://github.com/Scille/parsec-cloud",
         "license": "BUSL-1.1",
-        "licenseLink": "https://spdx.org/licenses/BUSL-1.1.html",
+        "licenseLink": "https://github.com/Scille/parsec-cloud/blob/master/LICENSE",
         "history": "https://docs.parsec.cloud/fr/stable/history.html"
     },
     "quit": {

client/src/theme/components/buttons.scss

@@ -56,6 +56,7 @@ ion-button:not(.button-outline):not(.button-clear) {
 /* button outline */
 ion-button.button-outline {
   --border-color: var(--parsec-color-light-primary-500);
+  --background: none;
   --color: var(--parsec-color-light-primary-500);
   --border-color-hover: var(--parsec-color-light-primary-700);
   --color-hover: var(--parsec-color-light-primary-700);

client/src/theme/components/modals.scss

@@ -220,4 +220,8 @@ ion-modal .inner-content {
 
 .overlapped-modal {
   visibility: hidden;
+  & ~ ion-modal.modal-default {
+    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
+    --box-shadow: var(--parsec-shadow-light) !important;
+  }
 }

client/src/views/about/AboutPage.vue

@@ -7,69 +7,17 @@
         <div class="about-container">
           <about-view />
         </div>
-        <div class="update-container">
-          <ion-title class="title-h3 about-title">
-            {{ $t('AboutPage.update.title') }}
-          </ion-title>
-          <div
-            id="uptodate"
-            v-show="upToDate"
-            class="update-text body-lg"
-          >
-            {{ $t('AboutPage.update.upToDate') }}
-          </div>
-          <div
-            v-show="!upToDate"
-            id="notuptodate"
-            class="update-text body-lg"
-          >
-            {{ $t('AboutPage.update.notUpToDate') }}
-            <ion-button @click="update">
-              {{ $t('AboutPage.update.update') }}
-            </ion-button>
-          </div>
-
-          <ion-button
-            target="_blank"
-            :href="$t('app.history')"
-            fill="outline"
-            class="update-btn"
-          >
-            <ion-icon
-              :icon="open"
-              slot="start"
-            />
-            {{ $t('AboutPage.update.showChangelog') }}
-          </ion-button>
-        </div>
       </div>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonContent, IonIcon, IonPage, modalController, IonTitle } from '@ionic/vue';
-import { open } from 'ionicons/icons';
-import { ref } from 'vue';
+import { IonContent, IonPage } from '@ionic/vue';
 import { useI18n } from 'vue-i18n';
 import AboutView from '@/views/about/AboutView.vue';
-import ChangesModal from '@/views/about/ChangesModal.vue';
 
 useI18n();
-const upToDate = ref(false);
-
-async function update(): Promise<void> {
-  console.log('update');
-}
-
-async function showChangelog(): Promise<void> {
-  const modal = await modalController.create({
-    component: ChangesModal,
-    cssClass: 'changes-modal',
-  });
-  await modal.present();
-  await modal.onWillDismiss();
-}
 </script>
 
 <style scoped lang="scss">
@@ -78,35 +26,6 @@ async function showChangelog(): Promise<void> {
 }
 .about-container {
   border-bottom: 1px solid var(--parsec-color-light-primary-100);
-  width: 70%;
-}
-
-.update-container {
-  width: 70%;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.about-title {
-  margin-top: 2rem;
-  color: var(--parsec-color-light-primary-700);
-  padding: 0;
-}
-
-.update-text {
-  color: var(--parsec-color-light-secondary-grey);
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-.update-btn {
-  width: fit-content;
-  margin: 0;
-
-  ion-icon {
-    margin-right: 0.5rem;
-  }
+  width: 40%;
 }
 </style>