Tweaked layout.

This commit is contained in:
2025-12-04 12:39:12 -05:00
parent d4040322a5
commit fc04f7ba7a
5 changed files with 22 additions and 18 deletions

View File

@@ -11,11 +11,8 @@ const CommandResponsesChart = ({
lineChartData lineChartData
}: CommandResponsesChartProps): JSX.Element => { }: CommandResponsesChartProps): JSX.Element => {
return ( return (
<VStack gap={4} w="100%"> <VStack gap={6} w="100%">
<Heading <Heading as="h4" fontSize="2xl">{`Commands Responded To`}</Heading>
as="h4"
fontSize="2xl"
>{`Commands Responded To (Past 30 Days)`}</Heading>
<LineChartComponent data={lineChartData} label="Command Responses" /> <LineChartComponent data={lineChartData} label="Command Responses" />
</VStack> </VStack>
); );

View File

@@ -11,8 +11,8 @@ const LinksDeletedChart = ({
lineChartData lineChartData
}: LinksDeletedChartProps): JSX.Element => { }: LinksDeletedChartProps): JSX.Element => {
return ( return (
<VStack gap={4} w="100%"> <VStack gap={6} w="100%">
<Heading as="h4" fontSize="2xl">{`Links Deleted (Past 30 Days)`}</Heading> <Heading as="h4" fontSize="2xl">{`Links Deleted`}</Heading>
<LineChartComponent data={lineChartData} label="Links Deleted" /> <LineChartComponent data={lineChartData} label="Links Deleted" />
</VStack> </VStack>
); );

View File

@@ -1,5 +1,5 @@
import { JSX } from "react"; import { JSX } from "react";
import { Heading, Flex, VStack } from "@chakra-ui/react"; import { Heading, Flex, Text, VStack } from "@chakra-ui/react";
import { CombinedError } from "urql"; import { CombinedError } from "urql";
import SingleStatComponent from "@/components/stats/SingleStat"; import SingleStatComponent from "@/components/stats/SingleStat";
@@ -24,9 +24,14 @@ const StatsList = ({
}: StatsListProps): JSX.Element => { }: StatsListProps): JSX.Element => {
return ( return (
<VStack gap={6} w="100%"> <VStack gap={6} w="100%">
<Heading as="h3" fontSize="3xl"> <VStack gap={1}>
{title} <Heading as="h3" fontSize="3xl">
</Heading> {title}
</Heading>
<Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
{groups ? "Updates every 24 hours" : "At time of page load"}
</Text>
</VStack>
<Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}> <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
{groups ? ( {groups ? (
<SingleStatComponent <SingleStatComponent

View File

@@ -11,11 +11,8 @@ const TimedTriggeredChart = ({
lineChartData lineChartData
}: TimedTriggeredChartProps): JSX.Element => { }: TimedTriggeredChartProps): JSX.Element => {
return ( return (
<VStack gap={4} w="100%"> <VStack gap={6} w="100%">
<Heading <Heading as="h4" fontSize="2xl">{`Times Bot Was Triggered`}</Heading>
as="h4"
fontSize="2xl"
>{`Times Bot Was Triggered (Past 30 Days)`}</Heading>
<LineChartComponent data={lineChartData} label="Times Triggered" /> <LineChartComponent data={lineChartData} label="Times Triggered" />
</VStack> </VStack>
); );

View File

@@ -104,7 +104,7 @@ export default function Home() {
py="5vh" py="5vh"
minW="fit-content" minW="fit-content"
> >
<VStack w={{ base: "100%", md: "90%" }} gap={6} minW="fit-content"> <VStack w={{ base: "100%", md: "90%" }} gap={10} minW="fit-content">
<VStack w="80%" gap={10}> <VStack w="80%" gap={10}>
<Icon h="7.5rem" color="whiteAlpha"> <Icon h="7.5rem" color="whiteAlpha">
<svg <svg
@@ -171,7 +171,12 @@ export default function Home() {
/> />
</VStack> </VStack>
<VStack w="95%" gap="5vh"> <VStack w="95%" gap="5vh">
<Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading> <VStack gap={1}>
<Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
<Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
{"Updates every 24 hours"}
</Text>
</VStack>
<Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}> <Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}>
<LinksDeletedChart lineChartData={lineChartArrState} /> <LinksDeletedChart lineChartData={lineChartArrState} />
</Skeleton> </Skeleton>