fix: better headings

src/components/Airdrop/Airdrop.tsx

@@ -8,9 +8,8 @@ import { shortInteger } from "../../utils/computations";
 import { isMainnet } from "../../constants/amm";
 import { QueryKeys } from "../../queries/keys";
 import { AirdropModal } from "./AirdropModal";
-
-import buttonStyles from "../../style/button.module.css";
 import airdropStyles from "./airdrop.module.css";
+import { formatNumber } from "../../utils/utils";
 
 const ClaimAndStake = ({
   account,
@@ -28,10 +27,7 @@ const ClaimAndStake = ({
         <span>
           You are eligible to claim {amountHumanReadable} <b>veCRM</b>!
         </span>
-        <button
-          className={buttonStyles.secondary}
-          onClick={() => setOpen(true)}
-        >
+        <button className="primary active" onClick={() => setOpen(true)}>
           Claim
         </button>
       </div>
@@ -73,10 +69,10 @@ export const AirdropWithAccount = ({
 
   if (data.eligible) {
     if (data.claimable === 0n) {
-      const amount = shortInteger(data.claimed, 18);
+      const amount = formatNumber(shortInteger(data.claimed, 18), 5);
       return (
         <AirdropTemplate
-          message={`You cannot claim any tokens, you have already claimed ${amount}`}
+          message={`You cannot claim any tokens, you have already claimed ${amount} CRM`}
         />
       );
     }
@@ -94,26 +90,15 @@ export const Airdrop = () => {
 
   if (!account) {
     return (
-      <div>
-        <h1>Airdrop</h1>
-        <AirdropTemplate message="Connect your wallet to see if you are eligible for an airdrop" />
-      </div>
+      <AirdropTemplate message="Connect your wallet to see if you are eligible for an airdrop" />
     );
   }
 
   if (!isMainnet) {
     return (
-      <div>
-        <h1>Airdrop</h1>
-        <AirdropTemplate message="Please switch to Mainnet to access airdrop" />
-      </div>
+      <AirdropTemplate message="Please switch to Mainnet to access airdrop" />
     );
   }
 
-  return (
-    <div>
-      <h1>Airdrop</h1>
-      <AirdropWithAccount account={account} />
-    </div>
-  );
+  return <AirdropWithAccount account={account} />;
 };

src/components/Airdrop/AirdropModal.tsx

@@ -21,15 +21,13 @@ import { ToastType } from "../../redux/reducers/ui";
 import { useState } from "react";
 import { TransactionState, TxTracking } from "../../types/network";
 import { LoadingAnimation } from "../Loading/Loading";
-
-import styles from "./airdrop.module.css";
-import buttonStyles from "../../style/button.module.css";
-
 import GovernanceABI from "../../abi/governance_abi.json";
 import TokenABI from "../../abi/lptoken_abi.json";
 import { invalidateKey } from "../../queries/client";
 import { QueryKeys } from "../../queries/keys";
 
+import styles from "./airdrop.module.css";
+
 export const claim = async (
   account: AccountInterface,
   data: string[],
@@ -144,15 +142,15 @@ type Props = {
 
 const stateToClassName = (state: TransactionState) => {
   if (state === TransactionState.Success) {
-    return buttonStyles.green;
+    return "mainbutton active green";
   }
   if (state === TransactionState.Fail) {
-    return buttonStyles.fail;
+    return "mainbutton active red";
   }
   if (state === TransactionState.Processing) {
-    return buttonStyles.disabled;
+    return "mainbutton active disabled";
   }
-  return buttonStyles.secondary;
+  return "mainbutton active primary";
 };
 
 export const AirdropModal = ({ account, data, open, setOpen }: Props) => {
@@ -239,7 +237,7 @@ export const AirdropModal = ({ account, data, open, setOpen }: Props) => {
               className={stateToClassName(monthState)}
             >
               {monthState === TransactionState.Processing && (
-                <LoadingAnimation />
+                <LoadingAnimation size={20} />
               )}
               {monthState === TransactionState.Initial && "1 month"}
               {monthState === TransactionState.Success && "Done!"}
@@ -253,7 +251,7 @@ export const AirdropModal = ({ account, data, open, setOpen }: Props) => {
               className={stateToClassName(sixMonthsState)}
             >
               {sixMonthsState === TransactionState.Processing && (
-                <LoadingAnimation />
+                <LoadingAnimation size={20} />
               )}
               {sixMonthsState === TransactionState.Initial && "6 months"}
               {sixMonthsState === TransactionState.Success && "Done!"}
@@ -267,7 +265,7 @@ export const AirdropModal = ({ account, data, open, setOpen }: Props) => {
               className={stateToClassName(yearState)}
             >
               {yearState === TransactionState.Processing && (
-                <LoadingAnimation />
+                <LoadingAnimation size={20} />
               )}
               {yearState === TransactionState.Initial && "1 year"}
               {yearState === TransactionState.Success && "Done!"}

src/components/Airdrop/airdrop.module.css

@@ -1,24 +1,17 @@
 .container {
   display: flex;
   flex-flow: row;
-  border: 1px solid white;
-  padding: 25px 50px;
 }
 
 .textcontainer {
   flex-flow: row;
-  border: 1px solid white;
-  padding: 25px 50px;
-  display: inline-block;
 }
 
 .claim {
-  border: 1px solid white;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   gap: 50px;
-  padding: 20px 50px;
 }
 
 .active {
@@ -46,6 +39,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 5px;
 }
 
 .singlebutton {
@@ -60,7 +54,6 @@
     align-items: center;
     justify-content: center;
     gap: 50px;
-    padding: 20px 50px;
   }
 
   .buttongroup {

src/components/AvnuWidget/TokenSelect.tsx

@@ -33,7 +33,7 @@ export const TokenSelect = ({ close, setSelection, other }: Props) => {
   return (
     <div className={styles.modalcontainer}>
       <div className={styles.modalheader}>
-        <h1>Select a token</h1>
+        <h2>Select a token</h2>
         <div onClick={close}>
           <Close />
         </div>

src/components/CarmineStaking/StakeCRM.tsx

@@ -158,8 +158,7 @@ export const StakeCrm = ({ account, carmBalance }: Props) => {
           />
           <button onClick={handleAll}>All</button>
         </div>
-
-        <div style={{ display: "flex" }}>
+        <div className={styles.buttons}>
           <Tooltip title="Staking for 1 month gives multiplier 1.0x">
             <button
               disabled={monthState !== TransactionState.Initial}

src/components/CarmineStaking/Stakes.tsx

@@ -117,7 +117,7 @@ export const Stakes = ({ stakes, veBalance, account }: Props) => {
 
   return (
     <div>
-      <h1>Expired stakes</h1>
+      <h2>Expired stakes</h2>
       {expired.length > 0 || initialVeCarm > 0n ? (
         <TableContainer>
           <Table className={tableStyles.table}>
@@ -145,7 +145,7 @@ export const Stakes = ({ stakes, veBalance, account }: Props) => {
         <p>No expired stakes</p>
       )}
 
-      <h1>Active stakes</h1>
+      <h2>Active stakes</h2>
       {active.length > 0 ? (
         <TableContainer>
           <Table className={tableStyles.table}>

src/components/CarmineStaking/StakingModal.tsx

@@ -23,7 +23,6 @@ import { LoadingAnimation } from "../Loading/Loading";
 import { unstakeAirdrop } from "../../calls/carmineStake";
 
 import styles from "./modal.module.css";
-import buttonStyles from "../../style/button.module.css";
 
 import GovernanceABI from "../../abi/governance_abi.json";
 import TokenABI from "../../abi/lptoken_abi.json";
@@ -91,15 +90,15 @@ type Props = {
 
 export const stateToClassName = (state: TransactionState) => {
   if (state === TransactionState.Success) {
-    return buttonStyles.green;
+    return "active green";
   }
   if (state === TransactionState.Fail) {
-    return buttonStyles.fail;
+    return "active red";
   }
   if (state === TransactionState.Processing) {
-    return buttonStyles.disabled;
+    return "disabled";
   }
-  return buttonStyles.secondary;
+  return "active primary";
 };
 
 export const StakingModal = ({ account, amount, open, setOpen }: Props) => {

src/components/CarmineStaking/modal.module.css

@@ -12,6 +12,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 2px;
 }
 
 .singlebutton {

src/components/CarmineStaking/vest.module.css

@@ -13,6 +13,11 @@
   border-left: 0;
 }
 
+.buttons {
+  display: flex;
+  gap: 2px;
+}
+
 @media (max-width: 800px) {
   .container {
     flex-flow: column;

src/components/ConnectWallet/AccountInfo.tsx

@@ -12,12 +12,6 @@ export const AccountInfo = () => {
     return null;
   }
 
-  const iconStyle = {
-    width: 20,
-    marginRight: 1,
-    background: "black",
-  };
-
   const handleClick = () => {
     openAccountDialog();
   };
@@ -28,7 +22,7 @@ export const AccountInfo = () => {
   return (
     <button className={`primary active ${styles.custom}`} onClick={handleClick}>
       <div className={styles.walletinfo}>
-        <WalletIcon sx={iconStyle} wallet={wallet} />
+        <WalletIcon wallet={wallet} />
         <span>{addressElision(address)}</span>
       </div>
     </button>

src/components/ConnectWallet/button.module.css

@@ -7,10 +7,19 @@
 .walletinfo {
   display: flex;
   align-items: center;
-
+  gap: 12px;
 }
 
 .walletinfo span {
   text-transform: none;
   color: var(--BLACK);
+  font-size: 16px;
+}
+
+.walleticon {
+  width: 21px;
+  height: 21px;
+  border-radius: 2px;
+  padding: 2px;
+  background: #222a39;
 }

src/components/Portfolio/MyPortfolio.tsx

@@ -122,7 +122,7 @@ export const MyPortfolio = () => {
       <div>
         <div className={styles.options}>
           <div>
-            <h1>Options</h1>
+            <h2>Options</h2>
             <div className={styles.buttons}>
               <button
                 onClick={() => setOptions("live")}
@@ -153,7 +153,7 @@ export const MyPortfolio = () => {
       </div>
       <div className="divider"></div>
       <div>
-        <h1>Staking</h1>
+        <h2>Staking</h2>
         <MyStake />
       </div>
     </div>

src/components/assets.tsx

@@ -2,6 +2,8 @@ import { SxProps } from "@mui/system";
 import { Box } from "@mui/material";
 import { ConnectedStarknetWindowObject } from "get-starknet-core";
 
+import styles from "./ConnectWallet/button.module.css";
+
 interface IconProps {
   sx?: SxProps;
 }
@@ -21,7 +23,7 @@ export const BraavosIcon = ({ sx }: IconProps) => (
 export const WalletIcon = ({ sx, wallet }: WalletIconProps) => (
   <Box
     component="img"
-    sx={sx}
+    className={styles.walleticon}
     alt={`${wallet.id} wallet icon`}
     src={wallet.icon}
   />

src/pages/battlecharts.tsx

@@ -9,7 +9,7 @@ const BattlechartsPage = () => {
         <title>Battlecharts | Carmine Options AMM</title>
         <meta name="description" content="Trading leaderboard" />
       </Helmet>
-      <h3>Trading Leaderboard</h3>
+      <h1>Trading Leaderboard</h1>
       <NotionalVolumeLeaderboard />
     </Layout>
   );

src/pages/governance.tsx

@@ -14,7 +14,7 @@ import { useEffect } from "react";
 const VotingSubpage = () => {
   return (
     <div>
-      <h1>Proposals</h1>
+      <h2>Proposals</h2>
       <p>Vote on AMM defining proposals.</p>
       <p>
         To find out more about the proposals and discuss, go to{" "}
@@ -35,12 +35,21 @@ const VotingSubpage = () => {
 const StakingSubpage = () => {
   return (
     <div>
-      <h1>CRM Staking</h1>
+      <h2>CRM Staking</h2>
       <CarmineStaking />
     </div>
   );
 };
 
+const AirdropSubpage = () => {
+  return (
+    <div>
+      <h2>Airdrop</h2>
+      <Airdrop />
+    </div>
+  );
+};
+
 const Governance = () => {
   const subpage = useGovernanceSubpage();
   const navigate = useNavigate();
@@ -107,7 +116,7 @@ const Governance = () => {
 
       {subpage === GovernanceSubpage.Voting && <VotingSubpage />}
       {subpage === GovernanceSubpage.Staking && <StakingSubpage />}
-      {subpage === GovernanceSubpage.AirDrop && <Airdrop />}
+      {subpage === GovernanceSubpage.AirDrop && <AirdropSubpage />}
     </Layout>
   );
 };

src/pages/leaderboard.tsx

@@ -18,7 +18,7 @@ const LeaderboardPage = () => {
       <h1>Carmine Points Program</h1>
       <p>Elevate Your Status, Enhance Your Rewards</p>
       <p>Season 2 is now live!</p>
-      <h1>Leaderboard</h1>
+      <h2>Leaderboard</h2>
       <Leaderboard />
     </Layout>
   );