Device manager - design tweaks (#9768)

* hover style on dropdown

* hover states

* device details spacing

* device details h3 -> h4

* missing fullstops

* update snapshots for new copy

* device details expand icon bigger

* hide current session security card when details expanded

* filter dropdown padding and hover state

* update cypress selector for device detail heading

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);
 

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;
+        background-color: transparent;
-        border-color: $quinary-content;
+        border-color: transparent;
         color: $secondary-content;
         border-radius: 4px;
 
-        &:focus {
+        &:focus,
+        &:hover {
+            background-color: $quinary-content;
             border-color: $quinary-content;
         }
     }

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;
+    padding-bottom: $spacing-20;
-    margin-bottom: $spacing-16;
+    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;
     }
 }
 

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;
+    height: 16px;
-    width: 12px;
+    width: 16px;
 
     transition: all 0.3s;
     transform: var(--icon-transform);

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;
 

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;
 }
 

src/components/views/settings/devices/CurrentDeviceSection.tsx

@@ -115,7 +115,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
                             onClick={() => setIsExpanded(!isExpanded)}
                         />
                     </DeviceTile>
-                    {isExpanded && (
+                    {isExpanded ? (
                         <DeviceDetails
                             device={device}
                             localNotificationSettings={localNotificationSettings}
@@ -125,9 +125,12 @@ const CurrentDeviceSection: React.FC<Props> = ({
                             onSignOutDevice={onSignOutCurrentDevice}
                             saveDeviceName={saveDeviceName}
                         />
+                    ) : (
+                        <>
+                            <br />
+                            <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
+                        </>
                     )}
-                    <br />
-                    <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
                 </>
             )}
         </SettingsSubsection>

src/components/views/settings/devices/DeviceDetailHeading.tsx

@@ -134,7 +134,7 @@ export const DeviceDetailHeading: React.FC<Props> = ({ device, saveDeviceName })
         <DeviceNameEditor device={device} saveDeviceName={saveDeviceName} stopEditing={() => setIsEditing(false)} />
     ) : (
         <div className="mx_DeviceDetailHeading" data-testid="device-detail-heading">
-            <Heading size="h3">{device.display_name || device.device_id}</Heading>
+            <Heading size="h4">{device.display_name || device.device_id}</Heading>
             <AccessibleButton
                 kind="link_inline"
                 onClick={() => setIsEditing(true)}

src/components/views/settings/devices/FilteredDeviceListHeader.tsx

@@ -50,7 +50,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
             </TooltipTarget>
             <span className="mx_FilteredDeviceListHeader_label">
                 {selectedDeviceCount > 0
-                    ? _t("%(selectedDeviceCount)s sessions selected", { selectedDeviceCount })
+                    ? _t("%(count)s sessions selected", { count: selectedDeviceCount })
                     : _t("Sessions")}
             </span>
             {children}

src/components/views/settings/devices/SecurityRecommendations.tsx

@@ -53,7 +53,7 @@ const SecurityRecommendations: React.FC<Props> = ({ devices, currentDeviceId, go
     return (
         <SettingsSubsection
             heading={_t("Security recommendations")}
-            description={_t("Improve your account security by following these recommendations")}
+            description={_t("Improve your account security by following these recommendations.")}
             data-testid="security-recommendations-section"
         >
             {!!unverifiedDevicesCount && (
@@ -89,7 +89,7 @@ const SecurityRecommendations: React.FC<Props> = ({ 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 },
                                 )}
                                 <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />

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?",

test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -13,11 +13,11 @@ HTMLCollection [
         class="mx_DeviceDetailHeading"
         data-testid="device-detail-heading"
       >
-        <h3
+        <h4
-          class="mx_Heading_h3"
+          class="mx_Heading_h4"
         >
           alices_device
-        </h3>
+        </h4>
         <div
           class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           data-testid="device-heading-rename-cta"

test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap

@@ -78,11 +78,11 @@ exports[`<DeviceDetailHeading /> renders device name 1`] = `
       class="mx_DeviceDetailHeading"
       data-testid="device-detail-heading"
     >
-      <h3
+      <h4
-        class="mx_Heading_h3"
+        class="mx_Heading_h4"
       >
         My device
-      </h3>
+      </h4>
       <div
         class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
         data-testid="device-heading-rename-cta"

test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap

@@ -13,11 +13,11 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
         class="mx_DeviceDetailHeading"
         data-testid="device-detail-heading"
       >
-        <h3
+        <h4
-          class="mx_Heading_h3"
+          class="mx_Heading_h4"
         >
           my-device
-        </h3>
+        </h4>
         <div
           class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           data-testid="device-heading-rename-cta"
@@ -122,11 +122,11 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
         class="mx_DeviceDetailHeading"
         data-testid="device-detail-heading"
       >
-        <h3
+        <h4
-          class="mx_Heading_h3"
+          class="mx_Heading_h4"
         >
           My Device
-        </h3>
+        </h4>
         <div
           class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           data-testid="device-heading-rename-cta"
@@ -331,11 +331,11 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
         class="mx_DeviceDetailHeading"
         data-testid="device-detail-heading"
       >
-        <h3
+        <h4
-          class="mx_Heading_h3"
+          class="mx_Heading_h4"
         >
           my-device
-        </h3>
+        </h4>
         <div
           class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           data-testid="device-heading-rename-cta"

test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations
+      Improve your account security by following these recommendations.
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -93,7 +93,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
           <p
             class="mx_DeviceSecurityCard_description"
           >
-            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.
             <div
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
@@ -139,7 +139,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations
+      Improve your account security by following these recommendations.
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -214,7 +214,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
           <p
             class="mx_DeviceSecurityCard_description"
           >
-            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.
             <div
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
@@ -260,7 +260,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations
+      Improve your account security by following these recommendations.
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -335,7 +335,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
           <p
             class="mx_DeviceSecurityCard_description"
           >
-            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.
             <div
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -420,6 +420,21 @@ describe("<SessionManagerTab />", () => {
 
             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", () => {