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.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughUpdated profile list item layout to use a themed MaterialCardView, refactored text/button styling and constraints, and added matching light/dark color and theme resources including a profile name text appearance and Theme.NetBird.Card. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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.
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:layout_margin="8dp" | ||
| android:theme="@style/Theme.NetBird.Card" |
There was a problem hiding this comment.
android:theme references @style/Theme.NetBird.Card, but that style is only defined in values-night/themes.xml. In light mode this style won't resolve at runtime (and can also break resource linking), causing the profile list item to fail to inflate. Add a non-night definition of Theme.NetBird.Card in app/src/main/res/values/themes.xml (likely using a light/neutral ThemeOverlay), keeping the dark parent only in the values-night variant.
| android:theme="@style/Theme.NetBird.Card" |
| 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_constraintHorizontal_chainStyle="packed" | ||
| app:layout_constraintStart_toEndOf="@id/icon_profile" | ||
| app:layout_constraintTop_toTopOf="@+id/icon_profile" |
There was a problem hiding this comment.
Constraint references use @+id/icon_profile even though the id is already declared on the ImageView. Prefer @id/icon_profile for references to avoid creating/looking like a new id and to prevent lint warnings.
| app:layout_constraintBottom_toBottomOf="@+id/icon_profile" | ||
| app:layout_constraintEnd_toEndOf="parent" | ||
| app:layout_constraintHorizontal_bias="0" /> | ||
| app:layout_constraintHorizontal_bias="0" | ||
| app:layout_constraintStart_toEndOf="@id/text_profile_name" | ||
| app:layout_constraintTop_toTopOf="@+id/icon_profile" |
There was a problem hiding this comment.
Same as above: use @id/icon_profile instead of @+id/icon_profile when constraining badge_active to icon_profile to avoid lint warnings and keep id usage consistent.
![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
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