Improve headings structure (#1883)

The content of the SCM-Manager should be made accessible and usable in a sensibly structured way so that web content is easy to use for ever user.

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -26,7 +26,7 @@ import { Trans, useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Changeset, Link, ParentChangeset, Repository } from "@scm-manager/ui-types";
+import { Changeset, ParentChangeset, Repository } from "@scm-manager/ui-types";
 import {
   AvatarImage,
   AvatarWrapper,
@@ -43,6 +43,7 @@ import {
   Level,
   SignatureIcon,
   Tooltip,
+  SubSubtitle
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
@@ -92,7 +93,7 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
     return (
       <div className="is-flex is-flex-direction-column mb-4">
         <div className="is-flex">
-          <p className="is-ellipsis-overflow is-clickable mb-2" onClick={(e) => setOpen(!open)}>
+          <p className="is-ellipsis-overflow is-clickable mb-2" onClick={e => setOpen(!open)}>
             <Icon name="angle-down" alt={t("changeset.contributors.hideList")} /> {t("changeset.contributors.list")}
           </p>
           {signatureIcon}
@@ -104,7 +105,7 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
 
   return (
     <>
-      <div className="is-flex is-clickable" onClick={(e) => setOpen(!open)}>
+      <div className="is-flex is-clickable" onClick={e => setOpen(!open)}>
         <ContributorColumn className="is-ellipsis-overflow">
           <Icon name="angle-right" alt={t("changeset.contributors.showList")} />{" "}
           <ChangesetAuthor changeset={changeset} />
@@ -144,18 +145,18 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
   return (
     <>
       <div className={classNames("content", "m-0")}>
-        <h4>
+        <SubSubtitle>
           <ExtensionPoint
             name="changeset.description"
             props={{
               changeset,
-              value: description.title,
+              value: description.title
             }}
             renderAll={false}
           >
             <ChangesetDescription changeset={changeset} value={description.title} />
           </ExtensionPoint>
-        </h4>
+        </SubSubtitle>
         <article className="media">
           <AvatarWrapper>
             <p className={classNames("image", "is-64x64", "mr-4")}>
@@ -209,7 +210,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
                   name="changeset.description"
                   props={{
                     changeset,
-                    value: item,
+                    value: item
                   }}
                   renderAll={false}
                 >