fix: fix misaligns

Author: cyberelf

src/components/chat/shortcutHandler.ts

@@ -143,7 +143,7 @@ export class ShortcutHandler {
         this.input.value = '';
         break;
       case '/screenshot':
-        document.getElementById('screenshot-btn')?.click();
+        document.getElementById('ai-screenshot-btn')?.click();
         this.input.value = '';
         break;
       // Add more command handlers as needed

src/components/context/__tests__/contextModes.test.ts

@@ -36,16 +36,16 @@ describe('Context Modes', () => {
         <div class="slider-option" data-mode="screenshot">Screenshot</div>
         <div class="slider-highlight"></div>
       </div>
-      <button id="screenshot-btn">Take Screenshot</button>
-      <div id="drop-zone">Drop zone</div>
-      <div id="content-preview"></div>
-      <input type="file" id="file-input" />
+      <button id="ai-screenshot-btn">Take Screenshot</button>
+      <div id="ai-drop-zone">Drop zone</div>
+      <div id="ai-content-preview"></div>
+      <input type="file" id="ai-file-input" />
     `;
     document.body.appendChild(container);
 
     // Get elements
-    contentPreview = document.getElementById('content-preview') as HTMLDivElement;
-    screenshotBtn = document.getElementById('screenshot-btn') as HTMLButtonElement;
+    contentPreview = document.getElementById('ai-content-preview') as HTMLDivElement;
+    screenshotBtn = document.getElementById('ai-screenshot-btn') as HTMLButtonElement;
     options = document.querySelectorAll('.slider-option');
     highlight = document.querySelector('.slider-highlight') as HTMLElement;
 

src/components/ui/sidebar.ts

@@ -297,7 +297,7 @@ export function createSidebar(): void {
               <div class="ai-slider-highlight"></div>
             </div>
           </div>
-          <button id="ai-screenshot-btn" class="ai-hidden" aria-label="Take Screenshot">
+          <button id="ai-screenshot-btn" class="hidden" aria-label="Take Screenshot">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
               <circle cx="12" cy="13" r="4"/>
@@ -306,7 +306,7 @@ export function createSidebar(): void {
         </div>
         <div id="ai-context-area">
           <div id="ai-content-preview"></div>
-          <div id="ai-drop-zone" class="ai-hidden">
+          <div id="ai-drop-zone" class="hidden">
             <p>Take a screenshot or drag and drop an image here</p>
             <input type="file" id="ai-file-input" accept="image/*" hidden>
           </div>

src/styles.css

@@ -105,7 +105,7 @@
 }
 
 .ai-context-mode-wrapper {
-  width: 300px;
+  width: 320px;
 }
 
 .ai-slider-container {
@@ -114,13 +114,13 @@
   border-radius: 6px;
   padding: 3px;
   position: relative;
-  margin-bottom: 8px;
+  margin-bottom: 0px;
 }
 
 .ai-slider-option {
   flex: 1;
   text-align: center;
-  padding: 4px 8px;
+  padding: 8px 8px;
   font-size: 12px;
   cursor: pointer;
   position: relative;
@@ -219,7 +219,7 @@
   color: var(--text, #e2e8f0);
 }
 
-.ai-hidden {
+#ai-drop-zone.hidden {
   display: none !important;
 }
 
@@ -302,7 +302,7 @@
 
 .ai-modal {
   display: none;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -311,18 +311,20 @@
   z-index: 10001;
 }
 
-.ai-modal.ai-show {
+.ai-modal.show {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .ai-modal-content {
-  background: white;
+  background: var(--bg, white);
   padding: 20px;
   border-radius: 4px;
-  max-width: 400px;
-  width: 100%;
+  max-width: 300px;
+  width: calc(100% - 40px);
+  margin: 0 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .ai-modal-actions {
@@ -333,22 +335,47 @@
 }
 
 .ai-modal-button {
-  padding: 8px 16px;
-  border-radius: 4px;
+  padding: 6px 12px;
+  border-radius: 6px;
   cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
-.cancel-button {
-  background: none;
-  border: 1px solid #ddd;
+.ai-cancel-button {
+  background: var(--bg, #ffffff);
+  color: var(--text, #1e293b);
+  border: 1px solid var(--border, #e2e8f0);
+}
+
+.ai-cancel-button:hover {
+  background: var(--hover, #f8fafc);
+  border-color: var(--button-bg, #3b82f6);
 }
 
-.confirm-button {
-  background: #e74c3c;
+.ai-confirm-button {
+  background: var(--button-bg, #ef4444);
   color: white;
   border: none;
 }
 
+.ai-confirm-button:hover {
+  background: var(--button-hover-bg, #dc2626);
+}
+
+[data-theme="dark"] .ai-cancel-button {
+  background: var(--bg, #1e293b);
+  border-color: var(--border, #4d4d4d);
+  color: var(--text, #e2e8f0);
+}
+
+[data-theme="dark"] .ai-cancel-button:hover {
+  background: var(--hover, #334155);
+  border-color: var(--button-bg, #3b82f6);
+}
+
 .ai-theme-toggle {
   background: none;
   border: none;
@@ -419,15 +446,6 @@
   background: #2d2d2d;
 }
 
-[data-theme="dark"] .ai-cancel-button {
-  border-color: #4d4d4d;
-  color: #fff;
-}
-
-[data-theme="dark"] .ai-theme-toggle {
-  color: #fff;
-}
-
 .image-preview {
   position: relative;
   display: inline-block;
@@ -760,7 +778,7 @@
   color: var(--light-text, #94a3b8);
 }
 
-#screenshot-btn {
+#ai-screenshot-btn {
   padding: 6px;
   background: var(--bg, #ffffff);
   color: var(--text, #1e293b);
@@ -777,17 +795,17 @@
   box-sizing: border-box;
 }
 
-#screenshot-btn:hover {
+#ai-screenshot-btn:hover {
   background: var(--hover, #f8fafc);
   border-color: var(--button-bg, #3b82f6);
 }
 
-#screenshot-btn svg {
+#ai-screenshot-btn svg {
   width: 16px;
   height: 16px;
 }
 
-#screenshot-btn.hidden {
+#ai-screenshot-btn.hidden {
   display: none;
 }
 

src/utils/theme.ts

@@ -16,4 +16,11 @@ export function applyTheme(theme: Theme): void {
     themeToggle.classList.remove('light', 'dark');
     themeToggle.classList.add(theme);
   }
+
+  // Update modal theme
+  const modal = document.getElementById('ai-modal');
+  if (modal) {
+    modal.classList.remove('light', 'dark');
+    modal.classList.add(theme);
+  }
 }