Skip to content

Commit 3185a1e

Browse files
authored
fix: Download Badge button remains enabled but performs no action in GitHub Action mode (JhaSourav07#1759)
## Description Fixes JhaSourav07#1725 ### Summary The **Download Badge** button remained enabled in **GitHub Action** export mode even though badge downloads were not supported for that export type. This created a confusing user experience because the button appeared functional but performed no action. ### Changes Made * Disabled the **Download Badge** button when GitHub Action export mode is selected. * Added disabled styling to visually indicate that the action is unavailable. * Updated the button text to **"Download Not Available"**. * Improved accessibility by providing a descriptive `aria-label` for the disabled state. ### Testing * Verified Markdown export remains unaffected. * Verified HTML export remains unaffected. * Verified GitHub Action export displays a disabled button with clear messaging. * Ran `npm run lint` successfully (warnings only, no errors). * Verified changes locally on the customization page. ## Pillar * [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview ### Before * Download Badge button remained enabled in GitHub Action mode. * Clicking the button did not download any file. <img width="1440" height="438" alt="Screenshot 2026-05-30 at 5 34 18 PM" src="https://github.com/user-attachments/assets/a203b42a-2d00-45f4-8651-a4aa69109f9b" /> <img width="1440" height="900" alt="Screenshot 2026-05-30 at 5 34 01 PM" src="https://github.com/user-attachments/assets/aacfdc45-bb40-41dd-a71d-677de25d8daf" /> ### After * Download Badge button is disabled in GitHub Action mode. * Button label clearly indicates that downloading is unavailable. <img width="726" height="749" alt="Screenshot 2026-05-30 at 8 26 49 PM" src="https://github.com/user-attachments/assets/43611c13-0b3e-467f-8972-34973a1ac7c2" /> <img width="726" height="749" alt="Screenshot 2026-05-30 at 8 27 01 PM" src="https://github.com/user-attachments/assets/44e11e49-a569-4b9b-8399-8aa93cff944b" /> <img width="726" height="749" alt="Screenshot 2026-05-30 at 8 27 17 PM" src="https://github.com/user-attachments/assets/daa304fe-4036-4835-82c9-cca78227a6de" /> ## Checklist before requesting a review: * [x] I have read the `CONTRIBUTING.md` file. * [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). * [ ] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). * [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). * [x] I have updated `README.md` if I added a new theme or URL parameter. * [x] I have started the repo. * [x] I have made sure that I have only one commit to merge in this PR. * [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard. * [ ] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 5868401 + 55c2711 commit 3185a1e

1 file changed

Lines changed: 13 additions & 7 deletions

File tree

app/customize/components/ExportPanel.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,15 +165,17 @@ export function ExportPanel({
165165
<button
166166
type="button"
167167
onClick={handleDownloadBadge}
168-
disabled={!hasUsername || isDownloading}
168+
disabled={!hasUsername || isDownloading || format === 'action'}
169169
aria-label={
170-
hasUsername
171-
? 'Download custom monolith layout as an image'
172-
: 'Add a GitHub username to enable image downloads'
170+
!hasUsername
171+
? 'Add a GitHub username to enable image downloads'
172+
: format === 'action'
173+
? 'Download is not available in GitHub Action mode'
174+
: 'Download custom monolith layout as an image'
173175
}
174176
className={`relative inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${
175-
!hasUsername || isDownloading
176-
? 'bg-gray-200/90 border border-black/10 text-gray-500 cursor-not-allowed dark:bg-white/10 dark:border-white/10 dark:text-white/60'
177+
!hasUsername || isDownloading || format === 'action'
178+
? 'bg-gray-200/90 border border-black/10 text-gray-500 cursor-not-allowed dark:bg-white/10 dark:border-white/10 dark:text-white/35'
177179
: 'bg-emerald-500/10 border border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/20 hover:scale-[1.03] active:scale-[0.97]'
178180
}`}
179181
>
@@ -198,7 +200,11 @@ export function ExportPanel({
198200
</>
199201
)}
200202
</svg>
201-
{isDownloading ? 'Downloading...' : 'Download Badge'}
203+
{format === 'action'
204+
? 'Download Not Available'
205+
: isDownloading
206+
? 'Downloading...'
207+
: 'Download Badge'}
202208
</button>
203209

204210
{/* Clipboard Copy Button */}

0 commit comments

Comments
 (0)