Wasp-lang•3w ago

Can't change default button color

Is tehre a way to change the yellow that is present by default? Also is there any resource to understand the structure of the auth page? Can't figure out how that works after a couple hours of tinkering, also is manually editing 5 different files really the only way to customize the page for Login?

2 Replies

kapa.ai•3w ago

Hi @G. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can change the default button color in Wasp by customizing the appearance of the form. This is done by passing an appearance prop to the form. The appearance prop is an object that contains a colors field, which in turn contains the color settings for different parts of the form. For example, you can change the color of the submit button text like this:

export const authAppearance = {  
 colors: {  
   submitButtonText: 'white',  
 },  
}

export const authAppearance = {  
 colors: {  
   submitButtonText: 'white',  
 },  
}

You can then pass this authAppearance object to the form:

import { LoginForm } from 'wasp/client/auth'  
import { authAppearance } from './appearance'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
   // Pass the appearance object to the form  
   appearance={authAppearance}  
 />  
 )  
}

import { LoginForm } from 'wasp/client/auth'  
import { authAppearance } from './appearance'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
   // Pass the appearance object to the form  
   appearance={authAppearance}  
 />  
 )  
}

This code should be placed in a separate file (e.g., appearance.js or appearance.ts), and then imported into your components. As for understanding the structure of the auth page, the Wasp documentation provides a guide on how to customize the Auth UI, including how to use your own logo and change the layout of the social buttons. You can find this guide here (https://wasp-lang.dev/docs/auth/ui). Regarding your question about manually editing 5 different files to customize the page for Login, it seems like you might be referring to the process of customizing the appearance, logo, and social layout. While it's true that these customizations require changes in different files, this is a common practice in web development to separate concerns and make the code more maintainable. However, Wasp recommends defining your appearance in a separate file and importing it into your components to keep your code DRY (Don't Repeat Yourself). Sources: - Customizing the Auth UI (https://wasp-lang.dev/docs/auth/ui#customization-) - Using Your Logo (https://wasp-lang.dev/docs/auth/ui#2-using-your-logo) - Social Buttons Layout (https://wasp-lang.dev/docs/auth/ui#3-social-buttons-layout) - Let's Put Everything Together (https://wasp-lang.dev/docs/auth/ui#lets-put-everything-together-) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @G, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•3w ago

Hello and welcome 🙂 The bot listed some great resources. I recommend starting with the auth UI docs: https://wasp-lang.dev/docs/auth/ui. Also, the tutorial shows you how to implement a custom login and signup page, so check that out. You'll have better success there than when talking with the bot. In short, you can do everything you described (change button color, even implement your won login form scratch). Start with the docs, and drop back here for any specific questions.

Gaming

Programming

Can't change default button color