unkey icon indicating copy to clipboard operation
unkey copied to clipboard

fix(www): analytics bento code snippet is not readable

Open unrenamed opened this issue 4 months ago • 5 comments

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.

Screenshot 2024-10-10 at 21 45 24 Screenshot 2024-10-10 at 21 46 10 Screenshot 2024-10-10 at 21 48 19

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.
  • Improvements

    • Updated layout and styling of the AnalyticsBento component for a better user experience.
    • Added flexibility in styling through a new className prop in the BentoText function.

unrenamed avatar Oct 10 '24 19:10 unrenamed