From 8164cc6766df595559409caed5ef5c03c494473b Mon Sep 17 00:00:00 2001
From: Juntao Qiu <juntao.qiu@dominos.com.au>
Date: Wed, 5 Oct 2022 20:02:25 +1100
Subject: [PATCH 1/2] fixed a few ui issues

---
 src/components/ContentWrap.jsx    |  4 +--
 src/components/CreateNewModal.jsx |  2 +-
 src/components/SavedItemPane.jsx  | 51 +++++++++++++++++++++++++------
 src/style.css                     | 36 ++++++++--------------
 4 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 23130531..f048b748 100644
--- a/src/components/ContentWrap.jsx
+++ b/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>
diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index d89045a6..5d5d6612 100644
--- a/src/components/CreateNewModal.jsx
+++ b/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
diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx
index 26083e8d..2c8689c4 100644
--- a/src/components/SavedItemPane.jsx
+++ b/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>
diff --git a/src/style.css b/src/style.css
index 2f977f37..df7e17a5 100644
--- a/src/style.css
+++ b/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);

From 03fed53d1651af53d677fc6598b4f6b22a70a917 Mon Sep 17 00:00:00 2001
From: Juntao Qiu <juntao.qiu@dominos.com.au>
Date: Wed, 5 Oct 2022 20:03:16 +1100
Subject: [PATCH 2/2] removed saved item hacks

---
 src/components/SavedItemPane.jsx | 35 +-------------------------------
 1 file changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx
index 2c8689c4..0a0c1d7c 100644
--- a/src/components/SavedItemPane.jsx
+++ b/src/components/SavedItemPane.jsx
@@ -129,40 +129,7 @@ export default class SavedItemPane extends Component {
 	}
 
 	filteredItems() {
-		// !null === true, !'' === true, !' ' === false
-		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);
+		return this.items.filter(item => !this.state.searchText || item.title.toLowerCase().indexOf(this.state.searchText) !== -1);
 	}
 
 	render() {