feat: Message styling changes (#227)

Author: Hallidayo

.changeset/empty-shrimps-battle.md

@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-shared': patch
+'@supabase/auth-ui-react': patch
+---
+
+Message styling change

packages/react/src/components/UI/Message.tsx

@@ -4,25 +4,30 @@ 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',
+  color: '$messageText',
+  backgroundColor: '$messageBackground',
+  border: '1px solid $messageBorder',
   variants: {
     color: {
-      default: {
-        color: '$messageText',
-      },
       danger: {
         color: '$messageTextDanger',
+        backgroundColor: '$messageBackgroundDanger',
+        border: '1px solid $messageBorderDanger',
       },
     },
   },
 })
 
 interface MessageProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode
-  color?: 'default' | 'danger'
+  color?: 'danger'
   appearance?: Appearance
 }
 

packages/shared/src/theming/Types.ts

@@ -16,7 +16,11 @@ export type ThemeVariables = {
     inputPlaceholder?: string
     inputText?: string
     messageText?: string
+    messageBackground?: string
+    messageBorder?: string
     messageTextDanger?: string
+    messageBackgroundDanger?: string
+    messageBorderDanger?: string
     anchorTextColor?: string
     anchorTextHoverColor?: string
   }

packages/shared/src/theming/defaultThemes.ts

@@ -31,8 +31,12 @@ export const ThemeSupa: Theme = {
       inputText: 'black',
       inputLabelText: 'gray',
       inputPlaceholder: 'darkgray',
-      messageText: 'gray',
-      messageTextDanger: 'red',
+      messageText: '#2b805a',
+      messageBackground: '#e7fcf1',
+      messageBorder: '#d0f3e1',
+      messageTextDanger: '#ff6369',
+      messageBackgroundDanger: '#fff8f8',
+      messageBorderDanger: '#822025',
       anchorTextColor: 'gray',
       anchorTextHoverColor: 'darkgray',
     },
@@ -91,6 +95,10 @@ export const ThemeSupa: Theme = {
       inputBorderFocus: 'gray',
       inputText: 'white',
       inputPlaceholder: 'darkgray',
+      messageText: '#85e0b7',
+      messageBackground: '#072719',
+      messageBorder: '#2b805a',
+      messageBackgroundDanger: '#1f1315',
     },
   },
 }
@@ -109,6 +117,12 @@ export const ThemeMinimal: Theme = {
       inputBorder: 'lightgray',
       inputText: 'black',
       inputPlaceholder: 'darkgray',
+      messageText: '#2b805a',
+      messageBackground: '#e7fcf1',
+      messageBorder: '#d0f3e1',
+      messageTextDanger: '#ff6369',
+      messageBackgroundDanger: '#fff8f8',
+      messageBorderDanger: '#822025',
     },
     space: {
       spaceSmall: '4px',
@@ -150,6 +164,10 @@ export const ThemeMinimal: Theme = {
       inputBorder: 'gray',
       inputText: 'black',
       inputPlaceholder: 'darkgray',
+      messageText: '#85e0b7',
+      messageBackground: '#072719',
+      messageBorder: '#2b805a',
+      messageBackgroundDanger: '#1f1315',
     },
   },
 }