diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index b1621ed39..1b537468e 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2669,6 +2669,10 @@ "settings": { "message": "Settings" }, + "shorthandVersion": { + "message": "v$1", + "description": "$1 is replaced by a version string (e.g. 1.2.3)" + }, "show": { "message": "Show" }, diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.js index 95afbc810..51f594a5a 100644 --- a/ui/components/app/flask/snap-settings-card/snap-settings-card.js +++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.js @@ -180,7 +180,7 @@ const SnapSettingsCard = ({ tag="span" className="snap-settings-card__version" > - v {version} + {t('shorthandVersion', [version])} )} diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js index 33dc5f3b8..c5ddf0110 100644 --- a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js +++ b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js @@ -5,12 +5,24 @@ import Box from '../../ui/box'; import { FLEX_DIRECTION, JUSTIFY_CONTENT, + ///: BEGIN:ONLY_INCLUDE_IN(flask) + COLORS, + TYPOGRAPHY, + TEXT_ALIGN, + ///: END:ONLY_INCLUDE_IN } from '../../../helpers/constants/design-system'; ///: BEGIN:ONLY_INCLUDE_IN(flask) import SnapsAuthorshipPill from '../flask/snaps-authorship-pill'; +import Typography from '../../ui/typography'; ///: END:ONLY_INCLUDE_IN export default class PermissionsConnectHeader extends Component { + ///: BEGIN:ONLY_INCLUDE_IN(flask) + static contextTypes = { + t: PropTypes.func, + }; + ///: END:ONLY_INCLUDE_IN + static propTypes = { iconUrl: PropTypes.string, iconName: PropTypes.string.isRequired, @@ -20,6 +32,7 @@ export default class PermissionsConnectHeader extends Component { headerText: PropTypes.string, ///: BEGIN:ONLY_INCLUDE_IN(flask) npmPackageName: PropTypes.string, + snapVersion: PropTypes.string, ///: END:ONLY_INCLUDE_IN }; @@ -47,10 +60,12 @@ export default class PermissionsConnectHeader extends Component { headerText, ///: BEGIN:ONLY_INCLUDE_IN(flask) npmPackageName, + snapVersion, ///: END:ONLY_INCLUDE_IN } = this.props; ///: BEGIN:ONLY_INCLUDE_IN(flask) const npmPackageUrl = `https://www.npmjs.com/package/${npmPackageName}`; + const { t } = this.context; ///: END:ONLY_INCLUDE_IN return ( + {t('shorthandVersion', [snapVersion])} + + ) + ///: END:ONLY_INCLUDE_IN + }
{headerText}
); diff --git a/ui/pages/permissions-connect/flask/snap-install/index.scss b/ui/pages/permissions-connect/flask/snap-install/index.scss index 5d692bb06..b15fe2aa6 100644 --- a/ui/pages/permissions-connect/flask/snap-install/index.scss +++ b/ui/pages/permissions-connect/flask/snap-install/index.scss @@ -22,6 +22,10 @@ } } + .version { + font-family: monospace; + } + .page-container__footer { width: 100%; } diff --git a/ui/pages/permissions-connect/flask/snap-install/snap-install.js b/ui/pages/permissions-connect/flask/snap-install/snap-install.js index 950f8d317..497ca45af 100644 --- a/ui/pages/permissions-connect/flask/snap-install/snap-install.js +++ b/ui/pages/permissions-connect/flask/snap-install/snap-install.js @@ -75,16 +75,18 @@ export default function SnapInstall({ headerText={null} // TODO(ritave): Add header text when snaps support description siteOrigin={targetSubjectMetadata.origin} npmPackageName={npmId} + snapVersion={targetSubjectMetadata.version} boxProps={{ alignItems: ALIGN_ITEMS.CENTER }} /> - - - {t('snapRequestsPermission')} - + {t('snapRequestsPermission')} + @@ -149,5 +151,6 @@ SnapInstall.propTypes = { name: PropTypes.string, origin: PropTypes.string.isRequired, sourceCode: PropTypes.string, + version: PropTypes.string, }).isRequired, };