Device manager - current device design and copy tweaks (#9801)

* indent device details

* udpate copy for current device security warning

* lint

* test coverage for copy

* strict

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

@@ -124,11 +124,16 @@ const CurrentDeviceSection: React.FC<Props> = ({
                             onVerifyDevice={onVerifyCurrentDevice}
                             onSignOutDevice={onSignOutCurrentDevice}
                             saveDeviceName={saveDeviceName}
+                            className="mx_CurrentDeviceSection_deviceDetails"
                         />
                     ) : (
                         <>
                             <br />
-                            <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
+                            <DeviceVerificationStatusCard
+                                device={device}
+                                onVerifyDevice={onVerifyCurrentDevice}
+                                isCurrentDevice
+                            />
                         </>
                     )}
                 </>

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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import classNames from "classnames";
 import { IPusher } from "matrix-js-sdk/src/@types/PushRules";
 import { PUSHER_ENABLED } from "matrix-js-sdk/src/@types/event";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
@@ -38,6 +39,8 @@ interface Props {
     saveDeviceName: (deviceName: string) => Promise<void>;
     setPushNotifications?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
     supportsMSC3881?: boolean | undefined;
+    className?: string;
+    isCurrentDevice?: boolean;
 }
 
 interface MetadataTable {
@@ -56,6 +59,8 @@ const DeviceDetails: React.FC<Props> = ({
     saveDeviceName,
     setPushNotifications,
     supportsMSC3881,
+    className,
+    isCurrentDevice,
 }) => {
     const metadata: MetadataTable[] = [
         {
@@ -113,10 +118,10 @@ const DeviceDetails: React.FC<Props> = ({
     }
 
     return (
-        <div className="mx_DeviceDetails" data-testid={`device-detail-${device.device_id}`}>
+        <div className={classNames("mx_DeviceDetails", className)} data-testid={`device-detail-${device.device_id}`}>
             <section className="mx_DeviceDetails_section">
                 <DeviceDetailHeading device={device} saveDeviceName={saveDeviceName} />
-                <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} />
+                <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} isCurrentDevice />
             </section>
             <section className="mx_DeviceDetails_section">
                 <p className="mx_DeviceDetails_sectionHeading">{_t("Session details")}</p>

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

@@ -22,25 +22,30 @@ import DeviceSecurityCard from "./DeviceSecurityCard";
 import { DeviceSecurityLearnMore } from "./DeviceSecurityLearnMore";
 import { DeviceSecurityVariation, ExtendedDevice } from "./types";
 
-interface Props {
+export interface DeviceVerificationStatusCardProps {
     device: ExtendedDevice;
+    isCurrentDevice?: boolean;
     onVerifyDevice?: () => void;
 }
 
 const getCardProps = (
     device: ExtendedDevice,
+    isCurrentDevice?: boolean,
 ): {
     variation: DeviceSecurityVariation;
     heading: string;
     description: React.ReactNode;
 } => {
     if (device.isVerified) {
+        const descriptionText = isCurrentDevice
+            ? _t("Your current session is ready for secure messaging.")
+            : _t("This session is ready for secure messaging.");
         return {
             variation: DeviceSecurityVariation.Verified,
             heading: _t("Verified session"),
             description: (
                 <>
-                    {_t("This session is ready for secure messaging.")}
+                    {descriptionText}
                     <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Verified} />
                 </>
             ),
@@ -59,20 +64,27 @@ const getCardProps = (
         };
     }
 
+    const descriptionText = isCurrentDevice
+        ? _t("Verify your current session for enhanced secure messaging.")
+        : _t("Verify or sign out from this session for best security and reliability.");
     return {
         variation: DeviceSecurityVariation.Unverified,
         heading: _t("Unverified session"),
         description: (
             <>
-                {_t("Verify or sign out from this session for best security and reliability.")}
+                {descriptionText}
                 <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
             </>
         ),
     };
 };
 
-export const DeviceVerificationStatusCard: React.FC<Props> = ({ device, onVerifyDevice }) => {
-    const securityCardProps = getCardProps(device);
+export const DeviceVerificationStatusCard: React.FC<DeviceVerificationStatusCardProps> = ({
+    device,
+    isCurrentDevice,
+    onVerifyDevice,
+}) => {
+    const securityCardProps = getCardProps(device, isCurrentDevice);
 
     return (
         <DeviceSecurityCard {...securityCardProps}>

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

@@ -213,6 +213,7 @@ const DeviceListItem: React.FC<{
                 saveDeviceName={saveDeviceName}
                 setPushNotifications={setPushNotifications}
                 supportsMSC3881={supportsMSC3881}
+                className="mx_FilteredDeviceList_deviceDetails"
             />
         )}
     </li>