Social Media Dashboard With Theme Switcher

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Tjaša, great job building this in Svelte, which is something I've been meaning to learn. I haven't checked out the code yet but I think it looks great. I only got one suggestion about the changing border lines on hover: Right now when hovering, the size of the card shift and the other cards also shift and resize slightly. I think using transform:scale is OK even though at times it can get heavier on performance. In any case I think it would look better if everything else did not shift and resize, as in the scaling would not affect the other cards. It's also possible that even if you remove the scaling, things could still shift slightly due to the card border, since the card is going from a border:none state to a hovered 3px state. If that also causes shifting, you can try putting in a border of the same width as the hover state and give it a color of the card background color, or you can also try your site's background color, which has a different effect visually, but it all depends on what you prefer.

  Great job once again 🙂

  Marked as helpful

  0

  ---

  

  Tjaša Žilavec•590

  @TjasaZilPosted over 2 years ago

  @elaineleung Thank you so much for your suggestion. I will definitely try to implement it since the shift is bothering me quite a bit. 🙃

  1
• 

  Michael Godfrey•340

  @michagodfreyPosted over 2 years ago

  Nice work, Tjasa! I did this challenge yesterday and I've been looking for other completed examples. The solution is a close to the design and I like how you've added a transition duration when switching to dark mode - wish I thought of doing that.

  I also has the same accessibility issue - <label> and <input>. Although I still have this problem despite adding for and id to those elements. If you manage to figure it out, please let me know :)

  1