diff --git a/.changeset/mighty-meals-flow.md b/.changeset/mighty-meals-flow.md new file mode 100644 index 00000000..cfdacc24 --- /dev/null +++ b/.changeset/mighty-meals-flow.md @@ -0,0 +1,6 @@ +--- +'@supabase/auth-ui-svelte': patch +'@supabase/auth-ui-solid': patch +--- + +Message styling change diff --git a/packages/solid/src/components/UI/Message.tsx b/packages/solid/src/components/UI/Message.tsx index a915a4c4..22606c17 100644 --- a/packages/solid/src/components/UI/Message.tsx +++ b/packages/solid/src/components/UI/Message.tsx @@ -5,17 +5,24 @@ import { Appearance } from '../../types' const messageDefaultStyles = css({ fontFamily: '$bodyFontFamily', - fontSize: '$baseBodySize', + fontSize: '$baseInputSize', marginBottom: '$labelBottomMargin', display: 'block', textAlign: 'center', + borderRadius: '0.375rem', + padding: '1.5rem 1rem', + lineHeight: '1rem', variants: { color: { default: { color: '$messageText', + backgroundColor: '$messageBackground', + border: '1px solid $messageBorder', }, danger: { color: '$messageTextDanger', + backgroundColor: '$messageBackgroundDanger', + border: '1px solid $messageBorderDanger', }, }, }, diff --git a/packages/svelte/src/lib/UI/Message.svelte b/packages/svelte/src/lib/UI/Message.svelte index 96d43b01..fcacfdca 100644 --- a/packages/svelte/src/lib/UI/Message.svelte +++ b/packages/svelte/src/lib/UI/Message.svelte @@ -5,17 +5,24 @@ const messageDefaultStyles = css({ fontFamily: '$bodyFontFamily', - fontSize: '$baseBodySize', + fontSize: '$baseInputSize', marginBottom: '$labelBottomMargin', display: 'block', textAlign: 'center', + borderRadius: '0.375rem', + padding: '1.5rem 1rem', + lineHeight: '1rem', variants: { color: { default: { - color: '$messageText' + color: '$messageText', + backgroundColor: '$messageBackground', + border: '1px solid $messageBorder' }, danger: { - color: '$messageTextDanger' + color: '$messageTextDanger', + backgroundColor: '$messageBackgroundDanger', + border: '1px solid $messageBorderDanger' } } }