PVAS-Development · pedrovsiqueira · Dec 19, 2025 · Dec 18, 2025 · Dec 18, 2025 · Dec 19, 2025
diff --git a/docs/privacy.html b/docs/privacy.html
@@ -67,20 +67,22 @@
 </head>
 
 <body>
-    <nav class="navbar" role="navigation" aria-label="Main navigation">
-        <div class="container nav-inner">
-            <a href="index.html" class="logo" aria-label="WhisperDesk Home">
-                <img src="icon.png" alt="WhisperDesk Logo" width="32" height="32" />
-                <span class="logo-text">WhisperDesk</span>
-            </a>
-            <div class="nav-actions">
-                <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
-                    <i data-lucide="moon" class="moon-icon" aria-hidden="true"></i>
-                    <i data-lucide="sun" class="sun-icon" aria-hidden="true"></i>
-                </button>
+    <header>
+        <nav class="nav" role="navigation" aria-label="Main navigation">
+            <div class="container nav-inner">
+                <a href="index.html" class="nav-logo" aria-label="WhisperDesk Home">
+                    <img src="icon.png" alt="WhisperDesk Logo" class="nav-logo-icon" width="32" height="32" />
+                    <span>WhisperDesk</span>
+                </a>
+                <div class="nav-links">
+                    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" type="button">
+                        <i data-lucide="sun" class="theme-icon-light"></i>
+                        <i data-lucide="moon" class="theme-icon-dark"></i>
+                    </button>
+                </div>
             </div>
-        </div>
-    </nav>
+        </nav>
+    </header>
 
     <main class="policy-container">
         <a href="index.html" class="back-link">

diff --git a/src/main/services/whisper.ts b/src/main/services/whisper.ts
@@ -542,7 +542,7 @@ export function transcribe(
 
         const progressMatch = message.match(/progress\s*=\s*(\d+)%/);
         if (progressMatch && progressMatch[1]) {
-          const percent = parseInt(progressMatch[1], 10);
+          const percent = Math.min(100, parseInt(progressMatch[1], 10));
           const scaledPercent = 20 + Math.round((percent / 100) * 70);
           onProgress?.({ percent: scaledPercent, status: `Transcribing... ${percent}%` });
         }

diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -71,25 +71,6 @@
   border-color: var(--border-hover);
 }
 
-.history-btn {
-  -webkit-app-region: no-drag;
-  padding: 8px 14px;
-  font-size: 0.85rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.history-btn:hover {
-  background: var(--surface-hover);
-  border-color: var(--border-hover);
-}
-
 .app-main {
   flex: 1;
   display: grid;
@@ -130,92 +111,6 @@
   gap: 12px;
 }
 
-button {
-  font-family: inherit;
-  font-size: 0.95rem;
-  padding: 12px 20px;
-  border-radius: var(--radius-sm);
-  border: none;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  position: relative;
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-  color: white;
-  flex: 1;
-  box-shadow: var(--shadow-accent);
-}
-
-.btn-primary::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
-  pointer-events: none;
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow:
-    0 0 0 1px var(--accent-border),
-    0 4px 16px var(--accent-glow),
-    0 8px 32px rgba(37, 99, 235, 0.2);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: scale(0.98);
-  box-shadow: var(--shadow-accent);
-}
-
-.btn-danger {
-  background: var(--danger);
-  color: white;
-  flex: 1;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #dc2626;
-}
-
-.btn-secondary {
-  background: var(--surface);
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow-inner);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--surface-hover);
-  border-color: var(--border-hover);
-}
-
-.btn-icon {
-  padding: 8px 12px;
-  font-size: 0.85rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
-  border-radius: var(--radius-sm);
-}
-
-.btn-icon:hover:not(:disabled) {
-  background: var(--surface-hover);
-  border-color: var(--border-hover);
-}
-
 .error-message {
   background: var(--danger-light);
   border: 1px solid var(--danger);

diff --git a/src/renderer/components/layout/AppHeader/AppHeader.tsx b/src/renderer/components/layout/AppHeader/AppHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Moon, Sun, History, Terminal } from 'lucide-react';
+import { Button } from '../../ui';
 import { useAppTheme, useAppHistory } from '../../../contexts';
 import { useDebugLogs } from '../../../hooks';
 import { DebugLogsModal } from '../../ui/DebugLogsModal';
@@ -30,34 +31,32 @@ function AppHeader(): React.JSX.Element {
             </div>
           </div>
           <div className="header-actions">
-            <button
-              className="btn-icon debug-logs-btn"
+            <Button
+              variant="icon"
+              icon={<Terminal size={18} />}
+              iconOnly
               onClick={openDebugLogs}
               title="Debug Logs"
               aria-label="Open debug logs"
-            >
-              <Terminal size={18} aria-hidden="true" />
-            </button>
-            <button
-              className="theme-toggle"
+            />
+            <Button
+              variant="icon"
+              icon={theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+              iconOnly
               onClick={toggleTheme}
               title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
               aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-            >
-              {theme === 'light' ? (
-                <Moon size={18} aria-hidden="true" />
-              ) : (
-                <Sun size={18} aria-hidden="true" />
-              )}
-            </button>
-            <button
-              className="btn-icon history-btn"
+              className="theme-toggle"
+            />
+            <Button
+              variant="icon"
+              icon={<History size={18} />}
               onClick={toggleHistory}
               title="Transcription History"
               aria-label={`${showHistory ? 'Hide' : 'Show'} transcription history. ${history.length} items.`}
             >
-              <History size={18} aria-hidden="true" /> History ({history.length})
-            </button>
+              History ({history.length})
+            </Button>
           </div>
         </div>
       </header>

diff --git a/src/renderer/components/layout/LeftPanel/DonationSection/DonationSection.tsx b/src/renderer/components/layout/LeftPanel/DonationSection/DonationSection.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Heart, Coffee } from 'lucide-react';
+import { Button } from '../../../../components/ui';
 import { openExternal, trackEvent, logger } from '../../../../services';
 import './DonationSection.css';
 
@@ -22,21 +23,25 @@ function DonationSection(): React.JSX.Element {
     <div className="donation-container">
       <p className="donation-text">Enjoying the app?</p>
       <div className="donation-buttons">
-        <button
-          className="donation-link"
+        <Button
+          variant="ghost"
+          size="sm"
           aria-label="Donate via PayPal"
           onClick={() => handleDonationClick(PAYPAL_DONATION_URL, 'paypal')}
+          className="donation-link"
         >
           Donate <Heart size={12} className="heart-icon" fill="currentColor" />
-        </button>
+        </Button>
         <span className="donation-separator">•</span>
-        <button
-          className="donation-link"
+        <Button
+          variant="ghost"
+          size="sm"
           aria-label="Buy me a coffee"
           onClick={() => handleDonationClick(BUY_ME_A_COFFEE_URL, 'buymeacoffee')}
+          className="donation-link"
         >
           Buy me a coffee <Coffee size={12} className="coffee-icon" />
-        </button>
+        </Button>
       </div>
     </div>
   );

diff --git a/src/renderer/components/layout/LeftPanel/TranscriptionActions/TranscriptionActions.tsx b/src/renderer/components/layout/LeftPanel/TranscriptionActions/TranscriptionActions.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Zap } from 'lucide-react';
+import { Button } from '../../../../components/ui';
 import { useAppTranscription } from '../../../../contexts';
 
 export interface TranscriptionActionsProps {
@@ -21,23 +22,29 @@ function TranscriptionActions({ isFFmpegAvailable }: TranscriptionActionsProps):
   return (
     <div className="actions">
       {!isTranscribing ? (
-        <button
-          className="btn-primary"
+        <Button
+          variant="primary"
+          size="lg"
+          icon={<Zap size={18} />}
           onClick={handleTranscribe}
           disabled={!canTranscribe}
           aria-label="Start transcription"
           title={getDisabledReason()}
+          fullWidth
         >
-          <Zap size={18} aria-hidden="true" /> Transcribe
-        </button>
+          Transcribe
+        </Button>
       ) : (
-        <button
-          className="btn-danger"
+        <Button
+          variant="danger"
+          size="lg"
           onClick={handleCancel}
           aria-label="Cancel ongoing transcription"
+          loading
+          fullWidth
         >
-          <span className="loading-spinner" aria-hidden="true"></span> Cancel
-        </button>
+          Cancel
+        </Button>
       )}
     </div>
   );