Skip to content

Enhance UI consistency and error handling in Admin and Settings #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rkvishwa merged 3 commits into from
Mar 15, 2026
Merged

Enhance UI consistency and error handling in Admin and Settings #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd58996
feat: Improve error handling and UI consistency in Admin and Settings…
harshasilva Mar 15, 2026
7338dc4
feat: Add gradient background to welcome title in light theme for enh…
harshasilva Mar 15, 2026
c388155
feat: Center align activity log button for improved layout consistency
harshasilva Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 117 additions & 98 deletions src/renderer/components/AdminPanel/AdminSettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,18 @@ export default function AdminSettingsModal({
}
}, [isOpen, user]);

// Clear errors when switching tabs
useEffect(() => {
setPasswordError('');
setPasswordSuccess('');
setNameError('');
setNameSuccess('');
setFlushError('');
setFlushSuccess('');
setRestrictionError('');
setRestrictionSuccess('');
}, [activeTab]);

if (!isOpen) return null;

const matchesSearch = (text: string) =>
Expand Down Expand Up @@ -279,82 +291,90 @@ export default function AdminSettingsModal({
<div className="vscode-settings-section">
<h2 className="vscode-settings-section-title">Appearance</h2>

{(isSearching
? matchesSearch("Color Theme") ||
matchesSearch("interface theme") ||
matchesSearch("Appearance")
: true) && (
<div className="vscode-setting-item">
<div className="vscode-setting-header">
<span className="vscode-setting-title">
Workbench: <span className="highlight">Color Theme</span>
</span>
<div className="vscode-setting-description">
Select your interface theme or let it match your system.
<div className="editor-settings-list">
{(isSearching
? matchesSearch("Color Theme") ||
matchesSearch("interface theme") ||
matchesSearch("Appearance")
: true) && (
<div className="editor-setting-row">
<div className="editor-setting-info-wrap">
<div className="editor-setting-icon">
<Palette size={18} />
</div>
<div className="editor-setting-info">
<span className="editor-setting-title">Color Theme</span>
<span className="editor-setting-desc">
Select your interface theme or let it match your system.
</span>
</div>
</div>
</div>
<div className="vscode-setting-control">
<select
className="vscode-select"
value={theme}
aria-label="Color Theme"
title="Color Theme"
onChange={(e) => onThemeChange(e.target.value)}
>
<option value="system">System Default</option>
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
</select>
</div>
</div>
)}

{(isSearching
? matchesSearch("Accent Color") ||
matchesSearch("custom color") ||
matchesSearch("Appearance")
: true) && (
<div className="vscode-setting-item">
<div className="vscode-setting-header">
<span className="vscode-setting-title">
Workbench: <span className="highlight">Accent Color</span>
</span>
<div className="vscode-setting-description">
Select a custom accent color for the interface (default is blue).
<div className="editor-setting-action">
<select
className="vscode-select"
value={theme}
aria-label="Color Theme"
title="Color Theme"
onChange={(e) => onThemeChange(e.target.value)}
>
<option value="system">System Default</option>
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
</select>
</div>
</div>
<div className="vscode-setting-control color-picker-control">
<div className="color-presets">
{PRESET_COLORS.map((c) => (
<button
key={c.value}
className={`color-preset-btn ${accentColor.toLowerCase() === c.value.toLowerCase() ? "active" : ""}`}
style={{ backgroundColor: c.value }}
title={c.name}
onClick={() => onAccentColorChange(c.value)}
/>
))}
)}

{(isSearching
? matchesSearch("Accent Color") ||
matchesSearch("custom color") ||
matchesSearch("Appearance")
: true) && (
<div className="editor-setting-row">
<div className="editor-setting-info-wrap">
<div className="editor-setting-icon">
<Palette size={18} />
</div>
<div className="editor-setting-info">
<span className="editor-setting-title">Accent Color</span>
<span className="editor-setting-desc">
Select a custom accent color for the interface (default is blue).
</span>
</div>
</div>
<div className="custom-color-wrap">
<input
type="color"
className="vscode-color-picker"
value={accentColor}
onChange={(e) => onAccentColorChange(e.target.value)}
title="Custom Color"
/>
<span className="custom-color-hex">{accentColor.toUpperCase()}</span>
<button
className="activity-log-btn secondary reset-color-btn"
onClick={() => onAccentColorChange('#3b82f6')}
disabled={accentColor.toLowerCase() === '#3b82f6'}
>
Reset
</button>
<div className="editor-setting-action color-picker-control">
<div className="color-presets">
{PRESET_COLORS.map((c) => (
<button
key={c.value}
className={`color-preset-btn ${accentColor.toLowerCase() === c.value.toLowerCase() ? "active" : ""}`}
style={{ backgroundColor: c.value }}
title={c.name}
onClick={() => onAccentColorChange(c.value)}
/>
))}
</div>
<div className="custom-color-wrap">
<input
type="color"
className="vscode-color-picker"
value={accentColor}
onChange={(e) => onAccentColorChange(e.target.value)}
title="Custom Color"
/>
<span className="custom-color-hex">{accentColor.toUpperCase()}</span>
<button
className="activity-log-btn secondary reset-color-btn"
onClick={() => onAccentColorChange('#3b82f6')}
disabled={accentColor.toLowerCase() === '#3b82f6'}
>
Reset
</button>
</div>
</div>
</div>
</div>
)}
)}
</div>
</div>
)}

Expand Down Expand Up @@ -453,38 +473,37 @@ export default function AdminSettingsModal({
<div className="vscode-settings-section">
<h2 className="vscode-settings-section-title">Privacy</h2>

<div className="account-card">
<div className="account-members-section">
<div className="account-members-header">
<span className="vscode-setting-title"><span className="highlight">Internet Restriction</span></span>
</div>
<div className="vscode-setting-description">Control internet access restrictions for all non-admin teams.</div>

<div className="admin-password-form">
<div className="vscode-setting-item" style={{ padding: 0, border: 'none' }}>
<div className="vscode-setting-header">
<span className="vscode-setting-title" style={{ fontSize: 13, color: '#d4d4d4' }}>Block Internet Access</span>
<div className="vscode-setting-description">If enabled, non-admin teams will be restricted from using the IDE while connected to the internet.</div>
</div>
<div className="vscode-setting-control">
<label className="vscode-checkbox-label">
<input
type="checkbox"
className="vscode-checkbox"
checked={globalRestriction}
aria-label="Block Internet Access"
title="Block Internet Access"
onChange={(e) => handleToggleRestriction(e.target.checked)}
disabled={savingRestriction}
/>
</label>
</div>
<div className="editor-settings-list">
<div className="editor-setting-row">
<div className="editor-setting-info-wrap">
<div className="editor-setting-icon">
<Shield size={18} />
</div>
<div className="editor-setting-info">
<span className="editor-setting-title">Block Internet Access</span>
<span className="editor-setting-desc">
If enabled, non-admin teams will be restricted from using the IDE while connected to the internet.
</span>
</div>
</div>
{restrictionError && <div className="account-error">{restrictionError}</div>}
{restrictionSuccess && <div className="account-success"><CheckCircle2 size={12} /> {restrictionSuccess}</div>}
<div className="editor-setting-action">
<label className="vscode-toggle" title="Block Internet Access">
<input
type="checkbox"
checked={globalRestriction}
aria-label="Block Internet Access"
title="Block Internet Access"
onChange={(e) => handleToggleRestriction(e.target.checked)}
disabled={savingRestriction}
/>
<span className="vscode-toggle-slider"></span>
</label>
</div>
</div>
</div>

{restrictionError && <div className="account-error">{restrictionError}</div>}
{restrictionSuccess && <div className="account-success"><CheckCircle2 size={12} /> {restrictionSuccess}</div>}
</div>
)}

Expand Down
7 changes: 7 additions & 0 deletions src/renderer/components/Editor/EditorPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,13 @@ kbd {
text-transform: uppercase;
}

[data-theme="light"] .welcome-title {
background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.welcome-subtitle {
font-size: 15px;
color: var(--text-secondary);
Expand Down
19 changes: 14 additions & 5 deletions src/renderer/components/Settings/SettingsModal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,25 @@
}

.vscode-settings-tree li:hover {
background-color: rgba(255, 255, 255, 0.08);
background-color: var(--list-hover-bg, rgba(255, 255, 255, 0.08));
color: var(--text-primary);
}

.vscode-settings-tree li.active {
background-color: rgba(255, 255, 255, 0.08);
background-color: var(--list-active-bg, rgba(255, 255, 255, 0.08));
color: var(--text-primary);
border-left: 2px solid var(--accent);
padding-left: 22px; /* Adjust padding for border */
}

[data-theme="light"] .vscode-settings-tree li:hover {
background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .vscode-settings-tree li.active {
background-color: rgba(0, 0, 0, 0.08);
}

.vscode-settings-tree li.vscode-settings-divider {
height: 1px;
background-color: rgba(128, 128, 128, 0.25);
Expand Down Expand Up @@ -416,9 +424,9 @@

.color-picker-control {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
flex-direction: row;
align-items: center;
gap: 16px;
}

.color-presets {
Expand Down Expand Up @@ -557,6 +565,7 @@
.activity-log-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 14px;
border: 1px solid var(--border);
Expand Down
Loading
Loading