Skip to content

Commit e6c317b

Browse files
zubyjzubyj
committed
improved button hover and active states
1 parent 821bcac commit e6c317b

File tree

2 files changed

+91
-23
lines changed

2 files changed

+91
-23
lines changed

‎src/content-script/update-solutions-tab.ts‎

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,86 @@ function createStyledButton(text: string, isActive: boolean = false): HTMLButton
2020
button.classList.add('nav-button');
2121
if (isActive) button.classList.add('active');
2222

23-
chrome.storage.local.get(['isDarkTheme'], (result) => {
24-
const isDark = result.isDarkTheme;
25-
button.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
26-
button.style.color = isDark ? '#e6e6e6' : '#2d2d2d';
27-
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'}`;
28-
button.style.fontWeight = '500';
23+
const updateButtonStyles = (isDark: boolean, isButtonActive: boolean) => {
24+
// Light theme colors
25+
const lightTheme = {
26+
base: '#f3f4f5',
27+
active: '#e0e0e0',
28+
hover: '#e6e6e6',
29+
border: 'rgba(0, 0, 0, 0.15)',
30+
activeBorder: '#f3f4f5',
31+
hoverBorder: 'rgba(0, 0, 0, 0.25)',
32+
text: '#2d2d2d'
33+
};
34+
35+
// Dark theme colors
36+
const darkTheme = {
37+
base: '#2d2d2d',
38+
active: '#404040',
39+
hover: '#3d3d3d',
40+
border: 'rgba(255, 255, 255, 0.15)',
41+
activeBorder: '#2d2d2d',
42+
hoverBorder: 'rgba(255, 255, 255, 0.25)',
43+
text: '#e6e6e6'
44+
};
45+
46+
const theme = isDark ? darkTheme : lightTheme;
47+
48+
button.style.backgroundColor = isButtonActive ? theme.active : theme.base;
49+
button.style.color = theme.text;
50+
button.style.border = `1px solid ${isButtonActive ? theme.activeBorder : theme.border}`;
51+
button.style.boxShadow = isButtonActive ? `0 0 0 1px ${theme.activeBorder}` : 'none';
2952

53+
// Remove existing listeners
54+
const oldMouseEnter = button.onmouseenter;
55+
const oldMouseLeave = button.onmouseleave;
56+
if (oldMouseEnter) button.removeEventListener('mouseenter', oldMouseEnter);
57+
if (oldMouseLeave) button.removeEventListener('mouseleave', oldMouseLeave);
58+
59+
// Add new theme-aware listeners
3060
button.addEventListener('mouseenter', () => {
3161
if (!button.classList.contains('active')) {
32-
button.style.backgroundColor = isDark ? '#3d3d3d' : '#e6e6e6';
33-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.25)';
62+
button.style.backgroundColor = theme.hover;
63+
button.style.borderColor = theme.hoverBorder;
3464
}
3565
});
66+
3667
button.addEventListener('mouseleave', () => {
3768
if (!button.classList.contains('active')) {
38-
button.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
39-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
69+
button.style.backgroundColor = theme.base;
70+
button.style.borderColor = theme.border;
71+
} else {
72+
button.style.backgroundColor = theme.active;
73+
button.style.borderColor = theme.activeBorder;
4074
}
4175
});
76+
};
4277

43-
if (isActive) {
44-
button.style.backgroundColor = isDark ? '#404040' : '#e0e0e0';
45-
button.style.color = isDark ? '#ffffff' : '#000000';
46-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
78+
// Initial style setup
79+
chrome.storage.local.get(['isDarkTheme'], (result) => {
80+
updateButtonStyles(result.isDarkTheme, isActive);
81+
});
82+
83+
// Listen for theme changes
84+
chrome.storage.onChanged.addListener((changes) => {
85+
if (changes.isDarkTheme) {
86+
updateButtonStyles(changes.isDarkTheme.newValue, button.classList.contains('active'));
4787
}
4888
});
4989

90+
// Update styles when active state changes
91+
const observer = new MutationObserver((mutations) => {
92+
mutations.forEach((mutation) => {
93+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
94+
chrome.storage.local.get(['isDarkTheme'], (result) => {
95+
updateButtonStyles(result.isDarkTheme, button.classList.contains('active'));
96+
});
97+
}
98+
});
99+
});
100+
101+
observer.observe(button, { attributes: true });
102+
50103
button.style.width = '120px';
51104
button.style.padding = '4px 8px';
52105
button.style.margin = '0 8px';
@@ -252,7 +305,8 @@ function showContent(type: 'Discussion' | 'Video' | 'Code') {
252305
// Update button states
253306
const buttons = document.querySelectorAll('.nav-button');
254307
buttons.forEach(button => {
255-
if (button.textContent === type) {
308+
const isActive = button.textContent === type;
309+
if (isActive) {
256310
button.classList.add('active');
257311
} else {
258312
button.classList.remove('active');

‎src/problems-by-company/company.css‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,28 @@ button,
4646

4747
nav button {
4848
font-weight: 500;
49-
letter-spacing: 0.8px;
50-
text-transform: uppercase;
49+
letter-spacing: 0.5px;
50+
text-transform: none;
51+
display: flex;
52+
align-items: center;
53+
gap: 8px;
54+
padding: 8px 16px;
55+
min-width: 130px;
56+
height: 40px;
57+
background-color: var(--button-bg-color);
58+
color: var(--text-color);
59+
border: 1px solid var(--border-color);
60+
border-radius: 6px;
61+
font-size: 12px;
62+
transition: all 0.2s ease;
5163
}
5264

5365
button:hover {
54-
background-color: #424242;
55-
border-color: rgba(255, 255, 255, 0.2);
66+
background-color: var(--button-hover-bg);
67+
border-color: var(--button-hover-border);
5668
cursor: pointer;
5769
transform: translateY(-1px);
58-
color: #ffd700;
70+
color: var(--link-color);
5971
}
6072

6173
table {
@@ -77,12 +89,14 @@ td {
7789
}
7890

7991
th {
80-
background-color: #424242;
81-
color: #40a9ff;
92+
background-color: var(--button-bg-color);
93+
color: var(--link-color);
8294
font-weight: 500;
8395
font-size: 14px;
84-
text-transform: uppercase;
96+
text-transform: none;
8597
letter-spacing: 0.5px;
98+
padding: 12px 16px;
99+
border-bottom: 1px solid var(--border-color);
86100
}
87101

88102
td {

0 commit comments

Comments
 (0)