Add className option for Title component, add administration title

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<Props> {
   render() {
-    const { subtitle } = this.props;
+    const { subtitle, className } = this.props;
     if (subtitle) {
-      return <h2 className="subtitle">{subtitle}</h2>;
+      return <h2 className={classNames("subtitle", className)}>{subtitle}</h2>;
     }
     return null;
   }

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<Props> = ({ title, preventRefreshingPageTitle, customPageTitle }) => {
+const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle, className }) => {
   useEffect(() => {
     if (!preventRefreshingPageTitle) {
       if (customPageTitle) {
@@ -18,7 +20,7 @@ const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle }
   });
 
   if (title) {
-    return <h1 className="title">{title}</h1>;
+    return <h1 className={classNames("title", className)}>{title}</h1>;
   }
   return null;
 };

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",

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",

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",

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<Props> {
 
     return (
       <>
-        <Title title={t("admin.info.currentAppVersion")} />
-        <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">