From 08bb49dbcf19617cd4c3cfcea7a82ad93901cec8 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 27 Dec 2024 08:34:19 +0100
Subject: [PATCH] Update spinners to match the style guide

---
 .../ConnectWalletButton.tsx                   |  2 +-
 .../ConnectWalletStatusLabel.tsx              |  2 +-
 .../BuildTransactionModal.tsx                 |  2 +-
 .../TransactionModal/ResumeModal.tsx          |  2 +-
 dapp/src/components/shared/LoadingButton.tsx  |  5 +-
 .../AcrePointsCard/UserPointsLabel.tsx        |  2 +-
 dapp/src/theme/spinnerTheme.ts                | 50 +++++++++++++------
 7 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
index e102b384f..6cd209993 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -223,7 +223,7 @@ export default function ConnectWalletButton({
               !isLoading ? (
                 <Icon as={IconArrowNarrowRight} boxSize={6} ml="auto" />
               ) : (
-                <Spinner boxSize={6} variant="filled" />
+                <Spinner />
               )
             }
             iconSpacing={4}
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
index 7c1492482..8fb9dc1e6 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -26,7 +26,7 @@ const statusToLabelProps: Record<Status, { color: string }> = {
 const boxSize = 5
 const statusToIcon: Record<Status, React.ReactNode> = {
   idle: <Box boxSize={boxSize} />,
-  pending: <Spinner boxSize={boxSize} />,
+  pending: <Spinner boxSize={boxSize} variant="unicolor" />,
   error: <Icon as={IconCircleX} boxSize={boxSize} color="text.tertiary" />,
   success: <Icon as={IconCircleCheck} boxSize={boxSize} color="green.50" />,
 }
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx
index 1fef616b0..bbfedf922 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx
@@ -18,7 +18,7 @@ export default function BuildTransactionModal({
       <ModalCloseButton onClick={onClose} />
       <ModalHeader>Preparing withdrawal transaction...</ModalHeader>
       <ModalBody>
-        <Spinner size="xl" variant="filled" />
+        <Spinner size="lg" />
         <Text size="md">This may take a few minutes.</Text>
         <Button size="lg" width="100%" variant="outline" onClick={onClose}>
           Cancel
diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx
index c1e1cc7a7..459ca5d47 100644
--- a/dapp/src/components/TransactionModal/ResumeModal.tsx
+++ b/dapp/src/components/TransactionModal/ResumeModal.tsx
@@ -27,7 +27,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) {
       </ModalHeader>
       <ModalBody textAlign="start" py={6} mx={3} gap={4}>
         <HStack position="relative" justifyContent="center">
-          <Spinner size="2xl" variant="filled" />
+          <Spinner size="xl" />
           <PauseIcon position="absolute" boxSize={6} color="acre.50" />
         </HStack>
 
diff --git a/dapp/src/components/shared/LoadingButton.tsx b/dapp/src/components/shared/LoadingButton.tsx
index 9c8b83fc2..1ff922b2a 100644
--- a/dapp/src/components/shared/LoadingButton.tsx
+++ b/dapp/src/components/shared/LoadingButton.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import { Button, ButtonProps, Spinner } from "@chakra-ui/react"
+import { Button, ButtonProps } from "@chakra-ui/react"
+import Spinner from "./Spinner"
 
 export default function LoadingButton({
   isLoading,
@@ -9,7 +10,7 @@ export default function LoadingButton({
   return (
     <Button
       isLoading={isLoading}
-      spinner={<Spinner variant="filled" />}
+      spinner={<Spinner variant="unicolor" size="sm" />}
       {...props}
     >
       {children}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
index 1d2a492fc..44904ee17 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
@@ -50,7 +50,7 @@ function CalculationInProgressLabel() {
         </Text>
       )}
       <HStack spacing={0}>
-        <Spinner mr={3} size="sm" />
+        <Spinner mr={3} variant="unicolor" />
         <Text size="md">Your drop is being prepared.</Text>
         <TooltipIcon
           label={`
diff --git a/dapp/src/theme/spinnerTheme.ts b/dapp/src/theme/spinnerTheme.ts
index f09a22b83..8e09fe033 100644
--- a/dapp/src/theme/spinnerTheme.ts
+++ b/dapp/src/theme/spinnerTheme.ts
@@ -1,39 +1,59 @@
 import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
 
-const baseStyle = defineStyle({
+const variantBicolor = defineStyle({
   color: "acre.50",
-  borderWidth: 2,
-  borderBottomColor: "acre.50",
-})
-
-const variantFilled = defineStyle({
-  borderWidth: 3,
   borderTopColor: "brown.20",
   borderBottomColor: "brown.20",
   borderLeftColor: "brown.20",
 })
 
+const variantUnicolor = defineStyle({
+  color: "acre.50",
+  borderBottomColor: "acre.50",
+})
+
 const variants = {
-  filled: variantFilled,
+  bicolor: variantBicolor,
+  unicolor: variantUnicolor,
 }
 
+// TODO:  Confirm with the design
 const sizeXl = defineStyle({
-  width: 16,
-  height: 16,
-})
-
-const size2Xl = defineStyle({
+  borderWidth: 3,
   width: 20,
   height: 20,
 })
 
+const sizeLg = defineStyle({
+  borderWidth: 3,
+  width: 14,
+  height: 14,
+})
+
+const sizeMd = defineStyle({
+  borderWidth: 2,
+  width: 6,
+  height: 6,
+})
+
+// TODO:  Confirm with the design
+const sizeSm = defineStyle({
+  borderWidth: 2,
+  width: 4,
+  height: 4,
+})
+
 const sizes = {
   xl: sizeXl,
-  "2xl": size2Xl,
+  lg: sizeLg,
+  md: sizeMd,
+  sm: sizeSm,
 }
 
 export default defineStyleConfig({
-  baseStyle,
+  defaultProps: {
+    variant: "bicolor",
+  },
   sizes,
   variants,
 })