Better separators

nekiro · Dec 1, 2024 · 6dd1bf6 · 6dd1bf6
1 parent 8d9f8c0
commit 6dd1bf6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/src/layout/SideBar.tsx b/src/layout/SideBar.tsx
@@ -1,34 +1,28 @@
 import React from "react";
 import Panel from "@component/Panel";
-import Label from "@component/Label";
-import Link from "@component/Link";
-import { Box, BoxProps, Flex } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
 import StripedTable from "@component/StrippedTable";
 import { trpc } from "@util/trpc";
 
 export interface LayoutProps extends BoxProps {}
 
 const SideBar = (props: LayoutProps) => {
 	const topPlayers = trpc.player.top5.useQuery();
-	const status = trpc.status.status.useQuery();
 
 	return (
 		<Box minWidth="15em" {...props}>
 			<Panel header="Top 5 Level" isLoading={topPlayers.isLoading}>
 				<StripedTable
 					head={[{ text: "Name" }, { text: "Level" }]}
-					body={
-						topPlayers.data &&
-						topPlayers.data.map((player, index) => [
-							{
-								text: `${index + 1}. ${player.name}`,
-								href: `/character/${player.name}`,
-							},
-							{
-								text: player.level.toString(),
-							},
-						])
-					}
+					body={topPlayers.data?.map((player, index) => [
+						{
+							text: `${index + 1}. ${player.name}`,
+							href: `/character/${player.name}`,
+						},
+						{
+							text: player.level.toString(),
+						},
+					])}
 				/>
 			</Panel>
 		</Box>

diff --git a/src/layout/TopBar/TopBarItem.tsx b/src/layout/TopBar/TopBarItem.tsx
@@ -6,7 +6,7 @@ export interface TopBarItemProps extends BoxProps {
 
 export const TopBarItem = ({ children, ...props }: TopBarItemProps) => {
 	return (
-		<Flex borderLeftWidth="1px" borderRightWidth="1px" borderColor="violet.400" paddingRight="15px" paddingLeft="15px" h="100%" {...props}>
+		<Flex borderColor="violet.400" paddingRight="15px" paddingLeft="15px" h="100%" {...props}>
 			{children}
 		</Flex>
 	);

diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text, Box } from "@chakra-ui/react";
 import { TopBarItem } from "./TopBarItem";
 import { trpc } from "@util/trpc";
 
@@ -8,6 +8,7 @@ export const TopBar = () => {
 	return (
 		<Flex justifyContent="center" bgColor="blackAlpha.600" h="40px" borderBottomWidth="1px" borderColor="violet.400">
 			<Flex alignItems="center" flexDir="row" gap="5px">
+				<Box bgColor="violet.400" w="1px" h="100%" />
 				<TopBarItem alignItems="center" flexDirection="row">
 					<Text fontSize="md" color={status?.online ? "green" : "red"}>
 						{status?.onlineCount ?? "..."}
@@ -16,6 +17,7 @@ export const TopBar = () => {
 						players online
 					</Text>
 				</TopBarItem>
+				<Box bgColor="violet.400" w="1px" h="100%" />
 			</Flex>
 		</Flex>
 	);