imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - design tweaks (#9768)

Browse source 
* 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
This commit is contained in:
Kerry 2022-12-20 14:17:05 +13:00 • committed by GitHub
parent 2152f2ab8b
commit 0485b74acb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 76 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/settings/devices/CurrentDeviceSection.tsx
View file

@ -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>

2
src/components/views/settings/devices/DeviceDetailHeading.tsx
View file

@ -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)}

2
src/components/views/settings/devices/FilteredDeviceListHeader.tsx
View file

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

4
src/components/views/settings/devices/SecurityRecommendations.tsx
View file

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

6
src/i18n/strings/en_EN.json
View file

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