Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Dashboard with Theme Switcher - React, Styled Components

#react#sass/scss#styled-components

@jphiron

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback welcome! Please view the solution, as the generated screenshot is slightly off for some reason or another, seems to work perfectly fine/as intended in the browser, however!

Community feedback

@Programming-School-Pro-Coding

Posted

Very Amazing Website

In my opinion you can put a transition of all hovers by the following code:

* {
    transition: all 0.5s; /* You can put your own time */
}

Why do you use react js ?

Marked as helpful

1

@jphiron

Posted

@Programming-School-Pro-Coding

Hey there! Thanks for the feedback!

You are quite right, I could apply the transition using the * selector and I will probably refactor to use it shortly, I wanted to avoid using it from the start in case there were any edge cases of active states that did not require a transition.

I decided to use react for two reasons:

  1. the context API makes theme switching a lot easier and a lot more graceful than a vanilla JS solution

  2. I am currently very interested in react and trying to get some practice of using it to build projects!

Let me know if there's anything else you'd like to know! 🙂

0

@Programming-School-Pro-Coding

Posted

@jphiron

No, i understand you

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord