Merge branch 'add-creation-date-to-device-name-in-too-many-devices-view-des-180'

2 files changed, 39 insertions, 6 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 7d4e03e504..5b57345611 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -463,6 +463,13 @@ msgctxt "device-management"
 msgid "Continue with login"
 msgstr ""
 
+#. Label informing the user when a device was created.
+#. Available placeholders:
+#. %(createdDate)s - The creation date of the device.
+msgctxt "device-management"
+msgid "Created: %(createdDate)s"
+msgstr ""
+
 msgctxt "device-management"
 msgid "Device is inactive"
 msgstr ""
@@ -1650,9 +1657,6 @@ msgstr ""
 msgid "Copied to clipboard"
 msgstr ""
 
-msgid "Created: %s"
-msgstr ""
-
 msgid "Critical error (your attention is required)"
 msgstr ""
 
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 59b2bdcf4b..28de71b9c6 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -15,7 +15,7 @@ import { useBoolean } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { bigText, measurements } from './common-styles';
+import { bigText, measurements, normalText, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { Brand, HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
@@ -65,10 +65,25 @@ const StyledSpacer = styled.div({
   flex: '1',
 });
 
-const StyledDeviceName = styled(Cell.Label)({
+const StyledDeviceInfo = styled(Cell.Label)({
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '9px',
+  marginBottom: '9px',
+});
+
+const StyledDeviceName = styled.span(normalText, {
+  fontWeight: 'normal',
+  lineHeight: '20px',
   textTransform: 'capitalize',
 });
 
+const StyledDeviceDate = styled.span(tinyText, {
+  fontSize: '10px',
+  lineHeight: '10px',
+  color: colors.white60,
+});
+
 const StyledRemoveDeviceButton = styled.button({
   cursor: 'default',
   padding: 0,
@@ -210,11 +225,25 @@ function Device(props: IDeviceProps) {
   }, [props.onRemove, props.device.id, hideConfirmation, setDeleting, handleError]);
 
   const capitalizedDeviceName = capitalizeEveryWord(props.device.name);
+  const createdDate = props.device.created.toISOString().split('T')[0];
 
   return (
     <>
       <Cell.Container>
-        <StyledDeviceName aria-hidden>{props.device.name}</StyledDeviceName>
+        <StyledDeviceInfo>
+          <StyledDeviceName aria-hidden>{props.device.name}</StyledDeviceName>
+          <StyledDeviceDate>
+            {sprintf(
+              // TRANSLATORS: Label informing the user when a device was created.
+              // TRANSLATORS: Available placeholders:
+              // TRANSLATORS: %(createdDate)s - The creation date of the device.
+              messages.pgettext('device-management', 'Created: %(createdDate)s'),
+              {
+                createdDate,
+              },
+            )}
+          </StyledDeviceDate>
+        </StyledDeviceInfo>
         {deleting ? (
           <ImageView source="icon-spinner" width={24} />
         ) : (