From cb584c8b2a662d8737c5f14c080ccbf9aa2ab1a8 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Mon, 2 Sep 2024 17:07:51 +0700
Subject: [PATCH] fix: better headings

---
 src/components/Airdrop/Airdrop.tsx            | 29 +++++--------------
 src/components/Airdrop/AirdropModal.tsx       | 20 ++++++-------
 src/components/Airdrop/airdrop.module.css     |  9 +-----
 src/components/AvnuWidget/TokenSelect.tsx     |  2 +-
 src/components/CarmineStaking/StakeCRM.tsx    |  3 +-
 src/components/CarmineStaking/Stakes.tsx      |  4 +--
 .../CarmineStaking/StakingModal.tsx           |  9 +++---
 .../CarmineStaking/modal.module.css           |  1 +
 src/components/CarmineStaking/vest.module.css |  5 ++++
 src/components/ConnectWallet/AccountInfo.tsx  |  8 +----
 .../ConnectWallet/button.module.css           | 11 ++++++-
 src/components/Portfolio/MyPortfolio.tsx      |  4 +--
 src/components/assets.tsx                     |  4 ++-
 src/pages/battlecharts.tsx                    |  2 +-
 src/pages/governance.tsx                      | 15 ++++++++--
 src/pages/leaderboard.tsx                     |  2 +-
 src/pages/starknetRewards.tsx                 |  4 +--
 src/pages/trade.tsx                           |  2 +-
 src/style/base.css                            | 13 ++++++---
 19 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/src/components/Airdrop/Airdrop.tsx b/src/components/Airdrop/Airdrop.tsx
index 0c270d9b..57e6d1e3 100644
--- a/src/components/Airdrop/Airdrop.tsx
+++ b/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} />;
 };
diff --git a/src/components/Airdrop/AirdropModal.tsx b/src/components/Airdrop/AirdropModal.tsx
index 9975ef40..a349eaa1 100644
--- a/src/components/Airdrop/AirdropModal.tsx
+++ b/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!"}
diff --git a/src/components/Airdrop/airdrop.module.css b/src/components/Airdrop/airdrop.module.css
index 10537927..a30f2eb3 100644
--- a/src/components/Airdrop/airdrop.module.css
+++ b/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 {
diff --git a/src/components/AvnuWidget/TokenSelect.tsx b/src/components/AvnuWidget/TokenSelect.tsx
index 38977644..48031fcc 100644
--- a/src/components/AvnuWidget/TokenSelect.tsx
+++ b/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>
diff --git a/src/components/CarmineStaking/StakeCRM.tsx b/src/components/CarmineStaking/StakeCRM.tsx
index 702513c3..90814443 100644
--- a/src/components/CarmineStaking/StakeCRM.tsx
+++ b/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}
diff --git a/src/components/CarmineStaking/Stakes.tsx b/src/components/CarmineStaking/Stakes.tsx
index 5ac1d386..acd17b9f 100644
--- a/src/components/CarmineStaking/Stakes.tsx
+++ b/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}>
diff --git a/src/components/CarmineStaking/StakingModal.tsx b/src/components/CarmineStaking/StakingModal.tsx
index 6f456faa..1cfff10c 100644
--- a/src/components/CarmineStaking/StakingModal.tsx
+++ b/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) => {
diff --git a/src/components/CarmineStaking/modal.module.css b/src/components/CarmineStaking/modal.module.css
index 3a2c9b4f..6cc1eb76 100644
--- a/src/components/CarmineStaking/modal.module.css
+++ b/src/components/CarmineStaking/modal.module.css
@@ -12,6 +12,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 2px;
 }
 
 .singlebutton {
diff --git a/src/components/CarmineStaking/vest.module.css b/src/components/CarmineStaking/vest.module.css
index e27b9756..4427d938 100644
--- a/src/components/CarmineStaking/vest.module.css
+++ b/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;
diff --git a/src/components/ConnectWallet/AccountInfo.tsx b/src/components/ConnectWallet/AccountInfo.tsx
index 29ee1a97..f74bdb23 100644
--- a/src/components/ConnectWallet/AccountInfo.tsx
+++ b/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>
diff --git a/src/components/ConnectWallet/button.module.css b/src/components/ConnectWallet/button.module.css
index f0a195c3..bc72f14e 100644
--- a/src/components/ConnectWallet/button.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/Portfolio/MyPortfolio.tsx b/src/components/Portfolio/MyPortfolio.tsx
index fa0f185c..78243b68 100644
--- a/src/components/Portfolio/MyPortfolio.tsx
+++ b/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>
diff --git a/src/components/assets.tsx b/src/components/assets.tsx
index 39e959c5..5e772c93 100644
--- a/src/components/assets.tsx
+++ b/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}
   />
diff --git a/src/pages/battlecharts.tsx b/src/pages/battlecharts.tsx
index 9ba21845..d5881895 100644
--- a/src/pages/battlecharts.tsx
+++ b/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>
   );
diff --git a/src/pages/governance.tsx b/src/pages/governance.tsx
index b6848951..d7e694b4 100644
--- a/src/pages/governance.tsx
+++ b/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>
   );
 };
diff --git a/src/pages/leaderboard.tsx b/src/pages/leaderboard.tsx
index 0559e7f1..903e5729 100644
--- a/src/pages/leaderboard.tsx
+++ b/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>
   );
diff --git a/src/pages/starknetRewards.tsx b/src/pages/starknetRewards.tsx
index 3f6ce70c..be190f99 100644
--- a/src/pages/starknetRewards.tsx
+++ b/src/pages/starknetRewards.tsx
@@ -11,11 +11,11 @@ const StarknetRewards = () => (
       <meta name="description" content="Claim STRK rewards" />
     </Helmet>
     <h1>Starknet DeFi Spring</h1>
-    <h3 style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+    <h2 style={{ display: "flex", alignItems: "center", gap: "10px" }}>
       40M
       <StarknetIcon style={{ width: "32px", height: "32px" }} />
       STRK
-    </h3>
+    </h2>
     <p>
       <b>Carmine Options AMM</b> is part of the Starknet's{" "}
       <a
diff --git a/src/pages/trade.tsx b/src/pages/trade.tsx
index e0fd764c..bba5ee8a 100644
--- a/src/pages/trade.tsx
+++ b/src/pages/trade.tsx
@@ -17,7 +17,7 @@ const TradePage = () => {
       </Helmet>
       <TradeTable />
       <div className="divider" style={{ margin: "50px 0" }}></div>
-      <h1>CHART</h1>
+      <h2>Chart</h2>
       <div className={style.graphwidgetwrapper}>
         <div className={style.graphcontainer}>
           <AlternativeTradingView />
diff --git a/src/style/base.css b/src/style/base.css
index 84ad2570..8b8566d3 100644
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -35,17 +35,22 @@ h1 {
   font-weight: 300;
 }
 
-h3 {
+h2 {
   font-family: Formula Condensed;
-  margin: 30px 0;
   font-size: 30px;
   font-weight: 300;
 }
 
+h3 {
+  font-family: Formula Condensed;
+  font-size: 28px;
+  font-weight: 300;
+}
+
 h4 {
-  margin: 0;
+  font-family: Formula Condensed;
   font-size: 24px;
-  font-weight: 400;
+  font-weight: 300;
 }
 
 button {