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

Tweeks per review with Iskhan.

pull/678/head
Kellan Wampler 2022-10-13 10:25:23 -04:00
rodzic 4fbcdf0422
commit f47c4469b3
6 zmienionych plików z 90 dodań i 88 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

143
frontend/pages/index.js
Wyświetl plik

@ -192,7 +192,7 @@ const Homepage = () => {
_hover={{ transform: "scale(1.05)", transition: "0.42s" }} _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
cursor="pointer" cursor="pointer"
m={[2, 3, 3, 4, 8, 12]} m={[2, 3, 3, 4, 8, 12]}
w={["155px", "240px"]} minW={["155px", "180px", "200px", "240px"]}
h={["200px", "300px"]} h={["200px", "300px"]}
> >
<ChakraImage <ChakraImage
@ -203,7 +203,7 @@ const Homepage = () => {
/> />
<Heading <Heading
textAlign="center" textAlign="center"
fontSize={["sm", "sm", "md", "md", null]} fontSize={["md", "md", "lg", "lg", null]}
fontWeight="normal" fontWeight="normal"
> >
{title} {title}
@ -247,7 +247,7 @@ const Homepage = () => {
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
id="Header grid item" id="Header grid item"
> >
<chakra.header boxSize="full" minH={["60vh", "100vh"]} mb={0}> <chakra.header boxSize="full" mb={0}>
<Box <Box
bgPos="bottom" bgPos="bottom"
// bgColor="transparent" // bgColor="transparent"
@ -259,7 +259,7 @@ const Homepage = () => {
align="center" align="center"
justify="center" justify="center"
boxSize="full" boxSize="full"
pt={["120px", "120px", "150px"]} pt={["90px", "120px"]}
pb={10} pb={10}
px="5%" px="5%"
flexDir="column" flexDir="column"
@ -272,34 +272,34 @@ const Homepage = () => {
w="100%" w="100%"
> >
<Heading <Heading
fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]} fontSize={["4xl", "4xl", "5xl", "5xl", "5xl", "6xl"]}
fontWeight="semibold" fontWeight="bold"
color="white" color="white"
as="h1" as="h1"
pb={[8, 8, 12]} pb={[2, 4]}
maxW={[null, "90%", "80%", "58%"]} maxW={[null, "90%", "80%", "40%"]}
> >
{DEFAULT_METATAGS.title} {DEFAULT_METATAGS.title}
</Heading> </Heading>
<chakra.span <chakra.span
pb={[6, 6, 12]} pb={[2, 6]}
fontSize={["sm", "md", "lg", "lg", "xl", "xl"]} fontSize={["md", "md", "md", "md", null]}
display="inline-block" display="inline-block"
color="white" color="white"
maxW={[null, "85%", "75%"]} maxW={[null, "85%", "75%", "55%"]}
> >
{DEFAULT_METATAGS.description} {DEFAULT_METATAGS.description}
</chakra.span> </chakra.span>
<Stack <Stack
direction={[ direction={[
"column", "column",
"column", "row",
"row", "row",
"row", "row",
"row", "row",
"row", "row",
]} ]}
pb={"120px"} pb={10}
> >
<Center> <Center>
<RouteButton <RouteButton
@ -307,7 +307,7 @@ const Homepage = () => {
bg={ bg={
"linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);" "linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);"
} }
minW={["150px", null]} minW={["320px", "150px", null]}
onClick={() => { onClick={() => {
buttonReport( buttonReport(
"Boost", "Boost",
@ -327,7 +327,7 @@ const Homepage = () => {
borderWidth="2px" borderWidth="2px"
borderColor="white" borderColor="white"
textColor="white" textColor="white"
minW={["200px", null]} minW={["320px", "200px", null]}
onClick={() => { onClick={() => {
buttonReport( buttonReport(
"Discord", "Discord",
@ -366,7 +366,7 @@ const Homepage = () => {
> >
&gt;$4b &gt;$4b
</Text> </Text>
<Text> <Text alignSelf="center">
transaction volume. transaction volume.
<br /> <br />
And growing And growing
@ -408,7 +408,7 @@ const Homepage = () => {
<GridItem <GridItem
px={["5%", null, "12%", "15%"]} px={["5%", null, "12%", "15%"]}
py={10} py={8}
colSpan="12" colSpan="12"
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
> >
@ -421,17 +421,19 @@ const Homepage = () => {
<Heading <Heading
as="h3" as="h3"
{...HEADING_PROPS} {...HEADING_PROPS}
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]} fontSize={["2xl", null]}
fontWeight="semibold" fontWeight="semibold"
textAlign="center" textAlign="center"
px="20px"
> >
Trusted by visionaries in the industry <Text>Trusted by visionaries</Text>
<Text>in the industry</Text>
</Heading> </Heading>
<Flex <Flex
wrap="wrap" wrap="wrap"
direction="row" direction="row"
justifyContent="center" justifyContent="center"
pb={10} pb={[4, 10]}
> >
<Suspense fallback={""}> <Suspense fallback={""}>
{/* <TrustedBadge {/* <TrustedBadge
@ -475,9 +477,10 @@ const Homepage = () => {
<Heading <Heading
as="h3" as="h3"
{...HEADING_PROPS} {...HEADING_PROPS}
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]} fontSize={["2xl", null]}
fontWeight="semibold" fontWeight="semibold"
textAlign="center" textAlign="center"
px="20px"
> >
Supported blockchains Supported blockchains
</Heading> </Heading>
@ -485,7 +488,7 @@ const Homepage = () => {
wrap="wrap" wrap="wrap"
direction="row" direction="row"
justifyContent="center" justifyContent="center"
pb={10} pb={[4, 10]}
> >
<Suspense fallback={""}> <Suspense fallback={""}>
<TrustedBadge <TrustedBadge
@ -513,16 +516,17 @@ const Homepage = () => {
<Heading <Heading
as="h3" as="h3"
{...HEADING_PROPS} {...HEADING_PROPS}
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]} fontSize={["2xl", null]}
fontWeight="semibold" fontWeight="semibold"
textAlign="center" textAlign="center"
px="20px"
> >
Upcoming Integrations Upcoming Integrations
</Heading> </Heading>
<Flex wrap="wrap" direction="row" justifyContent="center"> <Flex wrap="wrap" direction="row" justifyContent="center">
<Suspense fallback={""}> <Suspense fallback={""}>
<TrustedBadge <TrustedBadge
scaling={0.6} scaling={0.8}
name="forte" name="forte"
ImgURL={assets["forte"]} ImgURL={assets["forte"]}
boxURL="https://www.forte.io/" boxURL="https://www.forte.io/"
@ -550,7 +554,7 @@ const Homepage = () => {
</VStack> </VStack>
</GridItem> </GridItem>
<GridItem <GridItem
px={["3%", null, "12%", "15%"]} px={["5%", null, "12%", "15%"]}
colSpan="12" colSpan="12"
pt={12} pt={12}
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
@ -560,17 +564,21 @@ const Homepage = () => {
Features Features
</Heading> </Heading>
<Center fontSize={["sm", "sm", "md", "md", "lg", "lg"]} py={4}> <Center fontSize={["sm", "sm", "md", "md", "lg", "lg"]} py={4}>
<chakra.span textAlign="center" width="85%"> <VStack>
{`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy on-chain mechanics with one click. <Text textAlign="center">
Read our Use Cases or explore the features to know more. `} {`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy`}
</chakra.span> </Text>
<Text textAlign="center">
{`on-chain mechanics with one click. Read our Use Cases or explore the features to know more.`}
</Text>
</VStack>
</Center> </Center>
<SimpleGrid <SimpleGrid
columns={[2, 2, 4, null]} columns={[2, 2, 4, null]}
justifyContent={["flex-end", "center"]} justifyContent={["flex-end", "flex-end", "center"]}
w="100%" w="100%"
spacing={["0px", "40px"]} spacing={["0px", "40px"]}
mx={[0, -2, -4]} mx={[-1, -2, -4]}
paddingTop="20px" paddingTop="20px"
> >
<Feature <Feature
@ -623,14 +631,7 @@ const Homepage = () => {
<RouteButton <RouteButton
variant="whiteOnOrange" variant="whiteOnOrange"
backgroundColor="#F56646" backgroundColor="#F56646"
minW={[ minW={["320px", "300px", null]}
"250px",
"290px",
"300px",
"300px",
"350px",
"400px",
]}
onClick={() => { onClick={() => {
buttonReport("Features", "features", "landing"); buttonReport("Features", "features", "landing");
}} }}
@ -646,14 +647,7 @@ const Homepage = () => {
borderWidth="2px" borderWidth="2px"
borderColor="white" borderColor="white"
textColor="white" textColor="white"
minW={[ minW={["320px", "300px", null]}
"220px",
"250px",
"250px",
"300px",
"350px",
"400px",
]}
onClick={() => { onClick={() => {
buttonReport("Use Cases", "features", "landing"); buttonReport("Use Cases", "features", "landing");
}} }}
@ -670,7 +664,7 @@ const Homepage = () => {
</GridItem> </GridItem>
<GridItem <GridItem
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
py={10} py={[4, 10]}
colSpan="12" colSpan="12"
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
> >
@ -682,12 +676,15 @@ const Homepage = () => {
> >
Our Workflow Our Workflow
</Heading> </Heading>
<Stack textAlign="center" direction={["column", "row"]}> <Stack
textAlign="center"
direction={["column", "column", "row"]}
>
<VStack alignItems="center" px={4} py={4}> <VStack alignItems="center" px={4} py={4}>
<Flex mb={5}> <Flex mb={5}>
<Heading <Heading
as="h3" as="h3"
fontSize={["md", "md", "lg", "lg"]} fontSize={["lg", "lg", null]}
display="inline-block" display="inline-block"
fontWeight="semibold" fontWeight="semibold"
> >
@ -696,7 +693,7 @@ const Homepage = () => {
</Flex> </Flex>
<Flex> <Flex>
<chakra.span <chakra.span
fontSize={["sm", "sm", "md", "md"]} fontSize={["md", "md", null]}
display="inline-block" display="inline-block"
> >
So you decided to build a healthy economy on the So you decided to build a healthy economy on the
@ -708,7 +705,7 @@ const Homepage = () => {
<Flex mb={5}> <Flex mb={5}>
<Heading <Heading
as="h3" as="h3"
fontSize={["md", "md", "lg", "lg"]} fontSize={["lg", "lg", null]}
display="inline-block" display="inline-block"
fontWeight="semibold" fontWeight="semibold"
> >
@ -717,7 +714,7 @@ const Homepage = () => {
</Flex> </Flex>
<Flex> <Flex>
<chakra.span <chakra.span
fontSize={["sm", "sm", "md", "md"]} fontSize={["md", "md", null]}
display="inline-block" display="inline-block"
> >
Sign up to get whitelisted. We&apos;ll reach out to you Sign up to get whitelisted. We&apos;ll reach out to you
@ -730,7 +727,7 @@ const Homepage = () => {
<Flex mb={5}> <Flex mb={5}>
<Heading <Heading
as="h3" as="h3"
fontSize={["md", "md", "lg", "lg"]} fontSize={["lg", "lg", null]}
display="inline-block" display="inline-block"
fontWeight="semibold" fontWeight="semibold"
> >
@ -739,7 +736,7 @@ const Homepage = () => {
</Flex> </Flex>
<Flex mb={5}> <Flex mb={5}>
<chakra.span <chakra.span
fontSize={["sm", "sm", "md", "md"]} fontSize={["md", "md", null]}
display="inline-block" display="inline-block"
> >
During onboarding pick game mechanics that you&apos;d During onboarding pick game mechanics that you&apos;d
@ -757,7 +754,7 @@ const Homepage = () => {
> >
<Heading <Heading
as="h3" as="h3"
fontSize={["md", "md", "lg", "lg"]} fontSize={["lg", "lg", null]}
display="inline-block" display="inline-block"
fontWeight="semibold" fontWeight="semibold"
> >
@ -766,7 +763,7 @@ const Homepage = () => {
</Center> </Center>
<Flex> <Flex>
<chakra.span <chakra.span
fontSize={["sm", "sm", "md", "md"]} fontSize={["md", "md", null]}
display="inline-block" display="inline-block"
> >
You&apos;re at the end of your blockchain development You&apos;re at the end of your blockchain development
@ -778,7 +775,7 @@ const Homepage = () => {
</Stack> </Stack>
<Center pt={14}> <Center pt={14}>
<Icon as={HiOutlineChatAlt2} mr={2}></Icon> <Icon as={HiOutlineChatAlt2} mr={2}></Icon>
<Text> <Text fontSize={["xs", "sm", "md", "md", null]}>
Have something to discuss before signing up?{" "} Have something to discuss before signing up?{" "}
<Link <Link
href="/discordleed" href="/discordleed"
@ -794,11 +791,10 @@ const Homepage = () => {
</Center> </Center>
</GridItem> </GridItem>
<GridItem <GridItem
px={["7%", null, "12%", "15%"]} px={["5%", null, "12%", "15%"]}
py={10} py={[4, 10]}
colSpan="12" colSpan="12"
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
minH="50vh"
> >
<Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}> <Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
FAQ FAQ
@ -870,7 +866,7 @@ const Homepage = () => {
onClick={() => { onClick={() => {
buttonReport("Moonstream Github", "faq", "landing"); buttonReport("Moonstream Github", "faq", "landing");
}} }}
textColor="blue.700" textColor="white"
isExternal isExternal
> >
{" "} {" "}
@ -1001,7 +997,6 @@ const Homepage = () => {
colSpan="12" colSpan="12"
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
textColor="white" textColor="white"
minH="40vh"
> >
<Heading <Heading
as="h2" as="h2"
@ -1014,10 +1009,10 @@ const Homepage = () => {
</Heading> </Heading>
<Center> <Center>
<Flex <Flex
width="81%"
wrap="wrap" wrap="wrap"
direction="row" direction="row"
rounded={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]} rounded={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
justifyContent="center"
> >
<Suspense fallback={""}> <Suspense fallback={""}>
<TrustedBadge <TrustedBadge
@ -1068,35 +1063,38 @@ const Homepage = () => {
</Center> </Center>
</GridItem> </GridItem>
<GridItem <GridItem
px={["7%", null, "12%", "15%"]} px={["5%", null, "12%", "15%"]}
py={10} pt={10}
pb={20}
colSpan="12" colSpan="12"
bgColor={BACKGROUND_COLOR} bgColor={BACKGROUND_COLOR}
minH="50vh"
> >
<Stack <Stack
direction={["column", "row"]} direction={["column", "column", "row"]}
alignItems="center"
bgColor={lightOrangeColor} bgColor={lightOrangeColor}
borderWidth="2px" borderWidth="2px"
borderColor="white" borderColor="white"
borderRadius="30px" borderRadius="30px"
textColor="white" textColor="white"
px={10} px={[0, 10]}
py={8} py={6}
mb={8} mb={8}
> >
<Box> <Box>
<Heading <Heading
as="h2" as="h2"
fontSize={["lg", "xl", null]} fontSize={["4xl", "4xl", null]}
letterSpacing="wide" letterSpacing="wide"
pb={4} px={2}
pb={1}
textAlign={["center", "left"]} textAlign={["center", "left"]}
> >
Sign up to grow your economy Sign up to grow your economy
</Heading> </Heading>
<Text <Text
fontSize={["sm", "sm", "md", "md", null]} fontSize={["sm", "sm", "md", "md", null]}
px={2}
py={4} py={4}
textAlign={["center", "left"]} textAlign={["center", "left"]}
> >
@ -1108,6 +1106,7 @@ const Homepage = () => {
variant="orangeAndBlue" variant="orangeAndBlue"
bg="white" bg="white"
minW={["250px", "250px", null]} minW={["250px", "250px", null]}
textColor={BACKGROUND_COLOR}
onClick={() => { onClick={() => {
buttonReport("Boost", "page-bottom", "landing"); buttonReport("Boost", "page-bottom", "landing");
}} }}

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

@ -122,10 +122,10 @@ const variantOrangeAndBlue = () => {
borderRadius: "70px", borderRadius: "70px",
shadow: "md", shadow: "md",
variant: "solid", variant: "solid",
fontSize: ["sm", "md", "lg", "lg", "xl", "xl"], fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
textColor: "blue.1200", textColor: "white",
bg: "#FF8B73", bg: "#FF8B73",
py: 5, py: 3,
px: 5, px: 5,
}; };
}; };
@ -138,10 +138,10 @@ const variantWhiteOnOrange = () => {
borderRadius: "70px", borderRadius: "70px",
shadow: "md", shadow: "md",
variant: "solid", variant: "solid",
fontSize: ["sm", "md", "lg", "lg", "xl", "xl"], fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
textColor: "white", textColor: "white",
bg: "#FF8B73", bg: "#FF8B73",
py: 5, py: 3,
px: 5, px: 5,
}; };
}; };

12
frontend/src/components/FAQCard.js
Wyświetl plik

@ -13,11 +13,11 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
const iconColor = "#F56646"; const iconColor = "#F56646";
return ( return (
<AccordionItem borderWidth={0} borderBottomWidth="0!important"> <AccordionItem borderWidth={0} borderBottomWidth="0!important" px={0}>
{({ isExpanded }) => ( {({ isExpanded }) => (
<> <>
<AccordionButton> <AccordionButton px={0}>
<Box flex="1" textAlign="left" pr="10px"> <Box flex="1" textAlign="left">
<Heading <Heading
{...headingProps} {...headingProps}
as="h3" as="h3"
@ -32,7 +32,11 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
<AddIcon color={iconColor} fontSize="12px" /> <AddIcon color={iconColor} fontSize="12px" />
)} )}
</AccordionButton> </AccordionButton>
<AccordionPanel pb={4} fontSize={["sm", "sm", "md", "md", null]}> <AccordionPanel
px={0}
pb={4}
fontSize={["sm", "sm", "md", "md", null]}
>
{panelContent} {panelContent}
</AccordionPanel> </AccordionPanel>
</> </>

9
frontend/src/components/LandingNavbar.js
Wyświetl plik

@ -46,7 +46,7 @@ const LandingNavbar = () => {
</> </>
)} )}
<Flex <Flex
pl={ui.isMobileView ? 2 : 16} pl={ui.isMobileView ? 2 : "100px"}
justifySelf="flex-start" justifySelf="flex-start"
h="48px" h="48px"
py={1} py={1}
@ -58,8 +58,7 @@ const LandingNavbar = () => {
<RouterLink href="/" passHref> <RouterLink href="/" passHref>
<Link <Link
as={Image} as={Image}
w="auto" w={"160px"}
h={["70%", "85%"]}
justifyContent="left" justifyContent="left"
src={PRIMARY_MOON_LOGO_URL} src={PRIMARY_MOON_LOGO_URL}
alt="Moonstream logo" alt="Moonstream logo"
@ -133,11 +132,11 @@ const LandingNavbar = () => {
variant="solid" variant="solid"
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })} onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
size="sm" size="sm"
fontWeight="400" fontWeight="bold"
borderRadius="2xl" borderRadius="2xl"
textColor="white" textColor="white"
> >
Sign Up Sign up
</Button> </Button>
)} )}
{!ui.isLoggedIn && ( {!ui.isLoggedIn && (

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

@ -74,7 +74,7 @@ const Sidebar = () => {
/> />
<RouterLink href="/" passHref> <RouterLink href="/" passHref>
<Image <Image
maxW="155px" w="160px"
py="0.75rem" py="0.75rem"
pl={1} pl={1}
src={PRIMARY_MOON_LOGO_URL} src={PRIMARY_MOON_LOGO_URL}

2
frontend/styles/sidebar.css
Wyświetl plik

@ -39,7 +39,7 @@
z-index: 1009; z-index: 1009;
} }
.pro-sidebar > .pro-sidebar-inner { .pro-sidebar > .pro-sidebar-inner {
background: #212990; background: #1A1D22;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 101; z-index: 101;