Move EditableStringList style to component

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

js/components/EditableStringList.js

@@ -3,6 +3,8 @@ import {
     Alert, Button, Card, CardBody, CardTitle, Input, InputGroup
 } from 'reactstrap';
 
+import styles from './EditableStringList.module.css';
+
 export default class EditableStringList extends React.Component {
     constructor(props) {
         super(props);
@@ -171,11 +173,11 @@ class GroupView extends React.Component {
 
     render() {
         return (<div>
-            {this.props.groups.map((group, groupindex) => (<Card className="group-card" key={groupindex}>
+            {this.props.groups.map((group, groupindex) => (<Card className={styles.group_card} key={groupindex}>
                 <CardBody>
                     <CardTitle>Group {groupindex + 1}</CardTitle>
                     {group.map((team, teamindex) => (<div key={team} draggable droppable="droppable"
-                        className="grouped-team-item"
+                        className={styles.grouped_team_item}
                         onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
                         onDragOver={e => this.onDragOver(e)}
                         onDrop={e => this.onDrop(e, groupindex, teamindex)}>
@@ -223,7 +225,7 @@ class StringInput extends React.Component {
     }
 
     render() {
-        return (<InputGroup className="mb-3">
+        return (<InputGroup>
             <Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required
                 onChange={this.handleChange} onKeyPress={e => {
                     if (e.key === 'Enter') {
@@ -258,7 +260,9 @@ class Item extends React.Component {
     }
 
     render() {
-        return (<Alert className="team-item m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
+        return (<Alert
+            className={styles.team_item} color="info" isOpen={this.state.visible} toggle={this.onDismiss}
+        >
             {this.props.text}
         </Alert>);
     }

js/components/EditableStringList.module.css

@@ -1,25 +1,17 @@
-
+.group_card {
-.group-card {
     margin-top: 15px;
     margin-right: 15px;
     display: inline-block;
     vertical-align: top;
 }
 
-.team-item {
+.team_item {
     display: inline-block;
+    margin: .5rem;
 }
 
-.grouped-team-item {
+.grouped_team_item {
     display: block;
     margin-bottom: .5rem;
     border-radius: .25rem;
 }
-
-.grouped-team-item:last-child {
-    margin-bottom: 0px;
-}
-
-.grouped-team-item > .m-2 {
-    margin: 0 !important;
-}

pages/_app.js

@@ -10,7 +10,6 @@ import {verifyCredentials} from '../js/api.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import '../public/static/css/errormessages.css';
-import '../public/static/css/editablestringlist.css';
 import '../public/static/css/everypage.css';
 import '../public/static/css/error.css';
 import '../public/static/css/numericinput.css';