Feature/safiya #391
Feature/safiya #391
Conversation
📝 WalkthroughWalkthroughThis pull request introduces a comprehensive design system overhaul with semantic color tokens, dark mode support, and a new icon library. Changes include a redesigned Home page, new background effects component, updated styling system with animations, and configuration adjustments across the web and extension packages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 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: 4
🤖 Fix all issues with AI agents
In `@eduaid_web/src/index.css`:
- Around line 60-64: The .dark CSS block currently only resets --background and
--foreground to the same values as :root and is therefore redundant or
incomplete; either remove the entire .dark block if the app is dark-only (i.e.,
no light variant needed), or expand .dark to override all semantic tokens used
elsewhere (e.g., --card, --primary, --muted, --border, --accent, --text-muted)
to appropriate dark-mode values so components that consume these variables
change appearance; locate the .dark selector in index.css and either delete it
or add meaningful dark alternatives for each token name used across the
stylesheet.
- Line 5: The `@import` rule for Google Fonts must be placed before any Tailwind
directives so it isn't ignored; move the line containing "@import
url('https://fonts.googleapis.com/css2?family=Inter:...&display=swap');" to the
top of the stylesheet so it appears before the Tailwind directives (e.g., the
"@tailwind base", "@tailwind components", and "@tailwind utilities" rules) and
any other style rules or at-rules.
In `@eduaid_web/src/pages/Home.jsx`:
- Around line 53-55: The Tailwind classes on the logo container are invalid:
update the div that contains the logo (the element with className containing
"w-18 h-18 sm:w-12 sm:h-12 flex items-center justify-center" in Home.jsx) to
use valid Tailwind size utilities (e.g. replace "w-18 h-18" with "w-20 h-20" or
another valid size), or if you intended custom sizes, add the corresponding
entries to the Tailwind config and keep the class names; ensure the change is
applied to the className string on that logo container.
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 168-170: Add a click handler to the clipboard button that copies
the current textarea content to the clipboard: implement a function (e.g.,
handleCopyClick) and attach it to the button's onClick on the element rendering
<FaClipboard />; inside the handler, read the textarea value from the
component's state or ref (the same variable used for the input in this
component) and call navigator.clipboard.writeText(value) with proper promise
handling and a fallback for older browsers, and provide minimal UI feedback
(e.g., set a succeeded/failed flag or toast) so users know the copy succeeded or
failed.
🧹 Nitpick comments (4)
eduaid_web/tailwind.config.js (1)
2-16: Remove commented-out code.The old configuration is commented out rather than deleted. This creates dead code that clutters the file and reduces readability. Since version control preserves history, this can be safely removed.
♻️ Remove commented code
/** `@type` {import('tailwindcss').Config} */ -// export default { -// content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], -// theme: { -// extend: { -// colors: { -// "custom-blue": "#4213FF", -// }, -// backgroundImage: { -// "custom-gradient": -// "radial-gradient(circle at -10% 40%, rgba(66, 19, 255, 0.8) 0%, transparent 40%) , radial-gradient(circle at 90% -15%, rgba(255, 19, 132, 0.8) 0%, transparent 40%)", -// }, -// }, -// }, -// plugins: [], -// };// tailwind.config.js module.exports = {eduaid_web/src/index.css (1)
7-86: Consider merging duplicate@layer baseblocks.There are two separate
@layer baseblocks (Lines 7-64 and 66-86). While functionally correct, consolidating them improves maintainability.eduaid_web/src/pages/Home.jsx (1)
3-9: Remove unused imports.Several imports appear to be unused after the refactor:
starsImg(Line 4) - not used in JSXarrow(Line 5) - replaced byArrowRighticonFaGithub(Line 7) - replaced byGithubfrom lucide-reactStar(Line 9) - imported butgitStarimage is used instead♻️ Clean up unused imports
import React, { useState, useEffect } from "react"; import "../index.css"; import logo_trans from "../assets/aossie_logo_transparent.png" -import starsImg from "../assets/stars.png"; -import arrow from "../assets/arrow.png"; import gitStar from "../assets/gitStar.png"; -import { FaGithub } from "react-icons/fa"; import { Link } from "react-router-dom"; -import { Sparkles, ArrowRight, Star, Github } from "lucide-react"; +import { Sparkles, ArrowRight, Github } from "lucide-react";eduaid_web/src/pages/Text_Input.jsx (1)
167-179: Textarea may not expand to fill container height.The container has
min-h-[160px]but the textarea usesh-full. Since the container's height is determined by its content and min-height, the textarea won't automatically stretch to fill the minimum height. Consider adding an explicit height or using flexbox.♻️ Proposed fix using flexbox
- <div className="relative bg-[`#83b6cc40`] mx-auto max-w-4xl rounded-2xl p-4 min-h-[160px] sm:min-h-[200px] mt-6"> + <div className="relative flex flex-col bg-[`#83b6cc40`] mx-auto max-w-4xl rounded-2xl p-4 min-h-[160px] sm:min-h-[200px] mt-6"> <button className="absolute top-2 right-2 p-2 text-white focus:outline-none z-10"> <FaClipboard className="h-[20px] w-[20px]" /> </button> <textarea placeholder="Enter your text content here..." - className="w-full h-full pl-4 pr-12 pt-2 pb-2 bg-transparent text-lg rounded-2xl outline-none resize-none overflow-y-auto text-white caret-white placeholder-gray-500" + className="w-full flex-1 pl-4 pr-12 pt-2 pb-2 bg-transparent text-lg rounded-2xl outline-none resize-none overflow-y-auto text-white caret-white placeholder-gray-500"
| border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7); | ||
| border-image-slice: 1; | ||
| border-radius: 2rem; | ||
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap'); |
There was a problem hiding this comment.
Move @import before Tailwind directives.
Per CSS specification, @import rules must precede all other at-rules and style rules (except @charset and @layer). Since Tailwind directives expand to CSS rules, placing @import after them can cause the import to be ignored by some browsers or build tools.
🐛 Proposed fix
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+
`@tailwind` base;
`@tailwind` components;
`@tailwind` utilities;
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');🧰 Tools
🪛 Biome (2.3.13)
[error] 5-5: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🤖 Prompt for AI Agents
In `@eduaid_web/src/index.css` at line 5, The `@import` rule for Google Fonts must
be placed before any Tailwind directives so it isn't ignored; move the line
containing "@import
url('https://fonts.googleapis.com/css2?family=Inter:...&display=swap');" to the
top of the stylesheet so it appears before the Tailwind directives (e.g., the
"@tailwind base", "@tailwind components", and "@tailwind utilities" rules) and
any other style rules or at-rules.
There was a problem hiding this comment.
@QaziSafiya Thank you! Looking forward to the fix. 🚀
| .dark { | ||
| --background: 260 60% 5%; | ||
| --foreground: 0 0% 98%; | ||
| } | ||
| } |
There was a problem hiding this comment.
Dark mode overrides appear incomplete.
The .dark class only overrides --background and --foreground with the same values as :root. Either this is incomplete (missing overrides for other tokens like --card, --primary, etc.) or it's unnecessary if the design is dark-only.
💡 If intentionally dark-only, remove the redundant `.dark` block
- .dark {
- --background: 260 60% 5%;
- --foreground: 0 0% 98%;
- }Otherwise, add meaningful light/dark variations for all semantic tokens.
📝 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.
| .dark { | |
| --background: 260 60% 5%; | |
| --foreground: 0 0% 98%; | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In `@eduaid_web/src/index.css` around lines 60 - 64, The .dark CSS block currently
only resets --background and --foreground to the same values as :root and is
therefore redundant or incomplete; either remove the entire .dark block if the
app is dark-only (i.e., no light variant needed), or expand .dark to override
all semantic tokens used elsewhere (e.g., --card, --primary, --muted, --border,
--accent, --text-muted) to appropriate dark-mode values so components that
consume these variables change appearance; locate the .dark selector in
index.css and either delete it or add meaningful dark alternatives for each
token name used across the stylesheet.
| <div className="w-18 h-18 sm:w-12 sm:h-12 flex items-center justify-center"> | ||
| <img src={logo_trans} alt="" /> | ||
| </div> |
There was a problem hiding this comment.
Invalid Tailwind class w-18 h-18.
Tailwind CSS does not include w-18 or h-18 by default. The spacing scale jumps from 16 (4rem) to 20 (5rem). This will have no effect unless custom values are configured.
🐛 Use valid Tailwind size classes
- <div className="w-18 h-18 sm:w-12 sm:h-12 flex items-center justify-center">
+ <div className="w-16 h-16 sm:w-12 sm:h-12 flex items-center justify-center">Or use w-20 h-20 if a larger size is intended.
📝 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="w-18 h-18 sm:w-12 sm:h-12 flex items-center justify-center"> | |
| <img src={logo_trans} alt="" /> | |
| </div> | |
| <div className="w-16 h-16 sm:w-12 sm:h-12 flex items-center justify-center"> | |
| <img src={logo_trans} alt="" /> | |
| </div> |
🤖 Prompt for AI Agents
In `@eduaid_web/src/pages/Home.jsx` around lines 53 - 55, The Tailwind classes on
the logo container are invalid: update the div that contains the logo (the
element with className containing "w-18 h-18 sm:w-12 sm:h-12 flex items-center
justify-center" in Home.jsx) to use valid Tailwind size utilities (e.g. replace
"w-18 h-18" with "w-20 h-20" or another valid size), or if you intended custom
sizes, add the corresponding entries to the Tailwind config and keep the class
names; ensure the change is applied to the className string on that logo
container.
| <button className="absolute top-2 right-2 p-2 text-white focus:outline-none z-10"> | ||
| <FaClipboard className="h-[20px] w-[20px]" /> | ||
| </button> |
There was a problem hiding this comment.
Clipboard button lacks onClick handler.
The clipboard button is rendered but has no functionality. Users will expect clicking it to copy the textarea content.
📋 Proposed fix to add copy-to-clipboard functionality
- <button className="absolute top-2 right-2 p-2 text-white focus:outline-none z-10">
+ <button
+ className="absolute top-2 right-2 p-2 text-white focus:outline-none z-10"
+ onClick={() => navigator.clipboard.writeText(text)}
+ aria-label="Copy to clipboard"
+ >
<FaClipboard className="h-[20px] w-[20px]" />
</button>🤖 Prompt for AI Agents
In `@eduaid_web/src/pages/Text_Input.jsx` around lines 168 - 170, Add a click
handler to the clipboard button that copies the current textarea content to the
clipboard: implement a function (e.g., handleCopyClick) and attach it to the
button's onClick on the element rendering <FaClipboard />; inside the handler,
read the textarea value from the component's state or ref (the same variable
used for the input in this component) and call
navigator.clipboard.writeText(value) with proper promise handling and a fallback
for older browsers, and provide minimal UI feedback (e.g., set a
succeeded/failed flag or toast) so users know the copy succeeded or failed.
1 participant
fix misalignment text issue in textarea #376, also I have fix this text alignment issue in this . and also fix the margin in a logo alignment , and also fix the heading and subheading alignment.
Summary by CodeRabbit
Release Notes
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.