From b4b7f51a3e4010355df74117123f4783b08624c0 Mon Sep 17 00:00:00 2001
From: Kevin Payravi <kevinpayravi@gmail.com>
Date: Fri, 30 Jun 2023 01:44:20 -0500
Subject: [PATCH] Adjusting alert banner styling

---
 content.js | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/content.js b/content.js
index a872961..6ea14e0 100644
--- a/content.js
+++ b/content.js
@@ -59,15 +59,13 @@ function displayRedirectBanner(url, id, destination, storage) {
   // Output CSS
   styleString = `
     #indie-wiki-banner {
-      font-size: 18px;
       font-family: sans-serif;
       width: 100%;
       z-index: 2147483647;
-      position: fixed;
+      position: sticky;
+      top: 0;
       text-align: center;
       background-color: #acdae2;
-      min-height: 40px;
-      line-height: 28px;
       padding: 5px 10px;
     }
     #indie-wiki-banner-exit {
@@ -76,15 +74,30 @@ function displayRedirectBanner(url, id, destination, storage) {
       color: #333;
       cursor: pointer;
     }
+    #indie-wiki-banner a {
+      color: #000080;
+    }
+    #indie-wiki-banner a:hover {
+      color: #000080;
+    }
+    #indie-wiki-banner-controls {
+      padding-bottom: 3px;
+    }
     .indie-wiki-banner-link {
-      color: navy;
+      font-size: 16px;
       font-weight: 600;
+      color: navy;
       cursor: pointer;
       padding: 0 10px;
       display: block;
       width: fit-content;
       margin: 0 auto;
     }
+    .indie-wiki-banner-big-text {
+      font-size: 14px;
+      line-height: 24px;
+      margin-top: 5px;
+    }
     .indie-wiki-banner-link:hover {
       text-decoration: underline;
     }
@@ -117,6 +130,11 @@ function displayRedirectBanner(url, id, destination, storage) {
   bannerExit.innerText = '✕';
   bannerExit.onclick = function () { this.parentElement.remove(); };
 
+  // Output control links container
+  var bannerControls = document.createElement('div');
+  bannerControls.id = 'indie-wiki-banner-controls';
+  banner.appendChild(bannerControls);
+
   // Output "restore banner" link
   var bannerRestoreLink = document.createElement('div');
   bannerRestoreLink.id = 'indie-wiki-banner-restore';
@@ -124,7 +142,7 @@ function displayRedirectBanner(url, id, destination, storage) {
   bannerRestoreLink.classList.add('indie-wiki-banner-link-small');
   bannerRestoreLink.classList.add('indie-wiki-banner-hidden');
   bannerRestoreLink.innerText = '⎌ Restore banner';
-  banner.appendChild(bannerRestoreLink);
+  bannerControls.appendChild(bannerRestoreLink);
   bannerRestoreLink.onclick = function (e) {
     chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
       response.siteSettings.get(id).set('action', 'alert');
@@ -144,7 +162,7 @@ function displayRedirectBanner(url, id, destination, storage) {
   bannerDisableLink.classList.add('indie-wiki-banner-link');
   bannerDisableLink.classList.add('indie-wiki-banner-link-small');
   bannerDisableLink.innerText = '✕ Disable banner for this wiki'
-  banner.appendChild(bannerDisableLink);
+  bannerControls.appendChild(bannerDisableLink);
   bannerDisableLink.onclick = function (e) {
     chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
       response.siteSettings.get(id).set('action', 'disabled');
@@ -165,7 +183,7 @@ function displayRedirectBanner(url, id, destination, storage) {
   bannerRedirectLink.classList.add('indie-wiki-banner-link');
   bannerRedirectLink.classList.add('indie-wiki-banner-link-small');
   bannerRedirectLink.innerText = '↪ Auto redirect this wiki';
-  banner.appendChild(bannerRedirectLink);
+  bannerControls.appendChild(bannerRedirectLink);
   bannerRedirectLink.onclick = function (e) {
     chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
       response.siteSettings.get(id).set('action', 'redirect');
@@ -180,10 +198,9 @@ function displayRedirectBanner(url, id, destination, storage) {
     });
   }
 
-  banner.appendChild(document.createElement('br'));
-
   // Output main banner text
   var bannerText = document.createElement('span');
+  bannerText.classList.add('indie-wiki-banner-big-text');
   banner.appendChild(bannerText);
   bannerText.textContent = 'There is an independent wiki covering this topic!'
   var bannerWikiLink = document.createElement('a');