share display fix

app/css/main-dark.css

@@ -8,6 +8,14 @@
  * @link    https://TheTempusProject.com
  * @license https://opensource.org/licenses/MIT [MIT LICENSE]
  */
+ .context-popover {
+    background-color: #383838;
+    color: white;
+}
+
+.context-popover .popover-header {
+    background-color: #2c2c2c;
+}
 
 .context-main-border {
     border-color: #f5f5f5!important;

app/css/main.css

@@ -8,6 +8,40 @@
  * @link    https://TheTempusProject.com
  * @license https://opensource.org/licenses/MIT [MIT LICENSE]
  */
+.facebook {
+    border-color: #1877F2 !important; /* Facebook Blue */
+    color: #1877F2 !important;
+}
+
+.x-black {
+    border-color: #000000 !important; /* X (formerly Twitter) Black */
+    color: #000000 !important;
+}
+
+.reddit {
+    border-color: #FF4500 !important; /* Reddit Orange */
+    color: #FF4500 !important;
+}
+
+.opera {
+    border-color: #FF1B2D !important; /* Opera Red */
+    color: #FF1B2D !important;
+}
+
+.firefox {
+    border-color: #FF7139 !important; /* Firefox Orange */
+    color: #FF7139 !important;
+}
+
+.edge {
+    border-color: #0078D7 !important; /* Microsoft Edge Blue */
+    color: #0078D7 !important;
+}
+
+.safari {
+    border-color: #0B78E3 !important; /* Safari Blue */
+    color: #0B78E3 !important;
+}
 
 .context-main-border {
     border-color: #1e1e1e!important;

app/js/main.js

@@ -272,6 +272,8 @@ document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(button => {
 document.addEventListener("DOMContentLoaded", function () {
     var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
     var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-        return new bootstrap.Popover(popoverTriggerEl);
+        return new bootstrap.Popover(popoverTriggerEl, {
+            customClass: 'context-popover',
+          });
     });
 });

app/views/footer/share.html

@@ -3,13 +3,13 @@
     <div class="px-4 mt-2">
         <!-- Share Button (visible only on medium+ screens) -->
         <button type="button" class="btn btn-outline-primary" 
-                data-bs-toggle="popover" data-bs-html="true" title="Share" data-bs-placement="top"
+                data-bs-toggle="popover" data-bs-html="true" title="Share" data-bs-placement="top" data-bs-trigger="focus"
                 data-bs-content='
                     {QR_CODE}
                     <div class="d-flex justify-content-between">
-                        <a href="https://www.reddit.com/submit?type=LINK&url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-danger"><i class="fa-brands fa-fw fa-reddit"></i></a>
+                        <a href="https://www.reddit.com/submit?type=LINK&url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg reddit"><i class="fa-brands fa-fw fa-reddit"></i></a>
-                        <a href="https://www.facebook.com/sharer/sharer.php?u={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-primary"><i class="fa-brands fa-fw fa-facebook"></i></a>
+                        <a href="https://www.facebook.com/sharer/sharer.php?u={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg facebook"><i class="fa-brands fa-fw fa-facebook"></i></a>
-                        <a href="https://twitter.com/intent/tweet?url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-info"><i class="fa-brands fa-fw fa-x"></i></a>
+                        <a href="https://x.com/intent/tweet?url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg x-black"><i class="fa-brands fa-fw fa-x"></i></a>
                     </div>'>
             Share
         </button>