Update tier list options

index.html

@@ -168,19 +168,30 @@
 			</div>
 		</main>
 
-		<div class="buttons-container">
-			<button type="button" class="button" id="new-tier">New tier</button>
+		<div class="list-options">
+			<div class="list-options-container">
+				<button type="button" class="button" id="new-tier">New tier</button>
 
-			<button type="button" class="button" id="select-images">
-				Select images
-			</button>
+				<label class="button">
+					<span>Select images</span>
+					<input
+						type="file"
+						accept="image/*"
+						multiple=""
+						hidden=""
+						id="select-images"
+					/>
+				</label>
 
-			<input type="checkbox" class="dynamic-style" id="square-img" />
-			<label for="square-img">Square images</label>
+				<label class="checkbox">
+					<input type="checkbox" class="dynamic-style" id="square-img" />
+					<span>Square images</span>
+				</label>
 
-			<button type="button" class="button" id="export-image">
-				Export image
-			</button>
+				<button type="button" class="button" id="export-image">
+					Export image
+				</button>
+			</div>
 		</div>
 
 		<div class="images-bar sort" id="images-bar"></div>

script.js

@@ -23,11 +23,14 @@ const draggables = [];
 addContainerDrag(imagesBar);
 
 document.querySelector("#new-tier").onclick = () => addRow();
-document.querySelector("#select-images").onclick = () => selectImages();
 document.querySelector("#export-image").onclick = () => exportImage();
 document.querySelector("#save-image").onclick = () => saveImage();
 blackout.onclick = () => hideBlackout();
 
+document.querySelector("#select-images").onchange = (e) => {
+	uploadImages(e.target.files);
+};
+
 document.querySelectorAll(".row").forEach((row, index) => {
 	addRowListeners(row, defaultColors[index]);
 });
@@ -46,7 +49,7 @@ document.addEventListener("dragover", (e) => {
 });
 
 document.addEventListener("mousedown", (e) => {
-	const ignoreSelectors = [".pcr-app", ".export-container", "#blackout"];
+	const ignoreSelectors = [".pcr-app", ".export-container"];
 	const ignoreClick = ignoreSelectors.some((selector) =>
 		e.target.closest(selector),
 	);
@@ -189,18 +192,11 @@ function moveRow(row, direction) {
 	mainContainer.insertBefore(row, rowBefore);
 }
 
-function selectImages() {
-	const input = document.createElement("input");
-	input.type = "file";
-	input.accept = "image/*";
-	input.multiple = true;
-
-	input.click();
-
-	input.addEventListener("change", () => uploadImages(input.files));
-}
-
 function uploadImages(files) {
+	if (!files) {
+		return;
+	}
+
 	for (const file of files) {
 		if (file.type.split("/")[0] !== "image") {
 			continue;

styles/buttons.css

@@ -1,18 +1,16 @@
-.buttons-container {
-	border-bottom: 1px solid var(--buttons-color);
-	background-color: var(--buttons-bg);
-	text-align: center;
-}
-
 .button {
-	transition: background-color 300ms;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	transition: background-color 0.3s;
 	margin: 10px;
 	border: none;
 	border-radius: 3px;
 	background-color: var(--buttons-color);
-	padding-block: 7px;
+	padding: 7px;
 	min-width: 100px;
 	color: var(--button-text);
+	font-size: 13px;
 }
 
 .button:hover {
@@ -27,21 +25,30 @@ label {
 	color: var(--button-text);
 }
 
-label::before {
-	display: inline-block;
-	margin-right: 5px;
-	border-radius: 1px;
-	background-color: var(--button-text);
-	width: 11.6px;
-	height: 11.6px;
-	content: "";
+.checkbox {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	margin: 4px;
+	padding-block: 6px;
+	text-wrap: nowrap;
+}
+
+.checkbox span {
+	color: var(--button-text);
+	font-size: 15px;
 }
 
 input[type="checkbox"] {
-	display: none;
+	appearance: none;
+	margin: 0 5px 0 0;
+	border-radius: 1px;
+	background-color: var(--button-text);
+	width: 12px;
+	height: 12px;
 }
 
-input[type="checkbox"]:checked + label::before {
+input[type="checkbox"]:checked {
 	background-image: url("../assets/check.svg");
 	background-color: var(--button-hover);
 }

styles/list-options.css

@@ -0,0 +1,11 @@
+.list-options {
+	display: flex;
+	justify-content: center;
+	border-bottom: 1px solid var(--buttons-color);
+	background-color: var(--buttons-bg);
+}
+
+.list-options-container {
+	display: flex;
+	overflow-y: auto;
+}

styles/main.css

@@ -2,6 +2,7 @@
 @import "./buttons.css";
 @import "./dynamic-styles.css";
 @import "./export.css";
+@import "./list-options.css";
 @import "./pickr.css";
 @import "./tier-label.css";
 @import "./tier-options.css";