mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

dashboard edit

pull/709/head
Anton Mushnin 2022-11-17 18:31:46 +03:00
rodzic 86102c90c7
commit 9a8961e3e3
5 zmienionych plików z 35 dodań i 35 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
frontend/pages/dashboard/[dashboardId].js
Wyświetl plik

@ -160,7 +160,8 @@ const Analytics = () => {
}) })
} }
size="md" size="md"
colorScheme="blue" color="orange.1000"
borderColor="1000"
variant="outline" variant="outline"
icon={<BsGear />} icon={<BsGear />}
/> />

25
frontend/src/components/AutoCompleter.js
Wyświetl plik

@ -53,8 +53,13 @@ const AutoCompleter = ({
return ( return (
<Box pos="relative"> <Box pos="relative">
<Box {...getRootProps({}, { suppressRefError: true })}> <Box {...getRootProps({}, { suppressRefError: true })}>
<InputGroup> <InputGroup
border="1px solid white"
bg="black.300"
borderRadius="7px"
>
<InputLeftAddon <InputLeftAddon
borderStyle="none"
isTruncated isTruncated
maxW="60px" maxW="60px"
fontSize={ui.isMobileView ? "xs" : "sm"} fontSize={ui.isMobileView ? "xs" : "sm"}
@ -75,6 +80,9 @@ const AutoCompleter = ({
</InputLeftAddon> </InputLeftAddon>
<Input <Input
variant="bw"
borderStyle="none none none"
borderLeft="1px solid white"
placeholder={placeholder} placeholder={placeholder}
isTruncated isTruncated
fontSize="sm" fontSize="sm"
@ -82,9 +90,10 @@ const AutoCompleter = ({
// defaultValue: getDefaultValue(selectedItem), // defaultValue: getDefaultValue(selectedItem),
})} })}
></Input> ></Input>
<InputRightAddon> <InputRightAddon bg="black.300">
{" "} {" "}
<button <button
style={{ backgroundColor: "black.300" }}
{...getToggleButtonProps()} {...getToggleButtonProps()}
aria-label={"toggle menu"} aria-label={"toggle menu"}
> >
@ -99,7 +108,7 @@ const AutoCompleter = ({
direction="column" direction="column"
className="menuListTim" className="menuListTim"
{...getMenuProps()} {...getMenuProps()}
bgColor="gray.300" bgColor="black.300"
borderRadius="md" borderRadius="md"
boxShadow="lg" boxShadow="lg"
pos="absolute" pos="absolute"
@ -123,6 +132,7 @@ const AutoCompleter = ({
px={4} px={4}
py={1} py={1}
alignItems="center" alignItems="center"
border="1px solid white"
key={`autocomplete-item-${index}`} key={`autocomplete-item-${index}`}
{...getItemProps({ {...getItemProps({
index, index,
@ -130,13 +140,8 @@ const AutoCompleter = ({
})} })}
direction="row" direction="row"
w="100%" w="100%"
bgColor={ fontWeight={
index === highlightedIndex index === highlightedIndex ? "600" : "inherit"
? "orange.900"
: "inherit"
}
color={
index === highlightedIndex ? "gray.100" : "inherit"
} }
> >
{dropdownItem(item)} {dropdownItem(item)}

2
frontend/src/components/CheckboxGrouped.js
Wyświetl plik

@ -28,7 +28,7 @@ const CheckboxGroupped = ({
px={2} px={2}
key={`list-item-checkbox-${idx}`} key={`list-item-checkbox-${idx}`}
direction="row" direction="row"
bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"} bgColor={idx % 2 == 0 ? "black.400" : "black.300"}
> >
<Checkbox <Checkbox
isChecked={isItemChecked(listItem)} isChecked={isItemChecked(listItem)}

34
frontend/src/components/NewDashboardChart.js
Wyświetl plik

@ -4,7 +4,6 @@ import {
FormLabel, FormLabel,
Stack, Stack,
Button, Button,
Badge,
Spinner, Spinner,
Accordion, Accordion,
AccordionItem, AccordionItem,
@ -13,6 +12,7 @@ import {
AccordionIcon, AccordionIcon,
Box, Box,
IconButton, IconButton,
Text,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useSubscriptions } from "../core/hooks"; import { useSubscriptions } from "../core/hooks";
import color from "color"; import color from "color";
@ -78,7 +78,7 @@ const NewDashboardChart = () => {
}); });
} }
return ( return (
<AccordionItem key={`new-chart-component-${idx}`}> <AccordionItem pt="5px" key={`new-chart-component-${idx}`}>
{subscribedItem?.subscription_id && {subscribedItem?.subscription_id &&
subscriptionItemFromCache && ( subscriptionItemFromCache && (
<> <>
@ -246,31 +246,24 @@ const NewDashboardChart = () => {
dropdownItem={(item) => { dropdownItem={(item) => {
const badgeColor = color(`${item.color}`); const badgeColor = color(`${item.color}`);
return ( return (
<> <Stack cursor="pointer" direction="row">
<chakra.span whiteSpace="nowrap"> <chakra.span whiteSpace="nowrap">
{item.label} {item.label}
</chakra.span> </chakra.span>
<Badge <Text
size="sm" fontSize="md"
placeSelf="self-end" color={item.abi ? "white" : "gray"}
colorScheme={item.abi ? "green" : "gray"}
> >
ABI ABI
</Badge> </Text>
<Badge <Text
isTruncated isTruncated
size="sm" fontSize="md"
placeSelf="self-end" placeSelf="self-center"
bgColor={item.color}
color={
badgeColor.isDark()
? badgeColor.lighten(100).hex()
: badgeColor.darken(0.6).hex()
}
> >
{item.address} {item.address}
</Badge> </Text>
</> </Stack>
); );
}} }}
/> />
@ -299,7 +292,8 @@ const NewDashboardChart = () => {
)} )}
<Button <Button
colorScheme="green" variant="plainOrange"
fontSize="md"
size="md" size="md"
onClick={() => onClick={() =>
ui.dispatchDashboardUpdate({ ui.dispatchDashboardUpdate({

6
frontend/src/core/providers/OverlayProvider/index.js
Wyświetl plik

@ -270,7 +270,7 @@ const OverlayProvider = ({ children }) => {
<ModalOverlay backdropFilter="auto" backdropBrightness="60%" /> <ModalOverlay backdropFilter="auto" backdropBrightness="60%" />
<ModalContent <ModalContent
bg="#1A1D22" bg="black.300"
borderRadius="15px" borderRadius="15px"
border="1px white solid" border="1px white solid"
p="30px" p="30px"
@ -357,8 +357,8 @@ const OverlayProvider = ({ children }) => {
} }
}} }}
> >
<DrawerOverlay /> <DrawerOverlay backdropFilter="auto" backdropBrightness="60%" />
<DrawerContent overflowY="scroll" textColor="black"> <DrawerContent overflowY="scroll" textColor="white" bg="black.300">
<DrawerCloseButton /> <DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px"> <DrawerHeader borderBottomWidth="1px">
{drawer.type === DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"} {drawer.type === DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"}