diff --git a/scm-ui/ui-components/src/layout/Subtitle.tsx b/scm-ui/ui-components/src/layout/Subtitle.tsx index 38c75ba4fb..0c065a4814 100644 --- a/scm-ui/ui-components/src/layout/Subtitle.tsx +++ b/scm-ui/ui-components/src/layout/Subtitle.tsx @@ -1,14 +1,16 @@ import React from "react"; +import classNames from "classnames"; type Props = { subtitle?: string; + className?: string; }; class Subtitle extends React.Component { render() { - const { subtitle } = this.props; + const { subtitle, className } = this.props; if (subtitle) { - return

{subtitle}

; + return

{subtitle}

; } return null; } diff --git a/scm-ui/ui-components/src/layout/Title.tsx b/scm-ui/ui-components/src/layout/Title.tsx index 9532cdc639..13c09ba030 100644 --- a/scm-ui/ui-components/src/layout/Title.tsx +++ b/scm-ui/ui-components/src/layout/Title.tsx @@ -1,12 +1,14 @@ import React, { FC, useEffect } from "react"; +import classNames from "classnames"; type Props = { title?: string; customPageTitle?: string; preventRefreshingPageTitle?: boolean; + className?: string; }; -const Title: FC = ({ title, preventRefreshingPageTitle, customPageTitle }) => { +const Title: FC = ({ title, preventRefreshingPageTitle, customPageTitle, className }) => { useEffect(() => { if (!preventRefreshingPageTitle) { if (customPageTitle) { @@ -18,7 +20,7 @@ const Title: FC = ({ title, preventRefreshingPageTitle, customPageTitle } }); if (title) { - return

{title}

; + return

{title}

; } return null; }; diff --git a/scm-ui/ui-webapp/public/locales/de/admin.json b/scm-ui/ui-webapp/public/locales/de/admin.json index 364fa5a5b7..7a40dff908 100644 --- a/scm-ui/ui-webapp/public/locales/de/admin.json +++ b/scm-ui/ui-webapp/public/locales/de/admin.json @@ -7,6 +7,7 @@ "generalNavLink": "Generell" }, "info": { + "title": "Administration", "currentAppVersion": "Aktuelle Software-Versionsnummer", "communityTitle": "Community Support", "communityIconAlt": "Community Support Icon", diff --git a/scm-ui/ui-webapp/public/locales/en/admin.json b/scm-ui/ui-webapp/public/locales/en/admin.json index d1360846f7..0357a5dc34 100644 --- a/scm-ui/ui-webapp/public/locales/en/admin.json +++ b/scm-ui/ui-webapp/public/locales/en/admin.json @@ -7,6 +7,7 @@ "generalNavLink": "General" }, "info": { + "title": "Administration", "currentAppVersion": "Current Application Version", "communityTitle": "Community Support", "communityIconAlt": "Community Support Icon", diff --git a/scm-ui/ui-webapp/public/locales/es/admin.json b/scm-ui/ui-webapp/public/locales/es/admin.json index 4c78d32620..6d7ac4ccc5 100644 --- a/scm-ui/ui-webapp/public/locales/es/admin.json +++ b/scm-ui/ui-webapp/public/locales/es/admin.json @@ -7,6 +7,7 @@ "generalNavLink": "General" }, "info": { + "title": "Administración", "currentAppVersion": "Versión actual de la aplicación", "communityTitle": "Soporte de la comunidad", "communityIconAlt": "Icono del soporte de la comunidad", diff --git a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx index a93483da04..2456647ae0 100644 --- a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx +++ b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx @@ -11,6 +11,14 @@ type Props = WithTranslation & { version: string; }; +const NoBottomMarginSubtitle = styled(Subtitle)` + margin-bottom: 0.25rem !important; +`; + +const BottomMarginDiv = styled.div` + margin-bottom: 1.5rem; +`; + const BoxShadowBox = styled.div` box-shadow: 0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgba(40, 177, 232, 0.2); `; @@ -29,8 +37,9 @@ class AdminDetails extends React.Component { return ( <> - - <Subtitle subtitle={this.props.version} /> + <Title title={t("admin.info.title")} /> + <NoBottomMarginSubtitle subtitle={t("admin.info.currentAppVersion")} /> + <BottomMarginDiv>{this.props.version}</BottomMarginDiv> <BoxShadowBox className="box"> <article className="media"> <ImageWrapper className="media-left">