Skip to content

Commit 8eb31aa

Browse files
drknowhowclaude
drknowhow
and
claude
committed
Redesign About panel with inline styles and chrome.tabs.create
- Use inline styles instead of Tailwind to guarantee rendering - Use chrome.tabs.create() for links (fixes side panel link issue) - Add branded header with gradient shield icon - Add info rows for platform, data privacy, and license - Gradient primary button for Website, outlined button for GitHub Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8767864 commit 8eb31aa

1 file changed

Lines changed: 140 additions & 29 deletions

File tree

‎extension/src/components/Footer.tsx‎

Lines changed: 140 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,168 @@
11
import { useState } from 'react';
22

3+
function openUrl(url: string) {
4+
chrome.tabs.create({ url });
5+
}
6+
37
export default function Footer() {
48
const [open, setOpen] = useState(false);
59

610
return (
7-
<div className="border-t border-gray-200">
11+
<div style={{ borderTop: '1px solid #e5e7eb' }}>
12+
{/* Toggle bar */}
813
<button
914
onClick={() => setOpen(!open)}
10-
className="w-full px-4 py-2.5 flex items-center justify-between text-xs text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
15+
style={{
16+
width: '100%',
17+
display: 'flex',
18+
alignItems: 'center',
19+
justifyContent: 'space-between',
20+
padding: '10px 16px',
21+
background: 'none',
22+
border: 'none',
23+
cursor: 'pointer',
24+
fontSize: '11px',
25+
color: '#9ca3af',
26+
fontFamily: 'inherit',
27+
}}
1128
>
12-
<span className="font-medium">Sentinel v1.0.0</span>
29+
<span style={{ fontWeight: 600 }}>About Sentinel</span>
1330
<svg
14-
className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-180' : ''}`}
15-
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
31+
width="12" height="12" viewBox="0 0 24 24"
32+
fill="none" stroke="currentColor" strokeWidth="2.5"
33+
strokeLinecap="round" strokeLinejoin="round"
34+
style={{
35+
transition: 'transform 0.2s',
36+
transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
37+
}}
1638
>
17-
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
39+
<polyline points="6 9 12 15 18 9" />
1840
</svg>
1941
</button>
2042

43+
{/* About panel */}
2144
{open && (
22-
<div className="px-4 pb-4 pt-1">
23-
<div className="rounded-lg bg-gray-50 border border-gray-100 p-3.5">
24-
<div className="flex items-center gap-2.5 mb-2.5">
25-
<div className="w-8 h-8 rounded-lg bg-cyan-700 flex items-center justify-center flex-shrink-0">
26-
<svg className="w-4.5 h-4.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
27-
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
45+
<div style={{ padding: '0 16px 16px' }}>
46+
<div style={{
47+
background: '#f8fafc',
48+
border: '1px solid #e2e8f0',
49+
borderRadius: '12px',
50+
padding: '20px',
51+
}}>
52+
{/* Brand header */}
53+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
54+
<div style={{
55+
width: '40px',
56+
height: '40px',
57+
borderRadius: '10px',
58+
background: 'linear-gradient(135deg, #0e7490, #0891b2)',
59+
display: 'flex',
60+
alignItems: 'center',
61+
justifyContent: 'center',
62+
flexShrink: 0,
63+
}}>
64+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
65+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
66+
<path d="M9 12l2 2 4-4" />
2867
</svg>
2968
</div>
3069
<div>
31-
<p className="text-[11px] font-bold text-gray-800 leading-tight">Sentinel</p>
32-
<p className="text-[10px] text-gray-400 leading-tight">Web Application Tester &amp; Guide Creator</p>
70+
<div style={{ fontSize: '14px', fontWeight: 700, color: '#1e293b', lineHeight: 1.2 }}>
71+
Sentinel
72+
</div>
73+
<div style={{ fontSize: '11px', color: '#94a3b8', lineHeight: 1.3, marginTop: '2px' }}>
74+
Version 1.0.0
75+
</div>
3376
</div>
3477
</div>
35-
<p className="text-[10px] text-gray-500 leading-relaxed mb-3">
36-
Record interactions, generate visual guides, run playback tests, and track bugs — all locally in your browser. No data ever leaves your machine.
78+
79+
{/* Description */}
80+
<p style={{
81+
fontSize: '12px',
82+
color: '#64748b',
83+
lineHeight: 1.6,
84+
margin: '0 0 16px',
85+
}}>
86+
A privacy-first Chrome extension for QA teams and developers. Record web interactions, generate visual HTML guides, run playback tests with assertions, and track bugs — all without leaving your browser.
3787
</p>
38-
<div className="flex gap-2">
39-
<a
40-
href="https://drknowhow.github.io/Sentinel/"
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
className="flex-1 text-center text-[10px] font-semibold text-cyan-700 bg-cyan-50 hover:bg-cyan-100 border border-cyan-200 rounded-md py-1.5 px-2 transition-colors no-underline"
88+
89+
{/* Divider */}
90+
<div style={{ height: '1px', background: '#e2e8f0', margin: '0 0 16px' }} />
91+
92+
{/* Info rows */}
93+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
94+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
95+
<span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: 500 }}>Platform</span>
96+
<span style={{ fontSize: '11px', color: '#475569', fontWeight: 600 }}>Chrome Extension (MV3)</span>
97+
</div>
98+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
99+
<span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: 500 }}>Data</span>
100+
<span style={{ fontSize: '11px', color: '#16a34a', fontWeight: 600 }}>100% Local — No network requests</span>
101+
</div>
102+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
103+
<span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: 500 }}>License</span>
104+
<span style={{ fontSize: '11px', color: '#475569', fontWeight: 600 }}>MIT</span>
105+
</div>
106+
</div>
107+
108+
{/* Action buttons */}
109+
<div style={{ display: 'flex', gap: '8px' }}>
110+
<button
111+
onClick={() => openUrl('https://drknowhow.github.io/Sentinel/')}
112+
style={{
113+
flex: 1,
114+
display: 'flex',
115+
alignItems: 'center',
116+
justifyContent: 'center',
117+
gap: '6px',
118+
padding: '8px 12px',
119+
fontSize: '12px',
120+
fontWeight: 600,
121+
color: '#ffffff',
122+
background: 'linear-gradient(135deg, #0e7490, #0891b2)',
123+
border: 'none',
124+
borderRadius: '8px',
125+
cursor: 'pointer',
126+
fontFamily: 'inherit',
127+
transition: 'opacity 0.15s',
128+
}}
129+
onMouseEnter={e => (e.currentTarget.style.opacity = '0.9')}
130+
onMouseLeave={e => (e.currentTarget.style.opacity = '1')}
44131
>
132+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
133+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
134+
<polyline points="15 3 21 3 21 9" />
135+
<line x1="10" y1="14" x2="21" y2="3" />
136+
</svg>
45137
Website
46-
</a>
47-
<a
48-
href="https://github.com/drknowhow/Sentinel"
49-
target="_blank"
50-
rel="noopener noreferrer"
51-
className="flex-1 text-center text-[10px] font-semibold text-gray-600 bg-white hover:bg-gray-100 border border-gray-200 rounded-md py-1.5 px-2 transition-colors no-underline"
138+
</button>
139+
<button
140+
onClick={() => openUrl('https://github.com/drknowhow/Sentinel')}
141+
style={{
142+
flex: 1,
143+
display: 'flex',
144+
alignItems: 'center',
145+
justifyContent: 'center',
146+
gap: '6px',
147+
padding: '8px 12px',
148+
fontSize: '12px',
149+
fontWeight: 600,
150+
color: '#475569',
151+
background: '#ffffff',
152+
border: '1px solid #e2e8f0',
153+
borderRadius: '8px',
154+
cursor: 'pointer',
155+
fontFamily: 'inherit',
156+
transition: 'background 0.15s',
157+
}}
158+
onMouseEnter={e => (e.currentTarget.style.background = '#f1f5f9')}
159+
onMouseLeave={e => (e.currentTarget.style.background = '#ffffff')}
52160
>
161+
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
162+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
163+
</svg>
53164
GitHub
54-
</a>
165+
</button>
55166
</div>
56167
</div>
57168
</div>

0 commit comments

Comments
 (0)