create separate component for ContributorAvatar

scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx

@@ -26,9 +26,9 @@ import { Changeset } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { useBinder } from "@scm-manager/ui-extensions";
 import { EXTENSION_POINT, Person } from "../../avatar/Avatar";
-import Image from "../../Image";
 import styled from "styled-components";
 import CommaSeparatedList from "../../CommaSeparatedList";
+import ContributorAvatar from "./ContributorAvatar";
 
 type Props = {
   changeset: Changeset;
@@ -53,14 +53,6 @@ const AvatarList = styled.span`
   }
 `;
 
-const AvatarImage = styled(Image)`
-  width: 1em;
-  height: 1em;
-  vertical-align: middle !important;
-  margin-bottom: 0.2em;
-  border-radius: 0.25em;
-`;
-
 type PersonAvatarProps = {
   person: Person;
   avatar: string;
@@ -68,7 +60,7 @@ type PersonAvatarProps = {
 
 const PersonAvatar: FC<PersonAvatarProps> = ({ person, avatar }) => {
   const [t] = useTranslation("repos");
-  const img = <AvatarImage src={avatar} alt={person.name} title={person.name} />;
+  const img = <ContributorAvatar src={avatar} alt={person.name} title={person.name} />;
   if (person.mail) {
     return (
       <a href={"mailto:" + person.mail} title={t("changeset.author.mailto") + " " + person.mail}>
@@ -138,7 +130,6 @@ const Persons: FC<PersonsProps> = ({ persons, label, displayTextOnly }) => {
 };
 
 const ChangesetAuthor: FC<Props> = ({ changeset }) => {
-  const [t] = useTranslation("repos");
   const binder = useBinder();
 
   const getCoAuthors = () => {

scm-ui/ui-components/src/repos/changesets/ContributorAvatar.tsx

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import styled from "styled-components";
+import Image from "../../Image";
+
+const ContributorAvatar = styled(Image)`
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  border-radius: 0.25em;
+  margin-bottom: 0.2em;
+`;
+
+export default ContributorAvatar;

scm-ui/ui-components/src/repos/changesets/index.ts

@@ -34,3 +34,4 @@ export { default as ChangesetRow } from "./ChangesetRow";
 export { default as ChangesetTag } from "./ChangesetTag";
 export { default as ChangesetTags } from "./ChangesetTags";
 export { default as ChangesetTagsCollapsed } from "./ChangesetTagsCollapsed";
+export { default as ContributorAvatar } from "./ContributorAvatar";

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

@@ -26,7 +26,7 @@ import { Changeset } from "@scm-manager/ui-types";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { useBinder } from "@scm-manager/ui-extensions";
-import { Image, CommaSeparatedList } from "@scm-manager/ui-components";
+import { ContributorAvatar, CommaSeparatedList } from "@scm-manager/ui-components";
 
 type Props = {
   changeset: Changeset;
@@ -42,15 +42,6 @@ type Person = {
   mail?: string;
 };
 
-const ContributorAvatar = styled(Image)`
-  width: 1em;
-  height: 1em;
-  margin-right: 0.25em;
-  vertical-align: middle;
-  border-radius: 0.25em;
-  margin-bottom: 0.2em;
-`;
-
 const Contributor: FC<{ person: Person }> = ({ person }) => {
   const [t] = useTranslation("repos");
   const binder = useBinder();
@@ -59,7 +50,11 @@ const Contributor: FC<{ person: Person }> = ({ person }) => {
   if (avatarFactory) {
     const avatar = avatarFactory(person);
     if (avatar) {
-      prefix = <ContributorAvatar src={avatar} alt={person.name} />;
+      prefix = (
+        <>
+          <ContributorAvatar src={avatar} alt={person.name} />{" "}
+        </>
+      );
     }
   }
   if (person.mail) {