Merge pull request #487 from abruzzi/master

Fixed a few UI issues

Author: abruzzi

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

@@ -129,7 +129,6 @@ 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);
 	}
 
@@ -142,28 +141,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);