diff --git a/frontend/src/components/AccountIconButton.js b/frontend/src/components/AccountIconButton.js
index 85033857..af0577cc 100644
--- a/frontend/src/components/AccountIconButton.js
+++ b/frontend/src/components/AccountIconButton.js
@@ -6,7 +6,6 @@ import {
MenuList,
MenuItem,
MenuGroup,
- MenuDivider,
IconButton,
chakra,
Portal,
@@ -33,20 +32,24 @@ const AccountIconButton = (props) => {
/>
-
+ Security
-
+
+ API tokens
+
-
{ui.isMobileView &&
SITEMAP.map((item, idx) => {
if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
@@ -54,7 +57,22 @@ const AccountIconButton = (props) => {
{item.children.map((child, idx) => {
return (
-
diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js
index 53450384..44a68bea 100644
--- a/frontend/src/components/AppNavbar.js
+++ b/frontend/src/components/AppNavbar.js
@@ -107,7 +107,7 @@ const AppNavbar = () => {
<>
{!ui.isMobileView && (
<>
-
+
{
/>
-
+
{SITEMAP.map((item, idx) => {
if (
diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index 11835e57..d76ab26b 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -12,6 +12,8 @@ import {
MenuList,
MenuItem,
Portal,
+ Box,
+ Text,
} from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons";
import useModals from "../core/hooks/useModals";
@@ -61,6 +63,7 @@ const LandingNavbar = () => {
variant="link"
href={item.path}
color="black"
+ fontSize="16px"
isActive={!!(router.pathname === item.path)}
>
{item.title}
@@ -72,6 +75,7 @@ const LandingNavbar = () => {
as={Button}
rightIcon={}
color="white"
+ fontSize="16px"
_expanded={{ color: "white" }}
>
{item.title}
@@ -99,6 +103,7 @@ const LandingNavbar = () => {
m={0}
color="white"
fontWeight="400"
+ fontSize="16px"
px="0px"
mb="10px"
h="22px"
@@ -124,17 +129,24 @@ const LandingNavbar = () => {
{ui.isLoggedIn && (
-
+
+ App
+
+
)}
{!ui.isLoggedIn && (
@@ -143,9 +155,12 @@ const LandingNavbar = () => {
variant="solid"
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
size="sm"
- fontWeight="bold"
+ fontWeight="700"
borderRadius="2xl"
textColor="white"
+ _hover={{
+ backgroundColor: "#F4532F",
+ }}
>
Sign up
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index cde2d082..c4c451f3 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -7,7 +7,7 @@ import LandingNavbar from "./LandingNavbar";
const AppNavbar = React.lazy(() => import("./AppNavbar"));
const Navbar = () => {
- const { isAppView, isLoggedIn } = useContext(UIContext);
+ const { isAppView, isLoggedIn, isMobileView } = useContext(UIContext);
return (
{
zIndex={1}
alignItems="center"
id="Navbar"
- minH="3rem"
- maxH="3rem"
+ minH={isMobileView ? "48px" : "72px"}
+ maxH={isMobileView ? "48px" : "72px"}
bgColor={BACKGROUND_COLOR}
borderBottom="1px solid white"
direction="row"
diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js
index fec35565..d1c48ca6 100644
--- a/frontend/src/core/constants.js
+++ b/frontend/src/core/constants.js
@@ -77,7 +77,7 @@ export const SITEMAP = [
children: [
{
title: "Docs",
- path: "/docs",
+ path: "https://docs.moonstream.to/",
type: PAGETYPE.CONTENT,
},
{
diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
index a447c426..b8543673 100644
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@@ -267,3 +267,32 @@ code {
linear-gradient(to right, transparent 6px, white 6px),
linear-gradient(to bottom, #444 1px, transparent 1px);
}
+
+
+.desktop-menu-item {
+ color: white;
+ font-weight: 400;
+ padding-left: 0px;
+ padding-right: 0px;
+ margin-bottom: 10px;
+ height: 22px;
+ cursor: pointer;
+}
+
+.desktop-menu-item:hover {
+ color: #F56646;
+ font-weight: 700;
+}
+
+/* to dont change div size when bolding text.
+Need 'title' attr in the longest item's tag*/
+.desktop-menu-item::after {
+ display: block;
+ content: attr(title);
+ font-weight: 700;
+ height: 1px;
+ color: transparent;
+ overflow: hidden;
+ visibility: hidden;
+}
+