EGN-417 - Reconcile UI package

apps/_root/app/(landing)/components/AnimatedTitle.tsx

@@ -1,4 +1,4 @@
-import { classNames, Typography } from '@sushiswap/ui'
+import { classNames } from '@sushiswap/ui'
 import { useInView } from 'framer-motion'
 import { FC, ReactNode, useRef } from 'react'
 
@@ -7,10 +7,8 @@ export const AnimatedTitle: FC<{ children: ReactNode; className?: string }> = ({
   const isInView = useInView(ref, { once: true })
 
   return (
-    <Typography
-      variant="hero"
-      weight={600}
-      className={classNames(className, 'max-w-[740px]')}
+    <p
+      className={classNames(className, 'text-5xl font-semibold max-w-[740px]')}
       ref={ref}
       style={{
         transform: isInView ? 'none' : 'translateX(-100px)',
@@ -19,6 +17,6 @@ export const AnimatedTitle: FC<{ children: ReactNode; className?: string }> = ({
       }}
     >
       {children}
-    </Typography>
+    </p>
   )
 }

apps/_root/app/(landing)/components/BuildFuture.tsx

@@ -1,13 +1,12 @@
-import { ChevronRightIcon } from '@heroicons/react-v1/solid'
-import { Button, Container, Typography } from '@sushiswap/ui'
 import { motion } from 'framer-motion'
 import React, { FC } from 'react'
 
 import { ExpandableCard } from './ExpandableCard'
 import { AnimatedTitle } from './AnimatedTitle'
 
-import { BentoBoxSVG } from './svgs/BentoBoxSVG'
-import { SwitchSVG } from './svgs/SwitchSVG'
+import { BentoBoxSVG, SwitchSVG } from './svgs'
+import { Button } from '@sushiswap/ui/components/button'
+import { Container } from '@sushiswap/ui/components/container'
 
 const DATA = [
   {
@@ -67,7 +66,7 @@ export const BuildFuture: FC = () => {
     <section className="px-4 py-20 sm:py-40">
       <Container maxWidth="5xl" className="mx-auto">
         <div className="flex flex-col gap-20">
-          <AnimatedTitle className="text-center md:text-left !max-w-full">
+          <AnimatedTitle className="text-center md:text-left !max-w-full tracking-tight">
             Help build <span className="text-pink">the future</span> with Sushi.{' '}
             <span className="text-neutral-400">{`We invite all developers to explore Sushi's frameworks.`}</span>
           </AnimatedTitle>
@@ -98,27 +97,13 @@ export const BuildFuture: FC = () => {
                         >
                           <div className="flex items-center gap-3">
                             <Icon width={40} height={40} className="text-neutral-50 opacity-1" />
-                            <Typography weight={500} className="text-neutral-400">
-                              {category}
-                            </Typography>
+                            <span className="font-medium text-neutral-400">{category}</span>
                           </div>
-                          <Typography
-                            as={motion.h1}
-                            layoutId={titleId}
-                            weight={600}
-                            variant="h3"
-                            className="text-left text-neutral-50"
-                          >
+                          <motion.h1 layoutId={titleId} className="text-4xl font-semibold text-left text-neutral-50">
                             {title}
-                          </Typography>
+                          </motion.h1>
                           <div>
-                            <Button
-                              className="!p-0"
-                              variant="empty"
-                              endIcon={<ChevronRightIcon width={16} height={16} />}
-                            >
-                              View More
-                            </Button>
+                            <Button variant="ghost">View More</Button>
                           </div>
                         </motion.div>
                       </motion.div>

apps/_root/app/(landing)/components/BuildWealth.tsx

@@ -1,9 +1,9 @@
-import { Container, Typography } from '@sushiswap/ui'
 import Image from 'next/legacy/image'
 import React, { FC } from 'react'
 
 import { ExpandableCard } from './ExpandableCard'
 import { AnimatedTitle } from './AnimatedTitle'
+import { Container } from '@sushiswap/ui/components/container'
 
 export const BuildWealth: FC = () => {
   return (
@@ -25,14 +25,14 @@ export const BuildWealth: FC = () => {
               />
             </div>
             <div className="flex flex-col items-center md:items-start">
-              <Typography variant="h1" weight={600} className="text-center md:text-left">
+              <p className="text-4xl font-semibold  text-center md:text-left">
                 Earn passive income with <br /> your coins.
-              </Typography>
-              <Typography variant="lg" weight={400} className="mt-2 text-center md:text-left">
+              </p>
+              <p className="text-lg mt-2 text-center md:text-left">
                 With multiple ways to passively earn yield on your coins, you can choose your own yield stack and make
                 your money work for you, all in the background, 24/7.
-              </Typography>
-              <div className="flex flex-wrap justify-center md:justify-start gap-x-6">
+              </p>
+              <div className="flex flex-wrap justify-center md:justify-start gap-x-3">
                 <ExpandableCard
                   caption="For Retail Users"
                   title="Provide Liquidity"

apps/_root/app/(landing)/components/Ecosystem.tsx

@@ -1,8 +1,8 @@
-import { ChevronRightIcon } from '@heroicons/react-v1/solid'
-import { Button, Container, Tab, Typography } from '@sushiswap/ui'
+import { Button } from '@sushiswap/ui/components/button'
+import { Container } from '@sushiswap/ui/components/container'
 import { motion } from 'framer-motion'
-import Image from "next/legacy/image";
-import React, { FC, useState } from 'react'
+import Image from 'next/legacy/image'
+import React, { FC } from 'react'
 
 import { ExpandableCard, ExpendableCardData } from './ExpandableCard'
 
@@ -111,8 +111,6 @@ const TABS: TabsExpendableCardData[] = [
 // }
 
 export const Ecosystem: FC = () => {
-  const [_index, setIndex] = useState(0)
-
   return (
     <section className="px-1 py-20 overflow-x-hidden sm:py-40">
       <Container maxWidth="5xl" className="mx-auto">
@@ -123,52 +121,36 @@ export const Ecosystem: FC = () => {
             <div className="rounded-full w-[10px] h-[10px] bg-green" />
           </div>
           <div className="flex flex-col gap-3 pt-10">
-            <Typography weight={400} className="text-center text-slate-400">
-              Ecosystem
-            </Typography>
-            <Typography variant="hero" weight={600} className="!text-4xl !md:text-5xl px-4 text-center">
+            <span className="text-center text-slate-400">Ecosystem</span>
+            <span className="font-semibold !text-4xl !md:text-5xl px-4 text-center">
               Explore our <span className="text-blue">DeFi</span> Payment Solution
-            </Typography>
-            <Tab.Group selectedIndex={_index} onChange={setIndex}>
-              <Tab.Panels>
-                <div className="flex items-center p-10 min-h-[420px]">
-                  {TABS.map(({ title, content, image, summary, link, linkText, caption }) => (
-                    <Tab.Panel key={title} className="grid items-center grid-cols-1 gap-20 md:grid-cols-2">
-                      <div className="relative h-[420px] md:max-w-[420px] md:max-h-[420px] w-full h-full flex items-center justify-center">
-                        <div className="absolute w-[210px] h-[210px] bg-pink rounded-full blur-[200px]" />
-                        <Image alt="stellar" objectFit="contain" src={image} width={420} height={420} />
-                      </div>
-                      <ExpandableCard title={title} caption={caption} content={content} link={link} linkText={linkText}>
-                        {({ setOpen, containerId, titleId }) => (
-                          <motion.div layoutId={containerId} className="flex flex-col items-center lg:items-start">
-                            <Typography
-                              as={motion.h1}
-                              layoutId={titleId}
-                              variant="h1"
-                              weight={600}
-                              className="flex flex-col items-center text-center lg:items-start lg:text-left"
-                            >
-                              {title}
-                            </Typography>
-                            <Typography variant="lg" weight={400} className="mt-2 text-center lg:text-left">
-                              {summary}
-                            </Typography>
-                            <Button
-                              onClick={() => setOpen(true)}
-                              className="!p-0 mt-3"
-                              variant="empty"
-                              endIcon={<ChevronRightIcon width={16} height={16} />}
-                            >
-                              Learn More
-                            </Button>
-                          </motion.div>
-                        )}
-                      </ExpandableCard>
-                    </Tab.Panel>
-                  ))}
+            </span>
+            <div className="flex items-center p-10 min-h-[420px]">
+              {TABS.map(({ title, content, image, summary, link, linkText, caption }) => (
+                <div key={title} className="grid items-center grid-cols-1 gap-20 md:grid-cols-2">
+                  <div className="relative h-[420px] md:max-w-[420px] md:max-h-[420px] w-full h-full flex items-center justify-center">
+                    <div className="absolute w-[210px] h-[210px] bg-pink rounded-full blur-[200px]" />
+                    <Image alt="stellar" objectFit="contain" src={image} width={420} height={420} />
+                  </div>
+                  <ExpandableCard title={title} caption={caption} content={content} link={link} linkText={linkText}>
+                    {({ setOpen, containerId, titleId }) => (
+                      <motion.div layoutId={containerId} className="flex flex-col items-center lg:items-start">
+                        <motion.h1
+                          layoutId={titleId}
+                          className="text-4xl font-semibold flex flex-col items-center text-center lg:items-start lg:text-left"
+                        >
+                          {title}
+                        </motion.h1>
+                        <span className="text-lg mt-2 text-center lg:text-left mb-3">{summary}</span>
+                        <Button onClick={() => setOpen(true)} variant="secondary">
+                          Learn More
+                        </Button>
+                      </motion.div>
+                    )}
+                  </ExpandableCard>
                 </div>
-              </Tab.Panels>
-            </Tab.Group>
+              ))}
+            </div>
           </div>
         </div>
       </Container>

apps/_root/app/(landing)/components/ExpandableCard.tsx

@@ -1,8 +1,7 @@
-import { ChevronRightIcon, ExternalLinkIcon } from '@heroicons/react-v1/solid'
-import { Button, Link, Typography } from '@sushiswap/ui'
 import { AnimatePresence, AnimateSharedLayout, motion } from 'framer-motion'
 import { nanoid } from 'nanoid'
 import React, { FC, ReactNode, useCallback, useState } from 'react'
+import { Button } from '@sushiswap/ui/components/button'
 
 interface ExpandableCardRenderProps {
   open: boolean
@@ -40,13 +39,7 @@ export const ExpandableCard: FC<ExpandableCardProps> = ({ children, title, capti
       ) : (
         <motion.div layoutId={`container-${id}`}>
           <motion.div layoutId={`container-title-${id}`}>
-            <Button
-              onClick={() => setOpen(true)}
-              className="!p-0 mt-3 whitespace-nowrap"
-              size="md"
-              variant="empty"
-              endIcon={<ChevronRightIcon width={16} height={16} />}
-            >
+            <Button onClick={() => setOpen(true)} className="mt-3 whitespace-nowrap" variant="secondary">
               {title}
             </Button>
           </motion.div>
@@ -73,31 +66,18 @@ export const ExpandableCard: FC<ExpandableCardProps> = ({ children, title, capti
                 layoutId={`container-${id}`}
                 className="bg-neutral-800 p-4 md:p-[36px] max-h-[80vh] overflow-y-scroll scroll overflow-x-hidden rounded-xl flex flex-col gap-2 items-start"
               >
-                <Typography variant="xs" weight={600} className="mb-1 uppercase text-neutral-400">
-                  {caption}
-                </Typography>
-                <Typography
-                  as={motion.h1}
-                  layoutId={`container-title-${id}`}
-                  variant="h1"
-                  weight={600}
-                  className="text-left"
-                >
+                <span className="text-xs font-medium mb-1 uppercase text-neutral-400">{caption}</span>
+                <motion.h1 layoutId={`container-title-${id}`} className="text-4xl font-semibold text-left">
                   {title}
-                </Typography>
+                </motion.h1>
                 <motion.div className="max-w-[700px] prose !prose-invert prose-neutral mt-5 pt-5 border-t border-neutral-200/5">
                   {content}
                 </motion.div>
-                <motion.div>
-                  <Button
-                    target="_blank"
-                    as={Link.External}
-                    href={link}
-                    className="!p-0 mt-3 !no-underline"
-                    variant="empty"
-                    endIcon={<ExternalLinkIcon width={16} height={16} />}
-                  >
-                    {linkText}
+                <motion.div className="mt-3">
+                  <Button variant="secondary">
+                    <a target="_blank" href={link} rel="noopener noreferrer">
+                      {linkText}
+                    </a>
                   </Button>
                 </motion.div>
               </motion.div>

apps/_root/app/(landing)/components/Hero.tsx

@@ -1,13 +1,13 @@
 import { ChainId } from '@sushiswap/chain'
 import { Native, SUSHI } from '@sushiswap/currency'
 import { useInterval } from '@sushiswap/hooks'
-import { classNames, Container, Typography } from '@sushiswap/ui'
 import { motion } from 'framer-motion'
 import React, { FC, useEffect, useState } from 'react'
-import { Button } from '@sushiswap/ui/future/components/button/Button'
+import { Button } from '@sushiswap/ui/components/button'
 import { Search } from './Search'
 import { CurrencyInput } from '@sushiswap/wagmi/future/components/Web3Input/Currency'
 import { ArrowDownIcon } from '@heroicons/react/24/outline'
+import { Container } from '@sushiswap/ui/components/container'
 
 const TITLES = ['Whenever', 'Wherever', 'Whoever']
 const VALUES = [
@@ -40,12 +40,12 @@ export const Hero: FC = () => {
       <Container maxWidth="5xl" className="px-4 mx-auto">
         <div className="grid grid-cols-1 lg:grid-cols-[auto_400px] flex justify-between gap-[100px]">
           <div className="flex flex-col">
-            <Typography variant="hero" weight={800} className="text-neutral-50 leading-[3.5rem]">
-              Buy and Sell Instantly on Sushi. <br /> <span className="text-blue"> {TITLES[index]}.</span>
-            </Typography>
-            <Typography variant="lg" className="mt-3 text-neutral-400">
+            <p className="text-5xl font-semibold text-neutral-50 leading-[3.5rem] tracking-tight">
+              Buy and Sell Instantly on Sushi. <span className="text-blue"> {TITLES[index]}.</span>
+            </p>
+            <p className="text-lg mt-3 text-neutral-400">
               No registration needed. Over 400 tokens to trade at your fingertips.
-            </Typography>
+            </p>
             <div className="mt-10">
               <Search />
             </div>
@@ -68,10 +68,10 @@ export const Hero: FC = () => {
                 }}
               >
                 <div className="flex gap-2 mb-4">
-                  <Button size="sm" variant="outlined" color="default">
+                  <Button size="sm" variant="secondary">
                     Swap
                   </Button>
-                  <Button className="pointer-events-none opacity-40" size="sm" variant="empty" color="default">
+                  <Button className="pointer-events-none opacity-40" size="sm" variant="secondary">
                     Limit
                   </Button>
                 </div>
@@ -115,8 +115,8 @@ export const Hero: FC = () => {
                 }}
                 className="mt-4"
               >
-                <Button as="a" href="https://www.sushi.com/swap" size="xl" fullWidth>
-                  Trade Now
+                <Button size="xl" asChild fullWidth>
+                  <a href="https://www.sushi.com/swap">Trade Now</a>
                 </Button>
               </motion.div>
             </motion.div>