fixed a few ui issues

Author: Juntao Qiu

src/components/ContentWrap.jsx

@@ -1003,14 +1003,14 @@ export default class ContentWrap extends Component {
 						<div className='promotion'>
 							<div className="downloads">
 								<Button
-									className="button icon-button hint--rounded hint--bottom-left"
+									className="btn--dark button icon-button hint--rounded hint--bottom-left"
 									aria-label="Export as PNG"
 									onClick={this.exportPngClickHandler.bind(this)}>
 									<span class="material-symbols-outlined">file_download</span>
 									<span>PNG</span>
 								</Button>
 								<Button
-									className="button icon-button hint--rounded hint--bottom-left"
+									className="btn--dark button icon-button hint--rounded hint--bottom-left"
 									aria-label="Export as JPEG"
 									onClick={this.exportJpegClickHandler.bind(this)}>
 									<span class="material-symbols-outlined">file_download</span>

src/components/CreateNewModal.jsx

@@ -18,7 +18,7 @@ export function CreateNewModal({
 			</div>
 			<hr />
 			Or choose from a template:
-			<div class="saved-items-pane__container">
+			<div class="create-new-pane__container">
 				{templates.map(template => (
 					<ItemTile
 						inline

src/components/SavedItemPane.jsx

@@ -130,7 +130,39 @@ export default class SavedItemPane extends Component {
 
 	filteredItems() {
 		// !null === true, !'' === true, !' ' === false
-		return this.items.filter(item => !this.state.searchText || item.title.toLowerCase().indexOf(this.state.searchText) !== -1);
+		return [
+			{
+				"title": "Basic",
+				"mainSizes": [30, 70],
+				"htmlMode": "html",
+				"cssMode": "css",
+				"jsMode": "js",
+				"layoutMode": 1,
+				"js": "// This is a sample\nA.method() {\n  if(condition) {\n    B.method()\n  }\n}",
+				"html": ""
+			},
+			{
+				"title": "Basic",
+				"mainSizes": [30, 70],
+				"htmlMode": "html",
+				"cssMode": "css",
+				"jsMode": "js",
+				"layoutMode": 1,
+				"js": "// This is a sample\nA.method() {\n  if(condition) {\n    B.method()\n  }\n}",
+				"html": ""
+			},
+			{
+				"title": "Basic",
+				"mainSizes": [30, 70],
+				"htmlMode": "html",
+				"cssMode": "css",
+				"jsMode": "js",
+				"layoutMode": 1,
+				"js": "// This is a sample\nA.method() {\n  if(condition) {\n    B.method()\n  }\n}",
+				"html": ""
+			},			
+		]
+		// return this.items.filter(item => !this.state.searchText || item.title.toLowerCase().indexOf(this.state.searchText) !== -1);
 	}
 
 	render() {
@@ -142,28 +174,29 @@ export default class SavedItemPane extends Component {
 			>
 				<button
 					onClick={this.onCloseIntent.bind(this)}
-					class="btn  saved-items-pane__close-btn"
+					class="btn icon-button modal__close-btn"
 					id="js-saved-items-pane-close-btn"
 				>
 					<span class="material-symbols-outlined">close</span>
 				</button>
-				<div class="flex flex-v-center" style="justify-content: space-between;">
+				<div class="flex flex-v-center header-container">
 					<h3>My Library ({this.items.length})</h3>
-
-					<div>
+					<div className="my-library-buttons">
 						<button
 							onClick={this.props.exportBtnClickHandler}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
+							class="btn--dark hint--bottom-left hint--rounded hint--medium icon-button"
 							aria-label="Export all your creations into a single importable file."
 						>
-							Export
+							<span class="material-symbols-outlined">file_download</span>
+							<span>Export</span>
 						</button>
 						<button
 							onClick={this.importBtnClickHandler.bind(this)}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
+							class="btn--dark hint--bottom-left hint--rounded hint--medium icon-button"
 							aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
 						>
-							Import
+							<span class="material-symbols-outlined">file_upload</span>
+							<span>Import</span>
 						</button>
 					</div>
 				</div>

src/style.css

@@ -998,6 +998,12 @@ body > #demo-frame {
 	color: navajowhite;
 }
 
+.my-library-buttons {
+	display: flex;
+	gap: 0.2rem;
+	align-items: center;
+}
+
 .saved-items-pane.is-open {
 	transition-duration: 0.4s;
 	transform: translateX(0);
@@ -1010,28 +1016,9 @@ body > #demo-frame {
 	visibility: visible;
 }
 
-.saved-items-pane__close-btn {
-	position: absolute;
-	left: -18px;
-	top: 24px;
-	opacity: 0;
-	visibility: hidden;
-	border-radius: 50%;
-	padding: 10px 14px;
-	background: crimson;
-	color: white;
-	border: 0;
-	transform: scale(0);
-	will-change: transform, opacity;
-	transition: 0.3s ease;
-	transition-delay: 0;
-}
-
-.saved-items-pane.is-open .saved-items-pane__close-btn {
-	opacity: 1;
-	transition-delay: 0.4s;
-	transform: scale(1);
-	visibility: visible;
+.header-container {
+	justify-content: space-between;
+	margin-block: 1.5rem;
 }
 
 .saved-item-tile {
@@ -1173,10 +1160,13 @@ body > #demo-frame {
 	opacity: 0.3;
 }
 
-.saved-items-pane__container {
+.create-new-pane__container {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+}
+
+.saved-items-pane__container {
 	overflow-y: auto;
 	overflow-x: hidden;
 	max-height: calc(100vh - 90px);