chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style changes

Browse Source 
some small style changes like cursor types on hover and some color changes.
This commit is contained in:
vkuchenik
2025-07-22 09:26:40 -07:00
parent 118792ec7c
commit 999206b013
5 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/SearchBar.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ export function SearchBar({ placeholder="Enter a volcano to search", size="sm",
size={size} size={size}
width={width} width={width}
borderRadius="full" borderRadius="full"
bg="base100"
/> />
</InputGroup> </InputGroup>
); );
client/src/components/layout/Header/Header.jsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function Header() {
<chakra.div css={styles}> <chakra.div css={styles}>
<Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button> <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
<Flex align="center" gap={3} pr={6}> <Flex align="center" gap={3} pr={6}>
<Stack gap="0" textAlign="right"> <Stack gap="0" textAlign="right" cursor="default">
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text> <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
<Text color="fg.muted" textStyle="sm">{user.email}</Text> <Text color="fg.muted" textStyle="sm">{user.email}</Text>
</Stack> </Stack>
client/src/components/layout/Header/UserAvatarMenu.jsx
+26 -25
View File
@@ -2,29 +2,30 @@ import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
export default function UserAvatarMenu({ name, avatar }) { export default function UserAvatarMenu({ name, avatar }) {
return ( return (
<Menu.Root> <Menu.Root>
<Menu.Trigger focusRing="none"> <Menu.Trigger focusRing="none">
<Box <Box
rounded="full" rounded="full"
tabIndex={0} tabIndex={0}
_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }} _hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
> cursor="pointer"
<Avatar.Root shape="full"> >
<Avatar.Fallback name={name} /> <Avatar.Root shape="full">
<Avatar.Image src={avatar} /> <Avatar.Fallback name={name} />
</Avatar.Root> <Avatar.Image src={avatar} />
</Box> </Avatar.Root>
</Menu.Trigger> </Box>
<Portal> </Menu.Trigger>
<Menu.Positioner zIndex="popover"> <Portal>
<Menu.Content> <Menu.Positioner zIndex="popover">
<Menu.Item value="account">Account</Menu.Item> <Menu.Content>
<Menu.Item value="settings">Settings</Menu.Item> <Menu.Item value="account">Account</Menu.Item>
<Menu.Item value="logout">Logout</Menu.Item> <Menu.Item value="settings">Settings</Menu.Item>
</Menu.Content> <Menu.Item value="logout">Logout</Menu.Item>
</Menu.Positioner> </Menu.Content>
</Portal> </Menu.Positioner>
</Menu.Root> </Portal>
); </Menu.Root>
);
} }
client/src/components/layout/Sidebar/Sidebar.jsx
+9 -6
View File
@@ -1,4 +1,4 @@
import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react"; import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
import { ColorModeButton } from "@/components/ui/color-mode"; import { ColorModeButton } from "@/components/ui/color-mode";
import { FaVolcano } from "react-icons/fa6"; import { FaVolcano } from "react-icons/fa6";
import { RxHamburgerMenu } from "react-icons/rx"; import { RxHamburgerMenu } from "react-icons/rx";
@@ -59,7 +59,6 @@ export const Users = createIcon({
export default function Sidebar() { export default function Sidebar() {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [hasFinishedTransitions, setFinishedTransitions] = useState(false);
const buttons = [ const buttons = [
{icon: PushPin, name: "Dashboard"}, {icon: PushPin, name: "Dashboard"},
@@ -74,10 +73,8 @@ export default function Sidebar() {
const styles = recipe(); const styles = recipe();
const toggleSidebar = () => { const toggleSidebar = () => {
setFinishedTransitions(false);
if (isOpen) setIsOpen(false); if (isOpen) setIsOpen(false);
else setIsOpen(true); else setIsOpen(true);
setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration
}; };
return ( return (
@@ -88,9 +85,10 @@ export default function Sidebar() {
> >
<IconButton <IconButton
aria-label="Toggle Sidebar" aria-label="Toggle Sidebar"
variant="ghost" variant="plain"
size="md" size="md"
onClick={toggleSidebar} onClick={toggleSidebar}
width="54px"
> >
<RxHamburgerMenu /> <RxHamburgerMenu />
</IconButton> </IconButton>
@@ -98,7 +96,12 @@ export default function Sidebar() {
{buttons.map((button, idx) => { {buttons.map((button, idx) => {
const Icon = button.icon; const Icon = button.icon;
return ( return (
<Button key={idx} css={styles.buttons} onClick={() => setActiveButton(idx)} bg={activeButton === idx ? "primary":undefined} justifyContent="flex-start"> <Button key={idx}
css={styles.buttons}
onClick={() => setActiveButton(idx)}
bg={activeButton === idx ? "primary":undefined}
justifyContent="flex-start"
>
<Icon fill="base200" /> <Icon fill="base200" />
<span style={{ <span style={{
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
client/src/theme.js
+1 -1
View File
@@ -59,7 +59,7 @@ const config = defineConfig({
// primary: { value: {base: "#9cd855", _dark: "#629631"}}, // primary: { value: {base: "#9cd855", _dark: "#629631"}},
primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}}, primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
// primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}}, // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
primaryLt: { value: {base: "#2BCFF8", _dark: "#2BCFF8"}}, primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
border: {value: {base: "#000000", _dark: "#CBCBCB"}}, border: {value: {base: "#000000", _dark: "#CBCBCB"}},
text: {value: {base: "#19332D", _dark: "#CBCBCB"}}, text: {value: {base: "#19332D", _dark: "#CBCBCB"}},