Time tracking dashboard built using React and styled-components

What are you most proud of, and what would you do differently next time?

• I learned how to conditionally change the background-color based on the title value using styled-components

const Wrapper = styled.div`
  background-color: ${(props) =>
    props.title === "Work"
      ? "var(--work-light-red)"
      : props.title === "Play"
      ? "var(--play-soft-blue)"
      : props.title === "Study"
      ? "var(--study-light-red)"
      : props.title === "Exercise"
      ? "var(--exercise-lime-green)"
      : props.title === "Social"
      ? "var(--social-violet)"
      : props.title === "Self Care"
      ? "var(--self-care-soft-orange)"
      : null};
`;
};

• I began the challenge with a few components and an MVP that mainly consisted of JavaScript logic to manipulate the data and display the current and previous hours based on the view. However, when I started working on the styling, I had to modify the HTML structure to fit the styling requirements. In the future, I would consider planning for this earlier in the project to avoid any issues.

• Overall, I really enjoyed working on it

What challenges did you encounter, and how did you overcome them?

• I had difficulty conditionally applying the background color and SVG icons to the cards. I had to brush up on styled-components in order to complete that.

What specific areas of your project would you like help with?

• Currently clicking or hovering on daily, weekly, and monthly links change the color to white. However, I couldn't figure out how to make the default selected link(Weekly) white color. If anyone has any suggestions, I would greatly appreciate it!

• Also, feel free to share any feedback you may have. Thank you!