From 31b724a0b8a54a40ce4baa4210a31d8dc40c71ab Mon Sep 17 00:00:00 2001
From: "aditya.chandel" <8075870+adityachandelgit@users.noreply.github.com>
Date: Sun, 31 Aug 2025 00:20:20 -0600
Subject: [PATCH] Minor layout tweaks

---
 .../kobo-sync-settings-component.scss         |  3 +-
 .../koreader-settings-component.scss          |  5 ++-
 .../opds-settings-v2/opds-settings-v2.html    | 19 +++++++----
 .../opds-settings-v2/opds-settings-v2.scss    | 32 +++++++++++++++++++
 .../epub-reader-preferences-component.html    |  4 +--
 .../epub-reader-preferences-component.scss    |  2 +-
 .../view-preferences.component.html           |  2 +-
 7 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/booklore-ui/src/app/settings/device-settings-component/kobo-sync-settings-component/kobo-sync-settings-component.scss b/booklore-ui/src/app/settings/device-settings-component/kobo-sync-settings-component/kobo-sync-settings-component.scss
index 003839c79..81865a072 100644
--- a/booklore-ui/src/app/settings/device-settings-component/kobo-sync-settings-component/kobo-sync-settings-component.scss
+++ b/booklore-ui/src/app/settings/device-settings-component/kobo-sync-settings-component/kobo-sync-settings-component.scss
@@ -191,8 +191,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding: 1.5rem;
-  margin: 1rem 0;
+  padding: 1rem;
   border-radius: 8px;
   background: rgba(220, 38, 38, 0.1);
   border: 1px solid rgba(220, 38, 38, 0.3);
diff --git a/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss b/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss
index cca5c4891..5957b33f9 100644
--- a/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss
+++ b/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss
@@ -54,7 +54,7 @@
 .preferences-section {
 
   @media (max-width: 768px) {
-    padding: 0 1rem;
+    padding: 0;
   }
 }
 
@@ -217,8 +217,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding: 1.5rem;
-  margin: 1rem 0;
+  padding: 1rem;
   border-radius: 8px;
   background: rgba(220, 38, 38, 0.1);
   border: 1px solid rgba(220, 38, 38, 0.3);
diff --git a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html
index 5b2d273c0..cda5db39f 100644
--- a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html
+++ b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html
@@ -188,13 +188,18 @@
 
     <p-confirmDialog></p-confirmDialog>
   } @else {
-    <div class="px-4 py-4 rounded-lg bg-red-700/30 border border-red-600 text-red-200 flex items-center gap-2 max-w-lg">
-      <i class="pi pi-lock text-red-400 text-xl"></i>
-      <span>
-      Access to OPDS is restricted.
-      <br>
-      Please contact your administrator to request permission.
-    </span>
+    <div class="settings-content">
+      <div class="access-denied-card">
+        <i class="pi pi-lock"></i>
+        <div class="access-denied-content">
+          <h3>Access Restricted</h3>
+          <p>
+            Access to OPDS is restricted.
+            <br>
+            Please contact your administrator to request permission.
+          </p>
+        </div>
+      </div>
     </div>
   }
 </div>
diff --git a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.scss b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.scss
index 2e2300023..3a8378444 100644
--- a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.scss
+++ b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.scss
@@ -261,3 +261,35 @@
     margin-bottom: 1rem;
   }
 }
+
+.access-denied-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 8px;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  color: var(--p-red-400);
+  max-width: 500px;
+
+  .pi {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .access-denied-content {
+    h3 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--p-red-300);
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  }
+}
diff --git a/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.html b/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.html
index 438377b76..48c6cf11f 100644
--- a/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.html
+++ b/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.html
@@ -64,9 +64,9 @@
       <div class="setting-label-row">
         <label class="setting-label">Font Size</label>
         <div class="font-size-controls">
-          <p-button icon="pi pi-minus" size="small" (click)="decreaseFontSize()"></p-button>
+          <p-button icon="pi pi-minus" size="small" rounded (click)="decreaseFontSize()"></p-button>
           <span class="font-size-value">{{ fontSize }}%</span>
-          <p-button icon="pi pi-plus" size="small" (click)="increaseFontSize()"></p-button>
+          <p-button icon="pi pi-plus" size="small" rounded (click)="increaseFontSize()"></p-button>
         </div>
       </div>
       <p class="setting-description">
diff --git a/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.scss b/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.scss
index c5267d376..a014fbbed 100644
--- a/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.scss
+++ b/booklore-ui/src/app/settings/reader-preferences/epub-reader-preferences-component/epub-reader-preferences-component.scss
@@ -59,7 +59,7 @@
     .font-size-controls {
       display: flex;
       align-items: center;
-      gap: 1rem;
+      gap: 0.75rem;
 
       .font-size-value {
         min-width: 3rem;
diff --git a/booklore-ui/src/app/settings/view-preferences-parent/view-preferences/view-preferences.component.html b/booklore-ui/src/app/settings/view-preferences-parent/view-preferences/view-preferences.component.html
index 43d1fb72f..f5a02e5ca 100644
--- a/booklore-ui/src/app/settings/view-preferences-parent/view-preferences/view-preferences.component.html
+++ b/booklore-ui/src/app/settings/view-preferences-parent/view-preferences/view-preferences.component.html
@@ -60,7 +60,7 @@
             <div class="setting-label-row">
               <label class="setting-label">Override Management</label>
               <p-button label="Add New Override" outlined size="small" (onClick)="addOverride()"
-                        severity="info" [disabled]="availableLibraries.length === 0"></p-button>
+                        severity="info" icon="pi pi-plus" [disabled]="availableLibraries.length === 0"></p-button>
             </div>
             <p class="setting-description">
               Add custom preferences for specific libraries or shelves.