Feature - Custom color for components

[renzigpp]

Greetings 👋, this time I wanted to add a feature, and this one is based on Issue #237. At interface level there are two new fields for the font color and background color selection. It were required changes both on frontend and backend, but they are synced on the template now.

BEFORE:

AFTER:

Summary by CodeRabbit

New Feature:

• Added the ability for users to customize font and background colors on the Home page. This feature enhances user experience by allowing more personalization options.
• Updated the TemplateCard component to accept and apply custom color selections.
• Extended the quoteController function in the API to handle new color parameters, enabling dynamic color changes in quotes.

Refactor:

• Improved the CSS styles of templates in layouts/index.js to accommodate new color customization features.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
github-readme-quotes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2023 2:59pm

[coderabbitai]

Walkthrough

This update introduces the ability to customize font and background colors for quote templates. Users can now select their preferred colors from a predefined list, which are then passed as props to the TemplateCard component and applied to the template's theme. The changes also extend to the backend, where the quotesController function has been updated to accept these new parameters.

Changes

File	Summary
.../Pages/Home/index.js	Added color selection functionality with two Autocomplete components. Updated TemplateCard to pass new color props.
.../organisms/TemplateCard/index.js	Enhanced to accept and apply fontColor and bgColor props to the theme.
.../config/cardTemplate/index.js	Added a new constant array colorValues containing a list of color names.
.../util/layouts/index.js	Updated CSS styles to accommodate new color customization options.
src/api/controllers/quotesController.js	Updated to accept fontColor and bgColor parameters, allowing more flexibility in quote appearance.

🐇💻

"In the land of code, where the shadows lie,

A rabbit hopped forth, under the cloudless sky.

With a twitch of his nose, and a flick of his ear,

He brought forth changes, for all to cheer.

Now quotes shine bright, in colors so bold,

A sight to behold, a story to be told."

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Mention @coderabbitai in any review comment for bot assistance.
• Note: Review comments are made on code diffs or files, not on the PR overview.

Pause Incremental Reviews

• Insert @coderabbitai: ignore in the PR description to halt the bot's ongoing reviews. Remove the line to resume.
• Additionally, enter @coderabbitai pause to halt the bot's ongoing reviews as any issue or review comment. To
  resume reviews, enter @coderabbitai resume as any issue or review comment.

[coderabbitai]

Review Status

Actionable comments generated: 2

Commits

Files that changed from the base of the PR and between c3a98f8 and 347f3ff.

Files selected for processing (5)

• frontend/src/components/Pages/Home/index.js (4 hunks)
• frontend/src/components/organisms/TemplateCard/index.js (2 hunks)
• frontend/src/config/cardTemplate/index.js (1 hunks)
• frontend/src/util/layouts/index.js (14 hunks)
• src/api/controllers/quotesController.js (1 hunks)

Files skipped from review due to trivial changes (2)

• frontend/src/config/cardTemplate/index.js
• frontend/src/util/layouts/index.js

Additional comments (Suppressed): 6

frontend/src/components/organisms/TemplateCard/index.js (1)

• 64-64: Ensure that the backend endpoint /quote correctly handles the new query parameters fontColor and bgColor. Also, verify that these parameters are properly URL-encoded to prevent any issues with special characters.

frontend/src/components/Pages/Home/index.js (5)

• 4-4: The import statement has been updated to include colorValues from the cardTemplate configuration. This array should contain valid color values for font and background customization.

• 14-15: Two new state variables fontColor and bgColor have been added with initial values of "white" and "black" respectively. Ensure that these default colors are appropriate for your application's design and user experience.

• 82-107: Two new Autocomplete components have been added for selecting the font color and background color. The selected colors are stored in the fontColor and bgColor state variables. Make sure that the colorValues array provides a good range of color options for users.

• 113-113: The TemplateCard component now receives fontColor and bgColor as props. Ensure that these props are used correctly within the TemplateCard component to update the font and background colors.

• 122-122: The TemplateCard component for other layouts also receives fontColor and bgColor as props. This ensures consistency in color customization across different layouts.

[shravan20]

PR LGTM, can you please raise a PR to include this as part of documentation?