diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx index f32a87c..9167204 100644 --- a/components/footer/Footer.tsx +++ b/components/footer/Footer.tsx @@ -119,7 +119,7 @@ const Footer = () => {

diff --git a/components/home/HomeTopSection.tsx b/components/home/HomeTopSection.tsx index d48908a..cf13c06 100644 --- a/components/home/HomeTopSection.tsx +++ b/components/home/HomeTopSection.tsx @@ -1,9 +1,9 @@ -import Button from '../shared/Button' import { useTranslation } from 'next-i18next' import SectionWrapper from '../shared/SectionWrapper' import ColorBlur from '../shared/ColorBlur' import { useTheme } from 'next-themes' import CheckBullet from '../shared/CheckBullet' +import ButtonLink from '../shared/ButtonLink' const HomeTopSection = () => { const { t } = useTranslation(['common', 'home']) @@ -30,15 +30,12 @@ const HomeTopSection = () => { {t('home:bullet-3')} {t('home:bullet-4')} {/* {t('home:bullet-5')} */} -
- - - -
+
{ desc={t('mobile-app:send-payments-desc')} title={t('mobile-app:send-payments')} imageSrc="/images/img-placeholder.png" - linkPath="#" - linkText={t('learn-more')} /> diff --git a/components/navigation/DesktopNavigation.tsx b/components/navigation/DesktopNavigation.tsx index 5d865db..949e579 100644 --- a/components/navigation/DesktopNavigation.tsx +++ b/components/navigation/DesktopNavigation.tsx @@ -8,22 +8,13 @@ import { useState, } from 'react' import { useTranslation } from 'next-i18next' -import Button, { IconButton } from '../shared/Button' -import { useTheme } from 'next-themes' -import { MoonIcon, SunIcon } from '@heroicons/react/20/solid' import NavigationItemLink from './NavigationItemLink' +import ButtonLink from '../shared/ButtonLink' +import ThemeToggle from './ThemeToggle' const DesktopNavigation = () => { const { t } = useTranslation(['common', 'navigation']) - const { theme, setTheme } = useTheme() - const toggleTheme = () => { - if (theme === 'Mango') { - setTheme('Light') - } else { - setTheme('Mango') - } - } return (
@@ -115,20 +106,11 @@ const DesktopNavigation = () => { /> - - {theme === 'Mango' ? ( - - ) : ( - - )} - - - - + +
) } diff --git a/components/navigation/MobileNavigation.tsx b/components/navigation/MobileNavigation.tsx index 6315314..3b9d7b1 100644 --- a/components/navigation/MobileNavigation.tsx +++ b/components/navigation/MobileNavigation.tsx @@ -4,14 +4,18 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/20/solid' import { Transition } from '@headlessui/react' import NavigationItemLink from './NavigationItemLink' import { useTranslation } from 'next-i18next' +import ThemeToggle from './ThemeToggle' const MobileNavigation = () => { const [showMenu, setShowMenu] = useState(false) return (
- setShowMenu(true)} size="medium"> - - +
+ + setShowMenu(true)} size="medium"> + + +
) diff --git a/components/navigation/ThemeToggle.tsx b/components/navigation/ThemeToggle.tsx new file mode 100644 index 0000000..c0de754 --- /dev/null +++ b/components/navigation/ThemeToggle.tsx @@ -0,0 +1,37 @@ +import { MoonIcon, SunIcon } from '@heroicons/react/20/solid' +import { useTheme } from 'next-themes' +import { useEffect, useState } from 'react' +import { IconButton } from '../shared/Button' + +const ThemeToggle = () => { + const [mounted, setMounted] = useState(false) + const { theme, setTheme } = useTheme() + + useEffect(() => { + setMounted(true) + }, []) + + if (!mounted) { + return null + } + + const toggleTheme = () => { + if (theme === 'Mango') { + setTheme('Light') + } else { + setTheme('Mango') + } + } + + return ( + + {theme === 'Mango' ? ( + + ) : ( + + )} + + ) +} + +export default ThemeToggle diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx index dc6d3b8..56778a8 100644 --- a/components/shared/Button.tsx +++ b/components/shared/Button.tsx @@ -1,4 +1,3 @@ -import { useTheme } from 'next-themes' import { FunctionComponent, ReactNode } from 'react' interface AllButtonProps { @@ -24,7 +23,6 @@ const Button: FunctionComponent = ({ size = 'medium', ...props }) => { - const { theme } = useTheme() return (