Use Waves SVG for Dark Theme
Closed this issue · 4 comments
Describe the bug
The create-account success page in the custom example is using an image that only looks good in the light theme. React workflow example is using a waves svg that looks good in both light and dark, use that one here.
What is the expected behavior?
The picture should look good on dark and light themes.
What are the steps to reproduce?
- Clone the repo (
git clone https://github.com/brightlayer-ui/angular-workflows.git). - CD into the project (
cd angular-workflows) - Run the example project (
cd login-workflow && yarn start:example) - Navigate to http://localhost:4200/auth/register/create-account
- Inspect the page & update the
<body>class fromblui-bluetoblui-blue-dark. This will set the dark theme manually. - Fill in the required information to create an account.
- Observe the final page; it should match the image below.
Screenshots or links to minimum reproduction example
The React Workflows don't have a waves image at all. The React Native ones do, but it looks like they are the same one that's used here (white background). We will need an updated graphic from @huayunh that has a transparent background that we can use for both light and dark theme.
The no wave image is the default state:
But we shall allow users to customize that area. For example, if you want to do the Eric Atha thing, you shall be allowed:
Screen.Recording.2023-03-28.at.10.52.43.AM.mov
@huayunh understood — this fix is JUST in the example project, not in the main code...but we don't have the image asset that works well for light and dark theme (I don't see it anywhere in the react workflow repository even though it's mentioned in the description as being there, and the one in the RN repository has the same issue as reported here on angular). Do you have a wave image that uses a transparent background somewhere in Figma that we can use for this?
