Merge PR #611 manually (skipping broken parts) - styling for modal buttons, pwa banner fix, missing pwa.css links

Author: devanshi14malhotra

frontend/css/style.css

@@ -1221,29 +1221,118 @@ main {
 .modal-actions {
     margin-top: auto;
     display: flex;
-    gap: 1rem;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
 }
 
 .btn-primary {
     background: var(--text-main);
     color: var(--bg-color);
     border: none;
-    padding: 1rem 2rem;
-    border-radius: 30px;
+    padding: 0.8rem 1.25rem;
+    min-height: 44px;
+    min-width: 140px;
+    border-radius: 12px;
     font-family: "Georgia", serif;
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all 0.18s ease;
     display: flex;
     align-items: center;
-    gap: 0.8rem;
+    gap: 0.6rem;
 }
 
 .btn-primary:hover {
     background: var(--accent-gold);
     color: #fff;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+
+/* Preview & Secondary buttons aligned with primary style */
+.btn-preview,
+.modal-share-btn {
+    min-height: 44px;
+    min-width: 120px;
+    padding: 0.7rem 1rem;
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-family: inherit;
+    font-size: 0.98rem;
+}
+
+.btn-preview {
+    background: transparent;
+    color: var(--text-main);
+    border: 2px solid var(--glass-border);
+}
+
+.btn-preview:hover {
+    background: rgba(212,175,55,0.08);
+    border-color: var(--accent-gold);
+}
+
+.modal-share-btn {
+    background: transparent;
+    border: 1px solid var(--glass-border);
+}
+
+.modal-share-btn:hover {
+    background: rgba(0,0,0,0.04);
+    transform: translateY(-1px);
+}
+
+/* Accessible focus outlines */
+.btn-primary:focus-visible,
+.btn-preview:focus-visible,
+.modal-share-btn:focus-visible {
+    outline: 3px solid rgba(212,175,55,0.18);
+    outline-offset: 3px;
+}
+
+/* Make Add to Library button visually match the Preview button */
+#modal-add-btn {
+    min-height: 44px;
+    min-width: 140px;
+    padding: 0.8rem 1.25rem;
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    background: transparent;
+    border: 2px solid var(--glass-border);
+    color: var(--text-main);
+    font-family: inherit;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.18s ease;
+}
+
+#modal-add-btn:hover {
+    background: rgba(212,175,55,0.06);
+    border-color: var(--accent-gold);
+    transform: translateY(-1px);
+}
+
+/* When the book is already in the library show a filled accent state */
+#modal-add-btn.library-remove-btn {
+    background: linear-gradient(135deg, var(--accent-gold), #e6c44a);
+    color: var(--wood-dark);
+    border-color: var(--accent-gold);
+    box-shadow: 0 8px 28px rgba(212,175,55,0.18);
+}
+
+#modal-add-btn.library-remove-btn:hover {
+    transform: translateY(-2px);
+}
+
+#modal-add-btn:focus-visible {
+    outline: 3px solid rgba(212,175,55,0.18);
+    outline-offset: 3px;
 }
 
 /* Responsive Modal */

frontend/js/pwa.js

@@ -148,7 +148,14 @@
             </div>
         `;
 
-        document.querySelector("main").appendChild(banner);
+        const footer = document.querySelector(".main-footer");
+        if (footer) {
+            footer.parentNode.insertBefore(banner, footer);
+        } else {
+            const main = document.querySelector("main");
+            if (main) main.appendChild(banner);
+            else document.body.appendChild(banner);
+        }
 
         // Animate in
         requestAnimationFrame(() => banner.classList.add('pwa-banner-visible'));

frontend/pages/chat.html

@@ -264,6 +264,7 @@
     </style>
     <link rel="icon" href="../assets/images/biblioDrift_favicon.png" type="image/png">
     <!-- PWA -->
+    <link rel="stylesheet" href="../css/pwa.css">
     <link rel="manifest" href="../manifest.json">
     <meta name="theme-color" content="#2c2420">
     <meta name="apple-mobile-web-app-capable" content="yes">

frontend/pages/library.html

@@ -40,7 +40,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="icon" href="../assets/images/biblioDrift_favicon.png" type="image/png">
     <!-- PWA -->
-    <link rel="manifest" href="/manifest.json">
+    <link rel="stylesheet" href="../css/pwa.css">
+    <link rel="manifest" href="../manifest.json">
     <meta name="theme-color" content="#2c2420">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

frontend/pages/profile.html

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="icon" href="../assets/images/biblioDrift_favicon.png" type="image/png">
     <!-- PWA -->
+    <link rel="stylesheet" href="../css/pwa.css">
     <link rel="manifest" href="../manifest.json">
     <meta name="theme-color" content="#2c2420">
     <meta name="apple-mobile-web-app-capable" content="yes">