feat: UI polish — AI enhancements branding, footer year, admin background fix
- 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:
@@ -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">© 2021 thedaviddelta & contributors</Text>
|
<Text as="span">© 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>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
<VStack spacing={0} align="flex-start">
|
||||||
<Image
|
<Image
|
||||||
src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
|
src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
|
||||||
alt="Logo"
|
alt="Logo"
|
||||||
width={110}
|
width={110}
|
||||||
height={64}
|
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}>
|
||||||
|
|||||||
@@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user