From 2c507a721259561362f8e679568e85a389ee08dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Fri, 2 Oct 2020 08:55:40 +0200
Subject: [PATCH] Use icon instead of text for delete button

---
 .../src/users/components/apiKeys/ApiKeyEntry.tsx    | 13 +++++++------
 .../src/users/components/apiKeys/ApiKeyTable.tsx    |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
index ca2bd7d949..64449e9ab0 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
+++ b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
@@ -23,9 +23,8 @@
  */
 
 import React, { FC } from "react";
-import { DateFromNow, DeleteButton } from "@scm-manager/ui-components";
+import { DateFromNow } from "@scm-manager/ui-components";
 import { ApiKey } from "./SetApiKeys";
-import { useTranslation } from "react-i18next";
 import { Link } from "@scm-manager/ui-types";
 
 type Props = {
@@ -34,12 +33,14 @@ type Props = {
 };
 
 export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
-  const [t] = useTranslation("users");
-
   let deleteButton;
   if (apiKey?._links?.delete) {
     deleteButton = (
-      <DeleteButton label={t("apiKey.delete")} action={() => onDelete((apiKey._links.delete as Link).href)} />
+      <a className="level-item" onClick={() => onDelete((apiKey._links.delete as Link).href)}>
+        <span className="icon is-small">
+          <i className="fas fa-trash" />
+        </span>
+      </a>
     );
   }
 
@@ -51,7 +52,7 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
         <td className="is-hidden-mobile">
           <DateFromNow date={apiKey.created}/>
         </td>
-        <td>{deleteButton}</td>
+        <td className="is-darker">{deleteButton}</td>
       </tr>
     </>
   );
diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyTable.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyTable.tsx
index 51e8b7033c..da98781efd 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyTable.tsx
+++ b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyTable.tsx
@@ -45,7 +45,7 @@ const ApiKeyTable: FC<Props> = ({ apiKeys, onDelete }) => {
       <thead>
         <tr>
           <th>{t("apiKey.displayName")}</th>
-          <th>{t("apiKey.permissionRole")}</th>
+          <th>{t("apiKey.permissionRole.label")}</th>
           <th>{t("apiKey.created")}</th>
           <th />
         </tr>