diff --git a/web/e.cash/components/footer/index.js b/web/e.cash/components/footer/index.js index b5caf6396..b3693bc26 100644 --- a/web/e.cash/components/footer/index.js +++ b/web/e.cash/components/footer/index.js @@ -1,97 +1,120 @@ // Copyright (c) 2023 The Bitcoin developers // Distributed under the MIT software license, see the accompanying // file COPYING or http://www.opensource.org/licenses/mit-license.php. import Image from 'next/image'; import Link from 'next/link'; import { FooterCtn, LogoCtn, ContentCtn, NavItem, SocialCtn, ContactLink, LinksCtn, DropdownCtn, Copyright, } from './styles.js'; import { navitems } from '/data/navitems.js'; import { socials } from '/data/socials.js'; import { Container } from '/components/atoms'; import CustomLink from '/components/custom-link'; export default function Footer() { const currentYear = new Date().getFullYear(); const copyrightSymbol = '\u00A9'; + const navitemsWithoutDropdown = navitems.filter( + navitem => !navitem.dropdown_items, + ); return (
ecash logo
Stay Connected {socials.map(social => ( {social.name} ))}
contact@e.cash
- {navitems.map(navitem => ( -
-
{navitem.nav_item}
- {navitem.dropdown_items ? ( - - {navitem.dropdown_items.map( - dropdownitem => ( - - {dropdownitem.title} - - ), - )} - - ) : null} -
- ))} + {navitems.map( + (navitem, index) => + navitem.dropdown_items && ( +
+
{navitem.nav_item}
+ + {navitem.dropdown_items.map( + dropdownitem => ( + + {dropdownitem.title} + + ), + )} + {index === 0 && + navitemsWithoutDropdown.map( + item => ( + + {item.nav_item} + + ), + )} + +
+ ), + )} {copyrightSymbol} {currentYear} Bitcoin ABC. All Rights Reserved.
); } diff --git a/web/e.cash/components/footer/styles.js b/web/e.cash/components/footer/styles.js index 5a38e6444..491970d9b 100644 --- a/web/e.cash/components/footer/styles.js +++ b/web/e.cash/components/footer/styles.js @@ -1,158 +1,166 @@ // Copyright (c) 2023 The Bitcoin developers // Distributed under the MIT software license, see the accompanying // file COPYING or http://www.opensource.org/licenses/mit-license.php. import styled from 'styled-components'; import Link from 'next/link'; export const FooterCtn = styled.div` width: 100%; height: auto; padding: 40px 40px 20px; background-color: ${props => props.theme.colors.black}; color: #fff; clip-path: polygon( 0 0, 18% 0, 19% 20px, 81% 20px, 82% 0, 100% 0, 100% 100%, 0 100% ); margin-top: -20px; ${props => props.theme.filters.grayscale}; ${props => props.theme.breakpoint.medium} { padding: 40px 0 20px; } `; export const LogoCtn = styled.div` width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 30px; > div { width: 130px; height: 100px; position: relative; ${props => props.theme.breakpoint.medium} { width: 100px; } } `; export const ContentCtn = styled.div` display: flex; justify-content: space-between; - ${props => props.theme.breakpoint.medium} { + ${props => props.theme.breakpoint.large} { flex-direction: column; } `; export const NavItem = styled.div` font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 5px; `; export const SocialCtn = styled.div` display: flex; width: 400px; height: 30px; margin-top: 10px; ${props => props.theme.breakpoint.medium} { width: 100%; flex-wrap: wrap; height: auto; } a { width: 20px; height: 20px; position: relative; margin-right: 20px; transition: all ease-in-out 200ms; :hover { transform: scale(1.4); } :hover img { filter: invert(32%) sepia(76%) saturate(5535%) hue-rotate(189deg) brightness(93%) contrast(101%); } ${props => props.theme.breakpoint.medium} { margin-bottom: 15px; margin-right: 15px; } } `; export const ContactLink = styled(Link)` opacity: 0.5; font-size: 14px; color: #fff; line-height: 1.9em; :hover { opacity: 1; color: var(--bluelight); } `; export const LinksCtn = styled.div` display: flex; ${props => props.theme.breakpoint.medium} { flex-direction: column; margin-top: 50px; } + ${props => props.theme.breakpoint.large} { + margin-top: 30px; + } > div { padding: 0; margin-left: 60px; ${props => props.theme.breakpoint.medium} { margin-left: 0; margin-bottom: 20px; } + :first-child { + ${props => props.theme.breakpoint.large} { + margin-left: 0px; + } + } > div:first-child { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 5px; } } `; export const DropdownCtn = styled.div` display: flex; flex-direction: column; a { opacity: 0.5; font-size: 14px; color: #fff; line-height: 1.9em; :hover { opacity: 1; color: ${props => props.theme.colors.primaryLight}; } } `; export const Copyright = styled.div` width: 100%; font-size: 14px; text-align: center; color: #fff; opacity: 0.3; margin: 50px 0 0px; `; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js index b35295644..bb4c1d075 100644 --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -1,90 +1,92 @@ // Copyright (c) 2023 The Bitcoin developers // Distributed under the MIT software license, see the accompanying // file COPYING or http://www.opensource.org/licenses/mit-license.php. export const ecash = { colors: { primary: '#0074c2', primaryLight: '#00abe7', accent: '#ff21d0', accentDark: '#CD0BC3', darkBackground: '#050d27', contrast: '#ffffff', black: '#000', darkBlue: '#001137', videocover: 'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', navbarBackground: 'rgba(0, 0, 0, 0.65)', coretechBackground: 'rgba(0, 17, 55, 0.2)', coretechShadow1: 'rgba(0, 0, 0, 0.63)', coretechShadow2: 'rgba(0, 171, 231, 0.86)', colorSwatchBackground: 'rgba(255,255,255, 0.2)', gridlines: 'rgba(255,255,255, 0.2)', featureTileHover: '#CD0BC3', walletHover: 'rgba(255,255,255, 0.1)', }, roadmap: { sectionHeader: '#00abe7', complete: '#ffffff', underway: '#ff21d0', planning: '#00abe7', whiteIcon: 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)', primaryIcon: 'invert(59%) sepia(96%) saturate(2939%) hue-rotate(159deg) brightness(94%) contrast(101%)', accentIcon: 'invert(52%) sepia(100%) saturate(6184%) hue-rotate(295deg) brightness(100%) contrast(109%)', }, filters: { grayscale: null, videospeed: 1, animationspeed: 0.4, }, breakpoint: { + large: '@media (max-width: 1300px)', medium: '@media (max-width: 920px)', small: '@media (max-width: 520px)', }, }; export const stealth = { colors: { primary: '#7f7f7f', primaryLight: '#a0a0a0', accent: '#8a8a8a', accentDark: '#797878', darkBackground: '#000000', contrast: '#ffffff', black: '#000', darkBlue: '#181818', videocover: 'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', navbarBackground: 'rgba(0, 0, 0, 0.65)', coretechBackground: 'rgba(0, 0, 0, 0.5)', coretechShadow1: 'rgba(0, 0, 0, 0.63)', coretechShadow2: 'rgba(255, 255, 255, 0.86)', colorSwatchBackground: 'rgba(255,255,255, 0.2)', gridlines: 'rgba(255,255,255, 0.2)', featureTileHover: '#c8c8c8', walletHover: 'rgba(255,255,255, 0.1)', }, roadmap: { sectionHeader: '#ffffff', complete: '#01ff85', underway: '#e9fe01', planning: '#ffffff', whiteIcon: 'invert(82%) sepia(11%) saturate(7038%) hue-rotate(89deg) brightness(104%) contrast(100%)', primaryIcon: 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)', accentIcon: 'invert(82%) sepia(98%) saturate(2292%) hue-rotate(8deg) brightness(102%) contrast(104%)', }, filters: { grayscale: 'filter: grayscale(100%);', videospeed: 0.4, animationspeed: 0.2, }, breakpoint: { + large: '@media (max-width: 1300px)', medium: '@media (max-width: 920px)', small: '@media (max-width: 520px)', }, };