From ae22ff236fcaf70115b324aebfb2c76edd04353e Mon Sep 17 00:00:00 2001
From: hallidayo <22655069+Hallidayo@users.noreply.github.com>
Date: Sun, 5 Nov 2023 04:54:40 +0000
Subject: [PATCH] feat: added new default styles (#231)

* added new default styles

* Add changeset

---------

Co-authored-by: Andrew Smith <a.smith@silentworks.co.uk>
---
 .changeset/mighty-meals-flow.md              |  6 ++++++
 packages/solid/src/components/UI/Message.tsx |  9 ++++++++-
 packages/svelte/src/lib/UI/Message.svelte    | 13 ++++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/mighty-meals-flow.md

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'
 				}
 			}
 		}