fix: social sign in button styling

ory · Sep 16, 2024 · 04eb255 · 04eb255
1 parent d3a37aa
commit 04eb255
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx
@@ -1,8 +1,8 @@
 import {
   HeadlessSocialButtonContainerProps,
   HeadlessSocialButtonProps,
-} from "@ory/elements-react"
-import { useOryFlow } from "@ory/elements-react"
+} from "../../../../components"
+import { useOryFlow } from "../../../../context"
 import logos from "../../provider-logos"
 import { cn } from "../../utils/cn"
 
@@ -38,8 +38,8 @@ export function DefaultButtonSocial({
   return (
     <button
       className={cn(
-        "gap-3 border border-forms-border-default bg-button-secondary-bg-default hover:bg-button-secondary-bg-hover transition-colors rounded flex items-center justify-center py-2.5 px-4 md:py-4",
-        showLabel && "py-3.5 gap-3",
+        "gap-3 ring-1 ring-forms-border-default bg-button-secondary-bg-default hover:bg-button-secondary-bg-hover transition-colors rounded flex items-center justify-center py-2.5 px-4 md:py-4",
+        { "py-2.5": showLabel },
       )}
       value={attributes.value}
       type="submit"
@@ -54,7 +54,7 @@ export function DefaultButtonSocial({
             className="object-fill w-full h-full"
           />
         ) : (
-          <span className="rounded-full border flex items-center justify-center text-xs">
+          <span className="rounded-full aspect-square border flex items-center justify-center text-xs">
             {provider.slice(0, 2)}
           </span>
         )}

diff --git a/packages/elements-react/tailwind.config.ts b/packages/elements-react/tailwind.config.ts
@@ -41,6 +41,9 @@ const config: Config = {
     borderColor: {
       ...variables.colors.light,
     },
+    ringColor: {
+      ...variables.colors.light,
+    },
     fill: {
       ...variables.colors.light,
     },