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

Merge remote-tracking branch 'origin/adding-react-routers' into 20260605_1123_Hight_updates

Browse Source
This commit is contained in:
chight
2026-06-05 11:29:52 -07:00
parent 0715fa61ab a0708fa8ea
commit e24ea85f10
12 changed files with 214 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/Canvas.jsx
+38 -36
View File
@@ -1,37 +1,39 @@
import GlobalMap from "./views/GlobalMap"; // DEPRECATED
import RegionalMap from "./views/RegionalMap";
import Volcano from "./views/Volcano";
import Admin from "./views/Admin";
import Account from "./views/Account"
import Home from "./views/Home";
import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
import { chakra } from "@chakra-ui/react";
import Personal from "./views/Personal";
import Security from "./views/Security";
export default function Canvas(props) { // import GlobalMap from "./views/GlobalMap";
const { view } = props; // import RegionalMap from "./views/RegionalMap";
// import Volcano from "./views/Volcano";
return ( // import Admin from "./views/Admin";
<chakra.div width="100%" height="100%"> // import Account from "./views/Account"
{/* Check if view is a tab inside the Home Header */} // import Home from "./views/Home";
{ DASHBOARD_VIEWS.includes(view) && ( // import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
<Home {...props}/> // import { chakra } from "@chakra-ui/react";
)} // import Personal from "./views/Personal";
{/* Check if view is a tab inside the Volcano Header */} // import Security from "./views/Security";
{ VOLCANO_VIEWS.includes(view) && ( //
<Volcano {...props}/> // export default function Canvas(props) {
)} // const { view } = props;
{/* Check if view is a tab inside the Admin Header */} //
{ ADMIN_VIEWS.includes(view) && ( // return (
<Admin {...props}/> // <chakra.div width="100%" height="100%">
)} // {/* Check if view is a tab inside the Home Header */}
{view === "global" && <GlobalMap />} // { DASHBOARD_VIEWS.includes(view) && (
{view === "regional" && <RegionalMap />} // <Home {...props}/>
{view === "account" && <Account />} // )}
{view === "settings" && <Personal />} // {/* Check if view is a tab inside the Volcano Header */}
{view === "personal" && <Personal />} // { VOLCANO_VIEWS.includes(view) && (
{view === "security" && <Security />} // <Volcano {...props}/>
</chakra.div> // )}
); // {/* Check if view is a tab inside the Admin Header */}
} // { ADMIN_VIEWS.includes(view) && (
// <Admin {...props}/>
// )}
// {view === "global" && <GlobalMap />}
// {view === "regional" && <RegionalMap />}
// {view === "account" && <Account />}
// {view === "settings" && <Personal />}
// {view === "personal" && <Personal />}
// {view === "security" && <Security />}
// </chakra.div>
// );
// }
client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx
+32 -34
View File
@@ -1,62 +1,60 @@
import Widget from "./Widget"; import Widget from "./Widget";
import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react"; import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useState } from "react"; import { useState } from "react";
import { Asterisk } from 'lucide-react'; import { Asterisk } from 'lucide-react';
export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) { export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
const { register, handleSubmit, reset, formState: {errors} } = useForm(); const { register, handleSubmit, reset, formState: {errors} } = useForm();
const [isSubmit, setIsSubmit] = useState(false);
const onSubmit = (data) => { const onSubmit = (data) => {
console.log("data: ", data); console.log("data: ", data);
if (data.volcanoname === '') {
return null;
}
setIsSubmit(true); setIsSubmit(true);
reset(); reset();
} }
const [isSubmit, setIsSubmit] = useState(false);
// Prop Forwarding // Prop Forwarding
const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit } const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
return ( return (
<Widget title="Alert Level" {...widgetProps}> <Widget title="Alert Level" {...widgetProps} >
{!isSubmit ? ( {!isSubmit ? (
// DISPLAYING INPUT FIElDS AND LABELS // DISPLAYING INPUT FIElDS AND LABELS
<Box <Box
as="form" as="form"
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
width="100%" width="100%"
height="100%" p={3}
pt={1}
pl={3}
pr={3}
display="flex" display="flex"
flexDir="column" flexDir="column"
gap="10"
> >
<Field.Root orientation="horizontal"> <Fieldset.Root size="md" maxW="md">
<Stack direction="column" gap="3" width="100%"> <Fieldset.Content>
<Stack direction="row" width="100%"> <Field.Root>
<Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label> <Field.Label fontWeight="semibold">Volcano</Field.Label>
{/* place select drop down menu here instead of asking for input */} <Input name="volcanoname" />
<Input {...register("countryname")} placeholder="Enter country name"/> </Field.Root>
</Stack>
<Flex position="relative" dir="column" gap="0.5" width="100%"> <Field.Root>
<Stack direction="row" width="100%"> <Field.Label fontWeight="semibold">Country</Field.Label>
<Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold"> <NativeSelect.Root>
Volcano Name <Asterisk color="tomato" /> <NativeSelect.Field name="country">
</Field.Label> <For each={["United Kingdom", "Canada", "United States"]}>
<Input {(item) => (
border={errors.volcanoname ? "2px solid" : undefined} <option key={item} value={item}>
borderColor={errors.volcanoname ? "tomato" : undefined} {item}
{...register("volcanoname", { required: 'This field is required.' })} </option>
placeholder="Enter volcano name"/> )}
</Stack> </For>
{errors.volcanoname && <Box cursor="default" userSelect="none" position="absolute" top="40px" left="8.5rem" style={{ color: 'tomato' }}>{errors.volcanoname.message}</Box>} </NativeSelect.Field>
</Flex> <NativeSelect.Indicator />
</Stack> </NativeSelect.Root>
</Field.Root> </Field.Root>
<Button type="submit" size="sm">Submit</Button> </Fieldset.Content>
<Button type="submit" size="sm">Submit</Button>
</Fieldset.Root>
</Box> </Box>
):( ):(
// DISPLAYING ALERT LEVEL DATA // DISPLAYING ALERT LEVEL DATA
client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { Box, Checkbox, Separator , CloseButton, Text, chakra, Field, IconButton, Icon, Input, Fieldset, Flex } from "@chakra-ui/react"; import { Box, Checkbox, Separator , CloseButton, Text, chakra, Field, IconButton, Icon, Input, Fieldset, Flex } from "@chakra-ui/react";
import { useState } from "react"; import { useState } from "react";
import { ChevronDown } from 'lucide-react'; import { ChevronDown, ChevronUp, Settings } from 'lucide-react';
import { ChevronUp } from 'lucide-react';
export default function MapSettingsButton() { export default function MapSettingsButton() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
client/src/components/Canvas/CanvasComponents/SearchBar.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Input, InputGroup } from "@chakra-ui/react"; import { Input, InputGroup } from "@chakra-ui/react";
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) { export function SearchBar({ placeholder, size, width, ...rest }) {
return ( return (
<InputGroup startElement={<Search />}> <InputGroup startElement={<Search />}>
<Input <Input
client/src/components/Canvas/CanvasComponents/Widget.jsx
+16 -15
View File
@@ -9,23 +9,24 @@ export default function Widget(props) {
const styles = recipe(); const styles = recipe();
return ( return (
<> <Flex flexDirection="column" w="100%" h="auto">
<chakra.div css={styles.header} cursor={isEditable ? "move":"default"}> {/* HEADER */}
<Flex flexDirection="row" justifyContent="space-between" alignItems="center"> <Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
<Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text> <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
{isDelete ? ( {isDelete ? (
<CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/> <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
):( ):(
isSubmit ? ( isSubmit ? (
<IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton> <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
):null ):null
)} )}
</Flex> </Flex>
</chakra.div>
<Flex height="100%" mb="2"> {/* CHILDREN */}
<Flex w="100%" h="auto">
{children} {children}
</Flex> </Flex>
</> </Flex>
); );
} }
client/src/components/Canvas/views/Home.jsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { HStack, Flex, Tabs } from "@chakra-ui/react"; import { HStack, Flex, Tabs, Button } from "@chakra-ui/react";
import { useState } from "react"; import { useState } from "react";
import MyDashboard from "./HomeTabs/MyDashboard"; import MyDashboard from "./HomeTabs/MyDashboard";
import { SearchBar } from "../CanvasComponents/SearchBar"; import { SearchBar } from "../CanvasComponents/SearchBar";
@@ -149,8 +149,8 @@ export default function Home() {
<HStack width="258px" justifyContent="flex-end"> <HStack width="258px" justifyContent="flex-end">
{isEditable ? ( {isEditable ? (
<> <>
<SaveButton onSave={ onSave } /> <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
<CancelButton onCancel={ onCancel } /> <Button onClick={onCancel} borderRadius="md">Cancel</Button>
{isDelete ? ( {isDelete ? (
<DeleteAllButton onDeleteAll={ DeleteAll } /> <DeleteAllButton onDeleteAll={ DeleteAll } />
):(null) ):(null)
@@ -158,7 +158,7 @@ export default function Home() {
</> </>
):( ):(
<> <>
<SearchBar /> <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
<SettingsButton {...settingsButtonProps}/> <SettingsButton {...settingsButtonProps}/>
</> </>
)} )}
client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
+2 -2
View File
@@ -1,5 +1,5 @@
import GridLayout, { WidthProvider } from 'react-grid-layout'; import GridLayout, { WidthProvider } from 'react-grid-layout';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react'; import { useSlotRecipe, chakra, Flex, SimpleGrid } from '@chakra-ui/react';
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle'; import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton'; import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
@@ -44,7 +44,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
className="layout" className="layout"
layout={layout} layout={layout}
cols={16} // Total columns in grid cols={16} // Total columns in grid
rowHeight={30} // Height of a single row in px rowHeight={40} // Height of a single row in px
isBounded={true} // Total width of the grid isBounded={true} // Total width of the grid
margin={[15, 5]} // [horizontal, vertical] gap margin={[15, 5]} // [horizontal, vertical] gap
onLayoutChange={onLayoutChange} onLayoutChange={onLayoutChange}
client/src/components/Canvas/views/Volcano.jsx
+4 -13
View File
@@ -10,20 +10,13 @@ import { SocialMedia } from './VolcanoTabs/SocialMedia';
import { SearchBar } from "../CanvasComponents/SearchBar"; import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton"; import { SettingsButton } from "../CanvasComponents/SettingsButton";
export default function Volcano({ view, onChangeView }) { export default function Volcano() {
return ( return (
<Tabs.Root <Tabs.Root
key={view}
value={view}
variant="line" variant="line"
width="100%" width="100%"
height="100%" height="100%"
lazyMount lazyMount
// Prevent navigation away from 'My Dashboard' while in Edit mode
onValueChange={(e) => {
const nextView = e.value;
onChangeView(nextView);
}}
> >
<Flex <Flex
as="header" as="header"
@@ -31,14 +24,12 @@ export default function Volcano({ view, onChangeView }) {
top="0" top="0"
zIndex="dropdown" // zIndex: 1100 zIndex="dropdown" // zIndex: 1100
bg="base200" bg="base200"
pl={5} p={5}
pr={2}
pt={3}
align="center" align="center"
justify="space-between" justify="space-between"
width="100%" width="100%"
> >
{/* HEADER */} {/* SUB HEADER */}
<CanvasHeaderTabs tabs={VOLCANO_TABS} /> <CanvasHeaderTabs tabs={VOLCANO_TABS} />
<HStack width="258px" justifyContent="flex-end"> <HStack width="258px" justifyContent="flex-end">
<SearchBar /> <SearchBar />
@@ -46,7 +37,7 @@ export default function Volcano({ view, onChangeView }) {
</HStack> </HStack>
</Flex> </Flex>
{/* CANVAS */} {/* SUB CONTENT */}
<Tabs.Content value="volcanohome"> <Tabs.Content value="volcanohome">
<VolcanoHome /> <VolcanoHome />
</Tabs.Content> </Tabs.Content>
client/src/components/Dashboard.jsx
+94 -92
View File
@@ -1,93 +1,95 @@
import Header from './Header/Header.jsx'; // DEPRECATED
import Sidebar from './Sidebar/Sidebar.jsx';
import Canvas from './Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
import { useState } from 'react';
import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
export default function Dashboard() { // import Header from './Header/Header.jsx';
const recipe = useRecipe({ key: "dashboard" }); // import Sidebar from './Sidebar/Sidebar.jsx';
const styles = recipe(); // import Canvas from './Canvas/Canvas.jsx';
// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
const [darkMode, setDarkMode] = useState(false); // import { useState } from 'react';
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) // import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
const [isDelete, setIsDelete] = useState(false); //
const [originalLayout, setOriginalLayout] = useState([]); // export default function Dashboard() {
const [originalWidgets, setOriginalWidgets] = useState([]); // const recipe = useRecipe({ key: "dashboard" });
const [view, setView] = useState("mydashboard"); // const styles = recipe();
const [layout, setLayout] = useState([]); //
const [widgetArray, setWidgetArray] = useState([]); // const [darkMode, setDarkMode] = useState(false);
const dialog = useDialog(); // const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
// const [isDelete, setIsDelete] = useState(false);
const beginEditIfNeeded = () => { // const [originalLayout, setOriginalLayout] = useState([]);
if ( !isEditable ) { // const [originalWidgets, setOriginalWidgets] = useState([]);
setOriginalLayout(layout); // const [view, setView] = useState("mydashboard");
setOriginalWidgets(widgetArray); // const [layout, setLayout] = useState([]);
} // const [widgetArray, setWidgetArray] = useState([]);
}; // const dialog = useDialog();
//
const onCancel = () => { // const beginEditIfNeeded = () => {
console.log("canceling changes..."); // if ( !isEditable ) {
console.log(originalWidgets); // setOriginalLayout(layout);
if (originalLayout.length) { // setOriginalWidgets(widgetArray);
setLayout(originalLayout.map(item => ({ // }
...item, // };
static: true //
}))); // const onCancel = () => {
}; // console.log("canceling changes...");
setWidgetArray(originalWidgets); // console.log(originalWidgets);
setIsEditable(false); // if (originalLayout.length) {
setIsDelete(false); // setLayout(originalLayout.map(item => ({
setOriginalLayout([]); // ...item,
setOriginalWidgets([]); // static: true
} // })));
// };
// Prevent navigation while in Edit mode without saving or cancelling // setWidgetArray(originalWidgets);
const handleViewChange = (nextView) => { // setIsEditable(false);
console.log("1. handling view change") // setIsDelete(false);
if (view === "mydashboard" && isEditable) { // setOriginalLayout([]);
console.log("2. currently editing"); // setOriginalWidgets([]);
dialog.setOpen(true); // }
return; //
// // Prevent navigation while in Edit mode without saving or cancelling
// const confirmed = window.confirm( // const handleViewChange = (nextView) => {
// "You have unsaved changes. Discard them and continue?" // console.log("1. handling view change")
// ); // if (view === "mydashboard" && isEditable) {
// if (!confirmed) return; // console.log("2. currently editing");
// onCancel(); // dialog.setOpen(true);
} // return;
setView(nextView); //
}; // // const confirmed = window.confirm(
// // "You have unsaved changes. Discard them and continue?"
const onLayoutChange = (newLayout) => setLayout(newLayout); // // );
// // if (!confirmed) return;
// Prop Forwarding // // onCancel();
const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, // }
onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded // setView(nextView);
}; // };
const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode }; //
const headerProps = { onChangeView: handleViewChange }; // const onLayoutChange = (newLayout) => setLayout(newLayout);
//
return ( // // Prop Forwarding
<> // const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
<DialogPopup dialog={dialog} /> // onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
<Grid css={styles} // };
templateRows="1fr 11fr" // const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
// templateColumns="1fr 20fr" // const headerProps = { onChangeView: handleViewChange };
templateColumns="auto 1fr" //
height="100vh" // return (
width="100vw" // <>
> // <DialogPopup dialog={dialog} />
<GridItem rowSpan={1} colSpan={2}> // <Grid css={styles}
<Header {...headerProps}/> // templateRows="1fr 11fr"
</GridItem> // // templateColumns="1fr 20fr"
<GridItem colSpan={1}> // templateColumns="auto 1fr"
<Sidebar {...sidebarProps}/> // height="100vh"
</GridItem> // width="100vw"
<GridItem colSpan={1} width="100%" overflow="auto"> // >
<Canvas {...canvasProps}/> // <GridItem rowSpan={1} colSpan={2}>
</GridItem> // <Header {...headerProps}/>
</Grid> // </GridItem>
</> // <GridItem colSpan={1}>
); // <Sidebar {...sidebarProps}/>
} // </GridItem>
// <GridItem colSpan={1} width="100%" overflow="auto">
// <Canvas {...canvasProps}/>
// </GridItem>
// </Grid>
// </>
// );
// }
client/src/components/Sidebar/Sidebar.jsx
+3 -7
View File
@@ -8,7 +8,6 @@ import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyR
export default function Sidebar() { export default function Sidebar() {
const { toggleColorMode } = useColorMode(); const { toggleColorMode } = useColorMode();
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [activeButton, setActiveButton] = useState(0)
const recipe = useSlotRecipe({ key: "sidebar" }); const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe(); const styles = recipe();
@@ -37,8 +36,7 @@ export default function Sidebar() {
]; ];
const toggleSidebar = () => { const toggleSidebar = () => {
if (isOpen) setIsOpen(false); setIsOpen((prev) => !prev);
else setIsOpen(true);
}; };
return ( return (
@@ -49,7 +47,7 @@ export default function Sidebar() {
{buttons.map((button, idx) => { {buttons.map((button, idx) => {
const Icon = button.icon; const Icon = button.icon;
return ( return ( // TODO: don't use idx as a key
<Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}> <Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}>
<Button <Button
as={NavLink} as={NavLink}
@@ -76,9 +74,7 @@ export default function Sidebar() {
) )
})} })}
<ColorModeButton <ColorModeButton
onClick={() => { onClick={() => toggleColorMode()}
toggleColorMode();
}}
position="absolute" position="absolute"
bottom="2" bottom="2"
/> />
client/src/main.jsx
+2 -1
View File
@@ -2,6 +2,7 @@ import { Provider } from '@/components/ui/provider'
import { StrictMode } from 'react'; import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import 'leaflet/dist/leaflet.css';
import './css/index.css'; import './css/index.css';
import 'react-grid-layout/css/styles.css'; import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css'; import 'react-resizable/css/styles.css';
@@ -16,4 +17,4 @@ createRoot(document.getElementById('root')).render(
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
</StrictMode> </StrictMode>
) )
client/src/theme.js
+17 -17
View File
@@ -134,12 +134,12 @@ const config = defineConfig({
"::-webkit-scrollbar-track": { "::-webkit-scrollbar-track": {
background: "transparent", background: "transparent",
}, },
'.leaflet-tile': { // '.leaflet-tile': {
_dark: { // _dark: {
filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)", // filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
} // }
}, // },
'.leaflet-control-zoom-in .leaflet-control-zoom-out .leaflet-control-attribution .leaflet-container': { '.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container': {
_dark: { _dark: {
filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)", filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
} }
@@ -150,20 +150,20 @@ const config = defineConfig({
} }
}, },
'.leaflet-container': { '.leaflet-container': {
fontFamily: "georgia, system-ui, sans-serif !important", fontFamily: "system-ui, sans-serif !important",
_dark: { _dark: {
filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)", filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
} }
}, },
".leaflet-popup-content": { // ".leaflet-popup-content": {
fontFamily: "georgia, system-ui, sans-serif !important" // fontFamily: "georgia, system-ui, sans-serif !important"
}, // },
".leaflet-control a": { // ".leaflet-control a": {
fontFamily: "georgia, system-ui, sans-serif !important" // fontFamily: "georgia, system-ui, sans-serif !important"
}, // },
".leaflet-tooltip": { // ".leaflet-tooltip": {
fontFamily: "georgia, system-ui, sans-serif !important" // fontFamily: "georgia, system-ui, sans-serif !important"
}, // },
".react-grid-item": { ".react-grid-item": {
transition: "none !important" transition: "none !important"
}, },
@@ -185,7 +185,7 @@ const config = defineConfig({
}, },
tokens: { tokens: {
fonts: { fonts: {
body: { value: "georgia, system-ui, sans-serif" }, body: { value: "system-ui, sans-serif" },
}, },
}, },
recipes: { recipes: {