Skip to content

Commit

Permalink
make underline on selected page, change custom block CTA, remove foru…
Browse files Browse the repository at this point in the history 
…m. align news
  • Loading branch information
@Seroxdesign @alalonde
Seroxdesign authored and alalonde committed Oct 23, 2023
1 parent 50ba997 commit fd3f594
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 132 deletions.
11 changes: 10 additions & 1 deletion packages/web/components/Dashboard/LatestContentTabs/Read.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,17 @@ export const Read: React.FC = () => {
w="100%"
h="100%"
overflow="hidden"
justifyContent={'left'}
>
<Box position="relative" zIndex={5} p={6}>
<Box
position="relative"
zIndex={5}
p={6}
justifyContent={'left'}
display={'flex'}
flexDirection={'column'}
width="100%"
>
<Heading
size="xs"
color="white"
Expand Down
244 changes: 133 additions & 111 deletions packages/web/components/MegaMenu/DesktopNavLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,122 +13,55 @@ import {
MenuList,
} from '@metafam/ds';
import { DesktopMenuItem } from 'components/MegaMenu/DesktopMenuItem';
import { useRouter } from 'next/router';
import React from 'react';
import { MenuLinkItem, MenuLinkSet, MenuSectionLinks } from 'utils/menuLinks';

// Nav links on desktop -- text and links from utils/menuLinks.ts
export const DesktopNavLinks: React.FC<FlexProps> = (props) => (
<Flex
justify="center"
h="100%"
display={{ base: 'none', lg: 'flex' }}
{...props}
>
{MenuSectionLinks.map((section: MenuLinkSet) => (
<Menu key={section.label} offset={[0, 0]} preventOverflow placement="top">
{({ isOpen }) => (
<>
{section.type === 'menu' ? (
<>
<MenuButton
as={Button}
variant="link"
minW="fit-content"
color="white"
fontSize={{ m: 's', lg: 'm', xl: 'lg' }}
fontWeight={700}
textTransform="uppercase"
mx={{ lg: 3, xl: 6 }}
_expanded={{ color: 'cyan.300' }}
_focus={{ outline: 'none', border: 'none' }}
rightIcon={
isOpen ? (
<ChevronUpIcon color="white" />
) : (
<ChevronDownIcon color="white" />
)
}
>
{section.label}
{section.type === 'menu' && (
<Icon
position="absolute"
left="calc(50% - 1.25rem)"
top={14}
w={6}
h={isOpen ? 'auto' : 0}
opacity={isOpen ? 1 : 0}
transition="opacity 0.2s"
zIndex={2}
>
<path
d="M12 0L24 12C14.6274 12 9.37258 12 0 12L12 0Z"
fill="rgba(42, 31, 71, 0.99)"
/>
</Icon>
)}
</MenuButton>
{section.type === 'menu' && isOpen && (
<Box
position="absolute"
minW="100vw"
top="5rem"
left="calc(100% - 100vw)"
mx={0}
h="100vh"
bg="linear-gradient(rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 96%)"
sx={{ filter: 'blur(3rem)' }}
zIndex={-2}
/>
)}
{section?.menuItems?.length && (
<MenuList
display="grid"
gridTemplateColumns={
section.menuItems.length > 4
? 'repeat(2, 1fr)'
: 'repeat(1, 1fr)'
}
gridGap={2}
w={section.menuItems.length > 4 ? '60rem' : '30rem'}
p={4}
boxShadow="dark-lg"
bg="linear-gradient(180deg, rgba(42, 31, 71, 0.9) 6.18%, rgba(17, 3, 32, 0.86) 140%)"
borderRadius="md"
border={0}
>
{section.menuItems.map((item: MenuLinkItem) => (
<DesktopMenuItem {...item} key={item.title} />
))}
</MenuList>
)}
</>
) : (
<>
<Link
display="flex"
role="group"
href={section?.url}
target={section.type === 'external-link' ? '_blank' : ''}
w="full"
h="full"
alignItems="center"
_focus={{ outline: 'none' }}
>
export const DesktopNavLinks: React.FC<FlexProps> = (props) => {
const router = useRouter();
return (
<Flex
justify="center"
h="100%"
display={{ base: 'none', lg: 'flex' }}
{...props}
>
{MenuSectionLinks.map((section: MenuLinkSet) => (
<Menu
key={section.label}
offset={[0, 0]}
preventOverflow
placement="top"
>
{({ isOpen }) => (
<>
{section.type === 'menu' ? (
<>
<MenuButton
as={Button}
variant="link"
minW="fit-content"
color={
section.type === 'external-link' ? '#79F8FB' : 'white'
}
color="white"
fontSize={{ m: 's', lg: 'm', xl: 'lg' }}
borderRadius={'0'}
borderBottom={
router?.pathname.includes(section.label)
? '3px solid #79F8FB'
: ''
}
fontWeight={700}
textTransform="uppercase"
mx={{ lg: 3, xl: 6 }}
_expanded={{ color: 'cyan.300' }}
_focus={{ outline: 'none', border: 'none' }}
rightIcon={section.type === 'external-link' ? <ExternalLinkIcon color="#79F8FB" /> : undefined}
rightIcon={
isOpen ? (
<ChevronUpIcon color="white" />
) : (
<ChevronDownIcon color="white" />
)
}
>
{section.label}
{section.type === 'menu' && (
Expand All @@ -149,12 +82,101 @@ export const DesktopNavLinks: React.FC<FlexProps> = (props) => (
</Icon>
)}
</MenuButton>
</Link>
</>
)}
</>
)}
</Menu>
))}
</Flex>
);
{section.type === 'menu' && isOpen && (
<Box
position="absolute"
minW="100vw"
top="5rem"
left="calc(100% - 100vw)"
mx={0}
h="100vh"
bg="linear-gradient(rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 96%)"
sx={{ filter: 'blur(3rem)' }}
zIndex={-2}
/>
)}
{section?.menuItems?.length && (
<MenuList
display="grid"
gridTemplateColumns={
section.menuItems.length > 4
? 'repeat(2, 1fr)'
: 'repeat(1, 1fr)'
}
gridGap={2}
w={section.menuItems.length > 4 ? '60rem' : '30rem'}
p={4}
boxShadow="dark-lg"
bg="linear-gradient(180deg, rgba(42, 31, 71, 0.9) 6.18%, rgba(17, 3, 32, 0.86) 140%)"
borderRadius="md"
border={0}
>
{section.menuItems.map((item: MenuLinkItem) => (
<DesktopMenuItem {...item} key={item.title} />
))}
</MenuList>
)}
</>
) : (
<>
<Link
display="flex"
role="group"
href={section?.url}
target={section.type === 'external-link' ? '_blank' : ''}
w="full"
h="full"
borderBottom={
router?.pathname.includes(section.label)
? '3px solid #79F8FB'
: ''
}
alignItems="center"
_focus={{ outline: 'none' }}
>
<MenuButton
as={Button}
variant="link"
minW="fit-content"
color="white"
fontSize={{ m: 's', lg: 'm', xl: 'lg' }}
fontWeight={700}
textTransform="uppercase"
mx={{ lg: 3, xl: 6 }}
_expanded={{ color: 'cyan.300' }}
_focus={{ outline: 'none', border: 'none' }}
rightIcon={
section.type === 'external-link' ? (
<ExternalLinkIcon color="white" />
) : undefined
} // #79F8FB
>
{section.label}
{section.type === 'menu' && (
<Icon
position="absolute"
left="calc(50% - 1.25rem)"
top={14}
w={6}
h={isOpen ? 'auto' : 0}
opacity={isOpen ? 1 : 0}
transition="opacity 0.2s"
zIndex={2}
>
<path
d="M12 0L24 12C14.6274 12 9.37258 12 0 12L12 0Z"
fill="rgba(42, 31, 71, 0.99)"
/>
</Icon>
)}
</MenuButton>
</Link>
</>
)}
</>
)}
</Menu>
))}
</Flex>
);
};
18 changes: 14 additions & 4 deletions packages/web/components/MegaMenu/MegaMenuHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Flex,
FlexProps,
HamburgerIcon,
HStack,
Input,
InputGroup,
InputLeftElement,
Expand Down Expand Up @@ -429,6 +430,7 @@ export const MegaMenuHeader: React.FC = () => {
backdropFilter="blur(10px)"
px={4}
py={1.5}
pb="0"
h={20}
justify="space-between"
w="100%"
Expand Down Expand Up @@ -459,7 +461,7 @@ export const MegaMenuHeader: React.FC = () => {
<Flex
w={{ base: 'auto', lg: '100%' }}
align="center"
justify="center"
justify="space-between"
pos="relative"
display={{
base: 'none',
Expand All @@ -476,10 +478,18 @@ export const MegaMenuHeader: React.FC = () => {
top="auto"
bottom="auto"
/>
<DesktopNavLinks />

<HeaderSearchBar onOpen={onSearchOpen} />

<HStack
flex="0 1 auto"
align="center"
justify="center"
alignSelf="center"
height="100%"
spacing={0}
>
<DesktopNavLinks />
<HeaderSearchBar onOpen={onSearchOpen} />
</HStack>
<Box
textAlign="right"
display={{ base: 'none', lg: 'block' }}
Expand Down
26 changes: 15 additions & 11 deletions packages/web/components/Section/AddBoxSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import {
Box,
Button,
ExternalLinkIcon,
Flex,
FlexProps,
MetaButton,
Link,
MetaTheme,
Modal,
ModalBody,
Expand All @@ -14,6 +13,7 @@ import {
ModalHeader,
ModalOverlay,
Select,
Text,
useDisclosure,
VStack,
} from '@metafam/ds';
Expand Down Expand Up @@ -169,6 +169,19 @@ export const AddBoxSection = React.forwardRef<HTMLDivElement, Props>(
</Flex>
)}
</VStack>
<Text sx={{ textAlign: 'center', fontSize: '14px', mt: '2' }}>
<i>
Not seeing what you need?
<Link
target={'_blank'}
rel={'noreferrer'}
href="//metagame.wtf/quest/6524b99a-df7e-4c10-838d-c441a8417e77"
sx={{ textDecoration: 'underline', ml: '8px' }}
>
Consider Building a new block!
</Link>
</i>
</Text>
</ModalBody>
<ModalFooter>
<Box mx="auto">
Expand All @@ -190,15 +203,6 @@ export const AddBoxSection = React.forwardRef<HTMLDivElement, Props>(
Close
</Button>
</Flex>
<MetaButton
href="//metagame.wtf/quest/6524b99a-df7e-4c10-838d-c441a8417e77"
mx="auto"
mt="3rem"
target="_blank"
>
Create a Custom Block
<ExternalLinkIcon ml={3} />
</MetaButton>
</Box>
</ModalFooter>
</ModalContent>
Expand Down
Loading

0 comments on commit fd3f594

Please sign in to comment.