Better styling of appcard footer

flipdot · Nov 14, 2024 · e5c4ddd · e5c4ddd
1 parent 82c0fa1
commit e5c4ddd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/AppCard.tsx b/src/AppCard.tsx
@@ -44,7 +44,8 @@ function AppCard({app}: { app: OIDCApplication }) {
             <p>{description}</p>
         </div>
         <div className="app-card-footer">
-            <p><a href={app.effectiveUrl} target="_blank">{app.effectiveUrl}</a></p>
+            <span>{app.rootUrl}</span>
+            {app.effectiveUrl ? <button onClick={() => window.open(app.effectiveUrl, "_blank")}>Öffnen</button> : null}
         </div>
     </div>
 }

diff --git a/src/AppCards.css b/src/AppCards.css
@@ -32,8 +32,11 @@
 }
 
 .app-card-footer {
-    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 0.4em;
+    color: #aaa;
     background: #2a2a2a;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
@@ -44,7 +47,6 @@
 }
 
 .app-card-footer p {
-    margin: 0.2em;
 }
 
 @media (prefers-color-scheme: light) {
@@ -59,5 +61,6 @@
 
     .app-card-footer {
         background: #f0f0f0;
+        color: #555;
     }
 }