Matthias-Claudius-Schule/borrow-system
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update button for safe state with improved styling and text display

Browse Source
This commit is contained in:
Theis Gaedigk
2025-09-16 13:48:56 +02:00
parent 5159877d8d
commit 4fc60a08d9
1 changed files with 28 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
admin/src/components/ItemTable.tsx
View File

@@ -9,7 +9,6 @@ import {
IconButton, IconButton,
Heading, Heading,
Icon, Icon,
Tag,
Input, Input,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Tooltip } from "@/components/ui/tooltip"; import { Tooltip } from "@/components/ui/tooltip";
@@ -219,57 +218,35 @@ const ItemTable: React.FC = () => {
onClick={() => onClick={() =>
changeSafeState(item.id).then(() => setReload(!reload)) changeSafeState(item.id).then(() => setReload(!reload))
} }
size="sm" size="xs"
rounded="full"
px={3}
py={1}
gap={2}
variant="ghost"
color={item.inSafe ? "green.600" : "red.600"}
borderWidth="1px"
borderColor={item.inSafe ? "green.300" : "red.300"}
_hover={{
bg: item.inSafe ? "green.50" : "red.50",
borderColor: item.inSafe ? "green.400" : "red.400",
transform: "translateY(-1px)",
shadow: "sm",
}}
_active={{ transform: "translateY(0)" }}
leftIcon={
<Icon
as={item.inSafe ? CheckCircle2 : XCircle}
boxSize={3.5}
/>
}
aria-label={
item.inSafe ? "Mark as not in safe" : "Mark as in safe"
}
> >
{item.inSafe ? ( <Text as="span" fontSize="xs" fontWeight="semibold">
<Tag.Root {item.inSafe ? "Yes" : "No"}
size="md" </Text>
bg="green.500"
color="white"
px={4}
py={1.5}
rounded="full"
display="inline-flex"
alignItems="center"
gap={2}
shadow="sm"
_hover={{ shadow: "md" }}
>
<Icon as={CheckCircle2} boxSize={4} />
<Text
as="span"
fontSize="xs"
letterSpacing="wide"
textTransform="uppercase"
>
Yes
</Text>
</Tag.Root>
) : (
<Tag.Root
size="md"
bg="red.500"
color="white"
px={4}
py={1.5}
rounded="full"
display="inline-flex"
alignItems="center"
gap={2}
shadow="sm"
_hover={{ shadow: "md" }}
>
<Icon as={XCircle} boxSize={4} />
<Text
as="span"
fontSize="xs"
letterSpacing="wide"
textTransform="uppercase"
>
No
</Text>
</Tag.Root>
)}
</Button> </Button>
</Table.Cell> </Table.Cell>
<Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell> <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>