From 6d3feb4beff52ec0a91d4583c899008f933d051c Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 22 Jul 2025 18:07:19 +0800
Subject: [PATCH] feat: Update styles for creator info and Civitai view in Lora
 modal; refactor button to div

---
 .../css/components/lora-modal/lora-modal.css  | 26 +++++------
 static/js/components/shared/ModelModal.js     |  4 +-
 static/js/utils/uiHelpers.js                  |  3 --
 templates/components/modals.html              | 46 -------------------
 4 files changed, 14 insertions(+), 65 deletions(-)

diff --git a/static/css/components/lora-modal/lora-modal.css b/static/css/components/lora-modal/lora-modal.css
index c0dde2ff..35a988d2 100644
--- a/static/css/components/lora-modal/lora-modal.css
+++ b/static/css/components/lora-modal/lora-modal.css
@@ -445,14 +445,15 @@
     transition: all 0.2s;
 }
 
-[data-theme="dark"] .creator-info {
+[data-theme="dark"] .creator-info,
+[data-theme="dark"] .civitai-view {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--lora-border);
 }
 
 .creator-avatar {
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
     border-radius: 50%;
     overflow: hidden;
     flex-shrink: 0;
@@ -484,7 +485,8 @@
 }
 
 /* Add hover effect for creator info */
-.creator-info:hover {
+.creator-info:hover,
+.civitai-view:hover {
     background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
     border-color: var(--lora-accent);
     transform: translateY(-1px);
@@ -498,26 +500,22 @@
     flex-wrap: wrap;
 }
 
-.civitai-view-btn {
+.civitai-view {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 12px;
-    background: var(--lora-accent);
-    color: white;
-    border: none;
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-sm);
+    color: var(--text-color);
     cursor: pointer;
+    font-weight: 500;
     font-size: 0.9em;
     transition: all 0.2s;
 }
 
-.civitai-view-btn:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-}
-
-.civitai-view-btn i {
+.civitai-view i {
     font-size: 20px;
     display: flex;
     align-items: center;
diff --git a/static/js/components/shared/ModelModal.js b/static/js/components/shared/ModelModal.js
index bbeba6ca..6fcdf419 100644
--- a/static/js/components/shared/ModelModal.js
+++ b/static/js/components/shared/ModelModal.js
@@ -97,9 +97,9 @@ export function showModelModal(model, modelType) {
 
                 <div class="creator-actions">
                     ${model.from_civitai ? `
-                    <button class="civitai-view-btn" title="View on Civitai" data-action="view-civitai" data-filepath="${model.file_path}">
+                    <div class="civitai-view" title="View on Civitai" data-action="view-civitai" data-filepath="${model.file_path}">
                         <i class="fas fa-globe"></i> View on Civitai
-                    </button>` : ''}
+                    </div>` : ''}
 
                     ${model.civitai?.creator ? `
                     <div class="creator-info" data-username="${model.civitai.creator.username}" data-action="view-creator" title="View Creator Profile">
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 5dc2982d..adaf3b66 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -118,11 +118,8 @@ export function toggleTheme() {
     const currentTheme = getStorageItem('theme') || 'auto';
     let newTheme;
     
-    // Cycle through themes: light → dark → auto → light
     if (currentTheme === 'light') {
         newTheme = 'dark';
-    } else if (currentTheme === 'dark') {
-        newTheme = 'auto';
     } else {
         newTheme = 'light';
     }
diff --git a/templates/components/modals.html b/templates/components/modals.html
index c3a0b101..7caa12dd 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -177,52 +177,6 @@
                 </div>
             </div>
             
-            <!-- Add Video Settings Section -->
-            <div class="settings-section">
-                <h3>Video Settings</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="autoplayOnHover">Autoplay Videos on Hover</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="autoplayOnHover" 
-                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Only play video previews when hovering over them
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Add Video Settings Section -->
-            <div class="settings-section">
-                <h3>Video Settings</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="autoplayOnHover">Autoplay Videos on Hover</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="autoplayOnHover" 
-                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Only play video previews when hovering over them
-                    </div>
-                </div>
-            </div>
-            
             <!-- Add Folder Settings Section -->
             <div class="settings-section">
                 <h3>Folder Settings</h3>