From f4520bcc2cbae8669489c9353648aea87fe9c6a1 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 14:48:21 +1300 Subject: [PATCH 01/10] hover style on dropdown --- res/css/components/views/elements/_FilterDropdown.pcss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index 98808a8b1a1..9cb6bc1376d 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -32,12 +32,13 @@ limitations under the License. .mx_Dropdown_input { height: 24px; - background-color: $quinary-content; - border-color: $quinary-content; + background-color: transparent; + border-color: transparent; color: $secondary-content; border-radius: 4px; - &:focus { + &:focus, &:hover { + background-color: $quinary-content; border-color: $quinary-content; } } From f23d896b828783a94abba2471bd8feb567f486ed Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 14:53:40 +1300 Subject: [PATCH 02/10] hover states --- .../settings/devices/_DeviceExpandDetailsButton.pcss | 8 ++++++++ .../views/settings/devices/_DeviceTypeIcon.pcss | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index 4c9d787fdbe..32c3a0a4de1 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -23,12 +23,20 @@ limitations under the License. color: $secondary-content; --icon-transform: rotate(-90deg); + + &:hover { + background: $quinary-content; + } } .mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded { --icon-transform: rotate(0deg); background: $system; + + &:hover { + background: $quinary-content; + } } .mx_DeviceExpandDetailsButton_icon { diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index a092112d8a1..5a5937b1513 100644 --- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss @@ -55,7 +55,7 @@ limitations under the License. box-sizing: border-box; padding: $spacing-4; - border: 1px solid $system; + border: 1px solid $quinary-content; border-radius: 50%; background-color: $background; From e8db65323daeb6f188dddb6152987d676045e1e6 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 14:59:43 +1300 Subject: [PATCH 03/10] device details spacing --- .../views/settings/devices/_DeviceDetails.pcss | 9 +++++---- .../views/settings/shared/_SettingsSubsection.pcss | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/res/css/components/views/settings/devices/_DeviceDetails.pcss b/res/css/components/views/settings/devices/_DeviceDetails.pcss index 754ee439982..8c4aac6cbf2 100644 --- a/res/css/components/views/settings/devices/_DeviceDetails.pcss +++ b/res/css/components/views/settings/devices/_DeviceDetails.pcss @@ -22,18 +22,18 @@ limitations under the License. width: 100%; margin-top: $spacing-16; - padding: $spacing-16; + padding: $spacing-24; border-radius: 8px; border: 1px solid $quinary-content; } .mx_DeviceDetails_section { - padding-bottom: $spacing-16; - margin-bottom: $spacing-16; + padding-bottom: $spacing-20; + margin-bottom: $spacing-20; border-bottom: 1px solid $quinary-content; display: grid; - grid-gap: $spacing-16; + grid-gap: $spacing-24; justify-content: left; grid-template-columns: 100%; @@ -52,6 +52,7 @@ limitations under the License. font-size: $font-12px; color: $secondary-content; line-height: $font-14px; + margin-top: $spacing-4; } } diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index 2ba909aac1a..a2b3cd35bfa 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -23,7 +23,7 @@ limitations under the License. width: 100%; box-sizing: inherit; line-height: $font-24px; - margin-bottom: $spacing-32; + margin-bottom: $spacing-24; color: $secondary-content; } From c1a0cc2809d06afb02ef4cc7f6fee0c116dc2226 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 15:02:26 +1300 Subject: [PATCH 04/10] device details h3 -> h4 --- .../settings/devices/DeviceDetailHeading.tsx | 2 +- .../CurrentDeviceSection-test.tsx.snap | 6 +++--- .../DeviceDetailHeading-test.tsx.snap | 6 +++--- .../__snapshots__/DeviceDetails-test.tsx.snap | 18 +++++++++--------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/views/settings/devices/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx index d23ec871b56..a59a3edcf61 100644 --- a/src/components/views/settings/devices/DeviceDetailHeading.tsx +++ b/src/components/views/settings/devices/DeviceDetailHeading.tsx @@ -134,7 +134,7 @@ export const DeviceDetailHeading: React.FC = ({ device, saveDeviceName }) setIsEditing(false)} /> ) : (
- {device.display_name || device.device_id} + {device.display_name || device.device_id} setIsEditing(true)} diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index accfd108065..739f559ad40 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -13,11 +13,11 @@ HTMLCollection [ class="mx_DeviceDetailHeading" data-testid="device-detail-heading" > -

alices_device -

+
renders device name 1`] = ` class="mx_DeviceDetailHeading" data-testid="device-detail-heading" > -

My device -

+
renders a verified device 1`] = ` class="mx_DeviceDetailHeading" data-testid="device-detail-heading" > -

my-device -

+
renders device with metadata 1`] = ` class="mx_DeviceDetailHeading" data-testid="device-detail-heading" > -

My Device -

+
renders device without metadata 1`] = ` class="mx_DeviceDetailHeading" data-testid="device-detail-heading" > -

my-device -

+
Date: Thu, 15 Dec 2022 15:05:10 +1300 Subject: [PATCH 05/10] missing fullstops --- .../views/settings/devices/FilteredDeviceListHeader.tsx | 2 +- .../views/settings/devices/SecurityRecommendations.tsx | 4 ++-- src/i18n/strings/en_EN.json | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx index 2f7d420bb42..ffbe8a2b6c0 100644 --- a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx +++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx @@ -50,7 +50,7 @@ const FilteredDeviceListHeader: React.FC = ({ {selectedDeviceCount > 0 - ? _t("%(selectedDeviceCount)s sessions selected", { selectedDeviceCount }) + ? _t("%(count)s sessions selected", { count: selectedDeviceCount }) : _t("Sessions")} {children} diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx index a5e3a545d8f..2805f0e7cb1 100644 --- a/src/components/views/settings/devices/SecurityRecommendations.tsx +++ b/src/components/views/settings/devices/SecurityRecommendations.tsx @@ -53,7 +53,7 @@ const SecurityRecommendations: React.FC = ({ devices, currentDeviceId, go return ( {!!unverifiedDevicesCount && ( @@ -89,7 +89,7 @@ const SecurityRecommendations: React.FC = ({ devices, currentDeviceId, go <> {_t( `Consider signing out from old sessions ` + - `(%(inactiveAgeDays)s days or older) you don't use anymore`, + `(%(inactiveAgeDays)s days or older) you don't use anymore.`, { inactiveAgeDays }, )} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e82e8f18fe6..a6a8f68234e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1831,14 +1831,14 @@ "Inactive for %(inactiveAgeDays)s days or longer": "Inactive for %(inactiveAgeDays)s days or longer", "Filter devices": "Filter devices", "Show": "Show", - "%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessions selected", + "%(count)s sessions selected|other": "%(count)s sessions selected", + "%(count)s sessions selected|one": "%(count)s session selected", "Sign in with QR code": "Sign in with QR code", "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.", "Show QR code": "Show QR code", "Security recommendations": "Security recommendations", - "Improve your account security by following these recommendations": "Improve your account security by following these recommendations", + "Improve your account security by following these recommendations.": "Improve your account security by following these recommendations.", "View all": "View all", - "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "Failed to set pusher state": "Failed to set pusher state", "Unable to remove contact information": "Unable to remove contact information", "Remove %(email)s?": "Remove %(email)s?", From e2febbdfc9a35c0078070629195947071afa6c7c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 16:34:54 +1300 Subject: [PATCH 06/10] update snapshots for new copy --- .../SecurityRecommendations-test.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index f1c0f12cf56..011d926b1dd 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -18,7 +18,7 @@ exports[` renders both cards when user has both unver
- Improve your account security by following these recommendations + Improve your account security by following these recommendations.
renders both cards when user has both unver

- Consider signing out from old sessions (90 days or older) you don't use anymore + Consider signing out from old sessions (90 days or older) you don't use anymore.

renders inactive devices section when user
- Improve your account security by following these recommendations + Improve your account security by following these recommendations.
renders inactive devices section when user

- Consider signing out from old sessions (90 days or older) you don't use anymore + Consider signing out from old sessions (90 days or older) you don't use anymore.

renders unverified devices section when use
- Improve your account security by following these recommendations + Improve your account security by following these recommendations.
renders unverified devices section when use

- Consider signing out from old sessions (90 days or older) you don't use anymore + Consider signing out from old sessions (90 days or older) you don't use anymore.

Date: Thu, 15 Dec 2022 16:38:33 +1300 Subject: [PATCH 07/10] device details expand icon bigger --- .../views/settings/devices/_DeviceExpandDetailsButton.pcss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index 32c3a0a4de1..b8972d62272 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -40,8 +40,8 @@ limitations under the License. } .mx_DeviceExpandDetailsButton_icon { - height: 12px; - width: 12px; + height: 16px; + width: 16px; transition: all 0.3s; transform: var(--icon-transform); From 6f8d4f050805869dbdb5fab8ac9d0754ba9f1f31 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 17:12:26 +1300 Subject: [PATCH 08/10] hide current session security card when details expanded --- .../views/elements/_FilterDropdown.pcss | 3 ++- .../settings/devices/CurrentDeviceSection.tsx | 9 ++++++--- .../settings/tabs/user/SessionManagerTab-test.tsx | 15 +++++++++++++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index 9cb6bc1376d..08e3a1b575c 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -37,7 +37,8 @@ limitations under the License. color: $secondary-content; border-radius: 4px; - &:focus, &:hover { + &:focus, + &:hover { background-color: $quinary-content; border-color: $quinary-content; } diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx index 461a92f2aca..9044f882ec8 100644 --- a/src/components/views/settings/devices/CurrentDeviceSection.tsx +++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx @@ -115,7 +115,7 @@ const CurrentDeviceSection: React.FC = ({ onClick={() => setIsExpanded(!isExpanded)} /> - {isExpanded && ( + {isExpanded ? ( = ({ onSignOutDevice={onSignOutCurrentDevice} saveDeviceName={saveDeviceName} /> + ) : ( + <> +
+ + )} -
- )} diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 56e0657b6e4..a719bd8fb3d 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -420,6 +420,21 @@ describe("", () => { expect(getByTestId("current-session-section")).toMatchSnapshot(); }); + + it("expands current session details", async () => { + mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] }); + const { getByTestId } = render(getComponent()); + + await act(async () => { + await flushPromises(); + }); + + fireEvent.click(getByTestId("current-session-toggle-details")); + + expect(getByTestId(`device-detail-${alicesDevice.device_id}`)).toBeTruthy(); + // only one security card rendered + expect(getByTestId("current-session-section").querySelectorAll(".mx_DeviceSecurityCard").length).toEqual(1); + }); }); describe("device detail expansion", () => { From b1c9f21a61ce8eb325f89a9da81d0aa5426f2956 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 15 Dec 2022 17:25:11 +1300 Subject: [PATCH 09/10] filter dropdown padding and hover state --- res/css/components/views/elements/_FilterDropdown.pcss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index 08e3a1b575c..6a9fe3dc7c0 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -20,13 +20,16 @@ limitations under the License. left: unset; right: -$spacing-12; width: 232px; + padding: $spacing-12; border: 1px solid $quinary-content; border-radius: 8px; box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); + background-color: $system; + .mx_Dropdown_option_highlight { - background-color: $system; + background-color: transparent; } } From 1d60d125b4d8c6b812ce71f5ab7f2374819e10f5 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Fri, 16 Dec 2022 10:26:57 +1300 Subject: [PATCH 10/10] update cypress selector for device detail heading --- cypress/e2e/settings/device-management.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts index ca3385fcb25..32e99faf77f 100644 --- a/cypress/e2e/settings/device-management.spec.ts +++ b/cypress/e2e/settings/device-management.spec.ts @@ -104,7 +104,7 @@ describe("Device manager", () => { cy.get(".mx_Spinner").should("not.exist"); // session name updated in details - cy.get(".mx_DeviceDetailHeading h3").should("have.text", sessionName); + cy.get(".mx_DeviceDetailHeading h4").should("have.text", sessionName); // and main list item cy.get(".mx_DeviceTile h4").should("have.text", sessionName);