Skip to content

Commit cefd631

Browse files
author
FileShot
committed
fix: Replace emojis with SVG icons, fix color scheme, fix tool panel display
1 parent 2a4d986 commit cefd631

3 files changed

Lines changed: 30 additions & 23 deletions

File tree

‎renderer/local/app.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -128,22 +128,24 @@ function switchToTool(toolName) {
128128

129129
// Hide all panels
130130
document.querySelectorAll('.tool-panel').forEach(panel => {
131-
panel.hidden = true;
131+
panel.style.display = 'none';
132132
});
133133

134134
// Show selected panel
135135
const panel = DOM.toolPanel(toolName);
136-
if (panel) panel.hidden = false;
136+
if (panel) {
137+
panel.style.display = 'block';
138+
}
137139

138-
// Update topbar title
140+
// Update topbar title with icons
139141
const titles = {
140-
vault: '🔒 Local Vault',
141-
pdf: '📄 PDF Tools',
142-
image: '🖼️ Image Tools',
143-
text: '📝 Text Tools',
144-
storage: '💾 Storage Management',
145-
shred: '🗑️ Secure File Shredding',
146-
settings: '⚙️ Settings'
142+
vault: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Local Vault',
143+
pdf: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> PDF Tools',
144+
image: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> Image Tools',
145+
text: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg> Text Tools',
146+
storage: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/></svg> Storage Management',
147+
shred: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> Secure File Shredding',
148+
settings: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.2 4.2l4.2 4.2m5.6 5.6l4.2 4.2M1 12h6m6 0h6M4.2 19.8l4.2-4.2m5.6-5.6l4.2-4.2"/></svg> Settings'
147149
};
148150

149151
DOM.topbarLeft().innerHTML = `<h1>${titles[toolName]}</h1>`;
@@ -477,7 +479,7 @@ function initSettingsTool() {
477479
function initToolPanels() {
478480
// Initialize all tool panels visibility
479481
document.querySelectorAll('.tool-panel').forEach(panel => {
480-
panel.hidden = true;
482+
panel.style.display = 'none';
481483
});
482484
}
483485

‎renderer/local/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<!-- Sidebar Navigation -->
1212
<aside class="sidebar" id="sidebar">
1313
<div class="sidebar-header">
14-
<div class="logo-mini">FS</div>
14+
<svg class="logo-mini" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
15+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
16+
<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
17+
<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
18+
</svg>
1519
<button class="btn-collapse" id="btnCollapse" title="Toggle sidebar">
1620
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1721
<line x1="3" y1="6" x2="21" y2="6"></line>

‎renderer/local/styles.css‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
--border: rgba(255,255,255,0.09);
88
--text: #e8eef6;
99
--text-secondary: rgba(232,238,246,0.68);
10-
--accent: #ef4444;
11-
--accent-hover: #dc2626;
10+
--accent: #3b82f6;
11+
--accent-hover: #2563eb;
1212
--accent2: #f97316;
1313
--ok: #10b981;
1414
--sidebar-width: 260px;
@@ -30,22 +30,24 @@ body {
3030
.sidebar { width: var(--sidebar-width); background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width 0.3s ease; overflow: hidden; }
3131
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
3232
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px; border-bottom: 1px solid var(--border); }
33-
.logo-mini { font-weight: 900; font-size: 18px; letter-spacing: -0.5px; color: var(--accent); }
33+
.logo-mini { color: var(--accent); }
3434
.btn-collapse { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; display: flex; border-radius: 8px; transition: background 0.2s; }
3535
.btn-collapse:hover { background: var(--panel-hover); }
3636
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; overflow-y: auto; }
3737
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: transparent; border: 1px solid transparent; color: var(--text-secondary); border-radius: 10px; cursor: pointer; font-size: 14px; transition: all 0.2s; white-space: nowrap; }
38+
.nav-item svg { flex-shrink: 0; }
3839
.nav-item:hover { background: var(--panel-hover); color: var(--text); }
39-
.nav-item.active { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.45); color: var(--accent); }
40-
.sidebar.collapsed .nav-item span { display: none; }
40+
.nav-item.active { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.45); color: var(--accent); }
41+
.sidebar.collapsed .nav-item span:not(svg) { display: none; }
4142
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 0; }
4243
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); }
4344
.btn-full { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
4445
.sidebar.collapsed .btn-full span { display: none; }
4546

4647
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
4748
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--panel); flex-shrink: 0; }
48-
.topbar-left h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
49+
.topbar-left h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; }
50+
.topbar-left h1 svg { flex-shrink: 0; }
4951
.topbar-right { display: flex; gap: 12px; align-items: center; }
5052
.status-badge { font-size: 12px; color: var(--text-secondary); background: var(--panel); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); }
5153

@@ -58,17 +60,16 @@ body {
5860
.btn { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
5961
.btn:hover { background: var(--panel-hover); }
6062
.btn:active { transform: scale(0.98); }
61-
.btn-primary { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.16); color: var(--accent); }
62-
.btn-primary:hover { background: rgba(239, 68, 68, 0.22); }
63+
.btn-primary { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.16); color: var(--accent); }
64+
.btn-primary:hover { background: rgba(59, 130, 246, 0.22); }
6365
.btn-secondary { border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.12); color: var(--accent2); }
6466
.btn-secondary:hover { background: rgba(249, 115, 22, 0.18); }
65-
.btn-danger { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.20); color: var(--accent); }
67+
.btn-danger { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.20); color: #ef4444; }
6668
.btn-danger:hover { background: rgba(239, 68, 68, 0.28); }
6769
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
6870

6971
.tools-container { flex: 1; overflow: auto; padding: 24px; position: relative; }
70-
.tool-panel { display: none; }
71-
.tool-panel:not([hidden]) { display: block; max-width: 1200px; margin: 0 auto; }
72+
.tool-panel { display: none; max-width: 1200px; margin: 0 auto; }
7273
.panel-actions { display: flex; gap: 10px; margin-bottom: 20px; }
7374
.status { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; padding: 8px 12px; background: var(--panel); border-radius: 8px; border: 1px solid var(--border); }
7475

0 commit comments

Comments
 (0)