chore: button styles

app/history/components/HistoryContent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import PrimaryButton from '@/components/common/PrimaryButton';
+import Link from 'next/link';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import useUserPositions from '@/hooks/useUserPositions';
@@ -28,7 +29,11 @@ export default function HistoryContent({ account }: { account: string }) {
         )}
 
         <div className="flex justify-center pt-14">
-          <PrimaryButton href={`/positions/${account}`}>Back to Portfolio</PrimaryButton>
+          <Link href={`/positions/${account}`}>
+            <Button variant="solid" color="primary" className="px-10 py-4 font-zen" size="lg">
+              Back to Portfolio
+            </Button>
+          </Link>
         </div>
       </div>
     </div>

app/home/HomePage.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useAccount } from 'wagmi';
-import PrimaryButton from '@/components/common/PrimaryButton';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 
 export default function HomePage() {
@@ -105,12 +106,16 @@ export default function HomePage() {
             </h2>
           </div>
           <div className="mt-8 flex w-full justify-center gap-4 px-4 sm:w-auto sm:flex-row">
-            <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
-              Why Monarch
-            </PrimaryButton>
-            <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
-              Get Started
-            </PrimaryButton>
+            <Link href="/info" className="block w-full sm:w-auto">
+              <Button variant="default" className="w-full px-10 py-4 font-zen" size="lg">
+                Why Monarch
+              </Button>
+            </Link>
+            <Link href={`/positions/${address ?? ''}`} className="block w-full sm:w-auto">
+              <Button variant="cta" className="w-full px-10 py-4 font-zen" size="lg">
+                Launch App
+              </Button>
+            </Link>
           </div>
         </section>
       </main>

app/market/[chainId]/[marketid]/content.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import { Button } from '@nextui-org/button';
 import { Card, CardHeader, CardBody } from '@nextui-org/card';
 import { Spinner } from '@nextui-org/spinner';
 import { ExternalLinkIcon, ChevronLeftIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { formatUnits } from 'viem';
+import { Button } from '@/components/common';
 import { OracleFeedInfo } from '@/components/FeedInfo/OracleFeedInfo';
 import Header from '@/components/layout/header/Header';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
@@ -124,22 +124,20 @@ function MarketContent() {
       <div className="container mx-auto px-4 py-8 pb-4 font-zen">
         {/* navigation bottons */}
         <div className="flex justify-between">
-          <Button
-            onClick={handleBackToMarkets}
-            className="bg-surface mb-4 rounded-md"
-            startContent={<ChevronLeftIcon />}
-          >
+          <Button onClick={handleBackToMarkets} size="md" className="mb-4">
+            <ChevronLeftIcon className="mr-2" />
             Back to Markets
           </Button>
 
           <Button
-            className="bg-surface mb-4 rounded-md"
+            size="md"
+            className="mb-4"
             onClick={() =>
               window.open(getMarketURL(market.uniqueKey, market.morphoBlue.chain.id), '_blank')
             }
-            endContent={<Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} />}
           >
             View on Morpho Blue
+            <Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} className="ml-2" />
           </Button>
         </div>
 

app/markets/components/MarketTableBody.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Tooltip, Button } from '@nextui-org/react';
+import { Tooltip } from '@nextui-org/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { FaShieldAlt } from 'react-icons/fa';
 import { GoStarFill, GoStar } from 'react-icons/go';
+import { Button } from '@/components/common/Button';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
 import { formatReadable } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
@@ -159,7 +160,8 @@ export function MarketTableBody({
                 <div className="flex items-center justify-center">
                   <Button
                     size="sm"
-                    className="rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary"
+                    variant="interactive"
+                    className="text-xs"
                     onClick={() => {
                       setSelectedMarket(item);
                       setShowSupplyModal(true);

app/markets/components/markets.tsx

@@ -6,6 +6,7 @@ import storage from 'local-storage-fallback';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSync } from 'react-icons/fa';
 import { toast } from 'react-toastify';
+import { Button } from '@/components/common';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
@@ -395,17 +396,16 @@ export default function Markets() {
           </div>
 
           <div className="mt-4 flex gap-2 lg:mt-0">
-            <button
-              onClick={handleRefresh}
-              type="button"
+            <Button
               disabled={loading || isRefetching}
-              className={`flex items-center gap-2 rounded bg-gray-200 p-2 px-3 text-sm text-secondary transition-colors hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 ${
-                loading || isRefetching ? 'cursor-not-allowed opacity-50' : ''
-              }`}
+              variant="light"
+              size="sm"
+              className="text-secondary"
+              onClick={handleRefresh}
             >
-              <FaSync className={`${loading || isRefetching ? 'animate-spin' : ''}`} size={10} />
+              <FaSync className={`${isRefetching ? 'animate-spin' : ''} mr-2`} size={10} />
               Refresh
-            </button>
+            </Button>
           </div>
         </div>
 

app/markets/components/marketsTable.tsx

@@ -49,7 +49,7 @@ function MarketsTable({
   const totalPages = Math.ceil(markets.length / entriesPerPage);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 pb-4">
       <div className="w-full overflow-x-auto">
         <table className="responsive w-full rounded-md font-zen">
           <thead className="table-header">

app/positions/components/FromAndToMarkets.tsx

@@ -92,7 +92,7 @@ export function FromAndToMarkets({
       <div className="w-2/5">
         <h3 className="mb-2 text-lg font-semibold">Your Market Positions</h3>
         <Input
-          placeholder="Filter your positions or Market ID"
+          placeholder="Filter with Market ID or Collateral"
           value={fromFilter}
           onChange={(e) => onFromFilterChange(e.target.value)}
           className="mb-2"
@@ -228,7 +228,7 @@ export function FromAndToMarkets({
       <div className="w-3/5">
         <h3 className="mb-2 text-lg font-semibold">Available Markets for Rebalancing</h3>
         <Input
-          placeholder="Filter available markets or Market ID"
+          placeholder="Filter with Market ID or Collateral"
           value={toFilter}
           onChange={(e) => onToFilterChange(e.target.value)}
           className="mb-2"

app/positions/components/PositionsContent.tsx

@@ -7,6 +7,7 @@ import { useParams } from 'next/navigation';
 import { FaHistory, FaGift, FaPlus, FaCircle } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
@@ -64,37 +65,30 @@ export default function Positions() {
             </div>
           </div>
           <div className="flex gap-4">
-            <Link href={`/history/${account}`} className="no-underline">
-              <button
-                type="button"
-                aria-label="View history"
-                className="bg-surface flex items-center gap-2 rounded p-2 font-zen text-sm text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
-                <FaHistory size={14} />
+            <Link href={`/history/${account}`}>
+              <Button size="md" className="font-zen text-secondary">
+                <FaHistory size={14} className="mr-2" />
                 History
-              </button>
+              </Button>
             </Link>
-            <Link href={`/rewards/${account}`} className="no-underline">
-              <button
-                type="button"
-                aria-label="View rewards"
-                className="bg-surface flex items-center gap-2 rounded p-2 font-zen text-sm text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
-                <FaGift size={14} />
+            <Link href={`/rewards/${account}`}>
+              <Button size="md" className="font-zen text-secondary">
+                <FaGift size={14} className="mr-2" />
                 Rewards
-              </button>
+              </Button>
             </Link>
             {isOwner && (
-              <Link href="/positions/onboarding" className="no-underline">
-                <button
-                  aria-label="Create a new position"
-                  type="button"
-                  className="bg-monarch-orange hover:bg-monarch-orange/90 flex items-center gap-2 rounded p-2 font-zen text-sm text-white shadow-sm transition-all duration-200 ease-in-out hover:shadow-md"
+              <Link href="/positions/onboarding">
+                <Button
+                  variant="solid"
+                  color="primary"
+                  size="md"
+                  className="font-zen"
                   disabled={account !== address}
                 >
-                  <FaPlus size={14} />
+                  <FaPlus size={14} className="mr-2" />
                   New Position
-                </button>
+                </Button>
               </Link>
             )}
           </div>
@@ -126,13 +120,11 @@ export default function Positions() {
         ) : !hasSuppliedMarkets ? (
           <div className="flex flex-col items-center gap-8">
             <EmptyScreen message="No open supplies. Start lending now!" />
-            <Link href="/positions/onboarding" passHref>
-              <button
-                type="button"
-                className="bg-monarch-orange mx-auto rounded px-8 py-3 font-zen text-white opacity-90 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
+            <Link href="/positions/onboarding">
+              <Button variant="solid" color="primary" size="lg" className="font-zen">
+                <FaPlus size={14} className="mr-2" />
                 Start Lending
-              </button>
+              </Button>
             </Link>
           </div>
         ) : (

app/positions/components/PositionsSummaryTable.tsx

@@ -1,11 +1,12 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from '@nextui-org/react';
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@nextui-org/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { IoRefreshOutline, IoChevronDownOutline } from 'react-icons/io5';
 import { toast } from 'react-toastify';
 import { useAccount } from 'wagmi';
+import { Button } from '@/components/common/Button';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
@@ -230,9 +231,9 @@ export function PositionsSummaryTable({
             <Button
               variant="light"
               size="sm"
-              startContent={<IoChevronDownOutline className="h-4 w-4" />}
               className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
             >
+              <IoChevronDownOutline className="mr-2 h-4 w-4" />
               {earningsPeriod}
             </Button>
           </DropdownTrigger>
@@ -249,10 +250,10 @@ export function PositionsSummaryTable({
         <Button
           variant="light"
           size="sm"
-          startContent={<IoRefreshOutline className="h-4 w-4" />}
           onClick={handleManualRefresh}
           className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
         >
+          <IoRefreshOutline className="mr-2 h-4 w-4" />
           Refresh
         </Button>
       </div>
@@ -366,9 +367,8 @@ export function PositionsSummaryTable({
                       <div className="flex items-center justify-center">
                         <Button
                           size="sm"
-                          className={`rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out ${
-                            isOwner ? 'hover:bg-primary' : 'cursor-not-allowed opacity-50'
-                          }`}
+                          variant="interactive"
+                          className="text-xs"
                           onClick={() => {
                             if (!isOwner) {
                               toast.error('You can only rebalance your own positions');
@@ -377,6 +377,7 @@ export function PositionsSummaryTable({
                             setSelectedGroupedPosition(groupedPosition);
                             setShowRebalanceModal(true);
                           }}
+                          disabled={!isOwner}
                         >
                           Rebalance
                         </Button>

app/positions/components/RebalanceActionInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button } from '@nextui-org/react';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
+import { Button } from '@/components/common';
 import { ERC20Token } from '@/utils/tokens';
 import { GroupedPosition, Market } from '@/utils/types';
 import { MarketBadge } from './MarketBadge';
@@ -59,7 +59,8 @@ export function RebalanceActionInput({
       </div>
       <Button
         onClick={onAddAction}
-        className="ml-4 rounded-sm bg-primary p-2 px-4 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100"
+        variant="cta"
+        isDisabled={!amount || !selectedFromMarketUniqueKey || !selectedToMarketUniqueKey}
       >
         Add Action
       </Button>

app/positions/components/RebalanceCart.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
-import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Button,
-} from '@nextui-org/react';
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
 import { formatUnits } from 'viem';
+import { Button } from '@/components/common';
 import { Market } from '@/utils/types';
 import { GroupedPosition, RebalanceAction } from '@/utils/types';
 import { MarketBadge } from './MarketBadge';
@@ -71,10 +64,10 @@ export function RebalanceCart({
               </TableCell>
               <TableCell>
                 <Button
-                  color="danger"
+                  variant="secondary"
                   size="sm"
                   onPress={() => removeRebalanceAction(index)}
-                  className="rounded-sm bg-red-500 p-2 text-xs text-white duration-300 ease-in-out hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
+                  className="rounded-sm p-2 text-xs duration-300 ease-in-out"
                 >
                   Remove
                 </Button>