Add device name to new account view

4 files changed, 36 insertions, 1 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 5f6ffc1b9b..1a19caf452 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -478,6 +478,14 @@ msgctxt "device-management"
 msgid "Device name"
 msgstr ""
 
+#. A label that will display the newly created device name to inform the user
+#. about it.
+#. Available placeholders:
+#. %(deviceName)s - The name of the current device
+msgctxt "device-management"
+msgid "Device name: %(deviceName)s"
+msgstr ""
+
 msgctxt "device-management"
 msgid "Failed to remove device"
 msgstr ""
diff --git a/gui/src/renderer/components/DeviceInfoButton.tsx b/gui/src/renderer/components/DeviceInfoButton.tsx
index 4f2226e329..4839866972 100644
--- a/gui/src/renderer/components/DeviceInfoButton.tsx
+++ b/gui/src/renderer/components/DeviceInfoButton.tsx
@@ -7,7 +7,7 @@ import { InfoIcon } from './InfoButton';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 
 const StyledInfoButton = styled.button({
-  margin: '0 0 0 12px',
+  margin: '0 0 0 10px',
   borderWidth: 0,
   padding: 0,
   cursor: 'default',
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index d5af378cca..3049ba8075 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -4,6 +4,7 @@ import { sprintf } from 'sprintf-js';
 import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
+import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
@@ -11,6 +12,7 @@ import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import * as Cell from './cell';
+import DeviceInfoButton from './DeviceInfoButton';
 import {
   StyledAccountTokenContainer,
   StyledAccountTokenLabel,
@@ -18,6 +20,7 @@ import {
   StyledBody,
   StyledContainer,
   StyledCustomScrollbars,
+  StyledDeviceLabel,
   StyledHeader,
   StyledMessage,
   StyledModalCellContainer,
@@ -117,6 +120,22 @@ function WelcomeView() {
         </StyledAccountTokenContainer>
       </StyledAccountTokenMessage>
 
+      <StyledDeviceLabel>
+        <span>
+          {sprintf(
+            // TRANSLATORS: A label that will display the newly created device name to inform the user
+            // TRANSLATORS: about it.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: %(deviceName)s - The name of the current device
+            messages.pgettext('device-management', 'Device name: %(deviceName)s'),
+            {
+              deviceName: capitalizeEveryWord(account.deviceName ?? ''),
+            },
+          )}
+        </span>
+        <DeviceInfoButton />
+      </StyledDeviceLabel>
+
       <StyledMessage>
         {sprintf('%(introduction)s %(recoveryMessage)s', {
           introduction: messages.pgettext(
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 17c02cfc3c..753ecdacef 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -69,3 +69,11 @@ export const StyledAccountTokenContainer = styled.div({
   height: '50px',
   alignItems: 'center',
 });
+
+export const StyledDeviceLabel = styled.span(tinyText, {
+  display: 'flex',
+  alignItems: 'middle',
+  lineHeight: '20px',
+  marginBottom: '18px',
+  color: colors.white,
+});