From 2130b949704c7f162bb2dc384c6621afa00cb2c3 Mon Sep 17 00:00:00 2001
From: Thor77 <thor77@thor77.org>
Date: Fri, 10 Jun 2022 22:33:12 +0200
Subject: [PATCH] Move EditableStringList style to component

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css
---
 js/components/EditableStringList.js              | 12 ++++++++----
 .../components/EditableStringList.module.css     | 16 ++++------------
 pages/_app.js                                    |  1 -
 3 files changed, 12 insertions(+), 17 deletions(-)
 rename public/static/css/editablestringlist.css => js/components/EditableStringList.module.css (55%)

diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js
index acde336..941da94 100644
--- a/js/components/EditableStringList.js
+++ b/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>);
     }
diff --git a/public/static/css/editablestringlist.css b/js/components/EditableStringList.module.css
similarity index 55%
rename from public/static/css/editablestringlist.css
rename to js/components/EditableStringList.module.css
index b0012b0..d418bdb 100644
--- a/public/static/css/editablestringlist.css
+++ b/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;
-}
diff --git a/pages/_app.js b/pages/_app.js
index 8cf9f6a..1c3518b 100644
--- a/pages/_app.js
+++ b/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';