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

Merge pull request #712 from bugout-dev/landing-page-improvements 

Landing page improvements
pull/719/head
Anton Mushnin 2022-11-21 17:10:10 +03:00 zatwierdzone przez GitHub
rodzic 100d024101 9d566cf62a
commit 7280015ff7
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
20 zmienionych plików z 166 dodań i 45 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
frontend/pages/contact/index.js
Wyświetl plik

@ -38,6 +38,7 @@ const Contact = () => {
textColor="black"
bgColor="white"
position="relative"
pt="72px"
>
<Icon
as={BiArrowBack}

1
frontend/pages/features/index.js
Wyświetl plik

@ -23,6 +23,7 @@ const Features = () => {
id="container"
maxW="container.xl"
px={["10%", "10%", "7%", "0"]}
mt="72px"
>
<Heading as="h1" hidden>
Moonstream feautes

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

@ -721,7 +721,7 @@ const Homepage = () => {
<Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
FAQ
</Heading>
<Accordion defaultIndex={[0]} allowMultiple allowToggle>
<Accordion defaultIndex={[-1]} allowMultiple allowToggle>
<FAQCard
heading="I’m a game designer. What can Moonstream engine do for me?"
headingProps={HEADING_PROPS}

2
frontend/pages/privacy-policy/index.js
Wyświetl plik

@ -4,7 +4,7 @@ import { DEFAULT_METATAGS } from "../../src/core/constants";
import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
const PrivacyPolicy = () => (
<Box>
<Box mt="72px">
<Box px="1.5rem" m="auto" mb={8} maxWidth="1199.98px" minHeight="60vh">
<Heading my={8} as="h1">
Privacy Policy for Moonstream

1
frontend/pages/status/index.js
Wyświetl plik

@ -58,6 +58,7 @@ const Status = () => {
px={12}
py={2}
borderTopRadius="xl"
mt="72px"
>
{`Status page`}
</Heading>

2
frontend/pages/team/index.js
Wyświetl plik

@ -49,7 +49,7 @@ const Team = () => {
alignItems="center"
w="100%"
>
<Stack mx={margin} maxW="1700px" w="100%">
<Stack mt="72px" mx={margin} maxW="1700px" w="100%">
<SimpleGrid
px={12}
alignItems="start"

4
frontend/pages/tos/index.js
Wyświetl plik

@ -5,9 +5,9 @@ import { DEFAULT_METATAGS } from "../../src/core/constants";
import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
const TermsOfService = () => (
<Box>
<Box mt="72px">
<Box px="1.5rem" m="auto" mb={8} maxWidth="1199.98px" minHeight="60vh">
<Heading my={8} as="h1">
<Heading textAlign="start" my={8} as="h1">
Moonstream Terms of Service
</Heading>
<Text fontSize="md">

4
frontend/pages/whitepapers.js
Wyświetl plik

@ -6,7 +6,9 @@ import { MdPictureAsPdf } from "react-icons/md";
const Papers = () => {
return (
<VStack>
<Heading py={12}>Whitepapers</Heading>
<Heading pb={12} pt="72px">
Whitepapers
</Heading>
<Link
color="orange.900"
href="https://github.com/bugout-dev/moonstream/blob/main/datasets/nfts/papers/ethereum-nfts.pdf"

4
frontend/public/icons/password.svg
Wyświetl plik

@ -5,11 +5,11 @@
<g id="04-01-register" transform="translate(-895.000000, -362.000000)">
<g id="Group" transform="translate(891.000000, 356.000000)">
<rect id="Rectangle-Copy-5" x="0" y="0" width="24" height="24"></rect>
<g id="Group-6" transform="translate(5.000000, 7.000000)" stroke="#83859E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<g id="Group-6" transform="translate(5.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M0,5.09090909 C0,5.09090909 2.54545455,-2.57571742e-14 7,-2.57571742e-14 C11.4545455,-2.57571742e-14 14,5.09090909 14,5.09090909 C14,5.09090909 11.4545455,10.1818182 7,10.1818182 C2.54545455,10.1818182 0,5.09090909 0,5.09090909 Z" id="Path"></path>
<circle id="Oval" cx="7" cy="5.09090909" r="1.90909091"></circle>
</g>
</g>
</g>
</g>
</svg>
</svg>

Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 1.1 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 1.1 KiB

26
frontend/src/Theme/MenuButton/index.js 100644
Wyświetl plik

@ -0,0 +1,26 @@
const mobileVariant = () => {
return {
_active: {
backgroundColor: "black.300",
color: "white",
textDecoration: "none",
},
_focus: {
backgroundColor: "black.300",
color: "white",
textDecoration: "none",
},
color: "white",
fontSize: "sm",
margin: "0px",
padding: "0px",
};
};
const MenuButton = {
variants: {
mobile: mobileVariant,
},
};
export default MenuButton;

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

@ -2,6 +2,7 @@ import { extendTheme } from "@chakra-ui/react";
import Button from "./Button";
import Tag from "./Tag";
import Menu from "./Menu";
import MenuButton from "./MenuButton";
import Input from "./Input";
// import Spinner from "./Spinner";
import NumberInput from "./NumberInput";
@ -59,6 +60,7 @@ const theme = extendTheme({
Spinner,
Tooltip,
Heading,
MenuButton,
},
fonts: {

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

@ -145,7 +145,10 @@ const AppNavbar = () => {
as={Button}
rightIcon={<ChevronDownIcon />}
color="white"
_expanded={{ color: "white" }}
fontWeight="500"
_expanded={{ color: "white", fontWeight: "700" }}
_focus={{ textDecoration: "none" }}
_hover={{ textDecoration: "none", fontWeight: "700" }}
>
{item.title}
</MenuButton>
@ -176,11 +179,11 @@ const AppNavbar = () => {
mb="10px"
h="22px"
_hover={{
backgroundColor: "#1A1D22",
backgroundColor: "black.300",
color: "#F56646",
fontWeight: "700",
}}
_focus={{ backgroundColor: "#1A1D22" }}
_focus={{ backgroundColor: "black.300" }}
>
{child.title}
</MenuItem>

99
frontend/src/components/LandingBarMobile.js
Wyświetl plik

@ -1,18 +1,46 @@
import React, { useContext } from "react";
import RouterLink from "next/link";
import { Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
import { PRIMARY_MOON_LOGO_URL } from "../core/constants";
import {
Button,
Image,
ButtonGroup,
Spacer,
Link,
Flex,
Menu,
MenuButton,
MenuList,
MenuItem,
Portal,
Text,
Box,
} from "@chakra-ui/react";
import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
import useModals from "../core/hooks/useModals";
import UIContext from "../core/providers/UIProvider/context";
import PlainButton from "./atoms/PlainButton";
import ChakraAccountIconButton from "./AccountIconButton";
const LandingBarMobile = () => {
const ui = useContext(UIContext);
const { toggleModal } = useModals();
return (
<Flex direction="column" width={"100%"}>
<Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" px="27px">
<Flex
h={ui.isAppView ? "72px" : "89px"}
direction="column"
width={"100%"}
justifyContent={ui.isLoggedIn ? "center" : "space-between"}
>
<Flex
width={"100%"}
alignItems="center"
flex="flex: 0 0 100%"
pl="10px"
pr="27px"
mt={ui.isLoggedIn ? "0px" : "12px"}
>
<RouterLink href="/" passHref>
<Link
as={Image}
@ -29,6 +57,7 @@ const LandingBarMobile = () => {
style={{
marginRight: "12px",
fontSize: "14px",
padding: "2px 10px",
}}
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
>
@ -52,7 +81,7 @@ const LandingBarMobile = () => {
{ui.isLoggedIn && (
<RouterLink href="/welcome" passHref>
<Box
bg="#F56646"
bg="orange.1000"
alignSelf={"center"}
as={Link}
color="white"
@ -63,13 +92,71 @@ const LandingBarMobile = () => {
h="25px"
textAlign="center"
fontSize="14px"
// pb="5px"
>
<Text lineHeight="25px">App</Text>
</Box>
</RouterLink>
)}
{ui.isLoggedIn && ui.isMobileView && (
<>
<ChakraAccountIconButton variant="link" colorScheme="orange" />
</>
)}
</Flex>
<ButtonGroup
justifyContent="center"
w="100%"
variant="link"
spacing={4}
flexGrow={0.5}
>
{SITEMAP.map((item, idx) => {
return (
<React.Fragment key={`Fragment-${idx}`}>
{item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
<Menu>
<MenuButton variant="mobile" mb="0px" p="0px" as={Button}>
{item.title}
</MenuButton>
<Portal>
<MenuList
zIndex={100}
bg="black.300"
w="auto"
minW="auto"
borderRadius="10px"
p="10px 20px 10px 20px"
border="1px solid white"
>
{item.children.map((child, idx) => (
<RouterLink
shallow={true}
key={`${idx}-${item.title}-menu-links`}
href={child.path}
passHref
>
<MenuItem
color="white"
key={`menu-${idx}`}
as={"a"}
m={0}
fontSize="sm"
_focus={{ backgroundColor: "black.300" }}
_active={{ backgroundColor: "black.300" }}
_hover={{ backgroundColor: "black.300" }}
>
{child.title}
</MenuItem>
</RouterLink>
))}
</MenuList>
</Portal>
</Menu>
)}
</React.Fragment>
);
})}
</ButtonGroup>
</Flex>
);
};

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

@ -4,7 +4,6 @@ import {
Button,
Image,
ButtonGroup,
Spacer,
Link,
Flex,
Menu,
@ -36,7 +35,7 @@ const LandingNavbar = () => {
<Flex
pl={ui.isMobileView ? 2 : "60px"}
justifySelf="flex-start"
h="48px"
h={ui.isMobileView && !ui.isAppView ? "89px" : "72px"}
py={1}
flexBasis="200px"
flexGrow={0.6}
@ -75,15 +74,18 @@ const LandingNavbar = () => {
as={Button}
rightIcon={<ChevronDownIcon />}
color="white"
fontWeight="500"
fontSize="16px"
_expanded={{ color: "white" }}
_expanded={{ color: "white", fontWeight: "700" }}
_focus={{ textDecoration: "none" }}
_hover={{ textDecoration: "none", fontWeight: "700" }}
>
{item.title}
</MenuButton>
<Portal>
<MenuList
zIndex={100}
bg="#1A1D22"
bg="black.300"
w="auto"
minW="auto"
borderRadius="10px"
@ -108,11 +110,11 @@ const LandingNavbar = () => {
mb="10px"
h="22px"
_hover={{
backgroundColor: "#1A1D22",
color: "#F56646",
backgroundColor: "black.300",
color: "orange.1000",
fontWeight: "700",
}}
_focus={{ backgroundColor: "#1A1D22" }}
_focus={{ backgroundColor: "black.300" }}
>
{child.title}
</MenuItem>
@ -130,7 +132,7 @@ const LandingNavbar = () => {
{ui.isLoggedIn && (
<RouterLink href="/welcome" passHref>
<Box
bg="#F56646"
bg="orange.1000"
alignSelf={"center"}
fontWeight="700"
borderRadius="15px"
@ -151,7 +153,7 @@ const LandingNavbar = () => {
)}
{!ui.isLoggedIn && (
<Button
bg="#F56646"
bg="orange.1000"
variant="solid"
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
size="sm"
@ -180,12 +182,6 @@ const LandingNavbar = () => {
</ButtonGroup>
</>
)}
{ui.isLoggedIn && ui.isMobileView && (
<>
<Spacer />
<ChakraAccountIconButton variant="link" colorScheme="orange" />
</>
)}
</>
);
};

4
frontend/src/components/Navbar.js
Wyświetl plik

@ -15,8 +15,8 @@ const Navbar = () => {
zIndex={1}
alignItems="center"
id="Navbar"
minH={isMobileView ? "48px" : "72px"}
maxH={isMobileView ? "48px" : "72px"}
minH={isMobileView && !isAppView ? "89px" : "72px"}
maxH={isMobileView && !isAppView ? "89px" : "72px"}
bgColor={BACKGROUND_COLOR}
borderBottom="1px solid white"
direction="row"

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

@ -244,7 +244,6 @@ const NewDashboardChart = () => {
</Button>
)}
dropdownItem={(item) => {
const badgeColor = color(`${item.color}`);
return (
<Stack cursor="pointer" direction="row">
<chakra.span whiteSpace="nowrap">

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

@ -27,10 +27,11 @@ const Scrollable = (props) => {
}
}
const navbar = document.getElementById("Navbar");
if (dir === -1) {
document.getElementById("Navbar").style.top = "-48px";
navbar.style.top = `${-navbar.offsetHeight}px`;
} else {
document.getElementById("Navbar").style.top = "-0";
navbar.style.top = "-0";
}
setY(currentScroll);
if (currentScroll > scrollDepth) {
@ -69,6 +70,7 @@ const Scrollable = (props) => {
ref={scrollerRef}
overflowY="scroll"
onScroll={(e) => handleScroll(e)}
// pt="72px"
>
{props.children}
</Box>

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

@ -70,7 +70,10 @@ const SignIn = ({ toggleModal }) => {
type={showPassword ? "text" : "password"}
ref={register({ required: "Password is required" })}
/>
<InputRightElement onClick={() => setShowPassword(!showPassword)}>
<InputRightElement
onClick={() => setShowPassword(!showPassword)}
style={{ cursor: "pointer" }}
>
<CustomIcon icon="password" />
</InputRightElement>
</InputGroup>

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

@ -88,7 +88,10 @@ const SignUp = ({ toggleModal }) => {
type={showPassword ? "text" : "password"}
ref={register({ required: "Password is required" })}
/>
<InputRightElement onClick={() => setShowPassword(!showPassword)}>
<InputRightElement
onClick={() => setShowPassword(!showPassword)}
style={{ cursor: "pointer" }}
>
<CustomIcon icon="password" />
</InputRightElement>
</InputGroup>

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

@ -115,12 +115,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
>
Submit
</Button>
<Button
variant="solid"
colorScheme="red"
type="submit"
onClick={() => onClose()}
>
<Button variant="solid" colorScheme="red" onClick={() => onClose()}>
Cancel
</Button>
</Stack>