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

Merge pull request #709 from bugout-dev/fix-colors 

Fix colors
pull/711/head^2
Anton Mushnin 2022-11-17 19:29:28 +03:00 zatwierdzone przez GitHub
rodzic 9e8a7466b6 9a8961e3e3
commit f3440eeba0
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
16 zmienionych plików z 107 dodań i 256 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
frontend/pages/account/tokens.js
Wyświetl plik

@ -72,7 +72,7 @@ const Tokens = () => {
<ScaleFade in>
<Modal isOpen={isOpen} onClose={onClose} size="lg" trapFocus={false}>
<ModalOverlay />
<ModalContent>
<ModalContent bg="black.300">
<ModalHeader>New API access token</ModalHeader>
<ModalCloseButton />
<ModalBody>
@ -85,6 +85,7 @@ const Tokens = () => {
<Stack direction={["column", "row", null]} w="100%">
<InputGroup size="sm" variant="outline">
<Input
variant="bw"
type="search"
maxW="300px"
flexBasis="50px"

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

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

2
frontend/pages/subscriptions.js
Wyświetl plik

@ -63,7 +63,7 @@ const Subscriptions = () => {
<Flex
h="3rem"
w="100%"
bgColor="#1A1D22"
bgColor="black.300"
borderColor="white"
borderTopRadius="xl"
justifyContent="flex-end"

25
frontend/src/Theme/Button/index.js
Wyświetl plik

@ -144,6 +144,30 @@ const variantWhiteOnOrange = () => {
};
};
const variantPlainOrange = () => {
return {
alignItems: "center",
justifyContent: "center",
border: "solid transparent",
borderRadius: "30px",
variant: "solid",
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
textColor: "white",
bg: "#F56646",
fontWeight: "700",
padding: "10px 30px",
_hover: {
backgroundColor: "#F4532F",
},
_focus: {
backgroundColor: "#F4532F",
},
_active: {
backgroundColor: "#F4532F",
},
};
};
const Button = {
// 1. We can update the base styles
baseStyle: () => ({
@ -183,6 +207,7 @@ const Button = {
link: variantLink,
orangeAndBlue: variantOrangeAndBlue,
whiteOnOrange: variantWhiteOnOrange,
plainOrange: variantPlainOrange,
},
};
export default Button;

10
frontend/src/Theme/Input/index.js
Wyświetl plik

@ -27,19 +27,19 @@ const bwVariant = () => {
border: "1px solid white",
borderRadius: "7px",
color: "white",
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
errorBorderColor: "#EE8686",
_hover: {
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
},
_focus: {
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
},
_placeholder: { color: "#CDCDCD" },
_autofill: {
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
boxShadow: "0 0 0px 1000px black.300 inset",
transition: "background-color 5000s ease-in-out 0s",
},
},

3
frontend/src/Theme/theme.js
Wyświetl plik

@ -165,6 +165,7 @@ const theme = extendTheme({
700: "#fd7835",
800: "#fd671b",
900: "#FD5602",
1000: "#F56646",
},
green: {
@ -184,6 +185,8 @@ const theme = extendTheme({
black: {
100: "#333399",
200: "#111442",
300: "#1A1D22",
400: "#292929",
},
},
});

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

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

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

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

39
frontend/src/components/ForgotPassword.js
Wyświetl plik

@ -28,24 +28,7 @@ const ForgotPassword = ({ toggleModal }) => {
<FormControl isInvalid={errors.email} my={4}>
<InputGroup>
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
variant="outline"
errorBorderColor="#EE8686"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
variant="bw"
placeholder="Enter your email"
name="email"
autoComplete="email"
@ -56,26 +39,12 @@ const ForgotPassword = ({ toggleModal }) => {
<Button
mt="30px"
mb="10px"
bg="#F56646"
fontWeight="700"
borderRadius="30px"
padding="10px 30px"
fontSize="20px"
height="46px"
color="#ffffff"
fontSize="lg"
h="46px"
type="submit"
width="100%"
variant="solid"
variant="plainOrange"
isLoading={isLoading}
_hover={{
backgroundColor: "#F4532F",
}}
_focus={{
backgroundColor: "#F4532F",
}}
_active={{
backgroundColor: "#F4532F",
}}
>
Send
</Button>

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

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

3
frontend/src/components/NewDashboardName.js
Wyświetl plik

@ -58,12 +58,11 @@ const NewDashboardName = (props) => {
<>
<Stack direction={["column", "row", null]}>
<InputGroup border="1px solid white" borderRadius="7px">
<InputLeftAddon bg="#1A1D22">Name:</InputLeftAddon>
<InputLeftAddon bg="black.300">Name:</InputLeftAddon>
<Input
borderStyle="none none none"
borderLeft="1px solid white"
variant="bw"
// borderStyle="none"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder={placeholder}

62
frontend/src/components/NewSubscription.js
Wyświetl plik

@ -166,7 +166,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
isTruncated
maxW="60px"
fontSize="sm"
bgColor="#1A1D22"
bgColor="black.300"
>
<Image h="24px" src={selectedItem?.icon_url} />
</InputLeftAddon>
@ -175,13 +175,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
placeholder="What do you want to subscribe to"
isTruncated
fontSize="sm"
bg="#1A1D22"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
variant="bw"
{...getInputProps()}
></Input>
<InputRightAddon p={0}>
@ -192,12 +186,12 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
w="100%"
m={0}
p={0}
bg="#1A1D22"
bg="black.300"
_hover={{
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
}}
_focus={{
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
}}
{...getToggleButtonProps({})}
aria-label={"toggle menu"}
@ -212,7 +206,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
direction="column"
className="menuListTim"
{...getMenuProps()}
bgColor="#1A1D22"
bgColor="black.300"
borderRadius="md"
boxShadow="lg"
pos="absolute"
@ -297,7 +291,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
border="1px solid white"
borderRadius="7px"
>
<InputLeftAddon bg="#1A1D22">
<InputLeftAddon bg="black.300">
<FormLabel
fontWeight="600"
// alignSelf="flex-start"
@ -307,15 +301,9 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
</FormLabel>
</InputLeftAddon>
<Input
bg="#1A1D22"
type="text"
autoComplete="off"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
variant="bw"
placeholder="Address to subscribe to"
name="address"
value={address}
@ -343,7 +331,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
border="1px solid white"
borderRadius="7px"
>
<InputLeftAddon bgColor="#1A1D22">
<InputLeftAddon bgColor="black.300">
<FormLabel
fontWeight="600"
// alignSelf="flex-start"
@ -355,13 +343,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
<Input
type="text"
autoComplete="off"
bg="#1A1D22"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
variant="bw"
placeholder="Name your label"
name="label"
value={label}
@ -379,7 +361,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
)}
{type && (
<FormControl isInvalid={errors?.color} bg="#1A1D22">
<FormControl isInvalid={errors?.color} bg="black.300">
{!isModal ? (
<Flex
direction="row"
@ -398,7 +380,6 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
>
<IconButton
size="md"
// colorScheme="blue"
color={"white.100"}
_hover={{ bgColor: { color } }}
bgColor={color}
@ -407,14 +388,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
icon={<BiRefresh />}
/>
<Input
variant="outline"
backgroundColor="#1A1D22"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
variant="bw"
type="input"
placeholder="color"
name="color"
@ -452,14 +426,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
type="input"
placeholder="color"
name="color"
variant="outline"
backgroundColor="#1A1D22"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
variant="bw"
ref={register({ required: "color is required!" })}
value={color}
onChange={() => null}
@ -471,12 +438,11 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
styles={{
default: {
card: {
background: "#1A1D22",
background: "black.300",
border: "1px solid white",
},
triangle: {
borderBottomColor: "white",
// border: "1px solid white",
},
},
}}

62
frontend/src/components/SignIn.js
Wyświetl plik

@ -17,7 +17,7 @@ import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
const SignIn = ({ toggleModal }) => {
const { handleSubmit, errors, register } = useForm();
const { login, isLoading, data } = useLogin();
const [showPassword, togglePassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
useEffect(() => {
if (!data) {
@ -43,29 +43,12 @@ const SignIn = ({ toggleModal }) => {
<FormControl isInvalid={errors.username}>
<InputGroup bg="black">
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
autoComplete="username"
variant="outline"
variant="bw"
placeholder="Enter your username or email"
errorBorderColor="#EE8686"
name="username"
{...register("username", { required: true })}
ref={register({ required: "Username is required" })}
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
/>
</InputGroup>
</FormControl>
@ -80,31 +63,14 @@ const SignIn = ({ toggleModal }) => {
<FormControl isInvalid={errors.password}>
<InputGroup bg="black">
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
autoComplete="current-password"
variant="outline"
variant="bw"
placeholder="Enter your password"
errorBorderColor="#EE8686"
name="password"
type={showPassword ? "text" : "password"}
ref={register({ required: "Password is required" })}
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
/>
<InputRightElement onClick={() => togglePassword(!showPassword)}>
<InputRightElement onClick={() => setShowPassword(!showPassword)}>
<CustomIcon icon="password" />
</InputRightElement>
</InputGroup>
@ -125,26 +91,12 @@ const SignIn = ({ toggleModal }) => {
<Button
mt="30px"
mb="10px"
bg="#F56646"
fontWeight="700"
borderRadius="30px"
padding="10px 30px"
fontSize="20px"
height="46px"
color="#ffffff"
h="46px"
fontSize="lg"
variant="plainOrange"
type="submit"
width="100%"
variant="solid"
isLoading={isLoading}
_hover={{
backgroundColor: "#F4532F",
}}
_focus={{
backgroundColor: "#F4532F",
}}
_active={{
backgroundColor: "#F4532F",
}}
>
Login
</Button>

81
frontend/src/components/SignUp.js
Wyświetl plik

@ -17,7 +17,7 @@ import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
const SignUp = ({ toggleModal }) => {
const { handleSubmit, errors, register } = useForm();
const { signUp, isLoading, isSuccess } = useSignUp();
const [showPassword, togglePassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
useEffect(() => {
if (isSuccess) {
@ -41,29 +41,12 @@ const SignUp = ({ toggleModal }) => {
<FormControl isInvalid={errors.username}>
<InputGroup>
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
autoComplete="username"
variant="outline"
variant="bw"
placeholder="Enter your username or email"
errorBorderColor="#EE8686"
name="username"
{...register("username", { required: true })}
ref={register({ required: "Username is required" })}
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
/>
</InputGroup>
</FormControl>
@ -79,24 +62,7 @@ const SignUp = ({ toggleModal }) => {
<FormControl isInvalid={errors.email}>
<InputGroup>
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
variant="outline"
errorBorderColor="#EE8686"
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
variant="bw"
placeholder="Enter your email"
name="email"
autoComplete="email"
@ -115,31 +81,14 @@ const SignUp = ({ toggleModal }) => {
<FormControl isInvalid={errors.password}>
<InputGroup bg="black">
<Input
borderColor="white"
bg="#1A1D22"
color="white"
_placeholder={{ textColor: "#CDCDCD" }}
autoComplete="current-password"
variant="outline"
variant="bw"
placeholder="Enter your password"
errorBorderColor="#EE8686"
name="password"
type={showPassword ? "text" : "password"}
ref={register({ required: "Password is required" })}
_hover={{
backgroundColor: "#1A1D22",
}}
_focus={{
backgroundColor: "#1A1D22",
}}
_autofill={{
backgroundColor: "#1A1D22",
textFillColor: "white",
boxShadow: "0 0 0px 1000px #1A1D22 inset",
transition: "background-color 5000s ease-in-out 0s",
}}
/>
<InputRightElement onClick={() => togglePassword(!showPassword)}>
<InputRightElement onClick={() => setShowPassword(!showPassword)}>
<CustomIcon icon="password" />
</InputRightElement>
</InputGroup>
@ -148,26 +97,12 @@ const SignUp = ({ toggleModal }) => {
<Button
mt="30px"
mb="10px"
bg="#F56646"
fontWeight="700"
borderRadius="30px"
padding="10px 30px"
fontSize="20px"
height="46px"
color="#ffffff"
fontSize="lg"
h="46px"
type="submit"
width="100%"
variant="solid"
variant="plainOrange"
isLoading={isLoading}
_hover={{
backgroundColor: "#F4532F",
}}
_focus={{
backgroundColor: "#F4532F",
}}
_active={{
backgroundColor: "#F4532F",
}}
>
Register
</Button>

3
frontend/src/components/TokenRequest.js
Wyświetl plik

@ -64,6 +64,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
<chakra.label for="pwd">API key label:</chakra.label>
<Input
w="100%"
variant="bw"
ref={register}
name="token_note"
placeholder="My API key label"
@ -81,7 +82,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
<Input
id="pwd"
colorScheme="blue"
variant="filled"
variant="bw"
isDisabled={createToken.isLoading}
placeholder="This action requires your password to confirm"
name="password"

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

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