unkey
unkey copied to clipboard
fix(www): analytics bento code snippet is not readable
What does this PR do?
- [x] Adds hover effect to analytics bento removing gradient background
- [x] Makes copy code button sticky to top-right corner
- [x] Implements independent vertical scrolls for language switcher and code editor
Fixes #2216
ℹ️ The screenshots below show the updated (top) version of the Realtime Analytics bento and the previous version (bottom) on the landing page.
Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] Chore (refactoring code, technical debt, workflow improvements)
- [ ] Enhancement (small improvements)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
How should this be tested?
- Test A
- Go to http://go.unkey.com
- Scroll to the
Realtime Analytics
section - Click
Show API Code
- Ensure the code editor is not fully visible and readable on mouse hover
- Ensure the code editor has an independent vertical scroll so that the entire code can be viewed
- Ensure the copy button is sticky
Checklist
Required
- [x] Filled out the "How to test" section in this PR
- [x] Read Contributing Guide
- [x] Self-reviewed my own code
- [ ] Commented on my code in hard-to-understand areas
- [ ] Ran
pnpm build
- [x] Ran
pnpm fmt
- [ ] Checked for warnings, there are none
- [ ] Removed all
console.logs
- [x] Merged the latest changes from main onto my branch with
git pull origin main
- [x] My changes don't cause any responsiveness issues
Appreciated
- [x] If a UI change was made: Added a screen recording or screenshots to this PR
- [ ] Updated the Unkey Docs if changes were necessary
Summary by CodeRabbit
-
New Features
- Introduced a
CopyCodeSnippetButton
for easier code copying. - Enhanced
LanguageSwitcher
for improved styling and overflow management.
- Introduced a
-
Improvements
- Updated layout and styling of the
AnalyticsBento
component for a better user experience. - Added flexibility in styling through a new
className
prop in theBentoText
function.
- Updated layout and styling of the