template reordering and ui improvement

src/components/CreateNewModal.jsx

@@ -21,6 +21,7 @@ export function CreateNewModal({
 			<div class="saved-items-pane__container">
 				{templates.map(template => (
 					<ItemTile
+						inline
 						item={template}
 						focusable
 						onClick={onTemplateSelect.bind(null, template)}

src/components/ItemTile.jsx

@@ -7,13 +7,16 @@ export function ItemTile({
 	onClick,
 	onForkBtnClick,
 	onRemoveBtnClick,
-	focusable
+	focusable,
+	inline
 }) {
 	return (
 		<div
 			role={focusable ? 'button' : null}
 			tabindex={focusable ? 0 : null}
-			class="js-saved-item-tile saved-item-tile"
+			class={`js-saved-item-tile saved-item-tile ${
+				inline ? 'saved-item-tile--inline' : ''
+			}`}
 			data-item-id={item.id}
 			onClick={onClick}
 		>

src/style.css

@@ -968,7 +968,11 @@ body > #demo-frame {
 	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 	animation: slide-left 0.35s ease forwards;
 }
-
+.saved-item-tile--inline {
+	display: inline-block;
+	margin-left: 10px;
+	margin-right: 10px;
+}
 .saved-item-tile:nth-child(1) {
 	animation-delay: 0.2s;
 }

src/templateList.js

@@ -1,9 +1,4 @@
 export default [
-	{
-		id: 'preact',
-		title: 'Preact',
-		img: 'assets/preact-logo.svg'
-	},
 	{
 		id: 'react',
 		title: 'React',
@@ -14,6 +9,11 @@ export default [
 		title: 'Vue',
 		img: 'assets/vue-logo.svg'
 	},
+	{
+		id: 'preact',
+		title: 'Preact',
+		img: 'assets/preact-logo.svg'
+	},
 	{
 		id: 'kontra-game-engine',
 		title: 'Kontra Game Engine',