misc fixes

src/components/AddLibrary.jsx

@@ -81,7 +81,7 @@ export default class AddLibrary extends Component {
 					<small>Powered by cdnjs</small>
 				</div>
 				<div style="margin:20px 0;">
-					Choose from popular libraries:
+					Choose from popular libraries:{' '}
 					<select
 						name=""
 						id="js-add-library-select"

src/components/MainHeader.jsx

@@ -34,7 +34,7 @@ export function MainHeader(props) {
 					class="flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Add a JS/CSS library"
 				>
-					Add library
+					Add library{' '}
 					<span
 						id="js-external-lib-count"
 						style={`display:${props.externalLibCount ? 'inline' : 'none'}`}

src/components/SavedItemPane.jsx

@@ -3,6 +3,7 @@ import { log, getHumanDate } from '../utils';
 import { trackEvent } from '../analytics';
 import { itemService } from '../itemService';
 import { alertsService } from '../notifications';
+import { deferred } from '../deferred';
 
 export default class SavedItemPane extends Component {
 	constructor(props) {
@@ -23,6 +24,11 @@ export default class SavedItemPane extends Component {
 			});
 		}
 	}
+	componentDidUpdate(prevProps) {
+		if (this.props.isOpen && !prevProps.isOpen) {
+			window.searchInput.value = '';
+		}
+	}
 	onCloseIntent() {
 		this.props.closeHandler();
 	}
@@ -124,8 +130,7 @@ export default class SavedItemPane extends Component {
 		} else {
 			d.resolve();
 		}
-		// FIXME: Move from here
-		// toggleSavedItemsPane(false);
+		this.props.closeHandler();
 
 		return d.promise;
 	}
@@ -216,7 +221,6 @@ export default class SavedItemPane extends Component {
 					</div>
 				</div>
 				<input
-					type=""
 					id="searchInput"
 					class="search-input"
 					onInput={this.searchInputHandler.bind(this)}

src/components/Settings.jsx

@@ -19,7 +19,7 @@ function CheckboxSetting({
 				checked={pref}
 				onChange={onChange}
 				data-setting={name}
-			/>
+			/>{' '}
 			{label}
 		</label>
 	);

src/components/app.jsx

@@ -234,6 +234,7 @@ export default class App extends Component {
 		this.toggleLayout(
 			this.state.currentItem.layoutMode || this.state.prefs.layoutMode
 		);
+		this.updateExternalLibCount();
 		this.contentWrap.refreshEditor();
 	}
 	// Creates a new item with passed item's contents
@@ -822,7 +823,9 @@ export default class App extends Component {
 	}
 	codepenBtnClickHandler(e) {
 		if (this.state.currentItem.cssMode === CssModes.ACSS) {
-			alert("Oops! CodePen doesn't supports Atomic CSS currently.");
+			alert(
+				"Oops! CodePen doesn't supports Atomic CSS currently. \nHere is something you can still do -> https://medium.com/web-maker/sharing-your-atomic-css-work-on-codepen-a402001b26ab"
+			);
 			e.preventDefault();
 			return;
 		}
@@ -934,6 +937,9 @@ export default class App extends Component {
 	editorFocusHandler(editor) {
 		this.editorWithFocus = editor;
 	}
+	modalOverlayClickHandler() {
+		this.closeAllOverlays();
+	}
 
 	render() {
 		return (
@@ -1103,7 +1109,10 @@ export default class App extends Component {
 				/>
 
 				<Portal into="body">
-					<div class="modal-overlay" />
+					<div
+						class="modal-overlay"
+						onClick={this.modalOverlayClickHandler.bind(this)}
+					/>
 				</Portal>
 
 				<Icons />