From f7d0dfdfb6288c05f7f66eeef53b61d706fbf01e Mon Sep 17 00:00:00 2001
From: Malin <malin@cloudhost.es>
Date: Tue, 10 Mar 2026 11:21:34 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20UI=20polish=20=E2=80=94=20AI=20enhancem?=
 =?UTF-8?q?ents=20branding,=20footer=20year,=20admin=20background=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header: add "+ AI enhancements" italic subtitle below logo
- Footer: update copyright year to 2021–current, add "AI enhancements by Cloud Host" link
- Admin page: wrap all states in pageBg Box so dark-mode background shows correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Footer.tsx |  6 +++++-
 components/Header.tsx | 21 +++++++++++++--------
 pages/admin/index.tsx |  9 +++++++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 1db5494..6eb385a 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -20,12 +20,16 @@ const Footer: FC<Props> = (props) => (
         {...props}
     >
         <Link href="https://github.com/thedaviddelta/lingva-translate/blob/main/LICENSE" isExternal={true}>
-            <Text as="span">&#169; 2021 thedaviddelta & contributors</Text>
+            <Text as="span">&#169; 2021–{new Date().getFullYear()} thedaviddelta & contributors</Text>
         </Link>
         <Text as="span" display={["none", null, "unset"]}>·</Text>
         <Link href="https://www.gnu.org/licenses/agpl-3.0.html" isExternal={true}>
             <Text as="span">Licensed under AGPLv3</Text>
         </Link>
+        <Text as="span" display={["none", null, "unset"]}>·</Text>
+        <Link href="https://cloudhost.es" isExternal={true}>
+            <Text as="span">AI enhancements by Cloud Host</Text>
+        </Link>
         {vercelSponsor && (
             <>
                 <Text as="span" display={["none", null, "unset"]}>·</Text>
diff --git a/components/Header.tsx b/components/Header.tsx
index 9b99134..d6cbcf7 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import Head from "next/head";
 import NextLink from "next/link";
-import { Flex, HStack, IconButton, Link, useColorModeValue } from "@chakra-ui/react";
+import { Flex, HStack, IconButton, Link, Text, VStack, useColorModeValue } from "@chakra-ui/react";
 import { FaGithub } from "react-icons/fa";
 import { FiSettings } from "react-icons/fi";
 import Image from "next/image";
@@ -28,13 +28,18 @@ const Header: FC<Props> = (props) => (
             {...props}
         >
             <NextLink href="/" passHref={true}>
-                <Link display="flex">
-                    <Image
-                        src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
-                        alt="Logo"
-                        width={110}
-                        height={64}
-                    />
+                <Link display="flex" alignItems="center">
+                    <VStack spacing={0} align="flex-start">
+                        <Image
+                            src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
+                            alt="Logo"
+                            width={110}
+                            height={64}
+                        />
+                        <Text fontSize="xs" fontStyle="italic" opacity={0.7} ml={1}>
+                            + AI enhancements
+                        </Text>
+                    </VStack>
                 </Link>
             </NextLink>
             <HStack spacing={3}>
diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
index 1eecc2a..7776774 100644
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -46,6 +46,7 @@ const AdminPage: NextPage = () => {
     const [testResult, setTestResult] = useState<string | null>(null);
     const [testLoading, setTestLoading] = useState(false);
 
+    const pageBg = useColorModeValue("gray.50", "gray.900");
     const cardBg = useColorModeValue("white", "gray.800");
     const borderCol = useColorModeValue("gray.200", "gray.600");
     const codeBg = useColorModeValue("gray.100", "gray.700");
@@ -140,7 +141,7 @@ const AdminPage: NextPage = () => {
 
     if (authed === null) {
         return (
-            <Box w="full" display="flex" justifyContent="center" pt={20}>
+            <Box w="full" minH="100%" bg={pageBg} display="flex" justifyContent="center" pt={20}>
                 <Spinner size="xl" color="lingva.400" />
             </Box>
         );
@@ -150,6 +151,7 @@ const AdminPage: NextPage = () => {
         return (
             <>
                 <CustomHead home={false} />
+                <Box w="full" minH="100%" bg={pageBg}>
                 <Box
                     w="full" maxW="400px" mx="auto" mt={10} p={8}
                     bg={cardBg} borderWidth={1} borderColor={borderCol}
@@ -181,6 +183,7 @@ const AdminPage: NextPage = () => {
                         </NextLink>
                     </VStack>
                 </Box>
+                </Box>
             </>
         );
     }
@@ -188,7 +191,8 @@ const AdminPage: NextPage = () => {
     return (
         <>
             <CustomHead home={false} />
-            <Box w="full" maxW="700px" mx="auto" px={4} pb={10}>
+            <Box w="full" minH="100%" bg={pageBg}>
+            <Box w="full" maxW="700px" mx="auto" px={4} pb={10} pt={2}>
                 <HStack justify="space-between" mb={6}>
                     <NextLink href="/" passHref>
                         <Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">Back</Button>
@@ -384,6 +388,7 @@ const AdminPage: NextPage = () => {
                     </Button>
                 </VStack>
             </Box>
+            </Box>
         </>
     );
 };