Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cryptobilla's style refactor #56

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

cryptobilla's style refactor #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca0f06f
cryptobilla's style refactor
zberwaldt Sep 10, 2021
88e4158
working mheader and footer
moshejs Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 34 additions & 42 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,65 +5,57 @@ import {
Image,
ListItem,
UnorderedList,
useMultiStyleConfig,
} from '@chakra-ui/react';
import Link from './Link';
import SocialIcons from './SocialIcons';

export default function Footer(): JSX.Element {
export default function Footer(props): JSX.Element {
const { size } = props;

const footerStyles = useMultiStyleConfig('Footer', { size });

const footerLinks = [
{ url: 'https://discord.gg/bjPz2w9Zts', text: 'Discord' },
{
url: 'https://www.notion.so/BanklessDAO-Wiki-82ba81e7da1c42adb7c4ab67a4f22e8f',
text: 'Wiki',
},
{ url: 'https://forum.bankless.community/', text: 'Forum' },
{ url: 'https://snapshot.org/#/banklessvault.eth', text: 'Vote' },
];

return (
<Box as="footer" className="footer-section global-footer">
<Flex className="footer-wrap">
<Box className="footer-data">
<Box className="footer-logo">
<Link className="is-image" href="/">
<Box as="footer" sx={footerStyles.section}>
<Flex sx={footerStyles.wrapper}>
<Box sx={footerStyles.data}>
<Box sx={footerStyles.logo}>
<Link href="/">
<Image src="/images/bankless-logo.png" alt="Bankless DAO logo" />
</Link>
</Box>
<Text className="footer-description">
<Text sx={footerStyles.description}>
A decentralized autonomous organization that acts as a steward of
the Bankless Movement progressing the world towards a future of
greater freedom.
</Text>
<Box className="footer-icons">
<Box sx={footerStyles.icons}>
<SocialIcons />
</Box>
</Box>
<Flex className="footer-nav">
<Box className="footer-nav-column">
<UnorderedList>
<ListItem>
<Link href="https://discord.gg/bjPz2w9Zts">Discord</Link>
</ListItem>
</UnorderedList>
</Box>
<Box className="footer-nav-column">
<UnorderedList>
<ListItem>
<Link href="https://www.notion.so/BanklessDAO-Wiki-82ba81e7da1c42adb7c4ab67a4f22e8f">
Wiki
</Link>
</ListItem>
</UnorderedList>
</Box>
<Box className="footer-nav-column">
<UnorderedList>
<ListItem>
<Link href="https://forum.bankless.community/">Forum</Link>
</ListItem>
</UnorderedList>
</Box>
<Box className="footer-nav-column">
<UnorderedList>
<ListItem>
<Link href="https://snapshot.org/#/banklessvault.eth">
Vote
</Link>
</ListItem>
</UnorderedList>
</Box>
<Flex sx={footerStyles.fNav}>
{footerLinks.map((footerLink, id) => (
<Box key={id} sx={footerStyles.navColumn}>
<UnorderedList>
<ListItem>
<Link href={footerLink.url}>{footerLink.text}</Link>
</ListItem>
</UnorderedList>
</Box>
))}
</Flex>
</Flex>
<Box className="footer-copyright">
<Box sx={footerStyles.copyright}>
GoBankless &copy; 2021. All Rights Reserved. Published with{' '}
<Link href="https://ghost.org" target="_blank">
Ghost
Expand Down
56 changes: 49 additions & 7 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
DrawerContent,
DrawerBody,
DrawerCloseButton,
useMultiStyleConfig,
} from '@chakra-ui/react';
import { HamburgerIcon, Search2Icon } from '@chakra-ui/icons';
import SearchModal from './SearchModal';
Expand All @@ -28,6 +29,8 @@ import React, { useState } from 'react';
import Link from './Link';

export default function Navbar() {
const styles = useMultiStyleConfig('Header', {});

const {
isOpen: searchModalIsOpen,
onOpen: onSearchModalOpen,
Expand All @@ -43,16 +46,19 @@ export default function Navbar() {
onSearchModalOpen();
});
return (
<Box as="header" width="100%" color="white" overflowY="visible">
<Box
as="header"
width="100%"
color="white"
overflowY="visible"
sx={styles.section}>
<SearchModal isOpen={searchModalIsOpen} onClose={onSearchModalClose} />
<Flex
className="header-wrap"
sx={styles.wrap}
minH="unset"
marginTop={{ sm: '30px' }}
marginBottom={{ sm: '60px' }}>
<Box
className="header-logo"
position={{ sm: 'static', lg: 'absolute' }}>
<Box sx={styles.logo} position={{ sm: 'static', lg: 'absolute' }}>
<Heading as="h1" margin="0" lineHeight="0">
<Link href="/" style={{ boxShadow: 'none' }} display="inline-block">
<Image
Expand All @@ -65,7 +71,41 @@ export default function Navbar() {
</Link>
</Heading>
</Box>
<Box className="header-nav">
<Box
sx={{
...styles.hNav,
'& nav': {
display: {
sm: 'none',
},
},
'& nav, & nav>ul+ul': {
display: {
xl: 'flex',
},
alignItems: {
xl: 'center',
},
flex: {
xl: '0 0 auto',
},
},
'& li, & a': {
fontSize: '14px',
display: 'inline-block',
},
'& a, & .signin a, & .signout a, & .signup': {
marginRight: '18px',
},
'& .signup a': {
fontFamily: 'spartan',
fontSize: '12px',
marginRight: 0,
padding: '10px 12px 8px',
letterSpacing: '.5px',
lineHeight: '18px',
},
}}>
<Flex as="nav" id="mobile-nav">
<IconButton
aria-label="site navigation menu"
Expand All @@ -82,7 +122,9 @@ export default function Navbar() {
placement="right"
onClose={onMobileMenuClose}>
<DrawerOverlay />
<DrawerContent paddingTop="4" background="var(--bg-nav)">
<DrawerContent
paddingTop="4"
background="var(--chakra-colors-bg-nav)">
<DrawerCloseButton size="lg" />

<DrawerBody paddingTop="4">
Expand Down
Loading