[MS] Updated style

Scille · Oct 29, 2024 · 286f1e3 · 286f1e3
1 parent 4a294bc
commit 286f1e3
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 32 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -53,7 +53,7 @@
         "@types/luxon": "^3.3.4",
         "axios": "^1.7.4",
         "luxon": "^3.4.4",
-        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#d1ebfc3607f9d31df7a6e6430a6dbceafd9099d5",
+        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#8f336a55f3244c0db6ddfe14ea1f7d2bbfbb6e19",
         "qrcode-vue3": "^1.6.8",
         "uuid": "^9.0.1",
         "vue": "^3.3.8",

diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -118,8 +118,10 @@
             "updateConfirmQuestion": "You will be logged out and the application will close. Make sure to save your work before. Do you want to continue?",
             "updateYes": "Update Parsec",
             "updateNo": "Later",
-            "updateAvailable": "Update available",
-            "newVersionAvailable": "New version available"
+            "changelog": "What's new?",
+            "currentVersion": "Current version: ",
+            "updateAvailable": "New update available",
+            "newVersionAvailable": "New update available"
         },
         "organizationList": {
             "title": "Your organizations",

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -118,7 +118,8 @@
             "updateConfirmQuestion": "Vous serez déconnecté(e) et l'application sera fermée. Assurez vous de ne pas avoir d'opérations en cours. Souhaitez-vous continuer ?",
             "updateYes": "Mettre à jour Parsec",
             "updateNo": "Plus tard",
-            "updateAvailable": "Mise à jour disponible",
+            "currentVersion": "Votre version actuelle: ",
+            "updateAvailable": "Une nouvelle mise à jour disponible",
             "newVersionAvailable": "Nouvelle version disponible"
         },
         "organizationList": {

diff --git a/client/src/theme/components/modals.scss b/client/src/theme/components/modals.scss
@@ -286,3 +286,13 @@
     max-width: var(--parsec-modal-width-md);
   }
 }
+
+.update-app-modal {
+  &::part(content) {
+    max-width: var(--parsec-modal-width-sm);
+  }
+
+  .ms-modal {
+    padding-top: 1.5rem;
+  }
+}
diff --git a/client/src/views/about/UpdateAppModal.vue b/client/src/views/about/UpdateAppModal.vue
@@ -1,37 +1,60 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
+  <ms-image
+    :image="UpdateRocket"
+    class="update-rocket"
+  />
   <ms-modal
-    title="UPDATE APP"
-    :close-button="{ visible: true }"
+    :close-button="{ visible: false }"
     class="update-app"
   >
-    <ion-text>
-      {{ $msTranslate('NEW UPDATE AVAILABLE') }}
-    </ion-text>
-    <ion-text>
-      {{ currentVersion ?? APP_VERSION }}
-    </ion-text>
-    <ion-text>
-      {{ targetVersion }}
-    </ion-text>
-    <ion-button @click="openChangelog">
-      {{ $msTranslate('SEE CHANGELOG') }}
-    </ion-button>
-    <div>
-      {{ $msTranslate('HomePage.topbar.updateConfirmQuestion') }}
+    <div class="update-content">
+      <ion-text class="update__title title-h2">
+        {{ $msTranslate('HomePage.topbar.updateAvailable') }}
+      </ion-text>
+      <div class="update-main">
+        <div class="update-version">
+          <ion-text class="title-h3 update-version__item">
+            {{ targetVersion }}
+          </ion-text>
+          <ion-button
+            class="update-version__button"
+            @click="openChangelog"
+            fill="clear"
+          >
+            {{ $msTranslate('HomePage.topbar.changelog') }}
+          </ion-button>
+        </div>
+        <div class="update-message body">
+          <ion-text class="update-message__curent-version">
+            {{ $msTranslate('HomePage.topbar.currentVersion') }}<span class="subtitles-sm">{{ currentVersion ?? APP_VERSION }}</span>
+          </ion-text>
+          <ion-text>
+            {{ $msTranslate('HomePage.topbar.updateConfirmQuestion') }}
+          </ion-text>
+        </div>
+      </div>
+      <div class="update-footer">
+        <ion-button
+          @click="dismiss(MsModalResult.Confirm)"
+          class="update-footer__button"
+        >
+          {{ $msTranslate('HomePage.topbar.updateYes') }}
+        </ion-button>
+        <ion-button
+          @click="dismiss(MsModalResult.Cancel)"
+          class="update-footer__button"
+        >
+          {{ $msTranslate('HomePage.topbar.updateNo') }}
+        </ion-button>
+      </div>
     </div>
-    <ion-button @click="dismiss(MsModalResult.Confirm)">
-      {{ $msTranslate('HomePage.topbar.updateYes') }}
-    </ion-button>
-    <ion-button @click="dismiss(MsModalResult.Cancel)">
-      {{ $msTranslate('HomePage.topbar.updateNo') }}
-    </ion-button>
   </ms-modal>
 </template>
 
 <script setup lang="ts">
-import { MsModal, MsModalResult } from 'megashark-lib';
+import { MsModal, MsModalResult, MsImage, UpdateRocket } from 'megashark-lib';
 import { modalController, IonText, IonButton } from '@ionic/vue';
 import { APP_VERSION, Env } from '@/services/environment';
 
@@ -50,7 +73,96 @@ async function dismiss(role: MsModalResult): Promise<void> {
 </script>
 
 <style lang="scss" scoped>
-.update-app {
-  background-color: rgb(255, 0, 212);
+.update-rocket {
+  background: var(--parsec-color-light-primary-30);
+  margin: -0.25rem;
+}
+
+.update-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  .update__title {
+    text-align: center;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--parsec-color-light-gradient-background);
+  }
+
+  .update-main {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    .update-version {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      gap: 0.5rem;
+      width: fit-content;
+      margin: auto;
+
+      &__item {
+        background: var(--parsec-color-light-secondary-background);
+        border-radius: var(--parsec-radius-8);
+        color: var(--parsec-color-light-secondary-text);
+        padding: 0.5rem 1.25rem;
+      }
+
+      &__button {
+        --color: var(--parsec-color-light-secondary-text);
+        --background-hover: transparent;
+        --padding-end: 0.5rem;
+        --padding-start: 0.5rem;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .update-message {
+      color: var(--parsec-color-light-secondary-hard-grey);
+      display: flex;
+      flex-direction: column;
+
+      &__curent-version span {
+        color: var(--parsec-color-light-secondary-text);
+      }
+    }
+  }
+
+  .update-footer {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+
+    &__button {
+      margin: auto;
+      width: fit-content;
+
+      &:nth-child(1) {
+        --background: var(--parsec-color-light-gradient-background);
+        --padding-end: 2rem;
+        --padding-start: 2rem;
+        --padding-bottom: 0.75rem;
+        --padding-top: 0.75rem;
+      }
+
+      &:nth-child(2) {
+        position: absolute;
+        right: 2.5rem;
+        --background: transparent;
+        --background-hover: var(--parsec-color-light-secondary-premiere);
+        --color: var(--parsec-color-light-secondary-text);
+        --padding-end: 0.5rem;
+        --padding-start: 0.5rem;
+      }
+    }
+  }
 }
 </style>