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

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