fix: ensure that the default spinner stroke color gets inherited from the parent node

Author: RobbyUitbeijerse

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

@@ -230,7 +230,7 @@ export function FiatScreenContent(props: {
       </Container>
 
       <Button
-        variant={disableSubmit ? "outline" : "accent"}
+        variant="accent"
         data-disabled={disableSubmit}
         disabled={disableSubmit}
         fullWidth
@@ -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

@@ -334,7 +334,7 @@ export function SwapScreenContent(props: {
         />
       ) : (
         <Button
-          variant={disableContinue ? "outline" : "accent"}
+          variant="accent"
           fullWidth
           data-disabled={disableContinue}
           disabled={disableContinue}
@@ -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>