Fixed broken packages file, Added Class consistency and consistent tr… (#56) - #59
Merged
Merged
Conversation
…ansition trails through the entire application
|
Skipping CodeAnt AI review — this PR is a back-merge between long-lived branches ( If you want to analyze this anyway (e.g. you resolved conflicts with new logic), comment |
github-actions
Bot
added
bug
📝 WalkthroughWalkthroughThe frontend standardizes transition styling through ChangesUI and landing experience
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Sequence Diagram(s)sequenceDiagram
participant Visitor
participant Hero
participant Router
participant Dashboard
Visitor->>Hero: Select Continue to dashboard
Hero->>Router: Navigate to /dashboard
Router->>Dashboard: Render dashboard route
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
AI
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
74
to
78
| prefersReducedMotion: boolean; | ||
| } | ||
|
|
||
| function Hero({ onLaunchDashboard, prefersReducedMotion }: HeroProps) { | ||
| return ( | ||
| <section | ||
| id="product" | ||
| className="relative min-h-svh flex items-center justify-center px-6 pt-0 mt-0 pb-16 overflow-hidden" | ||
| > | ||
| <OrbitalField prefersReducedMotion={prefersReducedMotion} /> | ||
|
|
||
| <div className="relative z-10 max-w-[720px] text-center flex flex-col items-center"> | ||
| <div className="inline-flex items-center font-technical-data text-xs text-[#4FE0C8] border border-[#1B2436] rounded-full px-3.5 py-1.5 mb-7 bg-[#0C1220]"> | ||
| TRACKING 12,400+ OBJECTS · LIVE | ||
| </div> | ||
|
|
||
| <h1 className="font-display-lg font-bold text-4xl sm:text-5xl md:text-6xl leading-[1.08] text-[#E7EBF3] m-0 tracking-tight"> | ||
| Autonomous traffic control | ||
| <br /> | ||
| for everything in orbit. | ||
| </h1> | ||
|
|
||
| <p className="font-body-ui text-[1.05rem] leading-relaxed text-[#8892A6] mt-6 mb-9 max-w-[560px]"> | ||
| Kepler predicts conjunctions, resolves them autonomously, and hands | ||
| operators a clean, explainable record — before a near-miss ever | ||
| becomes a headline. | ||
| </p> | ||
|
|
||
| <div className="flex gap-3 justify-center flex-wrap"> | ||
| <button | ||
| type="button" | ||
| onClick={onLaunchDashboard} | ||
| className="font-body-ui font-semibold text-[15px] text-[#060A14] bg-[#FFB020] hover:bg-[#e59b15] border-none rounded-lg px-6.5 py-3 cursor-pointer transition-colors duration-150" | ||
| > | ||
| Launch Dashboard | ||
| </button> | ||
| <a | ||
| href="#how-it-works" | ||
| className="font-body-ui font-semibold text-[15px] text-[#E7EBF3] bg-transparent border border-[#1B2436] hover:bg-[#1B2436]/30 rounded-lg px-6.5 py-3 text-none transition-colors duration-150" | ||
| > | ||
| See how it works | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| /* How it works */ |
There was a problem hiding this comment.
HeroProps and OrbitalFieldProps left behind after the local Hero function was removed
Both interfaces were typed exclusively for the deleted local Hero component. Now that the inline function is gone they have no consumer and should be removed.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/pages/LandingPage.tsx
Line: 74-78
Comment:
**Dead interfaces `HeroProps` and `OrbitalFieldProps` left behind after the local `Hero` function was removed**
Both interfaces were typed exclusively for the deleted local `Hero` component. Now that the inline function is gone they have no consumer and should be removed.
How can I resolve this? If you propose a fix, please make it concise.![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/Hero.tsx`:
- Around line 85-92: Update the dashboard CTA in Hero so it uses only one
interactive element: either handle navigation from ShimmerButton’s click
behavior or configure ShimmerButton to render an anchor, then remove the nested
Link wrapper while preserving navigation to /dashboard.
In `@frontend/src/components/ui/globe.tsx`:
- Line 110: Update the globe element’s class list in the relevant component to
replace transition-ui with an opacity-only transition using transition-opacity
and duration-500. Preserve the existing size, opacity, and containment classes
while preventing canvas size or layout changes from being animated.
In `@frontend/src/pages/Debris.tsx`:
- Around line 258-265: Restore the hover transition for both pagination buttons
using the `pn-btn` elements in the Debris page. Add the `transition-ui` utility
alongside `pn-btn` on the PREV and next buttons, or update the shared `pn-btn`
styling to include that transition while preserving existing borders, spacing,
and hover behavior.
- Around line 205-210: Move the shared table padding utility from the NAME
content div to its enclosing <td>, and apply the same padding class to the TYPE
and RISK cells in the debris table. Keep the inner text styling intact while
ensuring all cell contents align with their headers and technical columns.
In `@frontend/src/styles/index.css`:
- Around line 103-106: Restore the original base-layer rules in the global
stylesheet, including the border/outline styling and html font declaration.
Remove the forced remote cursor from the universal selector and preserve
existing cursor utilities such as cursor-pointer, text, resize, and disabled
states; if a custom cursor is required, scope it to its intended surface without
!important.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: db99619c-f20d-46d4-ac8c-7c08750b2031
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
frontend/package.jsonfrontend/src/components/EarthTwin.tsxfrontend/src/components/Hero.tsxfrontend/src/components/layouts/MainLayout.tsxfrontend/src/components/layouts/MarketingLayout.tsxfrontend/src/components/ui/globe.tsxfrontend/src/components/ui/shimmer-button.tsxfrontend/src/pages/AIAgents.tsxfrontend/src/pages/AboutPage.tsxfrontend/src/pages/CollisionCenter.tsxfrontend/src/pages/Dashboard.tsxfrontend/src/pages/Debris.tsxfrontend/src/pages/LandingPage.tsxfrontend/src/pages/NotFound.tsxfrontend/src/pages/Satellites.tsxfrontend/src/pages/SpaceTraffic.tsxfrontend/src/styles/index.css
Comment on lines
+85
to
+92
| <Link to="/dashboard"> | ||
| <ShimmerButton shimmerColor="#4CDfF0"> | ||
| <span className="inline-flex items-center gap-2"> | ||
| Continue to dashboard | ||
| <ArrowRight size={15} /> | ||
| </span> | ||
| </ShimmerButton> | ||
| </Link> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== Hero.tsx outline ==\n'
ast-grep outline frontend/src/components/Hero.tsx --view expanded || true
printf '\n== shimmer-button outline ==\n'
ast-grep outline frontend/src/components/ui/shimmer-button.tsx --view expanded || true
printf '\n== Relevant Hero.tsx lines ==\n'
nl -ba frontend/src/components/Hero.tsx | sed -n '70,105p'
printf '\n== Relevant shimmer-button.tsx lines ==\n'
nl -ba frontend/src/components/ui/shimmer-button.tsx | sed -n '1,220p'Repository: 7-Blocks/Kepler
Length of output: 703
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Hero.tsx excerpt =="
awk 'NR>=70 && NR<=105 {printf "%4d %s\n", NR, $0}' frontend/src/components/Hero.tsx
echo
echo "== shimmer-button.tsx =="
awk 'NR>=1 && NR<=220 {printf "%4d %s\n", NR, $0}' frontend/src/components/ui/shimmer-button.tsxRepository: 7-Blocks/Kepler
Length of output: 5896
Avoid nesting ShimmerButton inside Link. ShimmerButton renders a <button>, so this becomes <a><button>…</button></a>. Keep a single interactive element here — either navigate from the button click handler or make ShimmerButton render an anchor.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/Hero.tsx` around lines 85 - 92, Update the dashboard
CTA in Hero so it uses only one interactive element: either handle navigation
from ShimmerButton’s click behavior or configure ShimmerButton to render an
anchor, then remove the nested Link wrapper while preserving navigation to
/dashboard.
| <canvas | ||
| className={cn( | ||
| "size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]" | ||
| "size-full opacity-0 transition-ui contain-[layout_paint_size]" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the component and locate the shared transition utility
ast-grep outline frontend/src/components/ui/globe.tsx --view expanded || true
rg -n --no-heading "transition-ui|transition-opacity|duration-500|transition-all" frontend/src/components/ui -S || true
# Read the relevant section of the component
sed -n '80,130p' frontend/src/components/ui/globe.tsx
# Find where the utility is defined
rg -n --no-heading "transition-ui" frontend/src -S || trueRepository: 7-Blocks/Kepler
Length of output: 13712
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the utility definition
sed -n '96,122p' frontend/src/styles/index.css
# Re-read the globe component around the canvas
sed -n '100,116p' frontend/src/components/ui/globe.tsxRepository: 7-Blocks/Kepler
Length of output: 1077
Keep the globe transition opacity-only.
transition-ui applies transition-all duration-300, so the canvas can animate size/layout changes as it resizes. This element only needs an opacity fade, so transition-opacity duration-500 is the safer fit here.
Proposed fix
- "size-full opacity-0 transition-ui contain-[layout_paint_size]"
+ "size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "size-full opacity-0 transition-ui contain-[layout_paint_size]" | |
| "size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/ui/globe.tsx` at line 110, Update the globe element’s
class list in the relevant component to replace transition-ui with an
opacity-only transition using transition-opacity and duration-500. Preserve the
existing size, opacity, and containment classes while preventing canvas size or
layout changes from being animated.
Comment on lines
+205
to
+210
| <tr key={obj.id} className="hover:bg-primary-container/5 transition-ui"> | ||
| <td> | ||
| <div className="table-data-technical font-semibold text-on-surface text-sm">{obj.name}</div> | ||
| <div className="text-[10px] text-on-surface-variant">NORAD: {obj.catalog_number}</div> | ||
| </td> | ||
| <td className="p-4"> | ||
| <td> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Apply cell padding to the complete table cells.
table-data-technical is applied only to the NAME <div> at Line 207, so the NORAD line is unpadded. The TYPE and RISK cells at Lines 210 and 228 are also bare <td> elements, making their contents misalign with the padded headers and technical columns. Apply the shared padding utility (or p-4) to the <td> elements instead.
Also applies to: 228-228
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/Debris.tsx` around lines 205 - 210, Move the shared table
padding utility from the NAME content div to its enclosing <td>, and apply the
same padding class to the TYPE and RISK cells in the debris table. Keep the
inner text styling intact while ensuring all cell contents align with their
headers and technical columns.
Comment on lines
+258
to
+265
| className="pn-btn" | ||
| > | ||
| ← PREV | ||
| </button> | ||
| <button | ||
| onClick={() => setPage(p => Math.min(pagination.pages, p + 1))} | ||
| disabled={page === pagination.pages} | ||
| className="px-3 py-1 border border-border-panel font-label-caps text-[10px] hover:bg-surface-variant/50 disabled:opacity-40 cursor-pointer" | ||
| className="pn-btn" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve pagination transitions in pn-btn.
pn-btn in frontend/src/styles/index.css:124-126 defines borders, spacing, and hover styling but not transition-ui. Replacing the previous inline transition classes with only pn-btn removes the hover animation from both pagination buttons. Add transition-ui to the shared utility or retain it on these buttons.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/Debris.tsx` around lines 258 - 265, Restore the hover
transition for both pagination buttons using the `pn-btn` elements in the Debris
page. Add the `transition-ui` utility alongside `pn-btn` on the PREV and next
buttons, or update the shared `pn-btn` styling to include that transition while
preserving existing borders, spacing, and hover behavior.
krishkhinchi
approved these changes
Jul 16, 2026
This was referenced Jul 17, 2026
This was referenced Jul 31, 2026
21 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
transition-uiclass.Related Issue
#56
Checklist
npm run buildfinishes without errors <----- Please make sure to add this to the templateScreenshots / Screen Recordings
Breaking Changes
No Breaking Changes
ECSoC26 Submission
ECSoC26-L1– BeginnerECSoC26-L2– IntermediateECSoC26-L3– AdvancedSummary by CodeRabbit
New Features
Style
transition-uistyling utility, refining hover/active/focus animations and improving responsive weather HUD visibility.Greptile Summary
This PR fixes a broken
motionpackage dependency, removes a duplicate localHerocomponent that was crashingLandingPage, and introduces atransition-uiutility class applied uniformly across the app. It also extracts shared table/pagination utility classes (table-head,table-data,table-data-technical,pn-btn) to reduce repetition.motion@^12.42.2topackage.json; note this overlaps with the existingframer-motiondependency (they share the same codebase).Herofunction fromLandingPage.tsxand wires the hero CTA button to/dashboardvia<Link>.transition-all/transition-colorswithtransition-uiacross ~18 files, and introduces four shared table cell classes inindex.css; thetable-data-technicalclass omits the originaltext-[11px]size and theDebris.tsxTYPE/RISK cells were left without any padding class.Confidence Score: 4/5
Safe to merge after fixing the missing padding on the TYPE and RISK cells and the missing font-size in table-data-technical.
The transition unification and hero fix are clean, but the new table-data-technical utility class silently drops the explicit text-[11px] size that was on every original data cell, and two columns in the Debris table (TYPE and RISK) were left with no padding class at all. These are direct visual regressions on the changed table rows.
frontend/src/styles/index.css (missing font-size in table-data-technical) and frontend/src/pages/Debris.tsx (TYPE and RISK td elements have no padding class).
Important Files Changed
Comments Outside Diff (2)
frontend/src/pages/Debris.tsx, line 413-416 (link)table-data-technicalapplied to inner<div>instead of the<td>, leaving the cell itself without paddingThe original code placed
p-4on the<td>. After this change thep-4insidetable-data-technicalis applied to the inner<div>, while the<td>has no class at all. Every other<td>in the same table uses the class directly on the<td>— this cell will render with different spacing, misaligning the first column.Prompt To Fix With AI
frontend/src/components/ui/globe.tsx, line 227-230 (link)The original class was
transition-opacity duration-500. After replacing withtransition-uithe animation becomestransition-all duration-300, shortening the fade-in by 40% and enabling all CSS properties to transition. Consider keeping a localduration-500override alongsidetransition-uiif the longer fade was intentional.Prompt To Fix With AI
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!
Reviews (2): Last reviewed commit: "remove alien cursor for now" | Re-trigger Greptile