mirror of
https://github.com/github/awesome-copilot.git
synced 2026-06-23 16:07:34 +00:00
feat(ui): comprehensive UI/UX improvements (#1069)
* feat(ui): replace emoji icons with SVG icon system Replace all emoji icons with a consistent SVG icon system to improve: - Visual consistency across platforms - Design token control and theming - Professional appearance Changes: - Add new Icon.astro component with 16 custom SVG icons - Update index.astro to use SVG icons in resource cards - Update index.ts to render SVG icons in search results - Update utils.ts to return icon names instead of emojis - Update global.css with proper SVG icon styling - Remove emoji from Footer component Icons added: robot, document, lightning, hook, workflow, plug, wrench, book, plus action icons: close, copy, download, share, external, plus, search, chevron-down Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(ui): enhance hero section, add animations and mobile responsiveness Phase 2 & 3 UI/UX improvements: Hero Section Enhancements: - Add gradient text effect for title (purple to orange gradient) - Add animated floating particles in hero background - Increase hero padding for better visual impact Card Category Colors: - Add category-specific accent colors (AI, docs, power, automation, etc.) - Each category has unique glow effect on hover - Category colors: purple (AI), orange (docs), red (power), etc. Entrance Animations: - Add staggered fade-in animation for cards (50ms delay each) - Cards animate in with translateY + opacity - Add slide-down animation for search results Mobile Responsiveness: - Responsive grid: 4 cols → 2 cols → 1 col - Adjust font sizes for mobile screens - Add safe-area-inset support for notched devices - Ensure touch targets ≥44px Accessibility: - Add prefers-reduced-motion support - Disable animations for users who prefer reduced motion - Smooth scroll with fallback Additional Improvements: - Add arrow indicator on card hover - Add loading animation for count numbers - Enhanced scrollbar styling - Print styles for better printing Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): add theme toggle, enhanced search, and back to top button Theme Toggle: - Create ThemeToggle.astro component with sun/moon icons - Add theme initialization in Head.astro to prevent flash - Store theme preference in localStorage - Keyboard shortcut: Cmd/Ctrl + Shift + L - Smooth icon transition animation Back to Top Button: - Create BackToTop.astro component - Appears after scrolling 400px - Smooth scroll to top on click - Fixed position bottom-right - Respects reduced motion preference Enhanced Search: - Recent searches functionality with localStorage - Show recent searches on focus when empty - Remove individual items or clear all - Enhanced empty state with icon and hint - Cmd/Ctrl + K keyboard shortcut to focus search - Add search to recent when getting results CSS Enhancements: - Theme toggle container styles - Recent searches section styling - Search empty state with icon - Search loading spinner - Keyboard shortcut hint styles - Print styles for new components Co-Authored-By: Claude <noreply@anthropic.com> * fix(ui): resolve header and theme toggle issues - Add Copilot logo to header via Starlight config with automatic theme switching - Fix theme toggle slider direction (was reversed) - Fix theme toggle active icon highlighting (was backwards) - Change theme toggle from purple circle slider to bold text indicator - Fix theme toggle slider overflow by adding overflow: hidden - Remove duplicate banner image from home page - Clean up conflicting logo CSS rules to prevent duplication The header now displays: [ Copilot Icon ] Awesome GitHub Copilot [ Search ] Theme toggle indicators are now visually clear with bold text for selected theme. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * fix(ui): address feedback on UI/UX improvements - Remove logo from header per brand guidance (logo config and CSS) - Fix back-to-top button visibility by moving to body level and using global styles - Fix modal visibility by adding 'visible' class for CSS animations - Fix theme toggle applying site-wide by using global styles and proper theme initialization - Update icons to use GitHub Primer SVG icons with proper fill-based styling - Fix plugin modal to render SVG icons instead of icon names - Add theme initialization script to prevent flash of unstyled content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: move modal to body level to fix z-index stacking context issue The modal was nested inside .main-pane which has isolation: isolate, creating a new stacking context. This caused the modal's z-index to be evaluated within that context, unable to stack above the header. This fix moves the modal to be a direct child of body on page load, allowing it to properly cover the entire viewport including navbar. --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
JoeVenner
GitHub
@@ -0,0 +1,170 @@
|
||||
---
|
||||
// Theme Toggle Component - 3 state slider: Auto | Dark | Light
|
||||
---
|
||||
|
||||
<div class="theme-toggle-container">
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="theme-toggle"
|
||||
aria-label="Toggle theme"
|
||||
title="Change theme"
|
||||
>
|
||||
<span class="theme-icon moon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="theme-icon auto" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 2v10l4.5 4.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="theme-icon sun" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<line x1="12" y1="1" x2="12" y2="3"/>
|
||||
<line x1="12" y1="21" x2="12" y2="23"/>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12"/>
|
||||
<line x1="21" y1="12" x2="23" y2="12"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="theme-slider"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// Move theme toggle to body level to escape any stacking contexts
|
||||
const container = document.querySelector('.theme-toggle-container');
|
||||
if (container && container.parentElement !== document.body) {
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'awesome-copilot-theme';
|
||||
const toggle = document.getElementById('theme-toggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
const themes = ['dark', 'auto', 'light'];
|
||||
const icons = ['moon', 'auto', 'sun'];
|
||||
|
||||
function getThemeIndex() {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored && themes.includes(stored)) {
|
||||
return themes.indexOf(stored);
|
||||
}
|
||||
// Default to light theme
|
||||
return 2;
|
||||
}
|
||||
|
||||
function applyTheme(index: number) {
|
||||
const theme = themes[index];
|
||||
if (theme === 'auto') {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
html.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
||||
} else {
|
||||
html.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
// Move slider
|
||||
const slider = toggle?.querySelector('.theme-slider') as HTMLElement;
|
||||
if (slider) {
|
||||
slider.style.transform = `translateX(${index * 100}%)`;
|
||||
}
|
||||
|
||||
// Highlight active icon
|
||||
const themeToggle = document.querySelector('.theme-toggle');
|
||||
themeToggle?.setAttribute('data-active', String(index));
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
const currentIndex = getThemeIndex();
|
||||
const nextIndex = (currentIndex + 1) % themes.length;
|
||||
localStorage.setItem(STORAGE_KEY, themes[nextIndex]);
|
||||
applyTheme(nextIndex);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
applyTheme(getThemeIndex());
|
||||
|
||||
// Click handler
|
||||
toggle?.addEventListener('click', cycleTheme);
|
||||
|
||||
// Keyboard shortcut
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'L') {
|
||||
e.preventDefault();
|
||||
cycleTheme();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||
if (localStorage.getItem(STORAGE_KEY) === 'auto') {
|
||||
applyTheme(1); // auto
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
.theme-toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 108px;
|
||||
height: 36px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 20px;
|
||||
background: var(--color-bg-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.theme-toggle:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
border-radius: 16px;
|
||||
color: var(--color-text-muted);
|
||||
transition: all 0.2s ease;
|
||||
z-index: 1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.theme-icon.moon { color: #9898a6; }
|
||||
.theme-icon.auto { color: #9898a6; }
|
||||
.theme-icon.sun { color: #9898a6; }
|
||||
|
||||
.theme-toggle[data-active="0"] .moon,
|
||||
.theme-toggle[data-active="1"] .auto,
|
||||
.theme-toggle[data-active="2"] .sun {
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.theme-slider {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user