Move the APK download link up in the "production" area of the box#384
Move the APK download link up in the "production" area of the box#384AnthonyRonning merged 2 commits intomasterfrom
Conversation
📝 WalkthroughWalkthroughReflowed the downloads UI: App Store and Google Play badges are placed inside dedicated 80px containers; dividers/margins adjusted; Android APK direct-download link moved under the Play badge and beta actions reorganized. (45 words) Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/routes/downloads.tsx (1)
244-286: Successfully achieves PR objective; consider slightly larger text for APK link.The restructuring effectively moves the APK download link into the production area alongside the Google Play badge, resolving the visual confusion with the beta program. The layout is consistent with the iOS section and properly separates production from beta downloads.
However, the APK direct download link uses
text-xs(12px), which is quite small for an important alternative download method. Users looking for the direct APK option may have difficulty noticing or clicking this link, especially on mobile devices or for users with visual impairments.♻️ Consider increasing text size for better visibility
<a href={downloadUrls.androidApk} - className="text-xs text-[hsl(var(--marketing-text-muted))] hover:text-foreground hover:underline" + className="text-sm text-[hsl(var(--marketing-text-muted))] hover:text-foreground hover:underline" target="_blank" rel="noopener noreferrer" > or download APK directly </a>Using
text-sm(14px) instead oftext-xs(12px) would improve readability while still maintaining a subtle appearance relative to the main badge.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/routes/downloads.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use path aliases (@/*maps to./src/*) for imports in TypeScript/React files
Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code
Maintain strict TypeScript and avoid usinganytype
Use PascalCase for component names and camelCase for variables and function names
Use functional components with React hooks instead of class components
Use React context for global state management and TanStack Query for server state management
Runjust format,just lint, andjust buildafter making TypeScript/React changes to ensure code quality and compilation
Files:
frontend/src/routes/downloads.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build-android
- GitHub Check: build-ios
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
frontend/src/routes/downloads.tsx (1)
198-233: LGTM! Clean layout restructuring for iOS section.The changes effectively separate the production App Store badge from the TestFlight beta section using a dedicated 80px container and clear border separator. The layout is well-structured and maintains proper visual hierarchy.
Greptile OverviewGreptile SummaryThis PR successfully addresses a UX issue where the Android APK download link appeared to be part of the beta program, when it's actually for the production version. The changes restructure the mobile app download sections to improve visual organization and alignment. Key ChangesLayout Restructuring:
Android Section Improvements:
Consistency Considerations:
Visual ImpactThe changes successfully clarify that the APK is a production download option, not a beta feature, which was the primary goal of this PR. The fixed-height containers provide consistent visual alignment across platforms on desktop views. Confidence Score: 4/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant DownloadsPage
participant GitHub
User->>Browser: Navigate to /downloads
Browser->>DownloadsPage: Load page component
DownloadsPage->>DownloadsPage: Render TopNav & Header
alt Desktop Section
DownloadsPage->>User: Display macOS & Linux cards
Note over User,DownloadsPage: macOS/Linux cards with flex-grow
end
alt Mobile Section (iOS)
DownloadsPage->>User: Display iOS card
Note over User,DownloadsPage: h-[80px] container with App Store badge
DownloadsPage->>User: Display TestFlight beta section
end
alt Mobile Section (Android - This PR)
DownloadsPage->>User: Display Android card
Note over User,DownloadsPage: h-[80px] container with:<br/>- Google Play badge<br/>- APK download link (moved here)
User->>DownloadsPage: Click "download APK directly"
DownloadsPage->>GitHub: Request latest APK
GitHub->>User: Download APK file
DownloadsPage->>User: Display beta section below
Note over User,DownloadsPage: Beta enrollment button<br/>(APK link removed from here)
end
alt Web Section
DownloadsPage->>User: Display web app option
end
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Additional Comments (1)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! Prompt To Fix With AIThis is a comment left during a code review.
Path: frontend/src/routes/downloads.tsx
Line: 272:272
Comment:
The `gap-2` property has no effect since this container now only has one child element (after moving the APK link to the production section). For consistency with the iOS beta section which uses `flex justify-center` for a single child, consider simplifying this container.
```suggestion
<div className="flex justify-center">
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise. |
Deploying maple with
|
| Latest commit: |
0958bb8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0f0d3346.maple-ca8.pages.dev |
| Branch Preview URL: | https://downloadpage.maple-ca8.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/routes/downloads.tsx (1)
241-241: Consider addingflex-growfor layout consistency.The iOS description (line 195) uses
flex-growto maintain consistent card layouts, but this Android description doesn't. While the visual impact is minimal given similar text lengths, addingflex-growwould ensure consistent vertical spacing if descriptions change in the future.♻️ Suggested consistency fix
- <p className="text-[hsl(var(--marketing-text-muted))] mb-6"> + <p className="text-[hsl(var(--marketing-text-muted))] mb-6 flex-grow"> Download our native Android app for phones and tablets. </p>
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/routes/downloads.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use path aliases (@/*maps to./src/*) for imports in TypeScript/React files
Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code
Maintain strict TypeScript and avoid usinganytype
Use PascalCase for component names and camelCase for variables and function names
Use functional components with React hooks instead of class components
Use React context for global state management and TanStack Query for server state management
Runjust format,just lint, andjust buildafter making TypeScript/React changes to ensure code quality and compilation
Files:
frontend/src/routes/downloads.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build-android
- GitHub Check: build-ios
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
frontend/src/routes/downloads.tsx (2)
198-212: LGTM! iOS production area properly structured.The App Store badge is now in a dedicated 80px container, creating clear visual separation from the beta section below.
244-266: Excellent work! APK link successfully moved to production area.The Android production area now clearly shows both the Google Play badge and the direct APK download option together in the 80px container, achieving the PR's main objective. The APK link no longer appears as part of the beta program, and the layout is well-structured with proper spacing and accessibility attributes.
|
ready for review |
2 participants
The APK link is for the production version but it looked like it was part of the beta program. This moves the APK link next to the Google Play prod badge and adjust elements in the box so they are mostly aligned horizontally on a desktop browser.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.