From 991e701ba1f1d606f58d13edd4c6c2f9b0339bc0 Mon Sep 17 00:00:00 2001 From: fabienSvstr Date: Tue, 28 Jan 2025 13:38:59 +0100 Subject: [PATCH 1/4] [MS] Updated `HomePage` layout --- .../assets/images/background/blob-shape.svg | 3 + .../images/background/shapes-circles.svg | 14 ++ client/src/locales/en-US.json | 6 +- client/src/locales/fr-FR.json | 6 +- .../views/client-area/ClientAreaLoginPage.vue | 2 +- .../devices/ImportRecoveryDevicePage.vue | 4 +- client/src/views/home/HomePage.vue | 38 +++-- client/src/views/home/HomePageHeader.vue | 150 ++++++++---------- client/src/views/home/HomePageSidebar.vue | 61 +++++++ client/src/views/home/LoginPage.vue | 17 +- .../src/views/home/OrganizationListPage.vue | 32 ++-- client/tests/e2e/specs/home_page.spec.ts | 15 +- 12 files changed, 203 insertions(+), 145 deletions(-) create mode 100644 client/src/assets/images/background/blob-shape.svg create mode 100644 client/src/assets/images/background/shapes-circles.svg create mode 100644 client/src/views/home/HomePageSidebar.vue diff --git a/client/src/assets/images/background/blob-shape.svg b/client/src/assets/images/background/blob-shape.svg new file mode 100644 index 00000000000..600fe7a2eec --- /dev/null +++ b/client/src/assets/images/background/blob-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/images/background/shapes-circles.svg b/client/src/assets/images/background/shapes-circles.svg new file mode 100644 index 00000000000..10ca329a581 --- /dev/null +++ b/client/src/assets/images/background/shapes-circles.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json index 4cf00f6fdff..003dd4dea23 100644 --- 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 control over your data confidentiality" + }, "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 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 index d2c46e3b075..fb3861460be 100644 --- 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": "Gardez le contrôle sur la confidentialité de vos données" + }, "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 index 611e70c5a63..bccb2a53b44 100644 --- 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 index 572b0d2d18d..43f5f28a72f 100644 --- a/client/src/views/devices/ImportRecoveryDevicePage.vue +++ b/client/src/views/devices/ImportRecoveryDevicePage.vue @@ -271,7 +271,7 @@ async function onLoginClick(): Promise { 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 { .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 index d31afeb2bb3..8117804e823 100644 --- a/client/src/views/home/HomePage.vue +++ b/client/src/views/home/HomePage.vue @@ -4,6 +4,8 @@
+ +
diff --git a/client/src/views/home/HomePageHeader.vue b/client/src/views/home/HomePageHeader.vue index 2025daeb369..c9280f10d9f 100644 --- a/client/src/views/home/HomePageHeader.vue +++ b/client/src/views/home/HomePageHeader.vue @@ -2,43 +2,23 @@