Separando css en archivos y otra cosa que no recuerdo

src/components/CoverArt.jsx

@@ -1,6 +1,7 @@
 import React, {Fragment, useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 import {getDiscCoverArt, getReleaseCoverArt} from "../services/entity_service";
+import './CoverArt.scss';
 
 export const CoverArt = (props) => {
   const disc = props.disc
@@ -37,13 +38,3 @@ export const CoverArt = (props) => {
     return <DiscSVG className='coverart'/>
   }
 }
-
-
-export const CoverWithCaption = (props) => {
-  return(
-    <figure className='cover-caption'>
-      <CoverArt disc={props.disc} alt={props.alt}/>
-      <figcaption>{props.caption}</figcaption>
-    </figure>
-  );
-}

src/components/CoverArt.scss

@@ -0,0 +1,10 @@
+.coverart {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  outline: 1px var(--gray-2) solid;
+
+  &.loading {
+    display: none;
+  }
+}

src/components/EntityList.scss

@@ -1,7 +1,6 @@
 // Base
 ul.entity-list {
   margin-top: 1em;
-  margin-bottom: 2em;
 
   .entity-header{
     font-size: 1.2em;
@@ -76,6 +75,7 @@ ul.entity-list {
 
   .entity-item {
     margin-bottom: 2em;
+
     a {
       .cover {
         width: 250px;

src/components/Nav.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {Link} from "react-router-dom";
+import './Nav.scss';
 
 export const Nav = () => (
     <nav className='nav'>

src/components/Nav.scss

@@ -0,0 +1,20 @@
+.nav {
+  display: flex;
+  min-height: 3.25em;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+
+  .branding {
+    margin: 0;
+    font-size: 1.777em;
+  }
+
+  .nav-links {
+    display: flex;
+
+    .link {
+      margin-left: 1em;
+    }
+  }
+}

src/components/Paginate.jsx

@@ -1,4 +1,5 @@
 import React, {Fragment, useState} from 'react';
+import './Paginate.scss';
 
 const SPACE_A = 'SPACE_A';
 const SPACE_B = 'SPACE_B';
@@ -154,4 +155,3 @@ export const Paginate = (props) => {
     );
 
 }
-

src/components/Paginate.scss

@@ -0,0 +1,51 @@
+/* Pagination */
+ul.pagination {
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  font-weight: 500;
+
+  .page-center {
+    display: flex;
+  }
+
+  .page-item {
+    height: 2.5em;
+    text-align: center;
+
+    &.left, &.right {
+      width: 7em;
+    }
+
+    .page-link {
+      display: inline-block;
+      height: 100%;
+
+      margin-right: .4em;
+      padding: .75rem 1em;
+
+      color: var(--black);
+      text-decoration: none;
+      line-height: 1;
+
+
+      &.active {
+        color: var(--accent);
+        border-bottom: var(--line-width) solid var(--accent);
+      }
+
+      &:hover:not(.active) {
+        border-bottom: var(--line-width) solid var(--accent);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .spacing {
+    margin: auto 1em;
+    font-weight: normal;
+  }
+}

src/components/SearchBar.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from "react";
 import {FaSearch} from 'react-icons/fa';
+import './SearchBar.scss';
 
 export const SearchBar = (props) => {
     const [query, setQuery] = useState(props.query ? props.query : '')

src/components/SearchBar.scss

@@ -0,0 +1,13 @@
+.searchbar {
+  margin-bottom: 2em;
+  margin-top: 1em;
+
+  button{
+    width: 4em;
+    text-align: center;
+    svg {
+      height: 50%;
+      width: auto;
+    }
+  }
+}