Wasp-lang•4d ago

Changing the color of the text in the Login/signup/ forgetpass pages.

I can't change the color of the text in these pages. any recommendations? knowing that the color of the buttons can be changed

4 Replies

kapa.ai•4d ago

Hi @LifeTaker. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the color of the text in the Login, Signup, and Forgot Password pages in Wasp, you can customize the appearance of the Auth UI components. Here's how you can do it: 1. Create an appearance object with custom color settings:

export const authAppearance = {
  colors: {
    brand: '#5969b8', // blue
    brandAccent: '#de5998', // pink
    submitButtonText: 'white',
    // Add more color customizations here
  },
}

export const authAppearance = {
  colors: {
    brand: '#5969b8', // blue
    brandAccent: '#de5998', // pink
    submitButtonText: 'white',
    // Add more color customizations here
  },
}

2. Pass this appearance object to the Auth UI components:

import { LoginForm } from 'wasp/client/auth'
import { authAppearance } from './appearance'

export function LoginPage() {
  return (
    <LoginForm
      appearance={authAppearance}
    />
  )
}

import { LoginForm } from 'wasp/client/auth'
import { authAppearance } from './appearance'

export function LoginPage() {
  return (
    <LoginForm
      appearance={authAppearance}
    />
  )
}

You can customize various color tokens to change the text color and other aspects of the Auth UI. The full list of available tokens can be found in the Wasp GitHub repository stitches.config.js (https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/src/stitches.config.js). It's worth noting that while you can easily change the color of buttons, changing the text color might require additional customization of the appearance object. For more detailed information on customizing the Auth UI, you can refer to the Wasp Auth UI Customization docs (https://wasp-lang.dev/docs/auth/ui#customization-). If you're still having trouble changing the text color specifically, you might need to experiment with different color tokens or consider creating a custom Auth UI component for more fine-grained control over the styling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @LifeTaker, 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?

miho•4d ago

You could use CSS to target specific elements e.g. wrap the form with some known class and then target the correct text. Let me know if you need more details. @kapa.ai show us an example of that

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I apologize for the confusion in my previous answer. You're right that we can use CSS to target specific elements for more fine-grained control over the styling. Here's an example of how you can do this: 1. First, let's wrap the LoginForm component with a div that has a specific class:

import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
  return (
    <div className="custom-auth-form">
      <LoginForm />
    </div>
  )
}

import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
  return (
    <div className="custom-auth-form">
      <LoginForm />
    </div>
  )
}

2. Then, you can create a CSS file (e.g., auth.css) and add styles to target specific elements within the form:

.custom-auth-form h1 {
  color: #333333; /* Change the color of the main heading */
}

.custom-auth-form label {
  color: #555555; /* Change the color of form labels */
}

.custom-auth-form input {
  color: #000000; /* Change the color of input text */
}

.custom-auth-form a {
  color: #0000FF; /* Change the color of links */
}

.custom-auth-form h1 {
  color: #333333; /* Change the color of the main heading */
}

.custom-auth-form label {
  color: #555555; /* Change the color of form labels */
}

.custom-auth-form input {
  color: #000000; /* Change the color of input text */
}

.custom-auth-form a {
  color: #0000FF; /* Change the color of links */
}

3. Import this CSS file in your LoginPage component:

import { LoginForm } from 'wasp/client/auth'
import './auth.css'

export function LoginPage() {
  return (
    <div className="custom-auth-form">
      <LoginForm />
    </div>
  )
}

import { LoginForm } from 'wasp/client/auth'
import './auth.css'

export function LoginPage() {
  return (
    <div className="custom-auth-form">
      <LoginForm />
    </div>
  )
}

This approach allows you to override the default styles of the Auth UI components. You might need to inspect the rendered HTML to find the correct selectors for the elements you want to style. Keep in mind that this method of styling is not officially documented in the Wasp Auth UI customization docs, so it might be less stable across updates compared to using the official appearance prop. However, it gives you more flexibility in styling specific elements. If you need more details or have any questions about this approach, please let me know! Auth UI docs (https://wasp-lang.dev/docs/auth/ui#auth-components) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, 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?

LifeTakerOP•2d ago

i didn't solve the problem , code can be found here : https://github.com/LifeTakerSimo/saas_base

GitHub

GitHub - LifeTakerSimo/saas_base

Contribute to LifeTakerSimo/saas_base development by creating an account on GitHub.

Gaming

Programming

Changing the color of the text in the Login/signup/ forgetpass pages.