Redesign user settings page layout #95
Conversation
Restructure the user settings page to use a two-column layout. This improves visual organization and allows for better spacing of content. The subscription plans section is now more prominent, and the personal information form is clearly separated. Styling updates ensure a more modern and consistent look and feel across the page. Co-authored-by: me <me@rasulkireev.com>
|
Cursor Agent can help with this pull request. Just |
WalkthroughThe user settings page template has been restructured from a two-column subscription-focused layout to a three-column responsive grid. Personal Information form moves to the left column, Account Overview and Quick Actions panels are added to the right column. The subscription plans section is simplified from complex nested forms to uniform card-based presentation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/templates/pages/user-settings.html (1)
193-196: Duplicated SVG spinner markup—consider extraction.The spinner SVG is defined twice with identical markup (lines 193–196 and 223–226). Extracting this into a reusable component or template include would reduce duplication and improve maintainability.
Create a shared spinner component or use a template include:
{% include "components/spinner.html" %}Then reference it in both checkout sections instead of duplicating the SVG markup.
Also applies to: 223-226
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/templates/pages/user-settings.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.html
📄 CodeRabbit inference engine (.cursor/rules/frontend.mdc)
**/*.html: Prefer Stimulus JS for adding interactivity to Django templates instead of raw script elements
Leverage Stimulus data attributes to connect HTML elements with JavaScript functionality
Utilize Stimulus targets to reference specific elements within a controller
Employ Stimulus actions to handle user interactions and events
Files:
frontend/templates/pages/user-settings.html
**/*.{html,htm}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Always generate semantic HTML
Files:
frontend/templates/pages/user-settings.html
{**/*.{html,htm,css,scss},**/*_controller.@(js|ts)}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Always favor the utility-first Tailwind approach; avoid creating reusable style classes and prefer reuse via template components
Files:
frontend/templates/pages/user-settings.html
frontend/templates/**/*.html
📄 CodeRabbit inference engine (.cursor/rules/stimulus-events.mdc)
Avoid data-*-outlet links for sibling controller communication when using the event-based approach; keep controllers self-contained
Use semantic HTML elements (e.g., dialog, details/summary) in templates
Files:
frontend/templates/pages/user-settings.html
🔇 Additional comments (8)
frontend/templates/pages/user-settings.html (8)
10-21: Responsive grid layout is well-structured.The three-column responsive design (1 column on mobile, 3 columns on lg breakpoint with proper col-span ratios) is clean and follows Tailwind utility-first best practices. The gap and padding hierarchy is appropriate for the layout.
26-73: Personal Information form is semantic and accessible.The form properly uses
<label>elements withforattributes, CSRF token protection, non-field error handling, and accessible input attributes (autocomplete, type). The grid layout for first/last name is responsive. Good structure.
76-96: Stimulus pricing-toggle controller is properly integrated.The controller declaration, targets (
monthlyLabel,yearlyLabel, etc.), and action bindings (change->pricing-toggle#switch) follow Stimulus conventions correctly. The radio buttons are hidden withsr-onlyand styled as custom labels—a solid accessible pattern.Verify that the
pricing-toggleStimulus controller JavaScript file exists and initializes the dynamic behavior for showing/hiding price displays and checkout sections.
301-330: Account Overview uses semantic definition list—good practice.The
<dl>structure with<dt>and<dd>elements is semantically correct for displaying key-value pairs. The conditional rendering for the Name field and the Member Since date formatting are appropriate.
340-371: Quick Actions section has good semantic structure and accessibility.The unordered list with properly labeled links (with icons) and a POST form for sign-out (secure logout) is well-designed. The conditional rendering for the Billing Portal (only when subscribed) is correct.
360-368: Sign-out form correctly uses POST method.Using
<form method="post">with CSRF token for account logout is the secure approach, preventing CSRF attacks and adhering to REST best practices (logout is a state-changing operation).
295-295: Sticky offset should be coordinated with header height using CSS custom properties.The
sticky top-24(96px) offset assumes a fixed header height. However, the header usessticky top-3 py-3.5 h-8which calculates to approximately 70–75px total, creating a gap. More importantly, this hardcoded offset cannot adapt if header dimensions change. Using CSS custom properties (e.g.,--header-height) shared between the header and sticky element would ensure consistency and prevent future misalignment.
342-342: No action required — link destination is correct.Line 342 correctly links to
{% url 'home' %}for the "View Projects" action. The home page (rendered by HomeView) displays the user's projects list under "Your Projects," making this the appropriate destination for navigating to projects.Likely an incorrect or invalid review comment.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
Comprehensive redesign of the user settings page that transforms a single-column layout into a responsive two-column grid. The layout now separates Personal Information and Subscription Plans in the left column (2/3 width) with a new Account Overview sidebar on the right (1/3 width).
Key changes:
- Restructured layout from vertical stack to
lg:grid-cols-3grid with improved responsive breakpoints - Added new Account Overview sidebar with sticky positioning showing plan status, email, name, and member since
- Added Quick Actions section with navigation links and logout functionality
- Enhanced visual hierarchy with consistent card-based sections and improved spacing
- Updated padding/spacing utilities for better mobile and desktop experience (
px-4 py-8vspx-6 py-12) - Improved typography sizing (reduced header from
text-lgtotext-base) - Maintained all existing Stimulus controller integrations (
pricing-toggle,subscription-form) - All interactive functionality and form submissions remain unchanged
Confidence Score: 4/5
- This PR is safe to merge with low risk - it's a frontend-only UI restructuring with no backend or logic changes
- Score reflects that this is a pure visual/layout refactor with no changes to business logic, API endpoints, or data handling. All Stimulus controllers remain properly integrated, and the HTML structure maintains all necessary data attributes. The main consideration is thorough visual testing across different screen sizes and subscription states.
- No files require special attention - the changes are straightforward UI improvements
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| frontend/templates/pages/user-settings.html | 4/5 | Redesigned layout with responsive grid system, improved spacing and visual hierarchy, and better mobile support |
Sequence Diagram
sequenceDiagram
participant User
participant Browser
participant PricingToggle as Stimulus: pricing-toggle
participant SubscriptionForm as Stimulus: subscription-form
participant Django as Django Backend
participant Stripe
User->>Browser: Load user settings page
Browser->>Django: GET /user/settings
Django-->>Browser: Render template with user data
Browser->>PricingToggle: Initialize controller
PricingToggle->>PricingToggle: Set isMonthly = true
PricingToggle->>Browser: Show monthly pricing
User->>Browser: Toggle to Annual
Browser->>PricingToggle: change event
PricingToggle->>PricingToggle: switch() - toggle isMonthly
PricingToggle->>Browser: Hide monthly, show yearly displays
User->>Browser: Click upgrade button
Browser->>Django: Navigate to checkout URL
Django->>Stripe: Create checkout session
Stripe-->>Django: Session URL
Django-->>Browser: Redirect to Stripe
alt User already has subscription
User->>Browser: Click switch plan
Browser->>SubscriptionForm: submit event
SubscriptionForm->>Browser: Disable button, show spinner
Browser->>Django: POST /upgrade_subscription
Django->>Stripe: Update subscription
Stripe-->>Django: Success
Django-->>Browser: Redirect with confirmation
end
1 file reviewed, no comments
This pull request contains changes generated by a Cursor Cloud Agent
Summary by CodeRabbit
New Features
Style