Projekte: Vorschau-, Gitea- und Zugangsknoepfe als Textlinks

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/CopyableCredential.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react'
-import { FaCheck, FaCopy, FaEye, FaEyeSlash } from 'react-icons/fa6'
 
 export async function copyText(text) {
   try {
@@ -53,26 +52,26 @@ export default function CopyableCredential({ value, secret = false, label = 'Wer
       {secret && (
         <button
           type="button"
-          className="credential-action"
+          className="link"
           onClick={(event) => {
             event.preventDefault()
             event.stopPropagation()
             setVisible((current) => !current)
           }}
-          title={visible ? `${label} ausblenden` : `${label} anzeigen`}
+          title={visible ? `${label} verbergen` : `${label} anzeigen`}
-          aria-label={visible ? `${label} ausblenden` : `${label} anzeigen`}
+          aria-label={visible ? `${label} verbergen` : `${label} anzeigen`}
         >
-          {visible ? <FaEyeSlash /> : <FaEye />}
+          {visible ? 'Verbergen' : 'Anzeigen'}
         </button>
       )}
       <button
         type="button"
-        className="credential-action"
+        className="link"
         onClick={handleCopy}
-        title={copied ? 'Kopiert' : `${label} kopieren`}
+        title={copied ? `${label} kopiert` : `${label} kopieren`}
         aria-label={copied ? `${label} kopiert` : `${label} kopieren`}
       >
-        {copied ? <FaCheck className="credential-check" /> : <FaCopy />}
+        {copied ? 'Kopiert' : 'Kopieren'}
       </button>
     </span>
   )

src/components/GiteaLinkButton.jsx

@@ -1,30 +1,9 @@
-import { SiGitea } from 'react-icons/si'
+export default function GiteaLinkButton({ href, label = 'In Gitea öffnen' }) {
-
-export default function GiteaLinkButton({ href, title = 'In Gitea oeffnen', size = 16 }) {
   if (!href) return null
 
   return (
-    <a
+    <a className="link" href={href} target="_blank" rel="noopener noreferrer">
-      href={href}
+      {label}
-      target="_blank"
-      rel="noopener noreferrer"
-      title={title}
-      aria-label={title}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 32,
-        height: 32,
-        borderRadius: 6,
-        background: 'var(--violet-bg)',
-        border: '1px solid var(--line)',
-        color: 'var(--violet-fg)',
-        textDecoration: 'none',
-        flexShrink: 0,
-      }}
-    >
-      <SiGitea size={size} />
     </a>
   )
 }

src/components/PreviewLinkButton.jsx

@@ -1,10 +1,9 @@
-import { FaEye } from 'react-icons/fa6'
 import { createPreviewLink } from '../lib/teamApi'
 import { openInNewTab } from '../lib/openInNewTab'
 
-// Mit subdomain holt der Knopf einen Einmal-Link vom Portal (Mitarbeiter sind dort nicht mehr angemeldet);
+// Mit subdomain holt der Link einen Einmal-Link vom Portal (Mitarbeiter sind dort nicht mehr angemeldet);
 // ohne subdomain bleibt er ein einfacher Link.
-export default function PreviewLinkButton({ href, subdomain, title = 'Preview oeffnen', size = 16 }) {
+export default function PreviewLinkButton({ href, subdomain, label = 'Vorschau öffnen' }) {
   if (!href) return null
 
   const open = (event) => {
@@ -16,28 +15,8 @@ export default function PreviewLinkButton({ href, subdomain, title = 'Preview oe
   }
 
   return (
-    <a
+    <a className="link" href={href} onClick={open} target="_blank" rel="noopener noreferrer">
-      href={href}
+      {label}
-      onClick={open}
-      target="_blank"
-      rel="noopener noreferrer"
-      title={title}
-      aria-label={title}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 32,
-        height: 32,
-        borderRadius: 6,
-        background: 'var(--green-bg)',
-        border: '1px solid var(--line)',
-        color: 'var(--green-fg)',
-        textDecoration: 'none',
-        flexShrink: 0,
-      }}
-    >
-      <FaEye size={size} />
     </a>
   )
 }

src/pages/AdminPage.css

@@ -311,10 +311,13 @@
   display: flex;
   max-width: 300px;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   margin: 2px 0;
 }
 
+/* .admin-table td > span (0,1,2) setzt display: block; ohne diese Zeile klebten die Textlinks ohne Abstand am Wert */
+.admin-table td > .credential { display: flex; }
+
 .credential-value {
   min-width: 0;
   overflow: hidden;
@@ -329,22 +332,12 @@
   letter-spacing: 0.08em;
 }
 
-.credential-action {
+.credential .link {
-  display: inline-flex;
+  flex: 0 0 auto;
-  width: 25px;
+  font-size: 12px;
-  height: 25px;
+  white-space: nowrap;
-  flex: 0 0 25px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-faint);
-  cursor: pointer;
 }
 
-.credential-action:hover { background: var(--surface-2); color: var(--text); }
-.credential-check { color: var(--ok); }
 .credential-empty { color: var(--text-faint); }
 
 .admin-credential-result {