Skip to content

Commit b572089

Browse files
Anton-MushninAnton-Mushnin
committed
navbar layout
1 parent 7d2968f commit b572089

File tree

4 files changed

+83
-81
lines changed

4 files changed

+83
-81
lines changed

‎frontend/src/components/AccountIconButton.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@ const AccountIconButton = (props) => {
2727
colorScheme="inherit"
2828
as={IconButton}
2929
aria-label="Account menu"
30-
icon={<RiAccountCircleLine m={0} size="26px" />}
30+
icon={<RiAccountCircleLine size="26px" />}
3131
color="gray.100"
32+
h="26px"
33+
minW="26px"
34+
m="0px"
3235
/>
3336
<Portal>
3437
<MenuList

‎frontend/src/components/LandingBarMobile.js‎

Lines changed: 42 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
MenuItem,
1414
Portal,
1515
Text,
16-
Box,
1716
} from "@chakra-ui/react";
1817

1918
import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
@@ -22,6 +21,7 @@ import useModals from "../core/hooks/useModals";
2221
import UIContext from "../core/providers/UIProvider/context";
2322
import PlainButton from "./atoms/PlainButton";
2423
import ChakraAccountIconButton from "./AccountIconButton";
24+
import router from "next/router";
2525

2626
const LandingBarMobile = () => {
2727
const ui = useContext(UIContext);
@@ -32,14 +32,9 @@ const LandingBarMobile = () => {
3232
direction="column"
3333
width={"100%"}
3434
justifyContent={ui.isLoggedIn ? "center" : "space-between"}
35-
p="12px 7% 10px 7%"
35+
p="12px 7% 0px 7%"
3636
>
37-
<Flex
38-
width={"100%"}
39-
alignItems="center"
40-
flex="flex: 0 0 100%"
41-
mt={ui.isLoggedIn ? "0px" : "12px"}
42-
>
37+
<Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" mb="12px">
4338
<RouterLink href="/" passHref>
4439
<Link
4540
as={Image}
@@ -51,70 +46,62 @@ const LandingBarMobile = () => {
5146
/>
5247
</RouterLink>
5348
<Spacer />
49+
5450
{!ui.isLoggedIn && (
55-
<PlainButton
56-
style={{
57-
marginRight: "12px",
58-
fontSize: "14px",
59-
padding: "2px 10px",
60-
}}
61-
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
62-
>
63-
Sign up
64-
</PlainButton>
65-
)}
66-
{!ui.isLoggedIn && (
67-
<Text
68-
color="white"
69-
bg="transparent"
70-
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
71-
fontWeight="400"
72-
p="0px"
73-
m="0px"
74-
_focus={{ backgroundColor: "transparent" }}
75-
_hover={{ backgroundColor: "transparent" }}
76-
>
77-
Log in
78-
</Text>
79-
)}
80-
{ui.isLoggedIn && (
81-
<RouterLink href="/welcome" passHref>
82-
<Box
83-
bg="orange.1000"
84-
alignSelf={"center"}
85-
as={Link}
51+
<Flex gap="12px" h="26px">
52+
<Text
8653
color="white"
87-
size="sm"
88-
fontWeight="700"
89-
borderRadius="15px"
90-
w="47px"
91-
h="25px"
92-
textAlign="center"
93-
fontSize="14px"
54+
bg="transparent"
55+
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
56+
fontWeight="400"
57+
p="0px"
58+
m="0px"
59+
_focus={{ backgroundColor: "transparent" }}
60+
_hover={{ backgroundColor: "transparent" }}
9461
>
95-
<Text lineHeight="25px">App</Text>
96-
</Box>
97-
</RouterLink>
62+
Log in
63+
</Text>
64+
<PlainButton
65+
style={{
66+
fontSize: "14px",
67+
padding: "2px 10px",
68+
}}
69+
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
70+
>
71+
Sign up
72+
</PlainButton>
73+
</Flex>
9874
)}
99-
{ui.isLoggedIn && ui.isMobileView && (
100-
<>
75+
76+
{ui.isLoggedIn && (
77+
<Flex gap="12px">
78+
<PlainButton
79+
style={{
80+
fontSize: "14px",
81+
padding: "2px 10px",
82+
}}
83+
onClick={() => router.push("/welcome")}
84+
>
85+
App
86+
</PlainButton>
87+
10188
<ChakraAccountIconButton variant="link" colorScheme="orange" />
102-
</>
89+
</Flex>
10390
)}
10491
</Flex>
10592
<ButtonGroup
10693
justifyContent="center"
10794
w="100%"
10895
variant="link"
109-
// spacing={4}
110-
// flexGrow={0.5}
96+
gap="20px"
97+
py="10px"
11198
>
11299
{SITEMAP.map((item, idx) => {
113100
return (
114101
<React.Fragment key={`Fragment-${idx}`}>
115102
{item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
116103
<Menu>
117-
<MenuButton variant="mobile" m="0px" p="0px" as={Button}>
104+
<MenuButton color="white" m="0px" p="0px" as={Button}>
118105
{item.title}
119106
</MenuButton>
120107
<Portal>

‎frontend/src/components/LandingNavbar.js‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,12 @@ const LandingNavbar = () => {
4848
/>
4949
</RouterLink>
5050
</Flex>
51-
<ButtonGroup variant="link" spacing={4}>
51+
<ButtonGroup
52+
variant="link"
53+
spacing={4}
54+
width="100%"
55+
justifyContent="center"
56+
>
5257
{SITEMAP.map((item, idx) => {
5358
return (
5459
<React.Fragment key={`Fragment-${idx}`}>
@@ -124,8 +129,8 @@ const LandingNavbar = () => {
124129
);
125130
})}
126131
</ButtonGroup>
127-
<ButtonGroup variant="link" spacing={4} minW="160px">
128-
{ui.isLoggedIn && (
132+
{ui.isLoggedIn && (
133+
<Flex gap="20px">
129134
<RouterLink href="/welcome" passHref>
130135
<Box
131136
bg="orange.1000"
@@ -146,36 +151,43 @@ const LandingNavbar = () => {
146151
</Text>
147152
</Box>
148153
</RouterLink>
149-
)}
150-
{!ui.isLoggedIn && (
154+
<ChakraAccountIconButton
155+
variant="link"
156+
colorScheme="orange"
157+
h="32px"
158+
/>
159+
</Flex>
160+
)}
161+
162+
{!ui.isLoggedIn && (
163+
<Flex gap="20px" alignItems="center">
164+
<Text
165+
color="white"
166+
cursor="pointer"
167+
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
168+
fontWeight="400"
169+
_hover={{ textDecoration: "underline" }}
170+
>
171+
Log in
172+
</Text>
151173
<Button
152-
bg="orange.1000"
153-
variant="solid"
174+
variant="plainOrange"
175+
borderRadius="15px"
176+
p="5px 10px"
177+
fontSize="16px"
178+
m="0px"
179+
h="32px"
154180
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
155-
size="sm"
156181
fontWeight="700"
157-
borderRadius="2xl"
158182
textColor="white"
159183
_hover={{
160184
backgroundColor: "#F4532F",
161185
}}
162186
>
163187
Sign up
164188
</Button>
165-
)}
166-
{!ui.isLoggedIn && (
167-
<Button
168-
color="white"
169-
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
170-
fontWeight="400"
171-
>
172-
Log in
173-
</Button>
174-
)}
175-
{ui.isLoggedIn && (
176-
<ChakraAccountIconButton variant="link" colorScheme="orange" />
177-
)}
178-
</ButtonGroup>
189+
</Flex>
190+
)}
179191
</Flex>
180192
)}
181193
</>

‎frontend/src/components/Navbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const Navbar = () => {
1515
zIndex={1}
1616
alignItems="center"
1717
id="Navbar"
18-
minH={isMobileView && !isAppView ? "72px" : "62px"}
19-
maxH={isMobileView && !isAppView ? "72px" : "62px"}
18+
minH={isMobileView && !isAppView ? "89px" : "62px"}
19+
maxH={isMobileView && !isAppView ? "89px" : "62px"}
2020
bgColor={BACKGROUND_COLOR}
2121
borderBottom="1px solid white"
2222
direction="row"

0 commit comments

Comments
 (0)