diff --git a/lib/theme/icons.js b/lib/theme/icons.js index 95b4faea3..849e23dd7 100644 --- a/lib/theme/icons.js +++ b/lib/theme/icons.js @@ -9,6 +9,241 @@ SPDX-License-Identifier: AGPL-3.0-or-later import { icons as daiUiIcons } from '@makerdao/dai-ui-icons'; import { icons as brandIcons } from '@makerdao/dai-ui-icons-branding'; +const skyIcon = ({ darkMode = false } = {}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + export const icons = { chevron_right: daiUiIcons.chevron_right, chevron_left: daiUiIcons.chevron_left, @@ -36,6 +271,14 @@ export const icons = { ), viewBox: '0 0 20 20' }, + sky: { + path: skyIcon(), + viewBox: '0 0 160 56' + }, + sky_white: { + path: skyIcon({ darkMode: true }), + viewBox: '0 0 160 56' + }, maker: { path: ( diff --git a/modules/app/components/layout/Header.tsx b/modules/app/components/layout/Header.tsx index 851dbfd39..160015b79 100644 --- a/modules/app/components/layout/Header.tsx +++ b/modules/app/components/layout/Header.tsx @@ -134,6 +134,7 @@ const Header = (): JSX.Element => { const { network } = useWeb3(); const { data: gas } = useGasPrice({ network }); const [mode, setMode] = useColorMode(); + const [renderedMode, setRenderedMode] = useState('light'); const onToggleTheme = () => { const next = mode === 'dark' ? 'light' : 'dark'; @@ -142,6 +143,10 @@ const Header = (): JSX.Element => { setMode(next); }; + useEffect(() => { + setRenderedMode(mode); + }, [mode]); + return ( { > - - + + @@ -309,8 +318,12 @@ const MobileMenu = ({ hide, router, gas, onToggleTheme, mode, network }) => { }} > - - + + diff --git a/modules/app/components/layout/header/Banner.tsx b/modules/app/components/layout/header/Banner.tsx index 1049563b4..e38854f55 100644 --- a/modules/app/components/layout/header/Banner.tsx +++ b/modules/app/components/layout/header/Banner.tsx @@ -8,6 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later import { Text, Alert } from 'theme-ui'; import { keyframes } from '@emotion/react'; +import { ExternalLink } from '../../ExternalLink'; +import React from 'react'; +import { Icon } from '@makerdao/dai-ui-icons'; const scroll = keyframes({ from: { transform: 'translate(60vw, 0)' }, @@ -16,11 +19,26 @@ const scroll = keyframes({ const Banner = ({ content, - variant = 'banner' + variant = 'banner', + href }: { content: string | React.ReactElement; variant?: string; + href?: string; }): React.ReactElement => { + const arrow = href ? : null; + const textComponent = ( + + {content} {arrow} + + ); + return ( {typeof content === 'string' ? ( - - {content} - + href ? ( + + {textComponent} + + ) : ( +
{textComponent}
+ ) ) : ( content )} diff --git a/modules/home/components/Footer.tsx b/modules/home/components/Footer.tsx index f38155c7c..d4b3e95b4 100644 --- a/modules/home/components/Footer.tsx +++ b/modules/home/components/Footer.tsx @@ -41,7 +41,7 @@ const ContactSection = ({ heading, logos, icon }) => { ))} - + ); }; @@ -59,105 +59,50 @@ export default function Footer({ locale = 'en' }: { locale?: string }): React.Re const links = [ { - header: t('Governance'), + header: t('Participate'), list: [ { url: 'https://forum.makerdao.com/', - title: t('Forum') - }, - { - url: 'https://manual.makerdao.com/', - title: t('Operational Manual') - }, - { - url: 'https://manual.makerdao.com/', - title: t('Governance FAQs') - }, - { - url: 'https://docs.google.com/spreadsheets/d/1LWNlv6hr8oXebk8rvXZBPRVDjN-3OrzI0IgLwBVk0vM/edit#gid=0', - title: t('Gov Tracking Sheet') - }, - { - url: 'https://manual.makerdao.com/governance/governance-cycle/monthly-governance-cycle', - title: t('Monthly Gov Cycle') - }, - { - url: 'https://manual.makerdao.com/governance/governance-cycle/weekly-governance-cycle', - title: t('Weekly Gov Cycle') + title: t('Community') } ] }, { - header: t('Products & Tools'), + header: t('Ecosystem'), list: [ { - url: 'https://makerdao.statuspage.io/', - title: t('Service Status') + url: 'https://sky.money/', + title: t('sky.money') }, - { - url: 'https://auctions.makerdao.network/', - title: t('Auctions Dashboard') + url: 'https://web3-growth.notion.site/Sky-Brand-Kit-ec871fa39f9d41bf9cc4446e7d1f6997?p=ebe95d12947642b6bf69cbac9d09c972&pm=c', + title: t('Brand Guidelines') }, { - url: 'https://migrate.makerdao.com/', - title: t('Migrate Dashboard') + url: 'https://www.notion.so/Sky-Brand-Kit-ec871fa39f9d41bf9cc4446e7d1f6997?pvs=4', + title: t('Media Assets') }, { - url: 'https://makerburn.com/', - title: t('MakerBurn') - }, - { - url: 'https://daistats.com/', - title: t('DAI Stats') - }, - { - url: 'https://vote.makerdao.com/terms', - title: t('Terms') + url: 'https://sky.money/faq', + title: t('FAQs') } ] }, { - header: t('Developer'), + header: t('Build'), list: [ { - url: 'https://makerdao.com/whitepaper', - title: t('Whitepaper') - }, - { - url: 'https://docs.makerdao.com/', - title: t('Technical Docs') - }, - { - url: 'https://vote.makerdao.com/api-docs', - title: t('API Docs') - }, - { - url: 'https://github.com/makerdao/developerguides', - title: t('Developer Guides') - }, - { - url: 'https://www.notion.so/makerdao/Maker-Brand-ac517c82ff9a43089d0db5bb2ee045a4', - title: t('Brand Assets') + url: 'https://developers.sky.money/', + title: t('Developer Documentation') } ] } ]; const logos = { - makerdao: [ - { title: 'Discord', url: 'https://chat.makerdao.com', icon: 'discord' }, - { title: 'Twitter', url: 'https://twitter.com/MakerDAO', icon: 'twitter' }, - { title: 'Reddit', url: 'https://www.reddit.com/r/MakerDAO/', icon: 'reddit' }, - { title: 'YouTube', url: 'https://www.youtube.com/MakerDAO', icon: 'youtube' }, - { title: 'GitHub', url: 'https://www.github.com/makerdao', icon: 'github' } - ], - makerdux: [ - { title: 'Discord', url: 'https://discord.gg/GHcFMdKden', icon: 'discord' }, - { title: 'Twitter', url: 'https://twitter.com/MakerDUX', icon: 'twitter' }, - { title: 'GitHub', url: 'https://github.com/makerdao/governance-portal-v2', icon: 'github' }, - { title: 'Canny', url: 'https://makergovernance.canny.io/', icon: 'canny' }, - { title: 'Immunefi', url: 'https://immunefi.com/bounty/makerdao/', icon: 'immunefi' } + sky: [ + { title: 'Discord', url: 'https://discord.gg/skyecosystem', icon: 'discord' }, + { title: 'Twitter', url: 'https://x.com/SkyEcosystem', icon: 'twitter' } ] }; @@ -197,7 +142,11 @@ export default function Footer({ locale = 'en' }: { locale?: string }): React.Re pb: 5 }} > - + - ); diff --git a/modules/home/data/bannerContent.json b/modules/home/data/bannerContent.json index 813e4ae5e..d91bf07ab 100644 --- a/modules/home/data/bannerContent.json +++ b/modules/home/data/bannerContent.json @@ -2,5 +2,11 @@ { "active": false, "content": "Warning: The hat is going to expire soon, please vote on the latest executive" + }, + { + "active": true, + "content": "MakerDAO is now Sky — the next evolution of DeFi. Explore Sky.money and get rewarded for saving without giving up control.", + "href": "https://sky.money", + "variant": "alerts.primary" } ] diff --git a/pages/_app.tsx b/pages/_app.tsx index 08aaaa5ca..74acc9a29 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -43,7 +43,13 @@ const App = ({ Component, pageProps }: AppProps): React.ReactElement => { const banners = useMemo(() => { return ( - {activeBannerContent && } + {activeBannerContent && ( + + )} );