Skip to content

fix: resolve dark theme contrast, collapsed panel overlaps, and add g… #466

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

Open
vivekyadav-3 wants to merge 1 commit into
base: main
Choose a base branch
from
+99 −30
Open

fix: resolve dark theme contrast, collapsed panel overlaps, and add g… #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
60 changes: 60 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2159,4 +2159,64 @@ body {
.smart-highlight {
color: #ffcc66;
font-weight: 600;
}

/* Antigravity Custom UI/UX Premium Overrides */

/* 1. Header Dark Mode Switch & Icons */
.theme-toggle-btn {
background: none;
border: 1px solid var(--color-border-secondary);
border-radius: var(--border-radius-md);
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}

.theme-toggle-btn:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
border-color: var(--color-text-primary);
transform: scale(1.05);
}

.theme-toggle-btn:active {
transform: scale(0.95);
}

/* Show/hide Sun and Moon icons based on data-theme */
:root[data-theme="dark"] .theme-toggle-btn .sun-icon {
display: block;
}
:root[data-theme="dark"] .theme-toggle-btn .moon-icon {
display: none;
}
:root[data-theme="light"] .theme-toggle-btn .sun-icon {
display: none;
}
:root[data-theme="light"] .theme-toggle-btn .moon-icon {
display: block;
}
Comment on lines +2193 to +2205

/* 2. Dark Mode Contrast Regression for Summary Box */
:root[data-theme="dark"] .summary-box {
background: linear-gradient(135deg, var(--color-background-tertiary), var(--color-background-secondary)) !important;
border-color: var(--color-border-tertiary) !important;
color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .summary-box strong,
:root[data-theme="dark"] .summary-box b {
color: var(--color-text-primary) !important;
}

/* 3. Minimized/Collapsed Right Panel Layout Fix */
.panel.panel-collapsed .summary-box {
display: none !important;
}
69 changes: 39 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ <h1 class="site-title">StudyPlan</h1>
<a href="#" id="nav-settings">Settings</a>
</nav>

<div class="header-right">
<div class="header-right" style="display: flex; align-items: center; gap: 12px;">
<button id="header-dark-mode-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode" title="Toggle Theme">
<svg class="sun-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
<svg class="moon-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
</button>
Comment on lines +50 to +53
<button class="profile-btn">Profile</button>
<button class="profile-btn" id="logout-btn">Logout</button>
</div>
Expand Down Expand Up @@ -197,13 +201,6 @@ <h1 class="site-title">StudyPlan</h1>
<!-- Javascript will inject extracted items here -->
</div>
<div id="summary-box" class="summary-box"></div>

<button id="add-btn" class="add-btn" disabled>
Add items to planner
</button>
</div>


<button id="add-btn" class="add-btn" disabled>Add items to planner</button>
</div>
</div>
Expand Down Expand Up @@ -364,14 +361,15 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
// Settings Toggles State Management
const darkModeToggle = document.getElementById('dark-mode-toggle');
const compactViewToggle = document.getElementById('compact-view-toggle');
const headerDarkModeToggle = document.getElementById('header-dark-mode-toggle');

// Load preferences
const loadPreferences = () => {
const isDarkMode = localStorage.getItem('studyplan_dark_mode') === 'true';
const isCompactView = localStorage.getItem('studyplan_compact_view') === 'true';

darkModeToggle.checked = isDarkMode;
compactViewToggle.checked = isCompactView;
if (darkModeToggle) darkModeToggle.checked = isDarkMode;
if (compactViewToggle) compactViewToggle.checked = isCompactView;

if (isDarkMode) {
document.documentElement.setAttribute('data-theme', 'dark');
Expand All @@ -390,29 +388,40 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
loadPreferences();

// Save changes when user clicks "Save Changes"
settingsSave.addEventListener('click', () => {
localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);
localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
loadPreferences();
settingsModal.style.display = 'none';
});
if (settingsSave) {
settingsSave.addEventListener('click', () => {
localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);
localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
loadPreferences();
settingsModal.style.display = 'none';
});
}
Comment on lines +391 to +398

// Also apply immediately on toggle for better UX
darkModeToggle.addEventListener('change', (e) => {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
});
if (darkModeToggle) {
darkModeToggle.addEventListener('change', (e) => {
localStorage.setItem('studyplan_dark_mode', e.target.checked ? 'true' : 'false');
loadPreferences();
});
}

compactViewToggle.addEventListener('change', (e) => {
if (e.target.checked) {
document.body.classList.add('compact-view');
} else {
document.body.classList.remove('compact-view');
}
});
if (headerDarkModeToggle) {
headerDarkModeToggle.addEventListener('click', () => {
const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
localStorage.setItem('studyplan_dark_mode', !isDarkMode ? 'true' : 'false');
loadPreferences();
});
}

if (compactViewToggle) {
compactViewToggle.addEventListener('change', (e) => {
if (e.target.checked) {
document.body.classList.add('compact-view');
} else {
document.body.classList.remove('compact-view');
}
});
Comment on lines +416 to +423
}
</script>

<div id="new-subject-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center;">
Expand Down
Loading