+
+
+
+
-
- {{ $msTranslate('HomePage.topbar.documentation') }}
-
- {{ $msTranslate('HomePage.topbar.contactUs') }}
- {{ $msTranslate('HomePage.topbar.settings') }}
+
+
diff --git a/client/src/views/home/LoginPage.vue b/client/src/views/home/LoginPage.vue
index 8720e815269..ed72ea12bdc 100644
--- a/client/src/views/home/LoginPage.vue
+++ b/client/src/views/home/LoginPage.vue
@@ -142,24 +142,13 @@ defineExpose({
height: auto;
width: 100%;
max-width: 25rem;
- margin: auto;
+ margin: 2rem auto;
display: flex;
+ gap: 1.5rem;
flex-direction: column;
align-items: center;
box-shadow: none;
- .login-header {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- &__title {
- padding: 0;
- margin-bottom: 2rem;
- color: var(--parsec-color-light-secondary-white);
- }
- }
-
.login-card {
background: var(--parsec-color-light-secondary-white);
border: 1px solid var(--parsec-color-light-secondary-medium);
@@ -174,7 +163,7 @@ defineExpose({
transition: box-shadow 150ms ease-in-out;
&:has(.has-focus) {
- box-shadow: var(--parsec-shadow-card);
+ box-shadow: var(--parsec-shadow-light);
}
&-header {
diff --git a/client/src/views/home/OrganizationListPage.vue b/client/src/views/home/OrganizationListPage.vue
index a8506cfefff..31334e7ba80 100644
--- a/client/src/views/home/OrganizationListPage.vue
+++ b/client/src/views/home/OrganizationListPage.vue
@@ -3,7 +3,7 @@
{{ $msTranslate('HomePage.organizationList.title') }}
@@ -376,50 +376,52 @@ const filteredDevices = computed(() => {
.organization {
background: none;
height: auto;
- width: 60vw;
- max-width: var(--parsec-max-organization-width);
- margin: auto;
+ width: 100%;
+ max-width: var(--parsec-max-content-width);
box-shadow: none;
display: flex;
- align-items: center;
+ margin: 0;
flex-direction: column;
gap: 2rem;
&-title {
- text-align: center;
padding: 0;
- display: flex;
- justify-content: center;
- color: var(--parsec-color-light-secondary-white);
+ color: var(--parsec-color-light-secondary-text);
}
}
.organization-content {
display: flex;
- padding: 2rem 2.5rem 0;
flex-direction: column;
gap: 1.5rem;
+ padding: 0;
+ width: 100%;
max-width: var(--parsec-max-content-width);
- background: var(--parsec-color-light-secondary-white);
border-radius: var(--parsec-radius-12);
- width: 100%;
.organization-filter {
display: flex;
justify-content: space-between;
align-items: center;
- margin-inline: 0.5rem;
+ width: 100%;
+ max-width: 45rem;
#organization-filter-select {
margin-left: auto;
margin-right: 1rem;
}
+
+ #create-organization-button {
+ --background: var(--parsec-color-light-secondary-text);
+ --background-hover: var(--parsec-color-light-secondary-contrast);
+ }
}
.organization-list {
margin: 0;
overflow-y: auto;
--ion-grid-columns: 6;
+ max-width: 34.5rem;
max-height: 50vh;
min-height: 45vh;
}
@@ -437,11 +439,11 @@ const filteredDevices = computed(() => {
display: flex;
align-items: center;
position: absolute;
- background: var(--parsec-color-light-secondary-white);
border-top: 1px solid var(--parsec-color-light-secondary-medium);
width: 100%;
gap: 0.5rem;
- padding: 0.5rem 3rem;
+ background: var(--parsec-color-light-secondary-inversed-contrast);
+ padding: 0.5rem 0.5rem 1.5rem;
color: var(--parsec-color-light-secondary-grey);
bottom: 0;
z-index: 100;
diff --git a/client/tests/e2e/specs/home_page.spec.ts b/client/tests/e2e/specs/home_page.spec.ts
index 7344e48d3ec..97f05f9d4aa 100644
--- a/client/tests/e2e/specs/home_page.spec.ts
+++ b/client/tests/e2e/specs/home_page.spec.ts
@@ -5,7 +5,7 @@ import { answerQuestion, expect, fillIonInput, msTest, sortBy } from '@tests/e2e
const USER_NAMES = ['Alicey McAliceFace', 'Boby McBobFace', 'Malloryy McMalloryFace'];
msTest('Home default state with devices', async ({ home }) => {
- await expect(home.locator('.organization-title')).toHaveText('Your organizations');
+ await expect(home.locator('.organization-title')).toHaveText('Access to your organizations');
await expect(home.locator('#organization-filter-select')).toHaveText('Organization name');
await expect(home.locator('#create-organization-button')).toHaveText('Create or join');
await expect(home.locator('#search-input-organization')).toBeVisible();
@@ -152,22 +152,17 @@ msTest('Logout and go back to devices list', async ({ home }) => {
const buttons = home.locator('.profile-header-popover').locator('.main-list').getByRole('listitem');
await buttons.nth(2).click();
await answerQuestion(home, true);
- await expect(home.locator('.organization-title')).toHaveText('Your organizations');
+ await expect(home.locator('.organization-title')).toHaveText('Access to your organizations');
await expect(home).toBeHomePage();
});
msTest('Check header buttons', async ({ home }) => {
- await expect(home.locator('.topbar-buttons').locator('ion-button')).toHaveText([
- 'Documentation',
- 'Contact us',
- 'Settings',
- 'Customer area',
- ]);
+ await expect(home.locator('.topbar-buttons').locator('ion-button')).toHaveCount(5);
});
msTest('Open documentation', async ({ home }) => {
const newTabPromise = home.waitForEvent('popup');
- await home.locator('.topbar-buttons').locator('ion-button').nth(0).click();
+ await home.locator('.topbar-buttons').locator('ion-button').nth(1).click();
const newTab = await newTabPromise;
await newTab.waitForLoadState();
await expect(newTab).toHaveURL(new RegExp('https://docs.parsec.cloud/(en|fr)/[a-z0-9-+.]+'));
@@ -175,7 +170,7 @@ msTest('Open documentation', async ({ home }) => {
msTest('Open feedback', async ({ home }) => {
const newTabPromise = home.waitForEvent('popup');
- await home.locator('.topbar-buttons').locator('ion-button').nth(1).click();
+ await home.locator('.topbar-buttons').locator('ion-button').nth(2).click();
const newTab = await newTabPromise;
await newTab.waitForLoadState();
await expect(newTab).toHaveURL(new RegExp('https://sign(-dev)?.parsec.cloud/contact'));