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

Changes from dev review.

pull/678/head
Kellan Wampler 2022-10-13 13:33:27 -04:00
rodzic 6826dfeda1
commit d64c1a46df
5 zmienionych plików z 54 dodań i 49 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useState, Suspense, useEffect, useContext } from "react";
import React, { Suspense, useEffect, useContext } from "react";
import {
Fade,
Flex,
@ -8,14 +8,13 @@ import {
Stack,
Link,
Center,
useMediaQuery,
Grid,
Text,
GridItem,
SimpleGrid,
Image as ChakraImage,
HStack,
VStack,
HStack,
Accordion,
Icon,
Spacer,
@ -72,25 +71,8 @@ const assets = {
};
const Homepage = () => {
const [background, setBackground] = useState("background720");
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);
const router = useRouter();
const { isInit } = useUser();
const [
isLargerThan720px,
isLargerThan1920px,
isLargerThan2880px,
isLargerThan3840px,
] = useMediaQuery([
"(min-width: 720px)",
"(min-width: 1920px)",
"(min-width: 2880px)",
"(min-width: 3840px)",
]);
const { buttonReport } = useContext(AnalyticsContext);
@ -276,11 +258,14 @@ const Homepage = () => {
</Center>
</Stack>
</Stack>
<Box w={[null, null, "55%"]}>
<HStack h="100%">
<Center w={["50%", "43%"]} h={["auto", "100%"]}>
<Box w={["100%", "70%", "60%"]}>
<HStack h="100%" alignItems="flex-start">
<Flex w={["50%", "43%"]} h={["auto", "100%"]}>
<Flex w="100%">
<Stack direction={["column", "row"]}>
<Stack
direction={["column", "column", "row"]}
textAlign="center"
>
<Text
fontSize={[
"xl",
@ -295,17 +280,28 @@ const Homepage = () => {
>
&gt;$4b
</Text>
<Text alignSelf="center">
<Text
w="100%"
alignSelf={[
"flex-start",
"flex-start",
"center",
]}
fontSize={["sm", "md"]}
>
transaction volume.
<br />
And growing
</Text>
</Stack>
</Flex>
</Center>
</Flex>
<Center w={["50%", "57%"]} h="100%">
<Flex w="100%" justifyContent="right">
<Stack direction={["column", "row"]}>
<Stack
direction={["column", "column", "row"]}
textAlign="center"
>
<Text
fontSize={[
"xl",
@ -320,7 +316,15 @@ const Homepage = () => {
>
&gt;44k
</Text>
<Text w="100%" alignSelf="center">
<Text
w="100%"
alignSelf={[
"flex-start",
"flex-start",
"center",
]}
fontSize={["sm", "md"]}
>
active users in game economies
<br />
built with our engine
@ -337,7 +341,7 @@ const Homepage = () => {
<GridItem
px={["5%", null, "12%", "15%"]}
py={8}
py={(4, 8)}
colSpan="12"
bgColor={BACKGROUND_COLOR}
>
@ -486,13 +490,17 @@ const Homepage = () => {
<Heading {...HEADING_PROPS} textAlign="center" pb={6} as="h2">
Features
</Heading>
<Center fontSize={["sm", "sm", "md", "md", "lg", "lg"]} py={4}>
<Center fontSize={["md", "md", null]} py={4}>
<VStack>
<Text textAlign="center">
{`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy`}
</Text>
<Text textAlign="center">
{`on-chain mechanics with one click. Read our Use Cases or explore the features to know more.`}
<Text
textAlign="center"
display="inline-block"
w={["100%", "100%", "70%"]}
>
Lootboxes, crafting recipes, deck building, you name it!
With Moonstream Engine you can deploy on-chain mechanics
with one click. Read our Use Cases or explore the features
to know more.
</Text>
</VStack>
</Center>

5
frontend/src/components/Footer.js
Wyświetl plik

@ -74,10 +74,7 @@ const Footer = () => (
<Link href="/" alignSelf="center">
<ChakraImage
alignSelf="center"
// as={Link}
// to="/"
h="2.5rem"
minW="2.5rem"
w="160px"
src={PRIMARY_MOON_LOGO_URL}
alt="Go to app root"
/>

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

@ -46,12 +46,12 @@ const LandingNavbar = () => {
</>
)}
<Flex
pl={ui.isMobileView ? 2 : "100px"}
pl={ui.isMobileView ? 2 : "60px"}
justifySelf="flex-start"
h="48px"
py={1}
flexBasis="200px"
flexGrow={1}
flexGrow={0.6}
id="Logo Container"
alignItems="center"
>
@ -68,8 +68,7 @@ const LandingNavbar = () => {
{!ui.isMobileView && (
<>
<Spacer />
<ButtonGroup variant="link" spacing={4} pr={16}>
<ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
{SITEMAP.map((item, idx) => {
return (
<React.Fragment key={`Fragment-${idx}`}>
@ -110,7 +109,8 @@ const LandingNavbar = () => {
</React.Fragment>
);
})}
</ButtonGroup>
<ButtonGroup variant="link" spacing={4} pr={16}>
{ui.isLoggedIn && (
<RouterLink href="/welcome" passHref>
<Button

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

@ -184,10 +184,10 @@ const Sidebar = () => {
</>
)}
<Divider
colorScheme="blue"
colorScheme="white"
bgColor="gray.300"
color="blue.700"
borderColor="blue.700"
color="white"
borderColor="white"
/>
</Menu>
</SidebarContent>

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

@ -65,13 +65,13 @@
z-index: 101;
}
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-header {
border-bottom: 1px solid #212990;
border-bottom: 1px solid gray;
}
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-content {
flex-grow: 1;
}
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-footer {
border-top: 1px solid #212990;
border-top: 1px solid gray;
}
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout ul {
list-style-type: none;