omonteon / product-feedback-app Goto Github PK

The Reply button needs to be all the way to the right, but instead is 32px away from it because of the grid gap.

I still need to define all types of imports, but here is a simple example:

// Components
import Card from "@components/Card";
import FeedbackForm from "@components/FeedbackForm";
import GoBackLink from "@components/GoBackLink";

// Styles
import styles from "./feedbackNew.module.css";

// Utils, images
import { ReactComponent as PlusIcon } from "@assets/plus-icon.svg";

Mid to long term goal: Implement i18n for the app.

English and Spanish.

Adhere to a set of rules of what units to use for each situation.

Reference: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/

The issue with having that prop is that we are using css modules in this project.
And you can pass as prop a class with the same name, you can end up with html like this:

<div class="_card_1vxfd_1 _card_1v4l8_48">

The names of the classes are still unique, but it looks like you make a mistake.

Figure out how to create a better relationship between the two components

Possible paths to follow:

• CheckableTag maybe should import Tag instead of only importing it's styles
• Or each should have its own styles module ?

I have a few components that have the suffix "Card". Which I think is not a big issue, but it can be confusing if you think of components with that suffix to be types of "Cards". When in fact they happen to be inside a card. Like the TagsCard.

I didn't notice that the icons where already included in the challenge starter.

• Replace and adjust styling.

• Header hierarchy
• Keyboard navigation
• Color contrast
• Investigate more...