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); diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index 98808a8b1a1..6a9fe3dc7c0 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -20,24 +20,29 @@ 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; } } .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; } } 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/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index 4c9d787fdbe..b8972d62272 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -23,17 +23,25 @@ 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 { - height: 12px; - width: 12px; + height: 16px; + width: 16px; transition: all 0.3s; transform: var(--icon-transform); 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; 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; } 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/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/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 b43e7e2891b..306e0483555 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1835,14 +1835,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?", 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 -

+
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.

", () => { 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", () => {