[SDK] ensure that the default spinner stroke color gets inherited from the parentnode (#7157)

Author: RobbyUitbeijerse

.changeset/fast-onions-obey.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+default the spinner stroke color to currentColor and make the color prop optional

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -250,7 +250,7 @@ export function FiatScreenContent(props: {
         {fiatQuoteQuery.isLoading ? (
           <>
             Getting price quote
-            <Spinner size="sm" color="accentButtonText" />
+            <Spinner size="sm" />
           </>
         ) : (
           "Continue"

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx

@@ -360,7 +360,7 @@ export function SwapScreenContent(props: {
           {quoteQuery.isLoading ? (
             <>
               Getting price quote
-              <Spinner size="sm" color="accentButtonText" />
+              <Spinner size="sm" />
             </>
           ) : (
             "Continue"

packages/thirdweb/src/react/web/ui/components/Spinner.tsx

@@ -9,8 +9,8 @@ import { StyledCircle, StyledSvg } from "../design-system/elements.js";
  * @internal
  */
 export const Spinner: React.FC<{
-  color: keyof Theme["colors"];
   size: keyof typeof iconSize;
+  color?: keyof Theme["colors"];
 }> = (props) => {
   const theme = useCustomTheme();
   return (
@@ -26,7 +26,7 @@ export const Spinner: React.FC<{
         cy="25"
         r="20"
         fill="none"
-        stroke={theme.colors[props.color]}
+        stroke={props.color ? theme.colors[props.color] : "currentColor"}
         strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
     </Svg>