cleaned up debug code, formatting of addtostudio buttons

package-lock.json

@@ -6646,6 +6646,12 @@
         "lodash.keysin": "3.0.8"
       }
     },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -11605,7 +11611,7 @@
       "integrity": "sha512-FYw4Gj5izHp3aReM5V6YXCCTrtfkVdj7t2F20RmaR62qO0xqBhWdPPq3uYh7+ol6w0/lQZuwi9h4A41WFvQbYA=="
     },
     "scratchr2_translations": {
-      "version": "git://github.com/LLK/scratchr2_translations.git#6e88ec9ada4e7131e87a05f31b7432f9c2b153e7",
+      "version": "git://github.com/LLK/scratchr2_translations.git#89f8eb1e09c034f39b98eb3b356ca9cfcf02d670",
       "dev": true
     },
     "scss-tokenizer": {

src/components/modal/addtostudio/modal.jsx

@@ -73,7 +73,6 @@ class AddToStudioModal extends React.Component {
         // them too; otherwise we might retain a dirty change for a studio
         // we no longer have permission for. In theory.
 
-        debugger;
         let onOrDirty = this.state.onOrDirty;
         projectStudios.forEach((studio) => {
             onOrDirty[studio.id] = {added: true, dirty: false};
@@ -82,7 +81,6 @@ class AddToStudioModal extends React.Component {
         console.log(myStudios);
         console.log(onOrDirty);
         this.setState({onOrDirty: Object.assign({}, onOrDirty)});
-        this.setState({testkey2: 'testval2'});
     }
 
     handleToggleAdded(studioId) {
@@ -143,19 +141,14 @@ class AddToStudioModal extends React.Component {
         // When this modal is opened, and isOpen becomes true,
         // onOrDirty should start with a clean slate
         // NOTE: this doesn't seem to be working:
-        this.setState({ onOrDirty: undefined });
-        // what's weird is, it's not an issue with "this" being invalid,
-        // because this works fine:
-        this.setState({testkey: 'testval'});
-
-
-        debugger;
+        this.setState({ onOrDirty: undefined }, () => {
             this.props.onAddToStudio(studiosToAdd, studiosToDelete, err => {
                 if (err) log.error(err);
                 this.setState({
                     waiting: false
                 });
             });
+        });
     }
     render () {
         const {
@@ -178,8 +171,8 @@ class AddToStudioModal extends React.Component {
                     onClick={() => this.handleToggleAdded(studio.id)}
                 >
                     {truncate(studio.title, {'length': 20, 'separator': /[,:\.;]*\s+/})}
-                    <div className={".studio-status-icon" +
-                        (isAdded ? " .studio-status-icon-selected" : "")}
+                    <div className={"studio-status-icon" +
+                        (isAdded ? " studio-status-icon-selected" : "")}
                     >
                         {isAdded ? "✓" : "+"}
                     </div>

src/components/modal/addtostudio/modal.scss

@@ -68,12 +68,10 @@
     justify-content: flex-start;
     flex-flow: row wrap;
     padding: 1rem 3rem;
-
-    min-height: 30rem;
 }
 /* NOTE: force scrolling: add to above:
     min-height: 30rem;
-    */
+*/
 
 .studio-selector-button {
     background-color: $ui-white;
@@ -85,6 +83,8 @@
     border-radius: 0.5rem;
     box-sizing: border-box;
     width: 40%;
+    display: flex;
+    justify-content: space-between;
 }
 
 .studio-selector-button-selected {
@@ -94,11 +94,11 @@
 
 .studio-status-icon {
     background-color: $ui-blue;
-    color: $type-gray;
+    color: $ui-white;
     font-weight: 800;
     height: 1.5rem;
-    margin: 0.5rem 0.5rem;
-    padding: 0.5rem 0.5rem;
+    margin: 0rem 0rem;
+    padding: 0rem 0.5rem;
     border-radius: 0.75rem;
     box-sizing: border-box;
     width: 1.5rem;