fix: base css, crm staking loading size

CarmineOptions · Sep 2, 2024 · 037603a · 037603a
1 parent dbb6221
commit 037603a
Show file tree

Hide file tree

Showing 14 changed files with 37 additions and 29 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,15 +11,12 @@
     content="Buy and sell crypto options with Carmine Options AMM" />
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap"
     rel="stylesheet" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+  <link href="https://fonts.cdnfonts.com/css/formula-condensed" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap"
-    rel="stylesheet">
-  <link href="https://fonts.cdnfonts.com/css/formula-condensed" rel="stylesheet">
   <!--GTAG_PLACEHOLDER-->
 </head>
 

diff --git a/src/components/Airdrop/AirdropModal.tsx b/src/components/Airdrop/AirdropModal.tsx
@@ -280,7 +280,9 @@ export const AirdropModal = ({ account, data, open, setOpen }: Props) => {
             onClick={handleClaim}
             className={stateToClassName(claimState)}
           >
-            {claimState === TransactionState.Processing && <LoadingAnimation />}
+            {claimState === TransactionState.Processing && (
+              <LoadingAnimation size={20} />
+            )}
             {claimState === TransactionState.Initial && "Claim"}
             {claimState === TransactionState.Success && "Done!"}
             {claimState === TransactionState.Fail && "Failed"}

diff --git a/src/components/CarmineStaking/StakeCRM.tsx b/src/components/CarmineStaking/StakeCRM.tsx
@@ -166,7 +166,7 @@ export const StakeCrm = ({ account, carmBalance }: Props) => {
               className={stateToClassName(monthState)}
             >
               {monthState === TransactionState.Processing && (
-                <LoadingAnimation />
+                <LoadingAnimation size={20} />
               )}
               {monthState === TransactionState.Initial && "1 month"}
               {monthState === TransactionState.Success && "Done!"}
@@ -180,7 +180,7 @@ export const StakeCrm = ({ account, carmBalance }: Props) => {
               className={stateToClassName(sixMonthsState)}
             >
               {sixMonthsState === TransactionState.Processing && (
-                <LoadingAnimation />
+                <LoadingAnimation size={20} />
               )}
               {sixMonthsState === TransactionState.Initial && "6 months"}
               {sixMonthsState === TransactionState.Success && "Done!"}
@@ -194,7 +194,7 @@ export const StakeCrm = ({ account, carmBalance }: 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/CarmineStaking/Staking.tsx b/src/components/CarmineStaking/Staking.tsx
@@ -9,6 +9,7 @@ import { QueryKeys } from "../../queries/keys";
 import { fetchStakingData } from "./calls";
 import { StakeCrm } from "./StakeCRM";
 import { LoadingAnimation } from "../Loading/Loading";
+import { formatNumber } from "../../utils/utils";
 
 export const StakeWithAccount = ({
   account,
@@ -28,8 +29,14 @@ export const StakeWithAccount = ({
   }
 
   const { veCarmBalance, carmBalance, stakes } = data;
-  const humanReadableVeCarmBalance = shortInteger(veCarmBalance, 18);
-  const humanReadableCarmBalance = shortInteger(carmBalance, 18);
+  const humanReadableVeCarmBalance = formatNumber(
+    shortInteger(veCarmBalance, 18),
+    4
+  );
+  const humanReadableCarmBalance = formatNumber(
+    shortInteger(carmBalance, 18),
+    4
+  );
 
   return (
     <div>

diff --git a/src/components/CarmineStaking/StakingModal.tsx b/src/components/CarmineStaking/StakingModal.tsx
@@ -216,7 +216,7 @@ export const StakingModal = ({ account, amount, open, setOpen }: Props) => {
                 className={stateToClassName(monthState)}
               >
                 {monthState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {monthState === TransactionState.Initial && "1 month"}
                 {monthState === TransactionState.Success && "Done!"}
@@ -230,7 +230,7 @@ export const StakingModal = ({ account, amount, open, setOpen }: Props) => {
                 className={stateToClassName(sixMonthsState)}
               >
                 {sixMonthsState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {sixMonthsState === TransactionState.Initial && "6 months"}
                 {sixMonthsState === TransactionState.Success && "Done!"}
@@ -244,7 +244,7 @@ export const StakingModal = ({ account, amount, open, setOpen }: Props) => {
                 className={stateToClassName(yearState)}
               >
                 {yearState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {yearState === TransactionState.Initial && "1 year"}
                 {yearState === TransactionState.Success && "Done!"}
@@ -263,7 +263,7 @@ export const StakingModal = ({ account, amount, open, setOpen }: Props) => {
             className={stateToClassName(unstakeState)}
           >
             {unstakeState === TransactionState.Processing && (
-              <LoadingAnimation />
+              <LoadingAnimation size={20} />
             )}
             {unstakeState === TransactionState.Initial && "Unstake"}
             {unstakeState === TransactionState.Success && "Done!"}

diff --git a/src/components/CarmineStaking/UnstakeModal.tsx b/src/components/CarmineStaking/UnstakeModal.tsx
@@ -172,7 +172,7 @@ export const UnstakeModal = ({ account, stake, open, setOpen }: Props) => {
                 className={stateToClassName(monthState)}
               >
                 {monthState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {monthState === TransactionState.Initial && "1 month"}
                 {monthState === TransactionState.Success && "Done!"}
@@ -186,7 +186,7 @@ export const UnstakeModal = ({ account, stake, open, setOpen }: Props) => {
                 className={stateToClassName(sixMonthsState)}
               >
                 {sixMonthsState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {sixMonthsState === TransactionState.Initial && "6 months"}
                 {sixMonthsState === TransactionState.Success && "Done!"}
@@ -200,7 +200,7 @@ export const UnstakeModal = ({ account, stake, open, setOpen }: Props) => {
                 className={stateToClassName(yearState)}
               >
                 {yearState === TransactionState.Processing && (
-                  <LoadingAnimation />
+                  <LoadingAnimation size={20} />
                 )}
                 {yearState === TransactionState.Initial && "1 year"}
                 {yearState === TransactionState.Success && "Done!"}
@@ -219,7 +219,7 @@ export const UnstakeModal = ({ account, stake, open, setOpen }: Props) => {
             className={stateToClassName(unstakeState)}
           >
             {unstakeState === TransactionState.Processing && (
-              <LoadingAnimation />
+              <LoadingAnimation size={20} />
             )}
             {unstakeState === TransactionState.Initial && "Unstake"}
             {unstakeState === TransactionState.Success && "Done!"}

diff --git a/src/components/CryptoGraph/AlternativeTradingView.tsx b/src/components/CryptoGraph/AlternativeTradingView.tsx
@@ -35,7 +35,7 @@ function TradingViewWidget() {
       "hideSymbolLogo": false,
       "scalePosition": "right",
       "scaleMode": "Normal",
-      "fontFamily": "IBM Plex Sans Condensed, sans-serif, -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
+      "fontFamily": "IBM Plex Sans Condensed, sans-serif, -apple-system, sans-serif",
       "fontSize": "10",
       "noTimeScale": false,
       "valuesTracking": "1",

diff --git a/src/components/Portfolio/MyOptions.tsx b/src/components/Portfolio/MyOptions.tsx
@@ -72,8 +72,8 @@ const LiveItem = ({
       <div>{formatNumber(option.size, 4)}</div>
       <div>
         <div className={styles.tokenvalue}>
-          <TokenBadge size="small" token={option.underlying} />{" "}
           {formatNumber(option.value, 3)}
+          <TokenBadge size="small" token={option.underlying} />
         </div>
       </div>
       <div>${valueUsd}</div>

diff --git a/src/components/Portfolio/MyStake.tsx b/src/components/Portfolio/MyStake.tsx
@@ -38,8 +38,8 @@ const Item = ({
       </div>
       <div>{stake.typeAsText}</div>
       <div className={styles.tokenvalue}>
-        <TokenBadge size="small" token={stake.underlying} />{" "}
         {formatNumber(stake.value, 3)}
+        <TokenBadge size="small" token={stake.underlying} />
       </div>
       <div>${valueUsd === undefined ? "--" : formatNumber(valueUsd, 2)}</div>
       <div>

diff --git a/src/components/Portfolio/portfolio.module.css b/src/components/Portfolio/portfolio.module.css
@@ -85,6 +85,7 @@
 
 .item>div:nth-child(8) {
   width: 80px;
+  text-align: right;
 }
 
 .header {
@@ -117,6 +118,7 @@
 
 .stakeitem>div:nth-child(4) {
   width: 140px;
+  text-align: right;
 }
 
 .stakeitem>div:nth-child(5) {

diff --git a/src/components/TokenBadge/badge.module.css b/src/components/TokenBadge/badge.module.css
@@ -21,7 +21,6 @@
   font-family: IBM Plex Sans Condensed;
   font-weight: 500;
   line-height: 18px;
-  letter-spacing: 0.04em;
   font-size: 15px;
   margin-bottom: 0;
 }

diff --git a/src/components/TradeTable/TradeTable.tsx b/src/components/TradeTable/TradeTable.tsx
@@ -86,7 +86,7 @@ export const TradeTable = () => {
           },
           ".css-1ly9a1d-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input":
             { paddingLeft: 0 },
-          width: "225px",
+          width: "208px",
         }}
       >
         <MenuItem value={PairKey.STRK_USDC}>

diff --git a/src/style/base.css b/src/style/base.css
@@ -18,9 +18,15 @@
   font-family: IBM Plex Sans Condensed;
 }
 
-html, body {
+body {
   overflow-x: hidden;
   width: 100%;
+  font-family: "IBM Plex Sans Condensed", sans-serif;
+  font-size: 18px;
+}
+
+p {
+  font-size: 18px;
 }
 
 ul {

diff --git a/src/style/themes.ts b/src/style/themes.ts
@@ -28,11 +28,6 @@ const themeConfig: ThemeOptions = {
     },
     divider: "#a9aaac",
   },
-  typography: {
-    fontFamily: '"IBM Plex Sans Condensed", sans-serif',
-    fontSize: 18,
-    fontWeightRegular: 500,
-  },
 };
 
 export const theme = createTheme(themeConfig);