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

themes instead props

pull/709/head
Anton Mushnin 2022-11-17 14:07:20 +03:00
rodzic 6b106eb77f
commit 05dd017a50
8 zmienionych plików z 61 dodań i 214 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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;

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

@ -184,6 +184,7 @@ const theme = extendTheme({
black: {
100: "#333399",
200: "#111442",
300: "#1A1D22",
},
},
});

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>

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>