From 79d1251357c670f5411ea2262002a8441ed88a64 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 14 Aug 2025 01:52:48 +0100
Subject: [PATCH] Enhanced Template component with client information display
 and improved FooterCard styling for better responsiveness and visual clarity.

---
 src/login/Template.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index 41d6c7d..a398953 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -99,6 +99,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const clientInfo = (
         <Flex gap={"small"} align="center">
+            <div>
+                <Text>App:</Text>
+            </div>
             {client.attributes.logoUri ? (
                 <img
                     src={client.attributes.logoUri}
@@ -152,6 +155,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             <Layout style={{ minHeight: "var(--unit-100vh)", maxHeight: "var(--unit-100vh)" }}>
                 <ParticlesBackground darkMode={darkMode} />
 
+                {!isMobile && (
+                    <Flex gap={"middle"} style={{ width: "100%", position: "absolute", top: "50px" }} justify="center">
+                        {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
+                    </Flex>
+                )}
+
                 {loading == true ? (
                     <div className="loadingOverlay" style={{ backgroundColor: darkMode ? "#000000" : "#ffffff" }}>
                         <Spin />
@@ -286,7 +295,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                             </Card>
                             {!isMobile && (
                                 <Flex gap={"middle"} style={{ width: "100%" }} justify="center">
-                                    {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
                                     {auth !== undefined && auth.showTryAnotherWayLink && (
                                         <FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
                                     )}
@@ -320,16 +328,25 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     );
 }
 
-function FooterCard({ children, darkMode = false }: { children?: ReactNode; darkMode?: boolean }) {
+function FooterCard({ children, darkMode = false, transparent = false }: { children?: ReactNode; darkMode?: boolean; transparent?: boolean }) {
     const isMobile = useMediaQuery({ maxWidth: 600 });
+    const transparentBackground = darkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)";
+    const normalBackground = darkMode ? "#00000025" : "#fffffff2";
     return (
         <Card
             style={{
-                background: isMobile ? "unset" : darkMode ? "#00000025" : "#fffffff2",
+                background: isMobile ? "unset" : transparent ? transparentBackground : normalBackground,
                 borderRadius: "20px",
                 zIndex: 1,
+                color: transparent ? "#ffffff" : "inherit",
                 padding: isMobile ? "4px 0px" : "8px 18px",
-                boxShadow: isMobile ? "unset" : darkMode ? "0px 5px 20px 5px rgb(255 255 255 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
+                boxShadow: isMobile
+                    ? "unset"
+                    : darkMode
+                      ? "0px 5px 20px 5px rgb(255 255 255 / 5%)"
+                      : !transparent
+                        ? "0px 5px 15px 5px rgb(0 0 0 / 10%)"
+                        : "unset"
             }}
             variant="borderless"
             styles={{