UI: Improve Card UI in 'Beginner-Friendly Repos' Page

[MrVioz]

Category

• [ ] Documentation
• [ ] Resource Addition
• [X] Codebase
• [ ] User Interface
• [ ] Feature Request

Description

We have to adjust the background color of the card container, because after activating the dark mode the readability for the users becomes more difficult.

step 1: Go to client/pages/beginner-friendly-repos/style.css

step 2.1: add a new class .dark-theme-card {background-color: rgb(25, 50, 84); color: #ffffff; }

step 2.2: for better UX you can change the Hyperlink Reference style to: .dark-theme-card a{ color: #ffffff; } .dark-theme-card a:hover{ color: #1CFF2F; } and .dark-theme h2{ color: #1CFF2F; font-family: Arial, Helvetica, sans-serif; text-align: center; margin-bottom: 20px; } (This creates a better harmony between website content and logo)

step 3: Go To client/app.js and add in the themeToggle.addEventListener() the var const cardsContainer = document.querySelectorAll(".card"); (to select all cards)

step 4: add in the if statemant cardsContainer.forEach(card => { card.classList.add("dark-theme-card"); and in the else statemant cardsContainer.forEach(card => { card.classList.remove("dark-theme-card"); }); (to activate the dark-theme or deactivate it).

[MrVioz]

Hey @Sriparno08, I based the color theme on your logo, as I found the dark blue tones very suitable, I chose them for the background of the cards. Do you like it more when the colors are complementary (Pic 1) or triadic (Pic 2)? best regards

Pic 1:

Pic 2:

[MrVioz]

oh, and can you maybe assign me to the Issue? 😄

[Sriparno08]

Thanks for opening the issue, @MrVioz!

Firstly, the instructions in the description are absolutely correct. The only thing that I'll suggest is adding the JavaScript code to client/pages/beginner-friendly-repos/app.js instead of client/app.js. Doing so will help keep the functionalities of this page and the landing page separate.

Secondly, the background color (rgb(25, 50, 84)) and the text color (#ffffff) on the cards look good and readable. So, let's use them.

Thirdly, we can use #aee31f as the color for the heading (<h2>) and links on hover. This color looks good and exactly matches with the logo color.

Lastly, you're assigned!

[Sriparno08]

Hey @MrVioz, are you still working on this issue? If you are, please open a PR!

[lauradowell]

Hi! is anyone still working on this? If not, could you assign this to me?

[Sriparno08]

Hey @lauradowell, @MrVioz is currently assigned to this issue. If he doesn't respond for too long, you will be assigned.

[MrVioz]

Hi Sriprano I have another small problem that I need to correct. I'll try to have it ready by the end of the week, sorry about that