add lists modal stuff

ui/component/claimCollectionAdd/view.jsx

@@ -42,6 +42,7 @@ const ClaimCollectionAdd = (props: Props) => {
   function handleAddCollection() {
     addCollection(newCollectionName, [permanentUrl], isChannel ? 'collection' : 'playlist');
     setNewCollectionName('');
+    setAddNewCollection(false);
   }
 
   function altEnterListener(e: SyntheticKeyboardEvent<*>) {
@@ -60,6 +61,18 @@ const ClaimCollectionAdd = (props: Props) => {
     window.removeEventListener('keydown', altEnterListener);
   }
 
+  function handleDone() {
+    if (addNewCollection && newCollectionName) {
+      handleAddCollection();
+    }
+    closeModal();
+  }
+
+  function handleClearNew() {
+    setNewCollectionName('');
+    setAddNewCollection(false);
+  }
+
   return (
     <Card
       title={__('Add To...')}
@@ -107,13 +120,22 @@ const ClaimCollectionAdd = (props: Props) => {
                 onFocus={onTextareaFocus}
                 onBlur={onTextareaBlur}
                 inputButton={
-                  <Button
+                  <>
-                    button={'secondary'}
+                    <Button
-                    icon={ICONS.ADD}
+                      button={'alt'}
-                    disabled={!newCollectionName.length}
+                      icon={ICONS.ADD}
-                    onClick={() => handleAddCollection()}
+                      className={'button-toggle'}
-                    ref={buttonref}
+                      disabled={!newCollectionName.length}
-                  />
+                      onClick={() => handleAddCollection()}
+                      ref={buttonref}
+                    />
+                    <Button
+                      button={'alt'}
+                      className={'button-toggle'}
+                      icon={ICONS.REMOVE}
+                      onClick={() => handleClearNew()}
+                    />
+                  </>
                 }
                 onChange={handleNameInput}
               />
@@ -123,7 +145,7 @@ const ClaimCollectionAdd = (props: Props) => {
             )}
           </fieldset-section>
           <div className="card__actions">
-            <Button button="secondary" label={__('Done')} onClick={closeModal} />
+            <Button button="secondary" label={__('Done')} disabled={addNewCollection} onClick={handleDone} />
           </div>
         </div>
       }