Mobil resp - #81
Mobil resp#81
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughAdds a new ChangesCGPA Feature and Calculator Redesign
Viewport Configuration
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant AboutPage
participant CgpaFeature
participant Router
AboutPage->>CgpaFeature: render inside Suspense boundary
CgpaFeature->>CgpaFeature: animate content and visual sections
CgpaFeature->>Router: navigate via CTA Link to /cgpa-calculator
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
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 |
|
Caution Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted. Error details |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
app/(public)/cgpa-calculator/page.tsx (1)
408-408: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant conditional:
result > parseFloat(currentCgpa)is always true here.By the time this branch executes, the preceding conditions have already ruled out
result > 10,result <= 0, andresult <= parseFloat(currentCgpa). The&&check at line 408 always evaluates totrueand can be removed for clarity.🧹 Proposed cleanup
- {result > parseFloat(currentCgpa) && ( + {( <div className="absolute -right-4 top-0 -translate-y-1/4 translate-x-full hidden sm:flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20"> <TrendingUp className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" /> <span className="text-xs font-bold text-emerald-600 dark:text-emerald-400"> +{(result - parseFloat(currentCgpa)).toFixed(2)}{" "} jump </span> </div> - )} + )}🤖 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 `@app/`(public)/cgpa-calculator/page.tsx at line 408, The conditional inside the cgpa-calculator page is redundant because the surrounding branch in the render logic already guarantees that `result > parseFloat(currentCgpa)` holds. Update the JSX in the `page.tsx` component to remove that extra `&&` guard and keep only the branch logic that depends on the earlier checks, so the conditional rendering stays clear and easier to read.
🤖 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 `@app/`(public)/cgpa-calculator/page.tsx:
- Line 166: The semester number inputs in cgpa-calculator page reset to 0 when
cleared because Number("") is used in the onChange handlers. Update the handlers
for Total Semesters and Completed Sems to guard against empty string input
before calling setTotalSemesters and the corresponding setter, so clearing the
field does not force a zero state. Use the existing onChange logic in the
cgpa-calculator page component to preserve an empty/unset state instead of
converting it to 0.
- Around line 77-102: The infinite orb animations in the CGPA calculator page
are missing reduced-motion support, so update the motion setup in the page
component to respect prefers-reduced-motion. Use Framer Motion’s
useReducedMotion (or an equivalent flag) in the same component that renders the
three orb motion.div elements, and conditionally disable or simplify the
animate/transition props when reduced motion is requested. Apply the same gating
to Orb 1, Orb 2, and Orb 3 so the large background blur elements stop animating
for sensitive users and on low-power devices.
- Line 439: The className on the progress bar wrapper contains invalid chained
Tailwind opacity modifiers, which should be simplified. Update the `div` in
`cgpa-calculator/page.tsx` to use a single opacity value for each utility:
replace the `dark:bg-white/[0.06]/80` and `border-white/80/50` parts with valid
Tailwind classes such as `dark:bg-white/[0.06]` and `border-white/80`, keeping
the rest of the styling unchanged.
In `@app/layout.tsx`:
- Around line 8-13: The viewport config in the app layout is blocking browser
zoom via userScalable and maximumScale settings. Update the viewport export in
the layout module to allow pinch-to-zoom by removing the zoom restrictions,
keeping only standard responsive viewport settings. Use the viewport object in
layout.tsx as the location to make this change.
In `@features/landing/cgpa-feature.tsx`:
- Around line 97-105: The CTA in the landing CGPA feature is using invalid
nested interactive elements by placing a button inside Link. Update the
cgpa-feature component so the Link itself in the launch action carries the
button styling and behavior, and remove the inner button element while keeping
the existing class names, ArrowRight icon, and label intact.
- Around line 80-81: The icon container in the CGPA landing feature is using
deprecated Tailwind opacity utilities and also has conflicting background
classes. Update the className on the `div` in the `CGPAFeature` item render so
it uses slash-based opacity with `bg-current` (for example the `bg-current` tint
pattern) and remove the dead `bg-*` color entries from `item.color`, keeping the
`item.color` reference only for non-background styling if needed.
---
Nitpick comments:
In `@app/`(public)/cgpa-calculator/page.tsx:
- Line 408: The conditional inside the cgpa-calculator page is redundant because
the surrounding branch in the render logic already guarantees that `result >
parseFloat(currentCgpa)` holds. Update the JSX in the `page.tsx` component to
remove that extra `&&` guard and keep only the branch logic that depends on the
earlier checks, so the conditional rendering stays clear and easier to read.
🪄 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
Run ID: 3716956f-25a3-447c-bed5-a9bfc3955892
📒 Files selected for processing (5)
app/(public)/about/page.tsxapp/(public)/cgpa-calculator/page.tsxapp/globals.cssapp/layout.tsxfeatures/landing/cgpa-feature.tsx
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 6
🧹 Nitpick comments (1)
app/(public)/cgpa-calculator/page.tsx (1)
408-408: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant conditional:
result > parseFloat(currentCgpa)is always true here.By the time this branch executes, the preceding conditions have already ruled out
result > 10,result <= 0, andresult <= parseFloat(currentCgpa). The&&check at line 408 always evaluates totrueand can be removed for clarity.🧹 Proposed cleanup
- {result > parseFloat(currentCgpa) && ( + {( <div className="absolute -right-4 top-0 -translate-y-1/4 translate-x-full hidden sm:flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20"> <TrendingUp className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" /> <span className="text-xs font-bold text-emerald-600 dark:text-emerald-400"> +{(result - parseFloat(currentCgpa)).toFixed(2)}{" "} jump </span> </div> - )} + )}🤖 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 `@app/`(public)/cgpa-calculator/page.tsx at line 408, The conditional inside the cgpa-calculator page is redundant because the surrounding branch in the render logic already guarantees that `result > parseFloat(currentCgpa)` holds. Update the JSX in the `page.tsx` component to remove that extra `&&` guard and keep only the branch logic that depends on the earlier checks, so the conditional rendering stays clear and easier to read.
🤖 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 `@app/`(public)/cgpa-calculator/page.tsx:
- Line 166: The semester number inputs in cgpa-calculator page reset to 0 when
cleared because Number("") is used in the onChange handlers. Update the handlers
for Total Semesters and Completed Sems to guard against empty string input
before calling setTotalSemesters and the corresponding setter, so clearing the
field does not force a zero state. Use the existing onChange logic in the
cgpa-calculator page component to preserve an empty/unset state instead of
converting it to 0.
- Around line 77-102: The infinite orb animations in the CGPA calculator page
are missing reduced-motion support, so update the motion setup in the page
component to respect prefers-reduced-motion. Use Framer Motion’s
useReducedMotion (or an equivalent flag) in the same component that renders the
three orb motion.div elements, and conditionally disable or simplify the
animate/transition props when reduced motion is requested. Apply the same gating
to Orb 1, Orb 2, and Orb 3 so the large background blur elements stop animating
for sensitive users and on low-power devices.
- Line 439: The className on the progress bar wrapper contains invalid chained
Tailwind opacity modifiers, which should be simplified. Update the `div` in
`cgpa-calculator/page.tsx` to use a single opacity value for each utility:
replace the `dark:bg-white/[0.06]/80` and `border-white/80/50` parts with valid
Tailwind classes such as `dark:bg-white/[0.06]` and `border-white/80`, keeping
the rest of the styling unchanged.
In `@app/layout.tsx`:
- Around line 8-13: The viewport config in the app layout is blocking browser
zoom via userScalable and maximumScale settings. Update the viewport export in
the layout module to allow pinch-to-zoom by removing the zoom restrictions,
keeping only standard responsive viewport settings. Use the viewport object in
layout.tsx as the location to make this change.
In `@features/landing/cgpa-feature.tsx`:
- Around line 97-105: The CTA in the landing CGPA feature is using invalid
nested interactive elements by placing a button inside Link. Update the
cgpa-feature component so the Link itself in the launch action carries the
button styling and behavior, and remove the inner button element while keeping
the existing class names, ArrowRight icon, and label intact.
- Around line 80-81: The icon container in the CGPA landing feature is using
deprecated Tailwind opacity utilities and also has conflicting background
classes. Update the className on the `div` in the `CGPAFeature` item render so
it uses slash-based opacity with `bg-current` (for example the `bg-current` tint
pattern) and remove the dead `bg-*` color entries from `item.color`, keeping the
`item.color` reference only for non-background styling if needed.
---
Nitpick comments:
In `@app/`(public)/cgpa-calculator/page.tsx:
- Line 408: The conditional inside the cgpa-calculator page is redundant because
the surrounding branch in the render logic already guarantees that `result >
parseFloat(currentCgpa)` holds. Update the JSX in the `page.tsx` component to
remove that extra `&&` guard and keep only the branch logic that depends on the
earlier checks, so the conditional rendering stays clear and easier to read.
🪄 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
Run ID: 3716956f-25a3-447c-bed5-a9bfc3955892
📒 Files selected for processing (5)
app/(public)/about/page.tsxapp/(public)/cgpa-calculator/page.tsxapp/globals.cssapp/layout.tsxfeatures/landing/cgpa-feature.tsx
🛑 Comments failed to post (6)
app/(public)/cgpa-calculator/page.tsx (3)
77-102: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
No
prefers-reduced-motionhandling for infinite orb animations.Three large (800–1000px) blurred elements animate infinitely with no reduced-motion fallback. Users with vestibular sensitivities will still see continuous motion. This also adds GPU compositing load on mobile devices, which partially counteracts the PR's mobile spacing improvements.
♿ Proposed fix: gate animations with useReducedMotion
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion"; export default function CgpaCalculatorPage() { // ... existing state ... + const prefersReducedMotion = useReducedMotion(); return ( <main className="relative min-h-screen pt-28 pb-24 overflow-hidden bg-slate-50 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-50/40 via-white to-slate-50 dark:bg-none dark:bg-[`#020617`]"> {/* Ultra-Premium Dynamic Ambient Background */} <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none flex items-center justify-center"> {/* Orb 1: Top Left Blue */} <motion.div - animate={{ x: [0, 80, 0], y: [0, 60, 0], scale: [1, 1.1, 1] }} - transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }} + animate={prefersReducedMotion ? {} : { x: [0, 80, 0], y: [0, 60, 0], scale: [1, 1.1, 1] }} + transition={prefersReducedMotion ? { duration: 0 } : { duration: 20, repeat: Infinity, ease: "easeInOut" }} className="absolute -top-[20%] -left-[10%] h-[900px] w-[900px] rounded-full bg-blue-500/10 dark:bg-blue-500/5 blur-[160px] mix-blend-multiply dark:mix-blend-normal" />Repeat the same
prefersReducedMotiongating for Orb 2 and Orb 3.🤖 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 `@app/`(public)/cgpa-calculator/page.tsx around lines 77 - 102, The infinite orb animations in the CGPA calculator page are missing reduced-motion support, so update the motion setup in the page component to respect prefers-reduced-motion. Use Framer Motion’s useReducedMotion (or an equivalent flag) in the same component that renders the three orb motion.div elements, and conditionally disable or simplify the animate/transition props when reduced motion is requested. Apply the same gating to Orb 1, Orb 2, and Orb 3 so the large background blur elements stop animating for sensitive users and on low-power devices.
166-166: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Clearing number inputs silently sets semester values to 0.
Number("")returns0, so when a user clears the "Total Semesters" or "Completed Sems" field, the state becomes0. WithcurrentSemester >= totalSemesters(e.g.,4 >= 0), this triggers the confusing error "You have already completed all semesters!" even though the user simply cleared the field. Themin/maxHTML attributes don't prevent this since they only constrain spinner/step behavior, not direct typing or programmatic state updates.🔧 Proposed fix: guard against empty string conversion
<input type="number" min="1" max="12" value={totalSemesters} - onChange={(e) => setTotalSemesters(Number(e.target.value))} + onChange={(e) => { + const val = e.target.value; + if (val === "") return; + const num = Number(val); + if (!isNaN(num)) setTotalSemesters(num); + }} className="w-full pl-14 pr-4 py-3 sm:py-4 rounded-xl border-2 border-slate-100 dark:border-white/5 bg-white dark:bg-white/[0.03] text-slate-900 dark:text-white font-black text-lg sm:text-xl focus:bg-white dark:focus:bg-black/40 focus:border-blue-500 dark:focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition-all shadow-sm hover:shadow-md" />Apply the same pattern to the "Completed Sems" handler at line 188.
Also applies to: 188-188
🤖 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 `@app/`(public)/cgpa-calculator/page.tsx at line 166, The semester number inputs in cgpa-calculator page reset to 0 when cleared because Number("") is used in the onChange handlers. Update the handlers for Total Semesters and Completed Sems to guard against empty string input before calling setTotalSemesters and the corresponding setter, so clearing the field does not force a zero state. Use the existing onChange logic in the cgpa-calculator page component to preserve an empty/unset state instead of converting it to 0.
439-439: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash set -euo pipefail printf '\n== relevant file lines ==\n' sed -n '430,446p' 'app/(public)/cgpa-calculator/page.tsx' printf '\n== tailwind references ==\n' rg -n --glob 'package.json' --glob 'tailwind.config.*' --glob 'postcss.config.*' --glob '*.css' '"tailwindcss"|tailwindcss' . printf '\n== nearby similar class patterns ==\n' rg -n 'dark:bg-white/\[0\.06\]|border-white/80|/80/50|/\[0\.06\]/80' 'app/(public)/cgpa-calculator/page.tsx'Repository: imuniqueshiv/HyperLearningTech
Length of output: 4795
🏁 Script executed:
#!/bin/bash set -euo pipefail printf '\n== package.json tailwind entry ==\n' sed -n '1,220p' package.json 2>/dev/null || true printf '\n== app file around target ==\n' nl -ba 'app/(public)/cgpa-calculator/page.tsx' | sed -n '434,442p' printf '\n== search for exact tokens in repo ==\n' rg -n 'dark:bg-white/\[0\.06\]/80|border-white/80/50|dark:bg-white/\[0\.06\]|border-white/80' .Repository: imuniqueshiv/HyperLearningTech
Length of output: 1910
🏁 Script executed:
#!/bin/bash set -euo pipefail printf '\n== package manager / tailwind version ==\n' if [ -f package.json ]; then python3 - <<'PY' import json from pathlib import Path p = json.loads(Path("package.json").read_text()) for key in ("dependencies","devDependencies","peerDependencies"): d=p.get(key,{}) if "tailwindcss" in d: print(key, "tailwindcss", d["tailwindcss"]) PY fi printf '\n== target lines ==\n' nl -ba 'app/(public)/cgpa-calculator/page.tsx' | sed -n '437,441p' printf '\n== search exact invalid-looking patterns ==\n' rg -n 'dark:bg-white/\[0\.06\]/80|border-white/80/50|dark:bg-white/\[0\.06\]|\bborder-white/80\b' 'app/(public)/cgpa-calculator/page.tsx'Repository: imuniqueshiv/HyperLearningTech
Length of output: 306
🌐 Web query:
Tailwind arbitrary color opacity syntax one opacity modifier slash after arbitrary value docs💡 Result:
In Tailwind CSS, you can apply an opacity modifier to an arbitrary color value by appending a forward slash (/) followed by the opacity value [1][2]. When using an arbitrary color value (defined with square brackets), you can include the opacity modifier either outside or inside the square brackets, depending on the desired behavior [1][3]. Syntax Options: 1. Opacity modifier outside the brackets (recommended for readability): Use the syntax
bg-[#ff0000]/50to apply 50% opacity to an arbitrary hex color [3]. 2. Opacity modifier inside the brackets: If you are passing a full CSS color function or an arbitrary value that includes the alpha channel directly, you can define it within the brackets, such asbg-[#ff0000/[.5]][1][3]. Key Details: - Arbitrary Values: This syntax is part of Tailwind's Just-in-Time (JIT) engine (introduced in v3.0) and is fully supported for all color-related utilities, including text, background, border, and ring colors [2][3]. - CSS Variables: You can also use CSS variables as arbitrary opacity values [2]. For example,bg-red-500/[var(--my-opacity)]allows for dynamic control over the alpha channel [2][4]. - Numeric vs. Percentage: While standard utilities often use a 0–100 scale, when using arbitrary values inside brackets, you can pass decimal values (e.g.,.5) or percentages (e.g., 50%) to achieve the precise alpha level needed [1][3]. By appending the slash, Tailwind effectively handles the alpha channel separation, allowing you to use custom colors without needing to define them in your configuration file [2][3].Citations:
- 1: https://tailwindcss.com/docs/colors
- 2: tailwindlabs/tailwindcss#4348
- 3: tailwindlabs/tailwindcss#6551
- 4: tailwindlabs/tailwindcss#9942
🌐 Web query:
Tailwind CSS arbitrary color value with opacity modifier syntax slash outside brackets docs "bg-white/[0.06]/80"💡 Result:
In Tailwind CSS, the syntax for color utilities with opacity modifiers follows the pattern utility-color/opacity [1][2]. The slash (/) is used to separate the color from the opacity value, and it must be placed outside the brackets if you are using an arbitrary value for the color [1][3][2]. For the specific example provided, bg-white/[0.06]/80, this syntax is technically invalid in standard Tailwind CSS [1][4]. The opacity modifier is designed to be a single value applied to the specified color [3][4]. When using an arbitrary color value (such as a hex code, rgb, or hsl value wrapped in square brackets), the syntax works as follows: 1. Arbitrary Color with Opacity: You can use an arbitrary color and apply an opacity modifier using the slash syntax [2]. For example, bg-[
#ffffff]/50 applies white with 50% opacity. 2. Single Opacity Modifier: You cannot chain multiple slash-separated opacity values (e.g., /value/value) [1][3]. The opacity modifier expects a single value that represents the alpha channel (e.g., 0-100 or a decimal fraction) [5][3]. If you intend to achieve an effect like 0.06 opacity on a white background, you should use the single modifier: bg-white/[0.06]. If you need to combine that with another layer of opacity, it must be handled via CSS or by nesting elements, as Tailwind does not support chaining multiple opacity modifiers on a single color utility [1][3].Citations:
- 1: https://tailwindcss.com/blog/tailwindcss-v3-1
- 2: tailwindlabs/tailwindcss#6551
- 3: https://laravel-code.tips/use-tailwinds-color-opacity-modifier-to-change-the-background-color-and-opacity-in-a-single-class/
- 4: https://tailwindcss.com/docs/background-color
- 5: https://stackoverflow.com/questions/72831003/tailwind-custom-theme-color-opacity-not-being-applied
Remove the extra opacity suffixes
dark:bg-white/[0.06]/80andborder-white/80/50; Tailwind doesn’t support chaining opacity modifiers on a single utility, so usedark:bg-white/[0.06]andborder-white/80instead.🤖 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 `@app/`(public)/cgpa-calculator/page.tsx at line 439, The className on the progress bar wrapper contains invalid chained Tailwind opacity modifiers, which should be simplified. Update the `div` in `cgpa-calculator/page.tsx` to use a single opacity value for each utility: replace the `dark:bg-white/[0.06]/80` and `border-white/80/50` parts with valid Tailwind classes such as `dark:bg-white/[0.06]` and `border-white/80`, keeping the rest of the styling unchanged.app/layout.tsx (1)
8-13: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Disabling user zoom is an accessibility violation.
userScalable: falsecombined withmaximumScale: 1prevents pinch-to-zoom on mobile devices, which violates WCAG 2.1 SC 1.4.4 (Level AA). Users with low vision rely on browser zoom to read content. The PR's mobile layout improvements should be handled through responsive design, not by blocking zoom.♿ Proposed fix
export const viewport: Viewport = { width: "device-width", initialScale: 1, - maximumScale: 1, - userScalable: false, };📝 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.export const viewport: Viewport = { width: "device-width", initialScale: 1, };🤖 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 `@app/layout.tsx` around lines 8 - 13, The viewport config in the app layout is blocking browser zoom via userScalable and maximumScale settings. Update the viewport export in the layout module to allow pinch-to-zoom by removing the zoom restrictions, keeping only standard responsive viewport settings. Use the viewport object in layout.tsx as the location to make this change.features/landing/cgpa-feature.tsx (2)
80-81: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
bg-opacity-*utilities are removed in Tailwind v4 — icon backgrounds render at full opacity.Tailwind v4 removed
bg-opacity-*in favor of slash syntax (e.g.,bg-blue-500/10). Thebg-opacity-10anddark:bg-opacity-20classes here are no-ops, so the icon containers get a full-opacitycurrentColorbackground instead of the intended subtle 10%/20% tint.Additionally,
bg-currentoverrides thebg-blue-500/bg-indigo-500fromitem.color, making thosebg-*entries dead. Simplify by dropping thebg-*fromitem.colorand usingbg-current/10 dark:bg-current/20.🐛 Proposed fix
{ icon: Target, title: "Smart Recovery Planning", desc: "Instantly calculate the exact SGPA needed to reach your target CGPA.", - color: "bg-blue-500 text-blue-500", + color: "text-blue-500", }, { icon: Briefcase, title: "Live Placement Radar", desc: "Instantly know if you qualify for Tier-1, Core, or Consulting companies.", - color: "bg-indigo-500 text-indigo-500", + color: "text-indigo-500", },<div - className={`mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-opacity-10 ${item.color} bg-current dark:bg-opacity-20`} + className={`mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${item.color} bg-current/10 dark:bg-current/20`} >📝 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.<div className={`mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${item.color} bg-current/10 dark:bg-current/20`}🤖 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 `@features/landing/cgpa-feature.tsx` around lines 80 - 81, The icon container in the CGPA landing feature is using deprecated Tailwind opacity utilities and also has conflicting background classes. Update the className on the `div` in the `CGPAFeature` item render so it uses slash-based opacity with `bg-current` (for example the `bg-current` tint pattern) and remove the dead `bg-*` color entries from `item.color`, keeping the `item.color` reference only for non-background styling if needed.
97-105: 🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
Avoid nesting a
<button>inside<Link>— invalid HTML and accessibility issue.
<Link>renders an<a>element; nesting a<button>inside it produces invalid HTML (interactive element inside interactive element) and can confuse assistive technologies. Apply the button styles directly to the<Link>instead.♿ Proposed fix
- <Link href="/cgpa-calculator"> - <button className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-slate-900 px-8 py-3.5 font-bold text-white transition-all hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(79,70,229,0.5)] dark:bg-white dark:text-slate-900 dark:hover:shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)]"> - <span className="relative z-10 flex items-center gap-2 text-base"> - Launch Calculator - <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" /> - </span> - <div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-indigo-400 dark:to-purple-400 dark:group-hover:opacity-20" /> - </button> - </Link> + <Link + href="/cgpa-calculator" + className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-slate-900 px-8 py-3.5 font-bold text-white transition-all hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(79,70,229,0.5)] dark:bg-white dark:text-slate-900 dark:hover:shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)]" + > + <span className="relative z-10 flex items-center gap-2 text-base"> + Launch Calculator + <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" /> + </span> + <div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-indigo-400 dark:to-purple-400 dark:group-hover:opacity-20" /> + </Link>📝 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.<Link href="/cgpa-calculator" className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-slate-900 px-8 py-3.5 font-bold text-white transition-all hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(79,70,229,0.5)] dark:bg-white dark:text-slate-900 dark:hover:shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)]" > <span className="relative z-10 flex items-center gap-2 text-base"> Launch Calculator <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" /> </span> <div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-indigo-400 dark:to-purple-400 dark:group-hover:opacity-20" /> </Link>🤖 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 `@features/landing/cgpa-feature.tsx` around lines 97 - 105, The CTA in the landing CGPA feature is using invalid nested interactive elements by placing a button inside Link. Update the cgpa-feature component so the Link itself in the launch action carries the button styling and behavior, and remove the inner button element while keeping the existing class names, ArrowRight icon, and label intact.
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
1 participant
Pull Request
Summary
This PR finalizes the ultimate premium aesthetic for the CGPA Calculator UI by extensively polishing the mobile layout, fixing dark mode brightness issues, and completely unifying the color palette to achieve an Apple/Linear-grade professional dashboard look.
Related Issue
Closes #N/A
Type of Change
What Changed?
py-4topy-3), reduced grid gaps (gap-y-10togap-y-4), and decreased internal spacing across the entire mobile form layout to eliminate unnecessary scrolling and dead space on small screens.mix-blend-screenwithmix-blend-normaland drastically dropping opacities from 20% to 5%. This prevents the dark mode from looking overly saturated and neon.indigo-600brand colors, and ultra-sleek subtle borders.emerald) and purple (violet) backgrounds on the bottom cards with unifiedindigo-50andblue-50glassmorphic colors. This creates a highly cohesive, diagonal premium aesthetic that matches the top input cards perfectly, avoiding the "flat white" look.Screenshots (UI Changes Only)
Not applicable—these changes purely alter CSS padding, opacity values, and color classes. No new UI features or screens were created.
Testing
Verified responsiveness across mobile and desktop breakpoints to ensure the tighter mobile form does not compromise the desktop layout. Toggled between light and dark modes to confirm the ambient orbs provide a subtle glow without blowing out text readability.
Checklist
Before requesting a review, confirm the following:
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Additional Notes
These optimizations specifically focus on elevating the dashboard from a "good" UI to a "world-class, enterprise-grade" interface by prioritizing stability, brand color cohesion, and pixel-perfect mobile density.
Summary by CodeRabbit
New Features
Bug Fixes
Style