more responsive styling

This commit is contained in:
saml33 2023-03-02 22:45:27 +11:00
parent f659fe1548
commit b841e93cf2
12 changed files with 127 additions and 64 deletions

View File

@ -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%"
/>

View File

@ -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

View File

@ -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>

View File

@ -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>
)
}

View File

@ -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>
)

View File

@ -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

View File

@ -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}
>

View File

@ -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

View File

@ -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>
)

View File

@ -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}

View File

@ -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