Styling Quotebase

Now that you've got the three core components of Quotebase figured out, you are eager to add some style. You decide to break the page into a 2x2 grid and add this ruleset to App.css:

.App {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  height: 100vh;
  grid-gap: 10px 40px;
}

The right column and the top row expand to the fill any extra space.

The Adder component needs to explicitly positioned to fill the entirety of the bottom row. You also make it have its own 3x2 grid layout to align the form elements and their labels:

#adder-panel {
  background-color: lightgray;
  grid-column: 1 / span 2;

  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0 50px;
  align-items: start;
}

The panels are too cramped. You add some padding to all three of them at once:

.panel {
  padding: 30px;
}

The quotation box needs to be a little taller since sometimes wisdom come in paragraphs:

#adder-panel > textarea {
  height: 6em;
}

The labels feel too weak, so you strengthen them:

#adder-panel > label {
  font-weight: bold;
  font-size: 1.1em;
}

You manually position the Add button in the bottom right cell so that all the interactive elements follow a clear axis of alignment:

#adder-panel > button {
  grid-column: 3;
  grid-row: 2 / span 1;
}

Currently the author names in the Authors components are plain text nodes. You want them to be clickable. Maybe you could wrap them up in anchor elements? But the semantic meaning of an anchor element is that it changes the browser's location based on the href attribute. Clicking on author's name will not change the location. The click should just cause the author's quotations to appear in the Quotations component.

A more semantically appropriate element for something generally clickable is a button. You decide to render each as a button element:

export function Authors(props) {
  const authors = useSelector(state => Object.keys(state.quotations));

  return (
    <div id="authors-panel" className="panel">
      <h3>Authors</h3>
      <ul>
        {authors.map(author =>
          <li key={author}>
            <button className="author-button">{author}</button>
          </li>
        )}
      </ul>
    </div>
  );
}

Even though they are buttons, you want them to look like links. So you strip off their background, border, and extra spacing with a little CSS:

.author-button {
  border: none;
  background: none;
  font-size: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.author-button:hover {
  text-decoration: underline;
}

That feels better. There's nothing fancy here, and there are some issues you'll need to deal with, like overflow. But this is a good start.