Add styling of group memberlist

scm-ui/ui-webapp/src/groups/components/table/Details.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
+import styled from "styled-components";
 import { Group } from "@scm-manager/ui-types";
 import { DateFromNow, Checkbox } from "@scm-manager/ui-components";
 import GroupMember from "./GroupMember";
@@ -8,6 +9,10 @@ type Props = WithTranslation & {
   group: Group;
 };
 
+const StyledMemberList = styled.ul`
+  margin-left: 1em !important;
+`;
+
 class Details extends React.Component<Props> {
   render() {
     const { group, t } = this.props;
@@ -59,11 +64,11 @@ class Details extends React.Component<Props> {
         <tr>
           <th>{t("group.members")}</th>
           <td className="is-paddingless">
-            <ul>
+            <StyledMemberList>
               {group._embedded.members.map((member, index) => {
                 return <GroupMember key={index} member={member} />;
               })}
-            </ul>
+            </StyledMemberList>
           </td>
         </tr>
       );

scm-ui/ui-webapp/src/groups/components/table/GroupMember.tsx

@@ -1,14 +1,24 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import styled from "styled-components";
 import { Member } from "@scm-manager/ui-types";
+import {Icon} from "@scm-manager/ui-components";
 
 type Props = {
   member: Member;
 };
 
+const StyledMember = styled.li`
+  display: inline-block;
+  margin-right: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid #eee;
+  border-radius: 4px;
+`;
+
 export default class GroupMember extends React.Component<Props> {
   renderLink(to: string, label: string) {
-    return <Link to={to}>{label}</Link>;
+    return <Link to={to}><Icon name="user" color="inherit" /> {label}</Link>;
   }
 
   showName(to: any, member: Member) {
@@ -22,6 +32,6 @@ export default class GroupMember extends React.Component<Props> {
   render() {
     const { member } = this.props;
     const to = `/user/${member.name}`;
-    return <li>{this.showName(to, member)}</li>;
+    return <StyledMember>{this.showName(to, member)}</StyledMember>;
   }
 }