Fix hover bg color for social login buttons

Author: sergey-kintsel

src/components/Onboarding/connectOrCreate/OnboardWithEmailButton.tsx

@@ -4,6 +4,7 @@ import { useOnboardWithSocial } from "./useOnboardWithSocial";
 import { EmailIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
 
+// eslint-disable-next-line import/no-unused-modules
 export const OnboardWithEmailButton = ({ onAuth }: { onAuth: () => void }) => {
   const { isLoading, onboard } = useOnboardWithSocial("email", onAuth);
 

src/components/Onboarding/connectOrCreate/OnboardWithTwitterButton.tsx

@@ -2,15 +2,13 @@ import { IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
 import { TwitterIcon } from "../../../assets/icons";
-import colors from "../../../style/colors";
 
 export const OnboardWithTwitterButton = ({ onAuth }: { onAuth: () => void }) => {
   const { isLoading, onboard } = useOnboardWithSocial("twitter", onAuth);
 
   return (
     <IconButton
       color="black"
-      _hover={{ color: "white", background: colors.gray[600] }}
       aria-label="Twitter SSO"
       data-testid="login-button-twitter"
       icon={<TwitterIcon fill="currentColor" />}

src/style/theme/button.ts

@@ -142,7 +142,15 @@ export const buttonTheme = defineStyleConfig({
       background: "white",
       borderWidth: "0",
       borderRadius: "full",
+      _loading: {
+        color: "white",
+        background: colors.gray[600],
+        _hover: {
+          background: colors.gray[600],
+        },
+      },
       _hover: {
+        color: "white",
         background: colors.gray[600],
       },
     },