From f368b0f1e3ea38eff49ba68e288de0fe579c27cc Mon Sep 17 00:00:00 2001
From: foxster-mp4 <foxster.utube@gmail.com>
Date: Tue, 30 May 2023 17:45:29 -0700
Subject: [PATCH] Add border colors for some elements

---
 app.html       | 10 ++++++----
 css/app.css    |  7 ++++++-
 css/apps.css   |  1 +
 css/shared.css | 11 +++++++++--
 js/app.js      |  7 ++++---
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app.html b/app.html
index 4bf65e4..1ef575a 100644
--- a/app.html
+++ b/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>
diff --git a/css/app.css b/css/app.css
index 8752048..01543e3 100644
--- a/css/app.css
+++ b/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 {
diff --git a/css/apps.css b/css/apps.css
index b1312bc..bd428e6 100644
--- a/css/apps.css
+++ b/css/apps.css
@@ -24,4 +24,5 @@
 .screenshot {
   max-width: 48%;
   border-radius: 4px;
+  border: 0.75px solid rgba(0, 0, 0, 0.2);
 }
\ No newline at end of file
diff --git a/css/shared.css b/css/shared.css
index 95e2659..d5861c5 100644
--- a/css/shared.css
+++ b/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 {
diff --git a/js/app.js b/js/app.js
index 876c11d..c58a57c 100644
--- a/js/app.js
+++ b/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");