feat: unified padding and font weights for DetailTable components #161
Conversation
Summary of ChangesHello @ahmet-cetinkaya, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request focuses on enhancing the visual consistency of Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Reviewer's GuideStandardizes DetailTable-related UI across tasks, habits, tags, app usage, and shared components by unifying left padding and normalizing text font weights, while making minor alignment tweaks for dropdowns and time display components. Class diagram for updated DetailTable text styles and paddingclassDiagram
class DetailTable {
+bool showDivider
+bool forceVertical
+build(BuildContext context) Widget
}
class DetailTableRowData {
+String label
+IconData icon
+String~nullable~ hintText
+Widget widget
}
class TextStyleConfig {
+FontWeight labelFontWeight
+FontWeight hintFontWeight
+FontWeight valueFontWeight
}
class PaddingConfig {
+double leftPadding
}
DetailTable --> DetailTableRowData : renders_rows_for
DetailTable --> TextStyleConfig : uses
DetailTable --> PaddingConfig : uses
%% Updated configuration reflecting this PR
TextStyleConfig : labelFontWeight = FontWeight.normal
TextStyleConfig : hintFontWeight = FontWeight.normal
TextStyleConfig : valueFontWeight = FontWeight.normal
PaddingConfig : leftPadding = AppTheme.sizeSmall
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request does a great job of standardizing padding and font weights across DetailTable components, which significantly improves UI consistency and maintainability. The changes are well-aligned with the goal of using theme-based styling. I've pointed out a couple of minor instances where hardcoded padding values can be replaced with theme constants to make the implementation even more consistent. Overall, this is a solid improvement.
...ation/ui/features/habits/components/habit_details_content/components/habit_goal_section.dart
Outdated
Show resolved
Hide resolved
src/lib/presentation/ui/features/tasks/components/task_date_picker_field.dart
Outdated
Show resolved
Hide resolved
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- In several places (e.g.
TaskDatePickerField,HabitReminderSection,ColorField), you’ve added left padding inside the row/widget while theDetailTablelikely already provides horizontal padding; consider centralizing this spacing at the table/row level to avoid doubled or inconsistent left offsets. - The
TaskDatePickerFieldTextFormFieldnow has both an outerPaddingwithAppTheme.sizeSmalland an innercontentPadding: EdgeInsets.only(left: 8.0); if you’re unifying spacing, you may want to drop or reduce the inner content padding so the effective left spacing matches other cells. - Some new padding uses raw
8.0(e.g.HabitGoalSection) while other changes useAppTheme.sizeSmall; for consistency with the theme-based approach introduced in this PR, it may be better to replace remaining literals with the corresponding theme constants.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In several places (e.g. `TaskDatePickerField`, `HabitReminderSection`, `ColorField`), you’ve added left padding inside the row/widget while the `DetailTable` likely already provides horizontal padding; consider centralizing this spacing at the table/row level to avoid doubled or inconsistent left offsets.
- The `TaskDatePickerField` `TextFormField` now has both an outer `Padding` with `AppTheme.sizeSmall` and an inner `contentPadding: EdgeInsets.only(left: 8.0)`; if you’re unifying spacing, you may want to drop or reduce the inner content padding so the effective left spacing matches other cells.
- Some new padding uses raw `8.0` (e.g. `HabitGoalSection`) while other changes use `AppTheme.sizeSmall`; for consistency with the theme-based approach introduced in this PR, it may be better to replace remaining literals with the corresponding theme constants.
## Individual Comments
### Comment 1
<location> `src/lib/presentation/ui/features/tasks/components/task_date_picker_field.dart:252-261` </location>
<code_context>
- focusedBorder: InputBorder.none,
- isDense: true,
- contentPadding: const EdgeInsets.only(left: 8.0),
+ return Padding(
+ padding: const EdgeInsets.only(left: AppTheme.sizeSmall),
+ child: Row(
+ children: [
+ // Date field
+ Expanded(
+ child: TextFormField(
+ controller: widget.controller,
+ focusNode: widget.focusNode,
+ readOnly: true,
+ style: AppTheme.bodyMedium,
+ decoration: InputDecoration(
+ hintText: widget.hintText,
+ focusedBorder: InputBorder.none,
+ isDense: true,
+ contentPadding: const EdgeInsets.only(left: 8.0),
+ ),
+ onTap: _handleDateSelection,
</code_context>
<issue_to_address>
**suggestion:** Left padding is now applied twice and mixes magic values with theme constants.
The `Padding` around the `Row` (using `AppTheme.sizeSmall`) plus `contentPadding: EdgeInsets.only(left: 8.0)` on the `InputDecoration` results in double left padding and introduces a magic number. Please either remove one of these paddings, or replace `8.0` with a theme constant (e.g. `AppTheme.sizeSmall`) so spacing remains consistent with the theme.
</issue_to_address>
### Comment 2
<location> `src/lib/presentation/ui/features/habits/components/habit_details_content/components/habit_goal_section.dart:23-25` </location>
<code_context>
icon: Icons.track_changes,
widget: Container(
- padding: const EdgeInsets.symmetric(vertical: 4),
+ padding: const EdgeInsets.only(left: 8.0, top: 4.0, bottom: 4.0),
child: GestureDetector(
onTap: isArchived ? null : onTap,
</code_context>
<issue_to_address>
**suggestion:** Use spacing constants instead of raw doubles for the new padding.
Elsewhere in this PR you’re already using `AppTheme` spacing (e.g. `AppTheme.sizeSmall`, `AppTheme.size2XSmall`). To keep spacing consistent and maintainable, please replace these `8.0`/`4.0` literals with the appropriate `AppTheme` constants, assuming the sizes match.
```suggestion
widget: Container(
padding: const EdgeInsets.only(
left: AppTheme.sizeSmall,
top: AppTheme.size2XSmall,
bottom: AppTheme.size2XSmall,
),
child: GestureDetector(
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
src/lib/presentation/ui/features/tasks/components/task_date_picker_field.dart
Show resolved
Hide resolved
...ation/ui/features/habits/components/habit_details_content/components/habit_goal_section.dart
Show resolved
Hide resolved
Code reviewFound 2 issues:
|
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request does a great job of standardizing padding and font weights across various DetailTable components, leading to a more consistent UI. The changes are well-aligned with the goal of creating a unified visual language. I've found one minor inconsistency regarding padding that could be addressed to make the implementation even more robust. Overall, this is a solid improvement to the application's UI consistency.
| widget: TagSelectDropdown( | ||
| key: ValueKey('${_tagTags!.items.length}_${_visibleOptionalFields.contains(keyRelatedTags)}'), | ||
| isMultiSelect: true, | ||
| onTagsSelected: (tagOptions, _) => _onTagsSelected(tagOptions), | ||
| showSelectedInDropdown: true, | ||
| initialSelectedTags: _tagTags!.items | ||
| .map((tag) => DropdownOption<String>( | ||
| value: tag.secondaryTagId, | ||
| label: tag.secondaryTagName, | ||
| )) | ||
| .toList(), | ||
| excludeTagIds: [_tag!.id], | ||
| icon: SharedUiConstants.addIcon, | ||
| ), |
There was a problem hiding this comment.
This change removes the Padding widget that was previously wrapping the TagSelectDropdown. However, other changes in this pull request are adding a standardized left padding to widgets within DetailTable for consistent alignment (e.g., in app_usage_details_content.dart). To maintain visual consistency across DetailTable components, it would be better to apply the standard left padding here as well, unless TagSelectDropdown is intentionally designed to span the full width without any inset.
| widget: TagSelectDropdown( | |
| key: ValueKey('${_tagTags!.items.length}_${_visibleOptionalFields.contains(keyRelatedTags)}'), | |
| isMultiSelect: true, | |
| onTagsSelected: (tagOptions, _) => _onTagsSelected(tagOptions), | |
| showSelectedInDropdown: true, | |
| initialSelectedTags: _tagTags!.items | |
| .map((tag) => DropdownOption<String>( | |
| value: tag.secondaryTagId, | |
| label: tag.secondaryTagName, | |
| )) | |
| .toList(), | |
| excludeTagIds: [_tag!.id], | |
| icon: SharedUiConstants.addIcon, | |
| ), | |
| Padding( | |
| padding: const EdgeInsets.only(left: AppTheme.sizeSmall), | |
| child: TagSelectDropdown( | |
| key: ValueKey('${_tagTags!.items.length}_${_visibleOptionalFields.contains(keyRelatedTags)}'), | |
| isMultiSelect: true, | |
| onTagsSelected: (tagOptions, _) => _onTagsSelected(tagOptions), | |
| showSelectedInDropdown: true, | |
| initialSelectedTags: _tagTags!.items | |
| .map((tag) => DropdownOption<String>( | |
| value: tag.secondaryTagId, | |
| label: tag.secondaryTagName, | |
| )) | |
| .toList(), | |
| excludeTagIds: [_tag!.id], | |
| icon: SharedUiConstants.addIcon, | |
| ), | |
| ) |
🚀 Motivation and Context
This PR standardizes the visual appearance of DetailTable components across the entire application by implementing consistent padding and font weight patterns.
⚙️ Implementation Details
📋 Checklist for Reviewer
🔗 Related [optional]
Summary by Sourcery
Standardize visual spacing and typography for DetailTable-related UI elements across tasks, habits, tags, app usages, and shared components.
Enhancements: