Crypto-Jaguars/Revo-Marketplace

Implement Floating Producers Button

Open

#122 opened on Sep 26, 2025

View on GitHub
 (4 comments) (0 reactions) (1 assignee)TypeScript (71 forks)auto 404
Frontendeasygood first issueonlydust-wave

Repository metrics

Stars
 (5 stars)
PR merge metrics
 (PR metrics pending)

Description

Task Description Create fixed floating button that links to producers page with informative tooltip.

Deliverable Circular floating button with wheat icon, hover effects, and "Support your local producer" tooltip.

Requirements

  • Fixed position in top-right of screen
  • Wheat icon from Lucide React
  • Green gradient with 3D effects
  • Tooltip with informative text
  • Link to /producers

Technical Requirements

  • Fixed position with high z-index (z-50)
  • CSS gradients from light to dark green
  • Hover effects with transform and shadow
  • Tooltip with opacity transition
  • Visible only on desktop

Content Updates Required

  • Bilingual tooltip text
  • Colors: gradient from #38b66a to #1f5f35
  • Icon: Wheat with size h-8 w-8

Additional Notes

  • "Floating" effect with shadows
  • Tooltip appears only on hover
  • Focus states for accessibility

Definition of Done

  • Button visible in fixed position
  • Link works correctly
  • Hover effects execute
  • Tooltip appears and disappears
  • Accessible with keyboard

Contributor guide

Research direction
Create a new component for the floating button. Use fixed positioning, a Wheat icon from Lucide React, green gradient, hover effects, and a tooltip that appears on hover. Ensure it links to /producers and is visible only on desktop.
Tech stack
typescriptreacttailwindcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCSS gradientsLucide React icons
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80