more responsive styling

components/footer/Footer.tsx

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

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 = () => {
           <CheckBullet>{t('home:bullet-3')}</CheckBullet>
           <CheckBullet showNewBadge>{t('home:bullet-4')}</CheckBullet>
           {/* <CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
-          <div className="mt-8">
+          <ButtonLink
-            <a
+            className="mt-8"
-              href="https://trade.mango.markets"
+            linkText={t('trade-now')}
-              target="_blank"
+            path="https://trade.mango.markets"
-              rel="noopener noreferrer"
+            size="large"
-            >
+          />
-              <Button size="large">{t('trade-now')}</Button>
-            </a>
-          </div>
         </div>
         <div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
           <img

components/mobile-app/MobileAppPage.tsx

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

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 (
     <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}>
+      <ThemeToggle />
-        {theme === 'Mango' ? (
+      <ButtonLink
-          <MoonIcon className="h-5 w-5" />
+        linkText={t('trade-now')}
-        ) : (
+        path="https://trade.mango.markets"
-          <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>
     </div>
   )
 }

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 (
     <div className="lg:hidden">
-      <IconButton hideBg onClick={() => setShowMenu(true)} size="medium">
+      <div className="flex items-center space-x-2">
-        <Bars3Icon className="h-6 w-6" />
+        <ThemeToggle />
-      </IconButton>
+        <IconButton hideBg onClick={() => setShowMenu(true)} size="medium">
+          <Bars3Icon className="h-6 w-6" />
+        </IconButton>
+      </div>
       <MenuPanel showMenu={showMenu} setShowMenu={setShowMenu} />
     </div>
   )

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 (
+    <IconButton hideBg size="medium" onClick={toggleTheme}>
+      {theme === 'Mango' ? (
+        <MoonIcon className="h-5 w-5" />
+      ) : (
+        <SunIcon className="h-5 w-5" />
+      )}
+    </IconButton>
+  )
+}
+
+export default ThemeToggle

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<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 ${
+      } default-transition font-display text-th-fgd-1
-        theme === 'High Contrast' && !secondary
-          ? 'text-th-bkg-1'
-          : 'text-th-fgd-1'
       } focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 ${className}`}
       {...props}
     >

components/shared/ButtonLink.tsx

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

components/shared/InlineImageWithText.tsx

@@ -12,28 +12,35 @@ const InlineImageWithText = ({
   desc: string
   title: string
   imageSrc: string
-  linkPath: string
+  linkPath?: string
-  linkText: 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">
+      <div className="w-full sm:w-1/2 flex md:justify-center mb-4 md:mb-0">
-        <img className="w-48 sm:w-auto h-auto" src={imageSrc} alt="" />
+        <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>
+        <p>{desc}</p>
-        <a href={linkPath} rel="noopener noreferrer" target="_blank">
+        {linkPath ? (
-          <LinkButton className="flex items-center">
+          <a
-            {linkText}
+            className="mt-6 block"
-            <ChevronRightIcon className="h-5 w-5 ml-1" />
+            href={linkPath}
-          </LinkButton>
+            rel="noopener noreferrer"
-        </a>
+            target="_blank"
+          >
+            <LinkButton className="flex items-center">
+              {linkText}
+              <ChevronRightIcon className="h-5 w-5 ml-1" />
+            </LinkButton>
+          </a>
+        ) : null}
       </div>
     </div>
   )

components/shared/Steps.tsx

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

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    'postcss-preset-env': { stage: 1 },
+    autoprefixer: {},
   },
 }