Update.

Makefile

@@ -33,6 +33,7 @@ help:
 
 install:
 	@echo "Installing dependencies..."
+	$(PIP) install -e .
 	$(PIP) install -r requirements.txt
 	@echo "Dependencies installed successfully"
 

requirements.txt

@@ -92,7 +92,6 @@ pytz==2025.2
 PyYAML==6.0.3
 qrcode==8.2
 RapidFuzz==3.14.3
--e git+https://retoor.molodetz.nl/retoor/rbox.git@1e5a6dbd5f5007c248368da57684aef075f75070#egg=rbox
 redis==7.0.1
 requests==2.32.5
 requests-toolbelt==1.0.0

static/css/billing.css

@@ -1,5 +1,5 @@
 .billing-dashboard {
-    padding: 2rem;
+    padding: calc(var(--spacing-unit) * 3);
     max-width: 1400px;
     margin: 0 auto;
 }
@@ -8,7 +8,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--spacing-unit) * 3);
 }
 
 .subscription-badge {
@@ -31,16 +31,16 @@
 .billing-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 1.5rem;
+    gap: calc(var(--spacing-unit) * 2.25);
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--spacing-unit) * 3);
 }
 
 .billing-card {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    box-shadow: 0 1px 3px var(--shadow-color);
 }
 
 .billing-card h3 {
@@ -131,11 +131,11 @@
 }
 
 .invoices-section {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--spacing-unit) * 3);
 }
 
 .invoices-table {
@@ -190,49 +190,13 @@
 }
 
 .payment-methods-section {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
 }
 
-.btn-primary {
-    background: #2563eb;
-    color: white;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 6px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.2s;
-}
 
-.btn-primary:hover {
-    background: #1d4ed8;
-}
-
-.btn-secondary {
-    background: #6b7280;
-    color: white;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 6px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-
-.btn-secondary:hover {
-    background: #4b5563;
-}
-
-.btn-link {
-    background: none;
-    border: none;
-    color: #2563eb;
-    cursor: pointer;
-    text-decoration: underline;
-}
 
 .modal {
     position: fixed;
@@ -240,20 +204,41 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     z-index: 1000;
 }
 
 .modal-content {
-    background: white;
+    background-color: var(--accent-color);
-    padding: 2rem;
     border-radius: 8px;
+    padding: calc(var(--spacing-unit) * 3);
     max-width: 800px;
-    max-height: 90vh;
+    width: 90%;
-    overflow-y: auto;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 20px var(--shadow-color);
+}
+
+.close-button {
+    align-self: flex-end;
+    background: none;
+    border: none;
+    font-size: 2rem;
+    cursor: pointer;
+    color: var(--text-color-light);
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    margin-bottom: var(--spacing-unit);
+}
+
+.close-button:hover {
+    color: var(--secondary-color);
 }
 
 .invoice-total {
@@ -267,7 +252,7 @@
 }
 
 .admin-billing {
-    padding: 2rem;
+    padding: calc(var(--spacing-unit) * 3);
     max-width: 1400px;
     margin: 0 auto;
 }
@@ -275,16 +260,16 @@
 .stats-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
+    gap: calc(var(--spacing-unit) * 2.25);
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--spacing-unit) * 3);
 }
 
 .stat-card {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    box-shadow: 0 1px 3px var(--shadow-color);
 }
 
 .stat-card h3 {
@@ -301,11 +286,11 @@
 }
 
 .pricing-config-section {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--spacing-unit) * 3);
 }
 
 .pricing-table {
@@ -342,10 +327,10 @@
 }
 
 .invoice-generation-section {
-    background: white;
+    background: var(--accent-color);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: calc(var(--spacing-unit) * 2.25);
 }
 
 .invoice-gen-form {

static/css/style.css

@@ -699,11 +699,15 @@ body.dark-mode {
 }
 
 .photo-gallery {
+    background-color: var(--accent-color);
+    border-radius: 8px;
     padding: calc(var(--spacing-unit) * 2);
 }
 
 .gallery-header {
     margin-bottom: calc(var(--spacing-unit) * 3);
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: calc(var(--spacing-unit) * 2);
 }
 
 .gallery-header h2 {
@@ -762,6 +766,9 @@ body.dark-mode {
     padding: calc(var(--spacing-unit) * 4);
     color: var(--text-color-light);
     font-size: 1.1rem;
+    grid-column: 1 / -1;
+    width: 100%;
+    background-color: var(--accent-color);
 }
 
 .empty-state::before {
@@ -979,3 +986,15 @@ body.dark-mode {
     border-color: var(--primary-color);
     background-color: rgba(0, 51, 153, 0.05);
 }
+-e 
+.shared-items-container {
+    background-color: var(--accent-color);
+    border-radius: 8px;
+    padding: calc(var(--spacing-unit) * 2);
+}
+
+.section-header {
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: calc(var(--spacing-unit) * 2);
+    margin-bottom: calc(var(--spacing-unit) * 2);
+}

static/js/components/admin-dashboard.js

@@ -42,18 +42,18 @@ export class AdminDashboard extends HTMLElement {
                     </div>
                 </div>
 
-                <div id="userModal" class="modal">
+                <div id="userModal" class="modal" style="display: none;">
                     <div class="modal-content">
                         <span class="close-button">&times;</span>
                         <h3>Edit User</h3>
                         <form id="userForm">
                             <input type="hidden" id="userId">
                             <label for="username">Username:</label>
-                            <input type="text" id="username" required>
+                            <input type="text" id="username" class="input-field" required>
                             <label for="email">Email:</label>
-                            <input type="email" id="email" required>
+                            <input type="email" id="email" class="input-field" required>
                             <label for="password">Password (leave blank to keep current):</label>
-                            <input type="password" id="password">
+                            <input type="password" id="password" class="input-field">
                             <label for="isSuperuser">Superuser:</label>
                             <input type="checkbox" id="isSuperuser">
                             <label for="isActive">Active:</label>
@@ -61,9 +61,9 @@ export class AdminDashboard extends HTMLElement {
                             <label for="is2faEnabled">2FA Enabled:</label>
                             <input type="checkbox" id="is2faEnabled">
                             <label for="storageQuotaBytes">Storage Quota (Bytes):</label>
-                            <input type="number" id="storageQuotaBytes">
+                            <input type="number" id="storageQuotaBytes" class="input-field">
                             <label for="planType">Plan Type:</label>
-                            <input type="text" id="planType">
+                            <input type="text" id="planType" class="input-field">
                             <button type="submit" class="button button-primary">Save</button>
                         </form>
                     </div>

static/js/components/billing-dashboard.js

@@ -216,7 +216,7 @@ class BillingDashboard extends HTMLElement {
 
                 <div class="payment-methods-section">
                     <h3>Payment Methods</h3>
-                    <button class="btn-primary" id="addPaymentMethod">Add Payment Method</button>
+                    <button class="button button-primary" id="addPaymentMethod">Add Payment Method</button>
                 </div>
             </div>
         `;
@@ -248,7 +248,7 @@ class BillingDashboard extends HTMLElement {
                             <td><span class="invoice-status ${invoice.status}">${invoice.status}</span></td>
                             <td>${invoice.due_date ? this.formatDate(invoice.due_date) : '-'}</td>
                             <td>
-                                <button class="btn-link" data-invoice-id="${invoice.id}">View</button>
+                                <button class="button" data-invoice-id="${invoice.id}">View</button>
                             </td>
                         </tr>
                     `).join('')}
@@ -309,8 +309,8 @@ class BillingDashboard extends HTMLElement {
                     <h2>Add Payment Method</h2>
                     <div id="payment-element"></div>
                     <div class="modal-actions">
-                        <button class="btn-primary" id="submitPayment">Add Card</button>
+                        <button class="button button-primary" id="submitPayment">Add Card</button>
-                        <button class="btn-secondary" id="cancelPayment">Cancel</button>
+                        <button class="button" id="cancelPayment">Cancel</button>
                     </div>
                 </div>
             `;
@@ -394,7 +394,7 @@ class BillingDashboard extends HTMLElement {
                         <div><strong>Total:</strong> ${this.formatCurrency(invoice.total)}</div>
                     </div>
                 </div>
-                <button class="btn-secondary" onclick="this.closest('.modal').remove()">Close</button>
+                <button class="button" onclick="this.closest('.modal').remove()">Close</button>
             </div>
         `;
         document.body.appendChild(modal);

static/js/components/file-list.js

@@ -112,8 +112,8 @@ export class FileList extends HTMLElement {
                     </div>
                 ` : ''}
 
-                <div class="file-grid">
                 ${totalItems === 0 ? '<p class="empty-state">No files found.</p>' : ''}
+                <div class="file-grid">
                     ${this.folders.map(folder => this.renderFolder(folder)).join('')}
                     ${this.files.map(file => this.renderFile(file)).join('')}
                 </div>

static/js/components/login-view.js

@@ -39,6 +39,9 @@ export class LoginView extends HTMLElement {
                 </div>
             </div>
         `;
+
+        this.querySelector('#login-error').style.display = 'none';
+        this.querySelector('#register-error').style.display = 'none';
     }
 
     attachListeners() {
@@ -76,6 +79,9 @@ export class LoginView extends HTMLElement {
         const password = formData.get('password');
         const errorDiv = this.querySelector('#login-error');
 
+        errorDiv.style.display = 'none';
+        errorDiv.textContent = '';
+
         try {
             logger.info('Login attempt started', { username });
             await api.login(username, password);
@@ -84,6 +90,7 @@ export class LoginView extends HTMLElement {
         } catch (error) {
             logger.error('Login failed', { username, error: error.message });
             errorDiv.textContent = error.message;
+            errorDiv.style.display = 'block';
         }
     }
 
@@ -96,6 +103,9 @@ export class LoginView extends HTMLElement {
         const password = formData.get('password');
         const errorDiv = this.querySelector('#register-error');
 
+        errorDiv.style.display = 'none';
+        errorDiv.textContent = '';
+
         try {
             logger.info('Registration attempt started', { username, email });
             await api.register(username, email, password);
@@ -104,6 +114,7 @@ export class LoginView extends HTMLElement {
         } catch (error) {
             logger.error('Registration failed', { username, email, error: error.message });
             errorDiv.textContent = error.message;
+            errorDiv.style.display = 'block';
         }
     }
 }

static/js/components/photo-gallery.js

@@ -30,10 +30,19 @@ class PhotoGallery extends HTMLElement {
     async renderPhotos() {
         const grid = this.querySelector('.gallery-grid');
         if (this.photos.length === 0) {
-            grid.innerHTML = '<p class="empty-state">No photos found.</p>';
+            grid.innerHTML = '';
+            const header = this.querySelector('.gallery-header');
+            const empty = document.createElement('p');
+            empty.className = 'empty-state';
+            empty.textContent = 'No photos found.';
+            header.insertAdjacentElement('afterend', empty);
             return;
         }
 
+        // Remove any existing empty-state
+        const existingEmpty = this.querySelector('.empty-state');
+        if (existingEmpty) existingEmpty.remove();
+
         grid.innerHTML = this.photos.map(photo => `
             <div class="photo-item" data-file-id="${photo.id}">
                 <img

static/js/components/shared-items.js

@@ -32,7 +32,9 @@ export class SharedItems extends HTMLElement {
         if (this.myShares.length === 0) {
             this.innerHTML = `
                 <div class="shared-items-container">
+                    <div class="file-list-header">
                         <h2>Shared Items</h2>
+                    </div>
                     <p class="empty-state">No shared items found.</p>
                 </div>
             `;
@@ -41,7 +43,9 @@ export class SharedItems extends HTMLElement {
 
         this.innerHTML = `
             <div class="shared-items-container">
+                <div class="file-list-header">
                     <h2>Shared Items</h2>
+                </div>
                 <div class="share-list">
                     ${this.myShares.map(share => this.renderShare(share)).join('')}
                 </div>