Address minor UI feedback

[avazirna]

Product Description

This PR addresses feedback related to the font size in the Home screen square buttons and the alignment of widgets in the navigation panel.

Ticket: https://dimagi.atlassian.net/browse/SAAS-16530

Safety Assurance

Safety story

No concerns, only minor visual changes.

QA Plan

A QA label was added to make sure QA looks for and reports any inconsistencies in the UI that can be related to these changes.

Labels and Review

• Do we need to enhance the manual QA test coverage ? If yes, the "QA Note" label is set correctly
• Does the PR introduce any major changes worth communicating ? If yes, the "Release Note" label is set and a "Release Note" is specified in PR description.
• Risk label is set correctly
• The set of people pinged as reviewers is appropriate for the level of risk of the change

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request makes several layout and dimension adjustments across multiple XML files. In the layout files (screen_form_entry.xml, square_button_text.xml, and square_card.xml), attributes related to vertical alignment, text size, and padding have been modified. For instance, the vertical centering on navigation buttons has been removed, and adjustments have been made to text sizes and padding around UI components. Additionally, several dimens.xml files have been updated to change font sizes—often increasing or decreasing values for small, medium, large, and extra-large fonts depending on screen width—with a new dimension added for progress bar vertical padding. There are no changes to exported or public entities.

Suggested labels

skip-integration-tests

Suggested reviewers

• OrangeAndGreen
• pm-dimagi

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d3f29f1 and 329600b.

📒 Files selected for processing (7)

• app/res/layout/screen_form_entry.xml (2 hunks)
• app/res/layout/square_button_text.xml (1 hunks)
• app/res/layout/square_card.xml (2 hunks)
• app/res/values-w320dp/dimens.xml (1 hunks)
• app/res/values-w600dp/dimens.xml (1 hunks)
• app/res/values-w720dp/dimens.xml (1 hunks)
• app/res/values/dimens.xml (2 hunks)

🔇 Additional comments (10)

app/res/layout/square_button_text.xml (1)

29-30: UI Text Size Update in Square Button Layout
The text size for the ResizingTextView has been updated to use @dimen/font_size_large with a corresponding small text attribute set to @dimen/font_size_medium. These changes align with the UI feedback to reduce the text size, and the resource references appear consistent.

app/res/values-w720dp/dimens.xml (1)

5-7: Dimension Resource Adjustments for w720dp
The font dimension values have been updated:

• font_size_small changed to 18sp
• font_size_medium changed to 19sp
• font_size_large changed to 26sp

These modifications align with the design’s new scaling for larger screens and should help maintain consistency across the application. Please verify the visual impact on high-density devices.

app/res/layout/square_card.xml (2)

44-45: ResizingTextView Font Size Adjustments in Square Card
The android:textSize attribute for the ResizingTextView (card_text) is now set to @dimen/font_size_large, and the associated app:text_size_small has been updated to @dimen/font_size_medium. This update reflects the move towards a more balanced text hierarchy as per the UI feedback.

---

57-57: Subtext Font Size Update in Square Card
The TextView with ID card_subtext now uses @dimen/font_size_small for its text size. Ensure that this reduction still provides adequate legibility under various lighting and display conditions.

app/res/values-w600dp/dimens.xml (1)

5-7: Font Size Tweaks in w600dp Dimensions
The font dimension values for medium, large, and xlarge have been updated as follows:

• font_size_medium: 18sp
• font_size_large: 25sp
• font_size_xlarge: 30sp

These adjustments are in line with the UI feedback to fine-tune text sizing on medium-sized screens. It is recommended to verify these changes in context on devices that use this resource qualifier to ensure consistent legibility.

app/res/values-w320dp/dimens.xml (1)

4-7: Updated Font Sizes for w320dp Devices
For lower resolution screens, the updated values are:

• font_size_small increased from 12sp to 14sp
• font_size_medium increased from 15sp to 17sp
• font_size_large increased from 18sp to 19sp
• font_size_xlarge increased from 21sp to 23sp

These changes aim to improve readability on smaller screens. It would be beneficial to test these configurations on actual devices to ensure that the increased sizes do not lead to overcrowded UI elements.

app/res/layout/screen_form_entry.xml (2)

89-89: Adapt ProgressBar Height for Dynamic Content

Changing the android:layout_height to "wrap_content" allows the ProgressBar to adjust its size according to its content rather than being fixed. Please verify on different device sizes to ensure this dynamic sizing meets your UI design intent.

---

100-101: Standardize ProgressBar Padding

The replacement of the previous padding values with @dimen/progressbar_vertical_padding for both android:paddingBottom and android:paddingTop promotes consistency and simplifies future styling adjustments. Confirm that 16dp padding aligns well with the overall spacing strategy on this screen.

app/res/values/dimens.xml (2)

60-63: Increase Font Sizes for Enhanced Readability

Updating the font dimensions—font_size_small to 10sp, font_size_medium to 14sp, font_size_large to 16sp, and font_size_xlarge to 21sp—should improve text legibility across the app. Please ensure that these new sizes are applied consistently in all affected layouts.

---

111-111: Introduce Named Dimension for ProgressBar Padding

The addition of <dimen name="progressbar_vertical_padding">16dp</dimen> centralizes the definition of the padding value used for the ProgressBar. This makes future adjustments easier and ensures consistent vertical spacing.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[shubham1g5]

can we link a ticket to know where are these changes coming from ?

[avazirna]

@damagatchi retest this please