CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI polish — AI enhancements branding, footer year, admin background fix

Browse Source 
- 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>
This commit is contained in:
Malin
2026-03-10 11:21:34 +01:00
parent 171b40f525
commit f7d0dfdfb6
3 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Footer.tsx
View File

@@ -20,12 +20,16 @@ const Footer: FC<Props> = (props) => (
{...props} {...props}
> >
<Link href="https://github.com/thedaviddelta/lingva-translate/blob/main/LICENSE" isExternal={true}> <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> </Link>
<Text as="span" display={["none", null, "unset"]}>·</Text> <Text as="span" display={["none", null, "unset"]}>·</Text>
<Link href="https://www.gnu.org/licenses/agpl-3.0.html" isExternal={true}> <Link href="https://www.gnu.org/licenses/agpl-3.0.html" isExternal={true}>
<Text as="span">Licensed under AGPLv3</Text> <Text as="span">Licensed under AGPLv3</Text>
</Link> </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 && ( {vercelSponsor && (
<> <>
<Text as="span" display={["none", null, "unset"]}>·</Text> <Text as="span" display={["none", null, "unset"]}>·</Text>

21
components/Header.tsx
View File

@@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
import Head from "next/head"; import Head from "next/head";
import NextLink from "next/link"; 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 { FaGithub } from "react-icons/fa";
import { FiSettings } from "react-icons/fi"; import { FiSettings } from "react-icons/fi";
import Image from "next/image"; import Image from "next/image";
@@ -28,13 +28,18 @@ const Header: FC<Props> = (props) => (
{...props} {...props}
> >
<NextLink href="/" passHref={true}> <NextLink href="/" passHref={true}>
<Link display="flex"> <Link display="flex" alignItems="center">
<Image <VStack spacing={0} align="flex-start">
src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")} <Image
alt="Logo" src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
width={110} alt="Logo"
height={64} width={110}
/> height={64}
/>
<Text fontSize="xs" fontStyle="italic" opacity={0.7} ml={1}>
+ AI enhancements
</Text>
</VStack>
</Link> </Link>
</NextLink> </NextLink>
<HStack spacing={3}> <HStack spacing={3}>

9
pages/admin/index.tsx
View File

@@ -46,6 +46,7 @@ const AdminPage: NextPage = () => {
const [testResult, setTestResult] = useState<string | null>(null); const [testResult, setTestResult] = useState<string | null>(null);
const [testLoading, setTestLoading] = useState(false); const [testLoading, setTestLoading] = useState(false);
const pageBg = useColorModeValue("gray.50", "gray.900");
const cardBg = useColorModeValue("white", "gray.800"); const cardBg = useColorModeValue("white", "gray.800");
const borderCol = useColorModeValue("gray.200", "gray.600"); const borderCol = useColorModeValue("gray.200", "gray.600");
const codeBg = useColorModeValue("gray.100", "gray.700"); const codeBg = useColorModeValue("gray.100", "gray.700");
@@ -140,7 +141,7 @@ const AdminPage: NextPage = () => {
if (authed === null) { if (authed === null) {
return ( 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" /> <Spinner size="xl" color="lingva.400" />
</Box> </Box>
); );
@@ -150,6 +151,7 @@ const AdminPage: NextPage = () => {
return ( return (
<> <>
<CustomHead home={false} /> <CustomHead home={false} />
<Box w="full" minH="100%" bg={pageBg}>
<Box <Box
w="full" maxW="400px" mx="auto" mt={10} p={8} w="full" maxW="400px" mx="auto" mt={10} p={8}
bg={cardBg} borderWidth={1} borderColor={borderCol} bg={cardBg} borderWidth={1} borderColor={borderCol}
@@ -181,6 +183,7 @@ const AdminPage: NextPage = () => {
</NextLink> </NextLink>
</VStack> </VStack>
</Box> </Box>
</Box>
</> </>
); );
} }
@@ -188,7 +191,8 @@ const AdminPage: NextPage = () => {
return ( return (
<> <>
<CustomHead home={false} /> <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}> <HStack justify="space-between" mb={6}>
<NextLink href="/" passHref> <NextLink href="/" passHref>
<Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">Back</Button> <Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">Back</Button>
@@ -384,6 +388,7 @@ const AdminPage: NextPage = () => {
</Button> </Button>
</VStack> </VStack>
</Box> </Box>
</Box>
</> </>
); );
}; };