From 5bec324ff25a2679f403b0090dc976ee1955815d Mon Sep 17 00:00:00 2001
From: fabienSvstr <fabien.sevestre@my-digital-school.org>
Date: Tue, 31 Oct 2023 18:36:39 +0100
Subject: [PATCH] Update about view

---
 client/src/views/about/AboutPage.vue |  92 +----------------------
 client/src/views/about/AboutView.vue | 107 +++++++++++++++++++++++++--
 2 files changed, 103 insertions(+), 96 deletions(-)

diff --git a/client/src/views/about/AboutPage.vue b/client/src/views/about/AboutPage.vue
index 734b26554ed..4628aba55ea 100644
--- a/client/src/views/about/AboutPage.vue
+++ b/client/src/views/about/AboutPage.vue
@@ -9,44 +9,6 @@
         >
           <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"
-          >
-            {{ $t('AboutPage.update.upToDate') }}
-          </div>
-          <div
-            v-show="!upToDate"
-            id="notuptodate"
-            class="update-text body"
-          >
-            {{ $t('AboutPage.update.notUpToDate') }}
-            <ion-button
-              @click="update"
-            >
-              {{ $t('AboutPage.update.update') }}
-            </ion-button>
-          </div>
-
-          <ion-button
-            @click="showChangelog"
-            fill="outline"
-            class="update-btn"
-          >
-            <ion-icon
-              :icon="open"
-              slot="start"
-            />
-            {{ $t('AboutPage.update.showChangelog') }}
-          </ion-button>
-        </div>
       </div>
     </ion-content>
   </ion-page>
@@ -54,36 +16,13 @@
 
 <script setup lang="ts">
 import {
-  IonButton,
   IonContent,
-  IonIcon,
   IonPage,
-  modalController,
-  IonTitle,
 } from '@ionic/vue';
-import {
-  open,
-} from 'ionicons/icons';
-import { ref } from '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">
@@ -92,35 +31,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: .5rem;
-  }
+  width: 40%;
 }
 </style>
diff --git a/client/src/views/about/AboutView.vue b/client/src/views/about/AboutView.vue
index 416b6641949..ea41ed33a94 100644
--- a/client/src/views/about/AboutView.vue
+++ b/client/src/views/about/AboutView.vue
@@ -8,15 +8,44 @@
       {{ $t('app.name') }}
     </ion-title>
 
+    <!-- new version available -->
+    <div
+      v-show="!upToDate"
+      id="notuptodate"
+      class="update-container body"
+    >
+      <ion-text class="update-container__text title-h5">
+        v.{{ getAppVersion() }}
+        <span class="body-sm">
+          {{ $t('AboutPage.update.notUpToDate') }}
+        </span>
+      </ion-text>
+
+      <ion-button
+        @click="update"
+        class="update-container__btn"
+      >
+        {{ $t('AboutPage.update.update') }}
+      </ion-button>
+    </div>
+
     <ion-list class="info-list">
       <!-- version -->
       <ion-item class="body info-list__item">
         <ion-label class="app-info-key">
           {{ $t('AboutPage.appInfo.version') }}
         </ion-label>
-        <ion-text class="app-info-value">
-          v{{ getAppVersion() }}
-        </ion-text>
+        <div class="text-btn">
+          <ion-text class="app-info-value">
+            v{{ getAppVersion() }}
+          </ion-text>
+          <div
+            @click="showChangelog"
+            class="update-btn"
+          >
+            {{ $t('AboutPage.update.showChangelog') }}
+          </div>
+        </div>
       </ion-item>
 
       <!-- developper -->
@@ -81,23 +110,71 @@ import {
   IonIcon,
   IonTitle,
   IonList,
+  modalController,
+  IonButton,
 } from '@ionic/vue';
 import {
   logoGithub,
+  open,
 } from 'ionicons/icons';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getAppVersion } from '@/common/mocks';
+import ChangesModal from '@/views/about/ChangesModal.vue';
+
+const upToDate = ref(false);
+
+async function update(): Promise<void> {
+  console.log('update');
+}
 
 useI18n();
+
+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">
+.about {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+}
+
 .about-title {
-  margin-bottom: 1em;
   color: var(--parsec-color-light-primary-700);
   padding: 0;
 }
 
+.update-container {
+  background: var(--parsec-color-light-gradient);
+  color: var(--parsec-color-light-secondary-grey);
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-radius: var(--parsec-radius-6);
+  justify-content: space-between;
+
+  &__text {
+    display: flex;
+    color: var(--parsec-color-light-secondary-inversed-contrast);
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  &__btn {
+    --background: var(--parsec-color-light-primary-30-opacity15) !important;
+    --background-hover: var(--parsec-color-light-primary-30) !important;
+    --color-hover: var(--parsec-color-light-primary-800) !important;
+  }
+}
+
 .info-list {
   display: flex;
   flex-direction: column;
@@ -108,9 +185,29 @@ useI18n();
   &__item {
     --padding-start: 0;
   }
+
+  .text-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .update-btn {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    color: var(--parsec-color-light-secondary-grey);
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--parsec-color-light-primary-800);
+    }
+  }
 }
 .app-info-key {
-  max-width: 8rem;
+  max-width: 10rem;
   margin: 0;
   color: var(--parsec-color-light-secondary-grey);
 }