Skip to content

Commit d132481

Browse files
Anton-MushninAnton-Mushnin
committed
changing footer
1 parent 62d786a commit d132481

File tree

2 files changed

+121
-98
lines changed

2 files changed

+121
-98
lines changed

‎frontend/src/components/Footer.js‎

Lines changed: 121 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1-
import React from "react";
1+
import React, { useContext } from "react";
22
import {
33
Text,
44
Link,
55
Box,
66
Container,
7-
SimpleGrid,
87
Stack,
98
Image as ChakraImage,
109
useColorModeValue,
1110
VisuallyHidden,
1211
chakra,
12+
Flex,
13+
Spacer,
1314
} from "@chakra-ui/react";
1415
import RouterLink from "next/link";
1516
import {
1617
PRIMARY_MOON_LOGO_URL,
1718
SITEMAP,
1819
BACKGROUND_COLOR,
1920
} from "../core/constants";
20-
import { FaGithub, FaTwitter, FaDiscord, FaLinkedin } from "react-icons/fa";
2121
import moment from "moment";
22+
import { AWS_ASSETS_PATH } from "../core/constants";
23+
import UIContext from "../core/providers/UIProvider/context";
2224

2325
const LINKS_SIZES = {
2426
fontWeight: "300",
@@ -38,8 +40,6 @@ const SocialButton = ({ children, label, href }) => {
3840
<chakra.button
3941
bg={useColorModeValue("blackAlpha.100", "whiteAlpha.100")}
4042
rounded={"full"}
41-
w={8}
42-
h={8}
4343
cursor={"pointer"}
4444
as={"a"}
4545
href={href}
@@ -57,82 +57,123 @@ const SocialButton = ({ children, label, href }) => {
5757
);
5858
};
5959

60-
const Footer = () => (
61-
<Box
62-
bg={BACKGROUND_COLOR}
63-
textColor="white"
64-
borderTop="1px"
65-
borderColor="white"
66-
>
67-
<Container as={Stack} maxW={"8xl"} py={10}>
68-
<SimpleGrid
69-
templateColumns={{ sm: "1fr 1fr", md: "2fr 1fr 1fr 1fr 1fr 1fr" }}
70-
spacing={8}
71-
>
72-
<Stack spacing={6}>
73-
<Box>
74-
<Link href="/" alignSelf="center">
75-
<ChakraImage
76-
alignSelf="center"
77-
w="160px"
78-
src={PRIMARY_MOON_LOGO_URL}
79-
alt="Go to app root"
80-
/>
81-
</Link>
82-
</Box>
83-
<Text fontSize={"sm"}>
84-
© {moment().year()} Moonstream.to All rights reserved
85-
</Text>
86-
</Stack>
87-
<Stack>
88-
<Text fontWeight="semibold">Follow Us</Text>
89-
<Stack direction={"row"} spacing={6}>
90-
<SocialButton label={"Discord"} href={"/discordleed"}>
91-
<FaDiscord />
92-
</SocialButton>
93-
<SocialButton
94-
label={"Twitter"}
95-
href={"https://twitter.com/moonstreamto"}
96-
>
97-
<FaTwitter />
98-
</SocialButton>
99-
<SocialButton
100-
label={"Github"}
101-
href={"https://github.com/bugout-dev/moonstream"}
102-
>
103-
<FaGithub />
104-
</SocialButton>
105-
<SocialButton
106-
label={"LinkedIn"}
107-
href={"https://www.linkedin.com/company/moonstream/"}
108-
>
109-
<FaLinkedin />
110-
</SocialButton>
111-
</Stack>
112-
</Stack>
113-
{Object.values(SITEMAP).map((category, colIndex) => {
114-
return (
115-
<Stack align={"flex-start"} key={`footer-list-column-${colIndex}`}>
60+
const Footer = () => {
61+
const ui = useContext(UIContext);
62+
return (
63+
<Box
64+
bg={BACKGROUND_COLOR}
65+
textColor="white"
66+
borderTop="1px"
67+
borderColor="white"
68+
px="7%"
69+
>
70+
<Container as={Stack} maxW={"8xl"} py={10}>
71+
<Flex direction={["column", "column", "row"]}>
72+
<Stack spacing={6}>
73+
<Box pb={ui.isMobileView ? "40px" : "0px"}>
74+
<Link href="/" alignSelf="center">
75+
<ChakraImage
76+
alignSelf="center"
77+
w="160px"
78+
src={PRIMARY_MOON_LOGO_URL}
79+
alt="Go to app root"
80+
/>
81+
</Link>
82+
</Box>
83+
{!ui.isMobileView && (
11684
<>
117-
<ListHeader>{category.title}</ListHeader>
118-
{category.children.map((linkItem, linkItemIndex) => {
119-
return (
120-
<RouterLink
121-
passHref
122-
href={linkItem.path}
123-
key={`footer-list-link-item-${linkItemIndex}-col-${colIndex}`}
124-
>
125-
<Link {...LINKS_SIZES}>{linkItem.title}</Link>
126-
</RouterLink>
127-
);
128-
})}
85+
<Flex justifyContent="start">
86+
<Link href="//privacy-policy">Privacy policy</Link>
87+
<Link href="//tos" ml="20px">
88+
Terms of Service
89+
</Link>
90+
</Flex>
91+
<Text fontSize={"sm"}>
92+
© {moment().year()} Moonstream.to All rights reserved
93+
</Text>
12994
</>
130-
</Stack>
131-
);
132-
})}
133-
</SimpleGrid>
134-
</Container>
135-
</Box>
136-
);
95+
)}
96+
</Stack>
97+
<Spacer />
98+
<Flex direction="column" pb={ui.isMobileView ? "40px" : "0px"}>
99+
<Text fontWeight="semibold" mb="20px">
100+
Follow Us
101+
</Text>
102+
<Flex width="158px" justifyContent="space-between">
103+
<SocialButton label={"Discord"} href={"/discordleed"}>
104+
<ChakraImage
105+
w="26px"
106+
src={`${AWS_ASSETS_PATH}/icons/discord-logo.png`}
107+
/>
108+
</SocialButton>
109+
<SocialButton
110+
label={"Twitter"}
111+
href={"https://twitter.com/moonstreamto"}
112+
>
113+
<ChakraImage
114+
w="24px"
115+
size={1}
116+
src={`${AWS_ASSETS_PATH}/icons/twitter-logo.png`}
117+
/>
118+
</SocialButton>
119+
<SocialButton
120+
label={"Github"}
121+
href={"https://github.com/bugout-dev/moonstream"}
122+
>
123+
<ChakraImage
124+
w="24px"
125+
src={`${AWS_ASSETS_PATH}/icons/github-logo.png`}
126+
/>
127+
</SocialButton>
128+
<SocialButton
129+
label={"LinkedIn"}
130+
href={"https://www.linkedin.com/company/moonstream/"}
131+
>
132+
<ChakraImage
133+
w="24px"
134+
src={`${AWS_ASSETS_PATH}/icons/linkedin-logo.png`}
135+
/>
136+
</SocialButton>
137+
</Flex>
138+
</Flex>
139+
<Flex
140+
justifyContent="space-between"
141+
pb={ui.isMobileView ? "40px" : "0px"}
142+
>
143+
{Object.values(SITEMAP).map((category, colIndex) => {
144+
return (
145+
<Stack
146+
ml={["0px", "0px", "100px"]}
147+
align={"flex-start"}
148+
key={`footer-list-column-${colIndex}`}
149+
>
150+
<>
151+
<ListHeader>{category.title}</ListHeader>
152+
{category.children.map((linkItem, linkItemIndex) => {
153+
return (
154+
<RouterLink
155+
passHref
156+
href={linkItem.path}
157+
key={`footer-list-link-item-${linkItemIndex}-col-${colIndex}`}
158+
>
159+
<Link {...LINKS_SIZES}>{linkItem.title}</Link>
160+
</RouterLink>
161+
);
162+
})}
163+
</>
164+
</Stack>
165+
);
166+
})}
167+
</Flex>
168+
{ui.isMobileView && (
169+
<Text fontSize={"sm"}>
170+
© {moment().year()} Moonstream.to All rights reserved
171+
</Text>
172+
)}
173+
</Flex>
174+
</Container>
175+
</Box>
176+
);
177+
};
137178

138179
export default Footer;

‎frontend/src/core/constants.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export const SITEMAP_CATEGORIES = {
3131
DEVELOPERS: "Developers",
3232
RESOURCES: "Resources",
3333
ABOUT: "About",
34-
LEGAL: "Legal",
3534
};
3635

3736
export const PAGETYPE = {
@@ -100,23 +99,6 @@ export const SITEMAP = [
10099
},
101100
],
102101
},
103-
{
104-
title: "Legal",
105-
path: "/legal",
106-
type: PAGETYPE.FOOTER_CATEGORY,
107-
children: [
108-
{
109-
title: "Privacy Policy",
110-
path: "/privacy-policy",
111-
type: PAGETYPE.CONTENT,
112-
},
113-
{
114-
title: "Terms of Service",
115-
path: "/tos",
116-
type: PAGETYPE.CONTENT,
117-
},
118-
],
119-
},
120102
];
121103

122104
export const USER_NAV_PATHES = [

0 commit comments

Comments
 (0)