more responsive styling
This commit is contained in:
parent
f659fe1548
commit
b841e93cf2
|
@ -119,7 +119,7 @@ const Footer = () => {
|
|||
</p>
|
||||
</div>
|
||||
<ColorBlur
|
||||
className="bg-th-down bottom-0 right-0 opacity-10"
|
||||
className="bg-th-down -top-20 md:bottom-0 right-0 opacity-10"
|
||||
height="300px"
|
||||
width="80%"
|
||||
/>
|
||||
|
|
|
@ -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 = () => {
|
|||
<CheckBullet>{t('home:bullet-3')}</CheckBullet>
|
||||
<CheckBullet showNewBadge>{t('home:bullet-4')}</CheckBullet>
|
||||
{/* <CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
|
||||
<div className="mt-8">
|
||||
<a
|
||||
href="https://trade.mango.markets"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button size="large">{t('trade-now')}</Button>
|
||||
</a>
|
||||
</div>
|
||||
<ButtonLink
|
||||
className="mt-8"
|
||||
linkText={t('trade-now')}
|
||||
path="https://trade.mango.markets"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
|
||||
<img
|
||||
|
|
|
@ -65,15 +65,11 @@ const MobileAppPage = () => {
|
|||
desc={t('mobile-app:send-payments-desc')}
|
||||
title={t('mobile-app:send-payments')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('mobile-app:accept-payments-desc')}
|
||||
title={t('mobile-app:accept-payments')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('mobile-app:deposit-now')}
|
||||
reverse
|
||||
/>
|
||||
</SectionWrapper>
|
||||
|
|
|
@ -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 (
|
||||
<div className="hidden lg:flex lg:items-center space-x-8">
|
||||
<NavigationItem title={t('navigation:about')}>
|
||||
|
@ -115,20 +106,11 @@ const DesktopNavigation = () => {
|
|||
/>
|
||||
</NavigationItemPanel>
|
||||
</NavigationItem>
|
||||
<IconButton hideBg size="medium" onClick={toggleTheme}>
|
||||
{theme === 'Mango' ? (
|
||||
<MoonIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<SunIcon className="h-5 w-5" />
|
||||
)}
|
||||
</IconButton>
|
||||
<a
|
||||
href="https://trade.mango.markets"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button className="text-sm">{t('trade-now')}</Button>
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
<ButtonLink
|
||||
linkText={t('trade-now')}
|
||||
path="https://trade.mango.markets"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<div className="lg:hidden">
|
||||
<IconButton hideBg onClick={() => setShowMenu(true)} size="medium">
|
||||
<Bars3Icon className="h-6 w-6" />
|
||||
</IconButton>
|
||||
<div className="flex items-center space-x-2">
|
||||
<ThemeToggle />
|
||||
<IconButton hideBg onClick={() => setShowMenu(true)} size="medium">
|
||||
<Bars3Icon className="h-6 w-6" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<MenuPanel showMenu={showMenu} setShowMenu={setShowMenu} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -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 (
|
||||
<IconButton hideBg size="medium" onClick={toggleTheme}>
|
||||
{theme === 'Mango' ? (
|
||||
<MoonIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<SunIcon className="h-5 w-5" />
|
||||
)}
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeToggle
|
|
@ -1,4 +1,3 @@
|
|||
import { useTheme } from 'next-themes'
|
||||
import { FunctionComponent, ReactNode } from 'react'
|
||||
|
||||
interface AllButtonProps {
|
||||
|
@ -24,7 +23,6 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
size = 'medium',
|
||||
...props
|
||||
}) => {
|
||||
const { theme } = useTheme()
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
|
@ -39,10 +37,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
: size === 'large'
|
||||
? 'h-12 px-6'
|
||||
: 'h-8 px-3'
|
||||
} default-transition font-display ${
|
||||
theme === 'High Contrast' && !secondary
|
||||
? 'text-th-bkg-1'
|
||||
: 'text-th-fgd-1'
|
||||
} default-transition font-display text-th-fgd-1
|
||||
} focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 ${className}`}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
|
||||
interface ButtonLinkProps {
|
||||
path: string
|
||||
className?: string
|
||||
secondary?: boolean
|
||||
linkText: string
|
||||
size?: 'large' | 'medium' | 'small'
|
||||
}
|
||||
|
||||
const ButtonLink: FunctionComponent<ButtonLinkProps> = ({
|
||||
linkText,
|
||||
path,
|
||||
className,
|
||||
secondary,
|
||||
size = 'medium',
|
||||
}) => {
|
||||
return (
|
||||
<a
|
||||
className={`flex w-max items-center justify-center rounded-md ${
|
||||
secondary
|
||||
? 'border border-th-button md:hover:border-th-button-hover'
|
||||
: 'bg-th-button md:hover:bg-th-button-hover'
|
||||
} ${
|
||||
size === 'medium'
|
||||
? 'h-10 px-4 text-sm'
|
||||
: size === 'large'
|
||||
? 'h-12 px-6'
|
||||
: 'h-8 px-3'
|
||||
} default-transition font-display focus:outline-none text-th-fgd-1 ${className}`}
|
||||
href={path}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{linkText}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonLink
|
|
@ -12,28 +12,35 @@ const InlineImageWithText = ({
|
|||
desc: string
|
||||
title: string
|
||||
imageSrc: string
|
||||
linkPath: string
|
||||
linkText: string
|
||||
linkPath?: string
|
||||
linkText?: string
|
||||
reverse?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col md:flex-row md:items-center md:space-x-10 mt-12 ${
|
||||
className={`flex flex-col sm:flex-row sm:items-center sm:space-x-10 mt-12 ${
|
||||
reverse ? 'md:flex-row-reverse md:justify-between' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="w-full md:w-1/2 flex md:justify-center mb-8 md:mb-0">
|
||||
<img className="w-48 sm:w-auto h-auto" src={imageSrc} alt="" />
|
||||
<div className="w-full sm:w-1/2 flex md:justify-center mb-4 md:mb-0">
|
||||
<img className="w-32 sm:w-auto h-auto" src={imageSrc} alt="" />
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<h3 className="mb-3">{title}</h3>
|
||||
<p className="mb-6">{desc}</p>
|
||||
<a href={linkPath} rel="noopener noreferrer" target="_blank">
|
||||
<LinkButton className="flex items-center">
|
||||
{linkText}
|
||||
<ChevronRightIcon className="h-5 w-5 ml-1" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
<p>{desc}</p>
|
||||
{linkPath ? (
|
||||
<a
|
||||
className="mt-6 block"
|
||||
href={linkPath}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{linkText}
|
||||
<ChevronRightIcon className="h-5 w-5 ml-1" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -59,11 +59,16 @@ const StepItem = ({
|
|||
? 'md:bg-th-bkg-2'
|
||||
: 'md:bg-th-bkg-1'
|
||||
: 'md:opacity-40'
|
||||
} flex flex-row space-x-4 md:space-x-6 mb-8 last:mb-0 md:mb-0 items-start md:py-12 lg:pl-20 pl-6 h-auto md:h-64 default-transition md:pr-40 md:-mr-32 w-full`}
|
||||
} flex flex-row space-x-4 md:space-x-6 mb-12 last:mb-0 md:mb-0 items-start md:py-12 lg:pl-20 pl-6 h-auto md:h-64 default-transition md:pr-40 md:-mr-32 w-full`}
|
||||
>
|
||||
<h3>{`0${index + 1}`}</h3>
|
||||
<div className="border-b-2 border-th-fgd-2 h-4 w-full max-w-[24px] md:max-w-[40px]" />
|
||||
<div>
|
||||
<img
|
||||
className="md:hidden w-auto h-32 mb-4"
|
||||
src={imagePath}
|
||||
alt=""
|
||||
/>
|
||||
<h3 className="mb-3">{t(title)}</h3>
|
||||
<p className="max-w-[800px]">{t(desc)}</p>
|
||||
{children ? children : null}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
'postcss-preset-env': { stage: 1 },
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue