[MS] Updated layout

[MS] Updated expired Add licence Missing in HomePage Homapage
Scille · Jan 29, 2025 · 8e33a60 · 8e33a60
1 parent 7b31b5e
commit 8e33a60
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 140 deletions.
diff --git a/client/src/assets/images/background/blob-shape.svg b/client/src/assets/images/background/blob-shape.svg
diff --git a/client/src/assets/images/background/shapes-circles.svg b/client/src/assets/images/background/shapes-circles.svg
diff --git a/client/src/components/organizations/OrganizationCard.vue b/client/src/components/organizations/OrganizationCard.vue
@@ -203,15 +203,12 @@ function getLastLoginText(): string {
 
 .organization-card-expiration {
   border-radius: var(--parsec-radius-12);
-  padding: 0.25rem 0.5rem;
-  position: absolute;
-  bottom: 0;
-  right: 0;
+  padding: 0.1875rem 0.375rem;
   background: var(--parsec-color-light-primary-700);
   color: var(--parsec-color-light-secondary-white);
 
   &.expired {
-    background: var(--parsec-color-light-secondary-grey);
+    background: var(--parsec-color-light-secondary-text);
     color: var(--parsec-color-light-secondary-white);
   }
 }

diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -99,7 +99,11 @@
         "expiredOrganization": "This organization has expired."
     },
     "HomePage": {
+        "sidebar": {
+            "tagline": "Keep your data safe with your control"
+        },
         "topbar": {
+            "welcome": "Glad to see you back,",
             "backToList": "Return to organizations",
             "backToLogin": "Return to login",
             "settings": "Settings",
@@ -126,7 +130,7 @@
             "newVersionAvailable": "New update available"
         },
         "organizationList": {
-            "title": "Your organizations",
+            "title": "Access to your organizations",
             "sortOrderAsc": "Ascending",
             "sortOrderDesc": "Descending",
             "sortByOrganization": "Organization name",

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -99,7 +99,11 @@
         "expiredOrganization": "Cette organisation a expiré."
     },
     "HomePage": {
+        "sidebar": {
+            "tagline": "Garder le contrôle sur vos données en toute sécurité"
+        },
         "topbar": {
+            "welcome": "Ravi de vous revoir,",
             "backToList": "Retour aux organisations",
             "backToLogin": "Retour à la connexion",
             "settings": "Paramètres",
@@ -126,7 +130,7 @@
             "newVersionAvailable": "Nouvelle version disponible"
         },
         "organizationList": {
-            "title": "Vos organisations",
+            "title": "Accéder à vos organisations",
             "sortOrderAsc": "Croissant",
             "sortOrderDesc": "Décroissant",
             "sortByOrganization": "Nom de l'organisation",

diff --git a/client/src/views/client-area/ClientAreaLoginPage.vue b/client/src/views/client-area/ClientAreaLoginPage.vue
@@ -66,7 +66,7 @@ function getCurrentSectionClass(): string {
   display: flex;
   max-width: 48rem;
   max-height: 32rem;
-  margin: auto;
+  margin: 2rem auto;
 }
 
 .saas-login-container {

diff --git a/client/src/views/devices/ImportRecoveryDevicePage.vue b/client/src/views/devices/ImportRecoveryDevicePage.vue
@@ -271,7 +271,7 @@ async function onLoginClick(): Promise<void> {
   width: 60vw;
   max-width: var(--parsec-max-forgotten-pwd-width);
   display: flex;
-  margin: auto;
+  margin: 2rem auto;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
@@ -280,7 +280,7 @@ async function onLoginClick(): Promise<void> {
 
 .recovery-header {
   &__title {
-    color: var(--parsec-color-light-secondary-white);
+    color: var(--parsec-color-light-secondary-text);
   }
 }
 

diff --git a/client/src/views/home/HomePage.vue b/client/src/views/home/HomePage.vue
@@ -4,6 +4,8 @@
   <ion-page>
     <ion-content :fullscreen="true">
       <div id="page">
+        <!-- sidebar -->
+        <home-page-sidebar />
         <!-- organization list -->
         <!-- organization -->
         <div
@@ -95,6 +97,7 @@ import ImportRecoveryDevicePage from '@/views/devices/ImportRecoveryDevicePage.v
 import CreateOrganizationModal from '@/views/organizations/creation/CreateOrganizationModal.vue';
 import DeviceJoinOrganizationModal from '@/views/home/DeviceJoinOrganizationModal.vue';
 import HomePageHeader from '@/views/home/HomePageHeader.vue';
+import HomePageSidebar from '@/views/home/HomePageSidebar.vue';
 import LoginPage from '@/views/home/LoginPage.vue';
 import OrganizationListPage from '@/views/home/OrganizationListPage.vue';
 import UserJoinOrganizationModal from '@/views/home/UserJoinOrganizationModal.vue';
@@ -547,29 +550,36 @@ function getBackButtonTitle(): string {
   height: 100vh;
   display: flex;
   overflow: hidden;
-  padding: 0 2rem;
   align-items: self-start;
+  background: var(--parsec-color-light-secondary-inversed-contrast);
   z-index: -10;
-  background: var(--parsec-color-light-gradient);
-
-  &::before {
-    content: '';
-    position: absolute;
-    z-index: -2;
-    top: 0;
-    right: 0;
-    width: 100vw;
-    height: 100vh;
-    background: url('@/assets/images/background/homepage-rectangle.svg') repeat center;
-    background-size: cover;
-  }
 
   .content {
     width: 100%;
     height: 100%;
     display: flex;
+    gap: 2rem;
     flex-direction: column;
     position: relative;
+    max-width: var(--parsec-max-content-width);
+    padding: 6.26rem 5rem 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      max-width: 317px;
+      max-height: 326px;
+      bottom: 0;
+      right: 0;
+      background-image: url('@/assets/images/background/blob-shape.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: top center;
+      opacity: 0.5;
+      filter: blur(250px);
+    }
   }
 }
 </style>