Add info button to account view device row

4 files changed, 72 insertions, 2 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 2841e4811c..bd3bafbafc 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -25,11 +25,13 @@ import {
   AccountRows,
   AccountRowValue,
   DeviceRowValue,
+  StyledDeviceNameRow,
   StyledSpinnerContainer,
 } from './AccountStyles';
 import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
+import DeviceInfoButton from './DeviceInfoButton';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from './Layout';
@@ -185,7 +187,12 @@ function LogoutDialog() {
 
 function DeviceNameRow() {
   const deviceName = useSelector((state) => state.account.deviceName);
-  return <DeviceRowValue>{deviceName}</DeviceRowValue>;
+  return (
+    <StyledDeviceNameRow>
+      <DeviceRowValue>{deviceName}</DeviceRowValue>
+      <DeviceInfoButton />
+    </StyledDeviceNameRow>
+  );
 }
 
 function AccountNumberRow() {
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index 5cb934134a..706abb1bdf 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -50,3 +50,8 @@ export const StyledSpinnerContainer = styled.div({
   justifyContent: 'center',
   padding: '8px 0',
 });
+
+export const StyledDeviceNameRow = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+});
diff --git a/gui/src/renderer/components/DeviceInfoButton.tsx b/gui/src/renderer/components/DeviceInfoButton.tsx
new file mode 100644
index 0000000000..4f2226e329
--- /dev/null
+++ b/gui/src/renderer/components/DeviceInfoButton.tsx
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+import { messages } from '../../shared/gettext';
+import { useBoolean } from '../lib/utilityHooks';
+import * as AppButton from './AppButton';
+import { InfoIcon } from './InfoButton';
+import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
+
+const StyledInfoButton = styled.button({
+  margin: '0 0 0 12px',
+  borderWidth: 0,
+  padding: 0,
+  cursor: 'default',
+  backgroundColor: 'transparent',
+});
+
+export default function DeviceInfoButton() {
+  const [deviceHelpVisible, showDeviceHelp, hideDeviceHelp] = useBoolean();
+
+  return (
+    <>
+      <StyledInfoButton
+        onClick={showDeviceHelp}
+        aria-label={messages.pgettext('accessibility', 'More information')}>
+        <InfoIcon size={16} />
+      </StyledInfoButton>
+      <ModalAlert
+        isOpen={deviceHelpVisible}
+        type={ModalAlertType.info}
+        buttons={[
+          <AppButton.BlueButton key="back" onClick={hideDeviceHelp}>
+            {messages.gettext('Got it!')}
+          </AppButton.BlueButton>,
+        ]}
+        close={hideDeviceHelp}>
+        <ModalMessage>
+          {messages.pgettext(
+            'device-management',
+            'This is the name assigned to the device. Each device logged in on a Mullvad account gets a unique name that helps you identify it when you manage your devices in the app or on the website.',
+          )}
+        </ModalMessage>
+        <ModalMessage>
+          {messages.pgettext(
+            'device-management',
+            'You can have up to 5 devices logged in on one Mullvad account.',
+          )}
+        </ModalMessage>
+        <ModalMessage>
+          {messages.pgettext(
+            'device-management',
+            'If you log out, the device and the device name is removed. When you log back in again, the device will get a new name.',
+          )}
+        </ModalMessage>
+      </ModalAlert>
+    </>
+  );
+}
diff --git a/gui/src/renderer/components/InfoButton.tsx b/gui/src/renderer/components/InfoButton.tsx
index 52d92e18d6..302b043ef4 100644
--- a/gui/src/renderer/components/InfoButton.tsx
+++ b/gui/src/renderer/components/InfoButton.tsx
@@ -17,13 +17,14 @@ const StyledInfoButton = styled.button({
 
 interface IInfoIconProps {
   className?: string;
+  size?: number;
 }
 
 export function InfoIcon(props: IInfoIconProps) {
   return (
     <ImageView
       source="icon-info"
-      width={18}
+      width={props.size ?? 18}
       tintColor={colors.white}
       tintHoverColor={colors.white80}
       className={props.className}