ff7336111d
* Reskin the dapp to match the new design * Update theme for button * Update auth package * Add transition for smoother darklight mode * Update styling to be more responsive * Match to design * Remove empty whitespace
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";
|
|
|
|
const DefaultView: React.FC<{ onClick: () => void }> = ({ onClick }) => {
|
|
return (
|
|
<Box>
|
|
<Box position={{ position: "relative" }}>
|
|
<Flex
|
|
style={{ position: "relative", top: "1.5em" }}
|
|
justifyContent="center"
|
|
>
|
|
<Flex
|
|
style={{ position: "absolute", top: "5%" }}
|
|
justifyContent="center"
|
|
>
|
|
<Image
|
|
style={{ filter: "blur(10px)" }}
|
|
src="/auth.png"
|
|
alt="auth"
|
|
/>
|
|
</Flex>
|
|
<Image style={{ filter: "blur(1px)" }} src="/auth.png" alt="auth" />
|
|
</Flex>
|
|
</Box>
|
|
<Flex
|
|
flexDir={"column"}
|
|
gap="5"
|
|
padding="2em 3em"
|
|
borderRadius={"24px"}
|
|
className="bg-secondary"
|
|
alignItems={"center"}
|
|
>
|
|
<Heading>Sign in</Heading>
|
|
<Button
|
|
minW="80%"
|
|
paddingY="1.25em"
|
|
fontSize={"1.25em"}
|
|
onClick={onClick}
|
|
borderRadius={"16px"}
|
|
background="#3396FF"
|
|
>
|
|
<Flex gap="1em">
|
|
<Image src="/wc.png" fit="scale-down" alt="WC" />
|
|
<span style={{ color: "white" }}>WalletConnect</span>
|
|
</Flex>
|
|
</Button>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DefaultView;
|