Improve dark mode for profiles screen - #137
Conversation
# Conflicts: # app/src/main/res/values-night/colors.xml
…cessibility" This reverts commit a659c1c.
Improves the color contrast and accessibility of the profile cards in dark mode by applying a theme overlay. This ensures all buttons render correctly with proper contrast.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughUpdated the profile list item with themed card styling, reusable text appearance, standardized button styles, revised constraints, and light/dark profile color resources. ChangesProfile styling
Estimated code review effort: 2 (Simple) | ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
There was a problem hiding this comment.
Pull request overview
This PR aims to improve dark-mode contrast/accessibility on the Profiles screen by introducing dedicated profile card/background colors and applying a MaterialComponents dark theme overlay to the profile card so Material buttons render with appropriate contrast.
Changes:
- Add new
profile_backgroundandprofile_card_backgroundcolor resources for day/night. - Introduce
Theme.NetBird.Card(night variant) based onThemeOverlay.MaterialComponents.Dark. - Update
list_item_profile.xmlto apply the card theme overlay, set the card background color, and use Material button styles.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| app/src/main/res/values/colors.xml | Adds default (day) colors for profile background and card background. |
| app/src/main/res/values-night/colors.xml | Adds night colors for profile background and card background. |
| app/src/main/res/values-night/themes.xml | Adds Theme.NetBird.Card style in the night configuration. |
| app/src/main/res/layout/list_item_profile.xml | Applies the new card theme + background color and updates button styling/ordering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@app/src/main/res/values-night/themes.xml`:
- Around line 60-61: Theme.NetBird.Card is only defined for night mode and is
referenced by list_item_profile.xml, causing crashes in light mode; add a
day-mode definition for Theme.NetBird.Card in the app's day themes resource
(values/themes.xml) mirroring the night variant but inheriting from
ThemeOverlay.MaterialComponents.Light so the style resolves during layout
inflation. Ensure the new entry uses the exact style name "Theme.NetBird.Card"
and parent "ThemeOverlay.MaterialComponents.Light" to match usage in
list_item_profile.xml and the existing night definition.
🧹 Nitpick comments (2)
app/src/main/res/values-night/colors.xml (1)
29-30: New profile colors duplicate existing values.
profile_background(#181A1D) is identical tonb_bg, andprofile_card_background(#32363D) is identical tonb_gray_light. Consider referencing the existing colors (e.g.,@color/nb_bg) to avoid drift, unless you intentionally want these to evolve independently.app/src/main/res/layout/list_item_profile.xml (1)
36-44: HardcodedtextColor,textSize, andtextStyleon the profile name.These attributes are set directly on the view rather than via a
TextAppearancestyle. This works but means any future typography changes must be applied in every layout file that uses similar headings. Consider extracting a reusable text appearance style if this pattern is used in multiple places.
|
Thank you for the PR! Please consider the comments from RabbitAI. |
@Sickjuicy The copilot found some issues. Do you plan to fix them? |
|
@pappz Yes, I’ve seen it. I just don’t have time right now, but I’ll take care of it. |
…tract profile name TextAppearance
- Include values-night/colors.xml and list_item_profile.xml changes only as requested by user.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/main/res/values/themes.xml (1)
68-73: Apply the newTextAppearance.NetBird.ProfileNamein the profile item layout to remove duplication.The style is defined here, but
app/src/main/res/layout/list_item_profile.xml(Line 28-39 in provided snippet) still hardcodes the same text attributes ontext_profile_name.Suggested follow-up diff (in
app/src/main/res/layout/list_item_profile.xml)<TextView android:id="@+id/text_profile_name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginEnd="8dp" android:ellipsize="end" android:maxLines="1" - android:textColor="@color/nb_txt" - android:textSize="18sp" - android:textStyle="bold" + style="@style/TextAppearance.NetBird.ProfileName" app:layout_constraintBottom_toBottomOf="@+id/icon_profile" app:layout_constraintEnd_toStartOf="@id/badge_active" app:layout_constraintHorizontal_bias="0" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@id/icon_profile" app:layout_constraintTop_toTopOf="@+id/icon_profile" tools:text="default" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/main/res/values/themes.xml` around lines 68 - 73, Replace the hardcoded text attributes on the TextView with id text_profile_name by removing android:textColor, android:textSize and android:textStyle and instead apply the new TextAppearance by adding android:textAppearance="@style/TextAppearance.NetBird.ProfileName" to that TextView (so it uses the defined TextAppearance.NetBird.ProfileName).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@app/src/main/res/values/themes.xml`:
- Around line 68-73: Replace the hardcoded text attributes on the TextView with
id text_profile_name by removing android:textColor, android:textSize and
android:textStyle and instead apply the new TextAppearance by adding
android:textAppearance="@style/TextAppearance.NetBird.ProfileName" to that
TextView (so it uses the defined TextAppearance.NetBird.ProfileName).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 422dbfb4-0c6f-4379-803a-e600a2aebfbb
📒 Files selected for processing (1)
app/src/main/res/values/themes.xml
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This PR improves the color contrast and accessibility of the profile cards in dark mode.
A ThemeOverlay.MaterialComponents.Dark theme overlay is now applied to the cards, which ensures all buttons render with proper contrast and makes the UI more accessible and user-friendly.
Summary by CodeRabbit