Address comments

galacticcouncil · Mar 8, 2024 · c51b89d · c51b89d
1 parent c41661e
commit c51b89d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 107 deletions.
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
@@ -17,7 +17,7 @@ export const Spinner = ({
             cy="50"
             r="43"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
             fill="none"
             strokeDasharray="50 300"
             strokeDashoffset="218"
@@ -36,7 +36,7 @@ export const Spinner = ({
               cy="50"
               r="43"
               stroke="white"
-              stroke-width="2"
+              strokeWidth="2"
               fill="none"
               strokeLinecap="round"
               strokeDasharray="180.49555921538757 251.32741228718345"
@@ -50,9 +50,9 @@ export const Spinner = ({
             width="100"
             height="100"
             filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB"
+            colorInterpolationFilters="sRGB"
           >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
             <feBlend
               mode="normal"
               in="SourceGraphic"

diff --git a/src/sections/pools/farms/components/claimableCard/ClaimRewardsCard.styled.ts b/src/sections/pools/farms/components/claimableCard/ClaimRewardsCard.styled.ts
diff --git a/src/sections/pools/farms/components/claimableCard/ClaimRewardsCard.tsx b/src/sections/pools/farms/components/claimableCard/ClaimRewardsCard.tsx
@@ -11,9 +11,9 @@ import { TOAST_MESSAGES } from "state/toasts"
 import { theme } from "theme"
 import { separateBalance } from "utils/balance"
 import { useClaimAllMutation, useClaimableAmount } from "utils/farms/claiming"
-import { SContainer } from "./ClaimRewardsCard.styled"
 import { useRpcProvider } from "providers/rpcProvider"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
+import { Card } from "components/Card/Card"
 
 export const ClaimRewardsCard = (props: {
   poolId: string
@@ -78,59 +78,69 @@ export const ClaimRewardsCard = (props: {
   if (!claimable.data?.displayValue) return null
 
   return (
-    <SContainer>
+    <Card variant="primary">
       <div
-        sx={{ flex: "column", gap: 3, mb: [16, 0] }}
-        css={{ alignSelf: "start" }}
+        sx={{
+          flex: ["column", "row"],
+          justify: "space-between",
+          align: "center",
+          width: "100%",
+          mt: 12,
+        }}
       >
-        <Text color="white" sx={{ mb: 7 }}>
-          {t("farms.claimCard.title")}
-        </Text>
-        {claimableAssets.map((claimableAsset) => (
-          <Fragment key={claimableAsset.symbol}>
-            <Text
-              font="FontOver"
-              sx={{ mb: 4, fontSize: [26, 28] }}
-              css={{ wordBreak: "break-all" }}
-            >
-              <Trans
-                t={t}
-                i18nKey={"farms.claimCard.claim.asset"}
-                tOptions={claimableAsset ?? {}}
+        <div
+          sx={{ flex: "column", gap: 3, mb: [16, 0] }}
+          css={{ alignSelf: "start" }}
+        >
+          <Text color="white" sx={{ mb: 7 }}>
+            {t("farms.claimCard.title")}
+          </Text>
+          {claimableAssets.map((claimableAsset) => (
+            <Fragment key={claimableAsset.symbol}>
+              <Text
+                font="FontOver"
+                sx={{ mb: 4, fontSize: [26, 19] }}
+                css={{ wordBreak: "break-all" }}
               >
-                <span
-                  css={css`
-                    color: rgba(${theme.rgbColors.white}, 0.4);
-                    font-size: 18px;
-                  `}
-                />
-              </Trans>
-            </Text>
-            <Separator color="white" opacity={0.06} />
-          </Fragment>
-        ))}
-        <Text
-          sx={{ mt: 6 }}
-          css={{ color: `rgba(${theme.rgbColors.white}, 0.4)` }}
+                <Trans
+                  t={t}
+                  i18nKey={"farms.claimCard.claim.asset"}
+                  tOptions={claimableAsset ?? {}}
+                >
+                  <span
+                    css={css`
+                      color: rgba(${theme.rgbColors.white}, 0.4);
+                      font-size: 18px;
+                    `}
+                  />
+                </Trans>
+              </Text>
+              <Separator color="white" opacity={0.06} />
+            </Fragment>
+          ))}
+          <Text
+            sx={{ mt: 6 }}
+            css={{ color: `rgba(${theme.rgbColors.white}, 0.4)` }}
+          >
+            <Trans t={t} i18nKey="farms.claimCard.claim.usd">
+              <DisplayValue value={claimable.data?.displayValue} />
+            </Trans>
+          </Text>
+        </div>
+        <Button
+          variant="primary"
+          size="small"
+          sx={{ height: "fit-content", width: ["100%", 275] }}
+          disabled={
+            account?.isExternalWalletConnected ||
+            (claimable.data && claimable.data.displayValue.isZero())
+          }
+          onClick={() => claimAll.mutate()}
+          isLoading={claimAll.isLoading}
         >
-          <Trans t={t} i18nKey="farms.claimCard.claim.usd">
-            <DisplayValue value={claimable.data?.displayValue} />
-          </Trans>
-        </Text>
+          {t("farms.claimCard.button.label")}
+        </Button>
       </div>
-      <Button
-        variant="primary"
-        size="small"
-        sx={{ height: "fit-content", width: ["100%", 275] }}
-        disabled={
-          account?.isExternalWalletConnected ||
-          (claimable.data && claimable.data.displayValue.isZero())
-        }
-        onClick={() => claimAll.mutate()}
-        isLoading={claimAll.isLoading}
-      >
-        {t("farms.claimCard.button.label")}
-      </Button>
-    </SContainer>
+    </Card>
   )
 }