Small styling fixes for dialog + matching change to artist container …

…+ focus handling when hiding checkboxes

src/assets/js/map.js

@@ -656,7 +656,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
       .html(function() {
         if (countryCount[d.id])
           return numbersWithSpace(countryCount[d.id].length) + " artists, " + numbersWithSpace(getCountryPlaycount(d)) + " scrobbles"
-        else return "No artists yet - Find new here ->"
+        else return "No artists yet - Find new here<span aria-hidden> -></span>"
       })
 
     let pl = countryPlaylists.find(c => c.name === name);

src/assets/js/script.js

@@ -69,6 +69,10 @@ var countryCountObj = {};
             // If you just checked and the filter is on, remove the artist from the DOM
             if (checked && document.querySelector("#hide-checked")?.checked) {
                 this.parentNode.style.display = 'none';
+                let nextCheckbox = this.parentNode.nextElementSibling.querySelector('input');
+                if (nextCheckbox) {
+                    nextCheckbox.focus();
+                }
             }
             // get the label element for the filter checked checkbox
             let filterCheckedLabel = document.querySelector("label[for='hide-checked']");
@@ -158,6 +162,12 @@ var countryCountObj = {};
             dialog.close();
             document.querySelector(".no-countries__title").focus();
         });
+        const dialog = document.querySelector(".no-countries__content");
+        dialog.addEventListener("click", function (event) {
+            if (event.target === dialog) {
+                dialog.close();
+              }
+        });
 
         if (listOfArtistsWithNoCountry.length) {
             setTimeout(function () {

src/assets/scss/pages/_map.scss

@@ -260,8 +260,8 @@ div.colorChange {
     &__title {
         position: absolute;
         left: 3%;
-        bottom: 240px;
-        font-size: 0.8em;
+        bottom: 225px;
+        font-size: 14px;
         margin-bottom: 0.3em;
         font-family: $heading-font-stack;
         font-weight: 400;
@@ -289,8 +289,8 @@ dialog {
     &[open] {
         opacity: 1;
         background-color: var(--backgroundSecondary);
-        border: 2px solid var(--borderSecondary);
-        border-radius: 8px;
+        border: 5px solid var(--borderSecondary);
+        border-radius: 30px;
         margin: auto;
         max-height: 80%;
         position: fixed;
@@ -335,6 +335,10 @@ dialog {
             margin: 0;
             line-height: 1.1em;
         }
+        h2 {
+            font-size: 1rem;
+            font-family: $heading-font-stack;
+        }
 
         li {
             list-style: none;

src/assets/scss/pages/_zoomed.scss

@@ -13,7 +13,6 @@
     height: 150px;
     position: absolute;
     top: 7.5%;
-    border-top: 1px solid var(--borderSecondary);
     z-index: 4;
     opacity: 0;
     display: flex;
@@ -82,10 +81,11 @@
 .artistContainer {
     //Main container for artist information, recommendations and details
     margin-right: 6%;
-    padding: 8px 16px;
-    border-radius: 0 0 8px 8px;
+    padding: 8px 24px;
+    border-radius: 20px;
     width: 592px;
     display: block;
+    border: 5px solid var(--borderSecondary);
     background: var(--backgroundPrimary);
     position: relative;
     height: fit-content;
@@ -97,6 +97,8 @@
         color: inherit;
         font-family: $heading-font-stack;
         font-weight: 400;
+        margin-bottom: 0.5rem;
+        margin-top: 0.75rem;
     }
 
     p {
@@ -169,6 +171,7 @@
     color: inherit;
     cursor: pointer;
     transition: 0.1s;
+    box-shadow: rgba(0,0,0,.1) 0 2px 12px 0;
     // button resets
     border: none;
     background: none;

src/index.html

@@ -253,14 +253,14 @@ <h1 id="no-countries__heading" tabindex="-1">Artists without a country</h1>
 					For some reason we couldn't determine the country for these artists. Help out by giving them a country tag on last.fm!
 				</p>
 				<p>Protip: Use the checkboxes to track your progress!</p>
-				<p class="no-countries__info"></p>
 				<fieldset>
 					<legend>Sort by</legend>
 					<input type="radio" name="sort" id="sort-name" value="name">
 					<label for="sort-name">Artist name</label>
 					<input type="radio" name="sort" id="sort-scrobbles" value="scrobbles" checked>
 					<label for="sort-scrobbles">Scrobbles</label>
 				</fieldset>
+				<h2 class="no-countries__info"></h2>
 				<ul>
 				</ul>
 			</dialog>