ConsoleEntry CSS module

Author: outoftime

src/components/ConsoleEntry.jsx

@@ -5,10 +5,11 @@ import {ConsoleEntry as ConsoleEntryRecord} from '../records';
 
 import ConsoleExpression from './ConsoleExpression';
 import ConsoleOutput from './ConsoleOutput';
+import styles from './ConsoleEntry.module.css';
 
 export default function ConsoleEntry({entry, isActive}) {
   return (
-    <div className="console__entry">
+    <div className={styles.entry}>
       <ConsoleExpression entry={entry} isActive={isActive} />
       <ConsoleOutput entry={entry} isActive={isActive} />
     </div>

src/components/ConsoleEntry.module.css

@@ -0,0 +1,6 @@
+.entry {
+  flex: none;
+  margin-top: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid var(--color-low-contrast-gray);
+}

src/css/application.css

@@ -610,15 +610,6 @@ body {
   animation: 0.2s ease-in 0.1s both fadeIn;
 }
 
-/** @define console */
-
-.console__entry {
-  flex: none;
-  margin-top: 0.5em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid var(--color-low-contrast-gray);
-}
-
 /** @define preview */
 
 .preview {