Refactor UI components for dark mode support and improve styling #69
Conversation
…istency across pages - Updated background and text colors for dark mode in ForgotPassword, HomePage, Login, Messages, ResetPassword, Signup, and Sponsorships pages. - Enhanced accessibility by ensuring text contrasts are maintained in dark mode. - Adjusted component structures to include dark mode classes and improved hover effects. - Fixed minor layout issues and ensured consistent padding and margins across components.
WalkthroughThis update introduces comprehensive dark mode styling across numerous frontend components and pages by adding or updating Tailwind CSS classes. It also upgrades Tailwind-related dependencies and adjusts import paths in backend files for consistency. No changes were made to component logic or control flow; all modifications are stylistic or related to import organization. Changes
Sequence Diagram(s)No sequence diagram generated as the changes are purely stylistic and do not affect control flow or introduce new features. Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested labels
Poem
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🔭 Outside diff range comments (1)
Frontend/src/pages/Signup.tsx (1)
386-392:⚠️ Potential issueActive-state check uses the wrong discriminator
handleAccountTypeChange("influencer")setsformData.accountTypeto"influencer", yet the highlight logic compares against"creator".
The selected card is therefore never marked active.- formData.accountType === "creator" + formData.accountType === "influencer"Double-check which value you actually persist (
creatorv.s.influencer) and align all references accordingly.
🧹 Nitpick comments (13)
Backend/app/routes/post.py (1)
4-8: Remove unused dependency to appease Ruff.
AsyncSessionLocalisn’t referenced anywhere in this module after the Supabase switch and triggers Ruff F401.-from app.db.db import AsyncSessionLocal🧰 Tools
🪛 Ruff (0.11.9)
4-4:
app.db.db.AsyncSessionLocalimported but unusedRemove unused import:
app.db.db.AsyncSessionLocal(F401)
6-6:
app.models.models.Userimported but unusedRemove unused import
(F401)
6-6:
app.models.models.AudienceInsightsimported but unusedRemove unused import
(F401)
6-6:
app.models.models.Sponsorshipimported but unusedRemove unused import
(F401)
6-6:
app.models.models.UserPostimported but unusedRemove unused import
(F401)
7-7:
app.models.models.SponsorshipApplicationimported but unusedRemove unused import
(F401)
7-7:
app.models.models.SponsorshipPaymentimported but unusedRemove unused import
(F401)
7-7:
app.models.models.Collaborationimported but unusedRemove unused import
(F401)
Backend/app/db/seed.py (1)
1-2: Validate the necessity ofsysandosimports.These modules are only used for the path manipulation below. If we refactor or remove the
sys.pathhack, drop these imports to keep the file lean.Frontend/src/index.css (1)
75-79: Ensure consistent formatting for new CSS custom properties.
The new--color-night*variables have inconsistent indentation and lack space after the colon compared to existing entries. Align them for readability and maintainability.@@ @theme inline { - --color-nightP:#18181B; - --color-nightTS:#E4E4E7; - --color-nightS:#27272A; - --color-nightTP:#fff; + --color-nightP: #18181B; + --color-nightTS: #E4E4E7; + --color-nightS: #27272A; + --color-nightTP: #FFFFFF;Frontend/src/components/Onboarding.tsx (1)
8-8: Approve dark mode styling for Onboarding component.
The root container and typography now correctly switch tonightP,nightTS, andnightTPin dark mode.Consider adding dark variants for the CTA buttons (e.g.,
dark:bg-purple-700) so they remain distinguishable on your night background.Also applies to: 10-11
Frontend/src/components/chat/chat-list.tsx (1)
42-42: Approve dark mode enhancements in ChatList; consider DRYing repeated classes.
The container and its loading/empty states now respectnightS,nightTS, andnightTP. To improve maintainability, you could extract the repeated"dark:bg-nightS dark:text-nightTS"into a constant or a custom utility class.Also applies to: 47-47, 49-50, 54-55
Frontend/src/pages/Brand/Dashboard.tsx (1)
24-26: Remove unusedSendimport to avoid lint / build warnings
Sendis imported but never referenced in the component. WithnoUnusedLocals/ ESLint rules enabled this will fail CI.- Send,Frontend/src/components/chat/chat-search.tsx (1)
110-115: Minor a11y / polish
- The trailing space in the
classNamestring is harmless but noisy – worth trimming.- Consider adding
aria-label="Search chats and messages"to the<Input>so screen-readers don’t rely only on the placeholder text.- <SearchIcon className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground " /> + <SearchIcon className="h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />Frontend/src/components/chat/create-new-chat.tsx (1)
54-55: Icon button needs an accessible name
CirclePlusis rendered as a bare SVG. Addrole="button"andaria-label="Create new chat"(or wrap it in a<Button>component) so assistive tech recognises it.Frontend/src/pages/BasicDetails.tsx (1)
223-233: Avoid repeating raw hex colours
dark:bg-[#364152]is duplicated across many inputs/selects. Define it once intailwind.config.js(e.g.,nightInput) and reference the token:// tailwind.config.js extend: { colors: { nightInput: '#364152' } }-className="dark:bg-[#364152] mt-1" +className="dark:bg-nightInput mt-1"Frontend/src/pages/HomePage.tsx (1)
167-171: Inline box-shadow can live inside the Tailwind classInline styles are harder to maintain and bypass Tailwind’s purge.
Tailwind supports arbitrary values; you can keep the shadow in the class list:-className="rounded-xl object-cover w-full h-auto transition-transform duration-300 hover:scale-105" -style={{ boxShadow: '0 0 0 0 rgba(128,90,213,0.15), 0 8px 16px 0 rgba(128,90,213,0.15)' }} +className="rounded-xl object-cover w-full h-auto transition-transform duration-300 hover:scale-105 [box-shadow:0_0_0_0_rgba(128,90,213,0.15),0_8px_16px_0_rgba(128,90,213,0.15)]"Frontend/src/pages/DashboardPage.tsx (1)
46-58: Header navigation is duplicated across pages – extract a reusable componentNearly identical blocks live in Dashboard, Sponsorships and Collaborations pages. Encapsulating the list in a
<DashboardNav />component would:
- eliminate copy-paste
- centralise hover / dark-mode tweaks
- make future route additions a one-liner
Not urgent for this PR but worth adding to the backlog.
Frontend/src/pages/Sponsorships.tsx (1)
36-67: Hard-coded HSL hex colours hinder maintainabilityColours such as
hover:bg-[hsl(210,40%,96.1%)]ordark:bg-[#364152]are repeated across many buttons.
Consider adding them to Tailwind’s extended palette (e.g.theme.colors.ui.surface) so that:
- future tweaks require one config change
- designers can reference tokens instead of magic numbers
Frontend/src/pages/Collaborations.tsx (1)
24-60: Navigation duplicationIdentical navigation block appears in three pages. Extracting to a shared component (see comment in
DashboardPage.tsx) will DRY up the codebase and reduce future bugs caused by inconsistent edits.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
Frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (29)
Backend/app/db/seed.py(1 hunks)Backend/app/main.py(1 hunks)Backend/app/models/chat.py(1 hunks)Backend/app/models/models.py(4 hunks)Backend/app/routes/post.py(2 hunks)Backend/app/services/chat_services.py(1 hunks)Frontend/package.json(2 hunks)Frontend/src/App.tsx(1 hunks)Frontend/src/components/Onboarding.tsx(1 hunks)Frontend/src/components/chat/chat-list.tsx(1 hunks)Frontend/src/components/chat/chat-search.tsx(2 hunks)Frontend/src/components/chat/chat.tsx(2 hunks)Frontend/src/components/chat/create-new-chat.tsx(2 hunks)Frontend/src/components/chat/messages-view.tsx(1 hunks)Frontend/src/components/dashboard/sponsorship-matches.tsx(4 hunks)Frontend/src/components/mode-toggle.tsx(1 hunks)Frontend/src/components/ui/slider.tsx(2 hunks)Frontend/src/index.css(2 hunks)Frontend/src/pages/BasicDetails.tsx(4 hunks)Frontend/src/pages/Brand/Dashboard.tsx(16 hunks)Frontend/src/pages/Collaborations.tsx(5 hunks)Frontend/src/pages/DashboardPage.tsx(1 hunks)Frontend/src/pages/ForgotPassword.tsx(3 hunks)Frontend/src/pages/HomePage.tsx(5 hunks)Frontend/src/pages/Login.tsx(3 hunks)Frontend/src/pages/Messages.tsx(2 hunks)Frontend/src/pages/ResetPassword.tsx(6 hunks)Frontend/src/pages/Signup.tsx(3 hunks)Frontend/src/pages/Sponsorships.tsx(7 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
Backend/app/main.py (1)
Backend/app/db/seed.py (1)
seed_db(8-56)
Backend/app/services/chat_services.py (2)
Backend/app/models/models.py (1)
User(24-64)Backend/app/models/chat.py (3)
ChatList(19-32)ChatMessage(35-54)MessageStatus(13-16)
Backend/app/db/seed.py (1)
Backend/app/models/models.py (1)
User(24-64)
Frontend/src/pages/BasicDetails.tsx (4)
Frontend/src/components/ui/label.tsx (1)
Label(25-25)Frontend/src/components/ui/input.tsx (1)
Input(21-21)Frontend/src/components/ui/select.tsx (5)
Select(150-150)SelectTrigger(153-153)SelectValue(152-152)SelectContent(154-154)SelectItem(156-156)Frontend/src/components/ui/card.tsx (3)
Card(80-80)CardHeader(81-81)CardTitle(83-83)
Frontend/src/pages/Sponsorships.tsx (11)
Frontend/src/components/ui/button.tsx (1)
Button(54-54)Frontend/src/components/ui/input.tsx (1)
Input(21-21)Frontend/src/components/mode-toggle.tsx (1)
ModeToggle(11-36)Frontend/src/components/user-nav.tsx (1)
UserNav(16-59)Frontend/src/components/ui/card.tsx (5)
CardTitle(83-83)CardDescription(84-84)CardHeader(81-81)CardContent(85-85)Card(80-80)Frontend/src/components/ui/label.tsx (1)
Label(25-25)Frontend/src/components/ui/select.tsx (5)
Select(150-150)SelectTrigger(153-153)SelectValue(152-152)SelectContent(154-154)SelectItem(156-156)Frontend/src/components/ui/slider.tsx (1)
Slider(24-24)Frontend/src/components/ui/tabs.tsx (3)
TabsList(52-52)TabsTrigger(52-52)TabsContent(52-52)Frontend/src/components/ui/avatar.tsx (3)
Avatar(50-50)AvatarImage(50-50)AvatarFallback(50-50)Frontend/src/components/ui/badge.tsx (1)
Badge(36-36)
🪛 Ruff (0.11.9)
Backend/app/routes/post.py
4-4: app.db.db.AsyncSessionLocal imported but unused
Remove unused import: app.db.db.AsyncSessionLocal
(F401)
🔇 Additional comments (41)
Backend/app/models/chat.py (1)
4-4: Import-path refactor looks good.Switching to
app.db.db.Basealigns this model with the new absolute-import convention and avoids the ambiguity we had with the previous relative import. No further action needed.Backend/app/services/chat_services.py (1)
5-6: Imports updated correctly.The new absolute paths (
app.models.*) are consistent with the refactor across the backend and should prevent future import-resolution issues when the package is installed. 👍Backend/app/main.py (1)
3-7: Consistent absolute imports – looks good.The switch to
app.*imports keepsmain.pyin sync with the rest of the package structure. No issues spotted.Backend/app/models/models.py (2)
15-16: Import path change OK.
app.db.db.Baseis the correct root-level reference after the refactor; no problems here.
43-54: Pure formatting tweaks – no functional impact.The relationship/column blocks were only re-wrapped across multiple lines. Behaviour is unchanged, so nothing to worry about.
Also applies to: 94-97, 118-121
Backend/app/db/seed.py (1)
3-4: Absolute imports align with project conventions.The updated imports (
app.db.db.AsyncSessionLocal,app.models.models.User) are consistent with other modules. Ensure that theapppackage is in PYTHONPATH or that you invoke the script viapython -m app.db.seedto avoid import errors.Frontend/package.json (1)
27-27: Approve Tailwind CSS dependency upgrades.
The bump of@tailwindcss/viteandtailwindcssfrom ^4.0.16 to ^4.1.8 aligns with the dark mode enhancements and unlocks new utility classes.Also applies to: 42-42
Frontend/src/components/mode-toggle.tsx (1)
17-17: Approve dark mode classes on theme toggle button.
Addingdark:bg-nightS dark:text-nightTSensures the toggle adapts visually in dark mode without affecting its functionality.Frontend/src/pages/Brand/Dashboard.tsx (1)
40-43: Verify custom colour tokens existClasses such as
dark:bg-nightP/dark:text-nightTSassume that the new Tailwind CSS tokens have been added to the config. If the tokens are missing, the build will silently fall back tounset, resulting in unreadable UI in dark-mode.Please double-check
tailwind.config.jsfor these colour keys.Frontend/src/components/ui/slider.tsx (1)
17-18: ConsistencyGood call adding a dark-mode track colour – keeps the control readable.
Frontend/src/components/chat/chat.tsx (4)
13-13: Container styling updated for dark mode compatibility.The
relative m-4 max-w-xl ml-autowrapper provides proper spacing and alignment.
18-18: Input styling updated with dark mode classes.The added
dark:bg-[#364152] dark:text-nightTSensures readability in dark mode.
27-27: Button restyled for dark mode.The new
dark:border-purple-700 dark:bg-purple-600 dark:text-nightTS dark:hover:bg-purple-700classes align with the dark theme.
34-34: Grid container receives dark mode styling.Adding
dark:bg-nightP dark:text-nightTSensures the chat layout adapts to dark theme.Frontend/src/App.tsx (3)
18-18: ImportedThemeProviderfor theme context.Introduces the theme context provider required for global dark mode management.
24-24: Wrapped routes withThemeProvider.Placing
<ThemeProvider>around<Routes>ensures all components have access to the theme context.
86-86: ClosedThemeProviderwrapper.Ensures proper scoping of theme context across the routing tree.
Frontend/src/pages/ForgotPassword.tsx (4)
49-49: Header dark background applied.The addition of
dark:bg-nightPensures header contrast in dark mode.
61-61: Main container dark mode class added.The
dark:bg-nightPon the form container aligns with the night theme.
63-63: Card container dark styling updated.Using
dark:bg-nightSfor the card wrapper improves dark theme consistency.
180-180: Footer dark theme classes included.Adding
dark:text-nightTS dark:bg-nightPmaintains accessibility in dark mode.Frontend/src/pages/Messages.tsx (6)
170-170: Root container dark background added.
dark:bg-nightPensures the page frame adopts the night theme.
171-171: Header dark styling updated.The
dark:bg-nightPin the sticky header provides consistency across themes.
172-172: Container dark text class applied.
dark:text-nightTPensures header text readability in dark mode.
173-173: Homepage link dark text color updated.Using
dark:text-nightTPon the link icon maintains contrast.
175-175: Logo text dark mode class added.
dark:text-nightTPon the title improves visibility.
228-228: Search input dark border and background updated.Adding
dark:bg-[#364152] dark:border-nightPaligns the search field with dark theme.Frontend/src/components/dashboard/sponsorship-matches.tsx (9)
9-9: Card dark mode classes added.
dark:bg-nightS dark:border-nightPensure the card matches night theme styling.
14-14: AvatarFallback dark styling updated.Applying
dark:bg-white/70 dark:border-nightP dark:text-blackensures avatar fallback remains visible in dark mode.
29-29: Contact button dark variant styling.
dark:text-nightP dark:hover:bg-primary/90maintains button consistency in dark theme.
37-37: Second card dark mode classes added.Consistent dark theming applied to all sponsorship cards.
42-42: Second AvatarFallback dark styling.Ensures fallback avatar visibility across themes.
59-59: Second contact button dark variant styling.Aligns button appearance in dark mode for the second card.
67-67: Third card dark mode classes added.Uniform dark theming for all cards.
72-72: Third AvatarFallback dark styling.Consistent fallback background and text colors in dark theme.
89-89: Third contact button dark variant styling.Completes dark mode button styling across all cards.
Frontend/src/pages/Login.tsx (5)
60-61: Adopt custom dark mode background (nightP) for root and headerThe root container and header now consistently use
dark:bg-nightP, aligning with the new theme variable. This change properly centralizes dark mode styling.
67-67: Update brand text color tonightTPin dark modeSwitching the "Inpact" text to
dark:text-nightTPensures proper contrast against the dark background.
84-84: Applydark:bg-nightPto main content containerThe central wrapper now uses the custom
nightPbackground in dark mode, matching the root and header sections.
86-86: Usedark:bg-nightSfor form card backgroundChanging the form card’s dark background to
nightSmaintains visual hierarchy and consistency with the theme.
243-243: Set footer dark text and background to theme variablesUpdating the footer with
dark:text-nightTSanddark:bg-nightPcompletes the dark mode transition for all page sections.
Backend/app/routes/post.py
Outdated
| print(f"Supabase URL: {url}") | ||
| print(f"Supabase Key: {key}") |
There was a problem hiding this comment.
Sensitive credentials are printed to stdout – critical leakage.
print(f"Supabase Key: {key}") exposes the service key in logs and potentially in CI output. This violates basic secret-management practice.
-print(f"Supabase URL: {url}")
-print(f"Supabase Key: {key}")
+logger = logging.getLogger(__name__)
+# Log only the fact that the env vars were loaded; never output the key itself.
+logger.info("Supabase credentials loaded from environment variables.")Make sure the logging module is imported (it already is indirectly, but add an explicit import if needed).
📝 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.
| print(f"Supabase URL: {url}") | |
| print(f"Supabase Key: {key}") | |
| logger = logging.getLogger(__name__) | |
| # Log only the fact that the env vars were loaded; never output the key itself. | |
| logger.info("Supabase credentials loaded from environment variables.") |
🤖 Prompt for AI Agents
In Backend/app/routes/post.py around lines 25 to 26, printing the Supabase key
directly to stdout exposes sensitive credentials and risks leakage. Remove the
print statement that outputs the Supabase key. If logging the URL is necessary,
use the logging module with an appropriate log level and avoid logging the key
entirely. Also, ensure the logging module is explicitly imported at the top of
the file if not already done.
There was a problem hiding this comment.
@Eli4479 Please remove the print statements for the Supabase URL and Key. Logging sensitive information like this is not a good practice. This one is important
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| import os | ||
| from app.db.db import AsyncSessionLocal | ||
| from app.models.models import User | ||
| sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor or relocate the sys.path hack.
The runtime path append appears after the imports, so it won't help resolve them and is fragile across environments. Consider moving this line above the imports or, better, removing it entirely by structuring the project as a proper Python package (e.g., using setup.py or pyproject.toml) and running with python -m.
Apply this diff to reorder and harden path setup:
- import sys
- import os
- sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+ import sys
+ import os
+ # Ensure `app` package root is discoverable before imports
+ sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..', '..')))📝 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.
| sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) | |
| import sys | |
| import os | |
| # Ensure `app` package root is discoverable before imports | |
| sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..', '..'))) |
🤖 Prompt for AI Agents
In Backend/app/db/seed.py at line 5, the sys.path modification occurs after
imports, making it ineffective for resolving module paths. Move the
sys.path.append line to the very top of the file before any imports to ensure it
takes effect. Alternatively, refactor the project into a proper Python package
with setup.py or pyproject.toml and run scripts using python -m to avoid needing
this path hack altogether.
| const Slider = React.forwardRef< | ||
| React.ElementRef<typeof SliderPrimitive.Root>, | ||
| React.ComponentRef<typeof SliderPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> |
There was a problem hiding this comment.
Wrong ref type – breaks type-checking
React.ComponentRef only yields non-never for class components.
SliderPrimitive.Root is a function component, so ComponentRef resolves to never, wiping out type-safety and potentially triggering a TS error.
-const Slider = React.forwardRef<
- React.ComponentRef<typeof SliderPrimitive.Root>,
+const Slider = React.forwardRef<
+ React.ElementRef<typeof SliderPrimitive.Root>,📝 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.
| const Slider = React.forwardRef< | |
| React.ElementRef<typeof SliderPrimitive.Root>, | |
| React.ComponentRef<typeof SliderPrimitive.Root>, | |
| React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> | |
| const Slider = React.forwardRef< | |
| React.ElementRef<typeof SliderPrimitive.Root>, | |
| React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> | |
| > |
🤖 Prompt for AI Agents
In Frontend/src/components/ui/slider.tsx around lines 5 to 7, the ref type uses
React.ComponentRef with SliderPrimitive.Root, which is a function component,
causing the type to resolve to never and breaking type-checking. Replace
React.ComponentRef<typeof SliderPrimitive.Root> with React.ElementRef<typeof
SliderPrimitive.Root> to correctly infer the ref type for a function component
and restore type safety.
| BarChart3, | ||
| Briefcase, | ||
| DollarSign, | ||
| FileText, | ||
| Icon, | ||
| LayoutDashboard, | ||
| LogOut, | ||
| MessageSquare, | ||
| Rocket, | ||
| Search, | ||
| Users, |
There was a problem hiding this comment.
Remove the unused Icon import to avoid a shadowing collision
Icon is imported from lucide-react but then immediately shadow-ed in the map callback ({ icon: Icon }).
The imported symbol is never used and the name collision is confusing for readers and tooling (e.g. ESLint, TS-server).
-import {
- BarChart3,
- Briefcase,
- DollarSign,
- FileText,
- Icon,
- LayoutDashboard,
+import {
+ BarChart3,
+ Briefcase,
+ DollarSign,
+ FileText,
+ LayoutDashboard,📝 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.
| BarChart3, | |
| Briefcase, | |
| DollarSign, | |
| FileText, | |
| Icon, | |
| LayoutDashboard, | |
| LogOut, | |
| MessageSquare, | |
| Rocket, | |
| Search, | |
| Users, | |
| import { | |
| BarChart3, | |
| Briefcase, | |
| DollarSign, | |
| FileText, | |
| LayoutDashboard, | |
| LogOut, | |
| MessageSquare, | |
| Rocket, | |
| Search, | |
| Users, | |
| } from 'lucide-react'; |
🤖 Prompt for AI Agents
In Frontend/src/pages/DashboardPage.tsx between lines 9 and 19, remove the
unused import of `Icon` from `lucide-react` to prevent name shadowing with the
`Icon` variable used in the map callback. This will eliminate confusion and
potential linting or type-checking issues caused by the collision.
|
Great one! |
|
@Eli4479 Good work! Please review the CodeRabbit warnings and issues, and commit the necessary changes. |
Done @Priyansh-max |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
Frontend/src/pages/Signup.tsx (1)
46-126: Consider refactoring the handleSubmit function.The
handleSubmitfunction is quite long (80+ lines) and handles multiple responsibilities: step management, validation, authentication, database operations, and navigation. Consider breaking it into smaller, focused functions for better maintainability.Example refactor structure:
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (step === 1) { setStep(2); return; } await processSignup(); }; const processSignup = async () => { setIsLoading(true); setError(""); try { await validateUsernameUniqueness(); const authResult = await performAuthentication(); await createUserRecord(authResult); navigateToBasicDetails(); } catch (error) { handleSignupError(error); } finally { setIsLoading(false); } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
Backend/app/routes/post.py(9 hunks)Frontend/src/components/chat/messages-view.tsx(1 hunks)Frontend/src/components/ui/slider.tsx(1 hunks)Frontend/src/pages/BasicDetails.tsx(2 hunks)Frontend/src/pages/Collaborations.tsx(1 hunks)Frontend/src/pages/DashboardPage.tsx(1 hunks)Frontend/src/pages/ForgotPassword.tsx(1 hunks)Frontend/src/pages/ResetPassword.tsx(1 hunks)Frontend/src/pages/Signup.tsx(1 hunks)Frontend/src/pages/Sponsorships.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- Frontend/src/pages/ForgotPassword.tsx
- Frontend/src/pages/BasicDetails.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- Frontend/src/components/ui/slider.tsx
- Frontend/src/components/chat/messages-view.tsx
- Frontend/src/pages/ResetPassword.tsx
- Frontend/src/pages/DashboardPage.tsx
- Frontend/src/pages/Sponsorships.tsx
- Frontend/src/pages/Collaborations.tsx
🧰 Additional context used
🧠 Learnings (1)
Backend/app/routes/post.py (1)
Learnt from: muntaxir4
PR: AOSSIE-Org/InPactAI#56
File: Backend/app/services/redis_client.py:1-4
Timestamp: 2025-05-07T21:28:06.358Z
Learning: Hardcoded Redis connection parameters in Backend/app/services/redis_client.py are intentional during development, with plans to implement environment variable configuration later during production preparation.
🧬 Code Graph Analysis (2)
Frontend/src/pages/Signup.tsx (2)
Frontend/src/context/AuthContext.tsx (1)
useAuth(71-77)Frontend/src/utils/supabase.tsx (1)
supabase(6-6)
Backend/app/routes/post.py (1)
Backend/app/models/models.py (1)
generate_uuid(19-20)
🪛 Ruff (0.11.9)
Backend/app/routes/post.py
4-4: app.db.db.AsyncSessionLocal imported but unused
Remove unused import: app.db.db.AsyncSessionLocal
(F401)
🪛 Flake8 (7.2.0)
Backend/app/routes/post.py
[error] 4-4: 'app.db.db.AsyncSessionLocal' imported but unused
(F401)
[error] 5-5: 'app.models.models.User' imported but unused
(F401)
[error] 5-5: 'app.models.models.AudienceInsights' imported but unused
(F401)
[error] 5-5: 'app.models.models.Sponsorship' imported but unused
(F401)
[error] 5-5: 'app.models.models.UserPost' imported but unused
(F401)
[error] 5-5: 'app.models.models.SponsorshipApplication' imported but unused
(F401)
[error] 5-5: 'app.models.models.SponsorshipPayment' imported but unused
(F401)
[error] 5-5: 'app.models.models.Collaboration' imported but unused
(F401)
🔇 Additional comments (5)
Frontend/src/pages/Signup.tsx (3)
173-174: Excellent dark mode implementation!The dark mode styling has been properly implemented across the page with consistent use of the custom night-themed classes (
dark:bg-nightP,dark:bg-nightS,dark:text-nightTS). The root container now includes the dark mode background, addressing the previous review feedback.Also applies to: 197-198, 532-533
37-44: Good username validation implementation.The username validation is well-implemented with:
- Clear regex pattern for allowed characters
- Proper length constraints (3-20 characters)
- Real-time validation on input change
- Pre-submission validation with early return
The validation logic is sound and user-friendly.
Also applies to: 57-63
67-78: Proper username uniqueness check implementation.The database query to check username uniqueness before signup is correctly implemented:
- Uses
maybeSingle()to handle the case where no user is found- Proper error handling for database queries
- Clear error message for users when username is taken
This prevents duplicate username issues effectively.
Backend/app/routes/post.py (2)
23-28: Excellent improvement to environment variable handling.The explicit runtime checks for missing environment variables are a significant improvement over silent None assignments. This will help catch configuration issues early and provide clear error messages.
1-229: Backend changes in a dark mode UI PR - verify correct PR scope.This file contains backend import refactoring and environment variable handling improvements, which don't align with the stated PR objectives of "Refactor UI components for dark mode support." Ensure these backend changes belong in this PR or should be part of a separate backend refactoring PR.
Likely an incorrect or invalid review comment.
| const [isLoading, setIsLoading] = useState(false); | ||
| const [error, setError] = useState(""); | ||
| const [step, setStep] = useState(1); | ||
| const [user, setuser] = useState("influencer"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove redundant state variable.
The user state variable appears redundant since formData.accountType serves the same purpose. This dual state management can lead to inconsistencies and confusion.
- const [user, setuser] = useState("influencer");
const handleAccountTypeChange = (type: string) => {
- setuser(type);
setFormData((prev) => ({ ...prev, accountType: type }));
};Also applies to: 32-35
🤖 Prompt for AI Agents
In Frontend/src/pages/Signup.tsx around lines 20 and 32-35, the user state
variable is redundant because formData.accountType already holds the account
type information. Remove the user state variable and all related code, and
update any references to use formData.accountType directly to avoid duplication
and potential inconsistencies.
| onClick={() => handleAccountTypeChange("influencer")} | ||
| className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${formData.accountType === "creator" | ||
| ? "border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300" | ||
| : "border-gray-300 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700" | ||
| }`} |
There was a problem hiding this comment.
Fix account type selection logic.
The account type buttons have incorrect logic. The "Creator" button checks for formData.accountType === "creator" but calls handleAccountTypeChange("influencer"), and vice versa for the "Brand" button.
<button
type="button"
onClick={() => handleAccountTypeChange("influencer")}
- className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${formData.accountType === "creator"
+ className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${formData.accountType === "influencer"
? "border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300"
: "border-gray-300 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700"
}`}
>
<button
type="button"
onClick={() => handleAccountTypeChange("brand")}
- className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${formData.accountType === "brand"
+ className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${formData.accountType === "brand"
? "border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300"
: "border-gray-300 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700"
}`}
>Also, ensure the initial accountType value aligns with your intended default:
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
username: "",
- accountType: "creator",
+ accountType: "influencer",
});Also applies to: 401-405
🤖 Prompt for AI Agents
In Frontend/src/pages/Signup.tsx around lines 382-386 and 401-405, the onClick
handlers for the account type buttons are mismatched with their conditional
checks, causing incorrect selection logic. Fix this by ensuring the "Creator"
button calls handleAccountTypeChange("creator") and checks formData.accountType
=== "creator", and the "Influencer" or "Brand" button calls
handleAccountTypeChange("influencer") with the corresponding check. Also verify
that the initial value of formData.accountType matches the intended default
account type.
| from app.db.db import AsyncSessionLocal | ||
| from app.models.models import ( | ||
| User, AudienceInsights, Sponsorship, UserPost, | ||
| SponsorshipApplication, SponsorshipPayment, Collaboration | ||
| ) |
There was a problem hiding this comment.
Remove unused SQLAlchemy imports.
The static analysis tools correctly identify that all the imported SQLAlchemy-related classes and AsyncSessionLocal are unused in this file. This file uses Supabase for database operations instead of SQLAlchemy ORM.
-from app.db.db import AsyncSessionLocal
-from app.models.models import (
- User, AudienceInsights, Sponsorship, UserPost,
- SponsorshipApplication, SponsorshipPayment, Collaboration
-)Also remove the unused schema imports from lines 9-12:
-from schemas.schema import (
- UserCreate, AudienceInsightsCreate, SponsorshipCreate, UserPostCreate,
- SponsorshipApplicationCreate, SponsorshipPaymentCreate, CollaborationCreate
-)📝 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.
| from app.db.db import AsyncSessionLocal | |
| from app.models.models import ( | |
| User, AudienceInsights, Sponsorship, UserPost, | |
| SponsorshipApplication, SponsorshipPayment, Collaboration | |
| ) |
🧰 Tools
🪛 Ruff (0.11.9)
4-4: app.db.db.AsyncSessionLocal imported but unused
Remove unused import: app.db.db.AsyncSessionLocal
(F401)
6-6: app.models.models.User imported but unused
Remove unused import
(F401)
6-6: app.models.models.AudienceInsights imported but unused
Remove unused import
(F401)
6-6: app.models.models.Sponsorship imported but unused
Remove unused import
(F401)
6-6: app.models.models.UserPost imported but unused
Remove unused import
(F401)
7-7: app.models.models.SponsorshipApplication imported but unused
Remove unused import
(F401)
7-7: app.models.models.SponsorshipPayment imported but unused
Remove unused import
(F401)
7-7: app.models.models.Collaboration imported but unused
Remove unused import
(F401)
🪛 Flake8 (7.2.0)
[error] 4-4: 'app.db.db.AsyncSessionLocal' imported but unused
(F401)
[error] 5-5: 'app.models.models.User' imported but unused
(F401)
[error] 5-5: 'app.models.models.AudienceInsights' imported but unused
(F401)
[error] 5-5: 'app.models.models.Sponsorship' imported but unused
(F401)
[error] 5-5: 'app.models.models.UserPost' imported but unused
(F401)
[error] 5-5: 'app.models.models.SponsorshipApplication' imported but unused
(F401)
[error] 5-5: 'app.models.models.SponsorshipPayment' imported but unused
(F401)
[error] 5-5: 'app.models.models.Collaboration' imported but unused
(F401)
🤖 Prompt for AI Agents
In Backend/app/routes/post.py from lines 4 to 12, remove all unused imports
related to SQLAlchemy including AsyncSessionLocal and the imported models User,
AudienceInsights, Sponsorship, UserPost, SponsorshipApplication,
SponsorshipPayment, Collaboration, as well as any unused schema imports on lines
9 to 12. This cleanup is necessary because the file uses Supabase for database
operations and does not require these SQLAlchemy ORM imports.
|
@chandansgowda looks good |
|
Good Job. Thanks for contributing @Eli4479 |
Closes #60 and #36
📝 Description
🔧 Changes Made
Let me know if you want to mention specific file changes or add a GIF/screenshot preview.
📷 Screenshots or Visual Changes (if applicable)
Screen.Recording.2025-06-16.at.9.36.45.AM.mp4
✅ Checklist
Summary by CodeRabbit
New Features
Style
Chores
Bug Fixes
Documentation