Add border colors for some elements

app.html

@@ -17,10 +17,12 @@
     <div id="top">
       <!-- Navigation bar -->
       <div id="nav-bar">
-        <button id="back" type="button">
-          <i class="bi bi-chevron-left"></i>
-          Back
-        </button>
+        <div id="back-container">
+          <button id="back" type="button">
+            <i class="bi bi-chevron-left"></i>
+            Back
+          </button>
+        </div>
         <div id="title" class="hidden">
           <img id="app-icon" src="img/generic_app.jpeg" alt="generic-app-icon">
           <p>AltSource</p>

css/app.css

@@ -20,6 +20,10 @@ a {
   transition: opacity 0.25s ease-in-out;
 }
 
+#nav-bar #back-container {
+  min-width: 78px;
+}
+
 /* IPA install & download */
 
 .ipa {
@@ -61,7 +65,8 @@ a {
 #preview #screenshots>img {
   max-width: 70%;
   margin-left: 1em;
-  border-radius: 0.25em;
+  border-radius: 0.5em;
+  border: 0.75px solid rgba(0, 0, 0, 0.2);
 }
 
 #preview #description {

css/apps.css

@@ -24,4 +24,5 @@
 .screenshot {
   max-width: 48%;
   border-radius: 4px;
+  border: 0.75px solid rgba(0, 0, 0, 0.2);
 }

css/shared.css

@@ -22,7 +22,6 @@
 
 /* Dark appearance */
 @media (prefers-color-scheme: dark) {
-
   body,
   .uibanner,
   #loading {
@@ -51,6 +50,12 @@
   #more button {
     background: linear-gradient(to right, transparent, var(--color-bg-dark) 35%) !important;
   }
+
+  #nav-bar #title>img,
+  .app-header img,
+  .screenshot {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+  }
 }
 
 body.loading {
@@ -162,7 +167,8 @@ body {
 
 #nav-bar #title>img {
   max-height: 2em;
-  border-radius: 0.4em;
+  border-radius: 0.5em;
+  border: 0.75px solid rgba(0, 0, 0, 0.1);
 }
 
 #nav-bar #back {
@@ -276,6 +282,7 @@ body {
   display: block;
   border-radius: 13.5px;
   max-width: 64px;
+  border: 0.75px solid rgba(0, 0, 0, 0.1);
 }
 
 .app-header .background {

js/app.js

@@ -91,7 +91,7 @@ function main(json) {
     preview.querySelector("#subtitle").textContent = app.subtitle;
     // Screenshots
     app.screenshotURLs.forEach(url => {
-        preview.querySelector("#screenshots").insertAdjacentHTML("beforeend", `<img src="${url}" alt="">`);
+        preview.querySelector("#screenshots").insertAdjacentHTML("beforeend", `<img src="${url}" alt="" class="screenshot">`);
     });
     // Description
     const previewDescription = preview.querySelector("#description");
@@ -213,9 +213,8 @@ function main(json) {
             default:
                 permissionType = permission.type.replaceAll("-", " ");
                 icon = "gear-wide-connected";
-                    break;
+                break;
             }
-    
             permissions.insertAdjacentHTML("beforeend", `
             <div class="permission">
                 <i class="bi-${icon}" style="color: ${tintColor};"></i>
@@ -227,6 +226,8 @@ function main(json) {
         });
     }
 
+    //
+    // Source info
     const source = document.getElementById("source");
     const sourceContainer = source.querySelector(".container");
     const sourceTitle = source.querySelector(".row-title");