Skip to content

Edit style of React-Toastify to align with project design #679

Description

@Skoivumaki

Enhancement Description

Provide a brief description of the enhancement or improvement being suggested:

  • What is it?: Update the CSS styling of the toast dependency to reflect the Altzone design, specifically for success and error toast types.
  • Why improve it?: The current toast styles use default or generic styling that does not align with Altzone's visual identity. Updating them will create a more cohesive and branded user experience.

🌟 Benefits of the Enhancement

Explain how this enhancement will improve the project or user experience:

  • User Experience: Toasts will be visually consistent with the rest of the Altzone interface, making feedback clearer and more recognizable (e.g., success vs. error). Icons can further improve quick recognition.
  • Project Impact: Aligns the component with the global design system, improves maintainability by using shared color variables, and reinforces the Altzone brand.

🛠️ Proposed Implementation

Outline how the enhancement could be implemented, including any technical considerations:

  • Technical Details:

    • Study how toastify works.
    • Identify available global color variables that could fit for toast.
    • Check if the project has an icon library (e.g., SVG icons, icon font) with appropriate success/error/info icons.
  • Implementation Plan:

    1. Inspect the current toast implementation and the dependency’s default styles.
    2. Define or reuse global color variables for normal, success and error states.
    3. Override the toast CSS (see toastify documentation for how its done) to use Altzone colors.
    4. Add icons if suitable icons are available (e.g., checkmark for success, alert for error). Ensure proper alignment and sizing.
    5. Test toast appearance for all types (success, error, info, warning if applicable) across common screen sizes.
    6. If unsure about design choices or technical approach, PM in Discord to discuss the implementation plan.

📎 Additional Information

Include any additional context, examples, or resources that could help in understanding or implementing the enhancement:

Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

easylevel_easyenhancementFor improvements to existing features

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions