Add theme & asset exported from Figma - #73
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @lethargicpanda, 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 significantly overhauls the application's user interface and underlying architecture by introducing a dedicated ui-component module. This new module centralizes all reusable UI elements, including a completely new theme (colors, typography) derived from Figma designs, and various custom composables like buttons, image inputs, and tags. The main application now consumes these centralized components, leading to a more consistent and maintainable UI. A major part of this refactoring includes updating how sample catalog items are displayed, introducing new card layouts for both standard and featured content.
Highlights
- New UI Component Module: A new
ui-componentmodule has been introduced to centralize and encapsulate reusable UI elements, promoting consistency and maintainability across the application. - Comprehensive Theme and Asset Update: The application's theming, including colors and typography, has been completely revamped based on Figma designs. This update includes support for dynamic contrast levels on Android U+ devices and introduces new color definitions for various elements and tags.
- Enhanced Sample Catalog Display: The display of sample catalog items has been refactored to use new
CatalogRowCardandCatalogWideCardcomponents. This allows for a more visually engaging presentation, including support for 'featured' samples with dedicated 'keyArt' images. - Streamlined Launcher Icon Configuration: The application's launcher icon handling has been updated, simplifying the configuration by removing redundant round icon definitions.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a significant and welcome UI overhaul by adding a new theme based on Figma designs and refactoring UI elements into a dedicated :ui-component module. This greatly improves the app's structure, maintainability, and visual consistency. The implementation of dynamic color schemes that adapt to system contrast settings is a particularly nice touch. My feedback focuses on improving accessibility, fixing a critical issue in a new component, and suggesting some minor refactorings for better performance and code clarity.
There was a problem hiding this comment.
Large files, like the 2.7 MB image, shouldn't be added to the app or repository. This is because the entire app should ideally be only a few megabytes in total.
In addition - having fixed pngs for background images won't scale nicely when we display the background on various screen sizes. I'd even consider it an anti-pattern to have full-screen pngs as backgrounds.
@margeeta can we reconsider the backgrounds and somehow create them using vectors? I see in Figma that they do seem to be created based on a bunch of svgs, how were you thinking about the adaptability of them?
At the very least, we should optimize the PNG files to reduce its pixel size and file size. Tools like TinyPNG are great for this.
There was a problem hiding this comment.
Good point. Let me see if we can compress the PNG.
It's a pretty "textured" design, I don't know if we could easily use SVG for it.
3c262f4 to
3340ca2
Compare
4584d67 to
ef4ac8f
Compare
| ) { innerPadding -> | ||
| Image( | ||
| painter = painterResource(id = R.drawable.img_bg_landing), | ||
| contentDescription = "Background Image", |
There was a problem hiding this comment.
You can use null here as this image does not have any semantic meaning, it's purely decorative. See A11y docs
You wouldn't want Talkback to select the background and say "Background Image", which is what happens when you set the content description here.
There was a problem hiding this comment.
yes, I will set it to null. We should have talk back reading it.
| navController.navigate(it.route) | ||
| } | ||
| } | ||
| if (it.isFeatured) { |
There was a problem hiding this comment.
I didn't test it, but would it be possible to break the UI with random types of elements? Maybe we should sort items first and have dedicated sections for featured vs not.
There was a problem hiding this comment.
Even if the variable is called it is it still statically typed to SampleCatalogItem.
Regarding the sorting, the current implementation is intentional. I synced we design and we don't necessarily want to always display the featured items at the top.
- update theme - update colors - update typography - add new key assets (icons & background) - update launcher
3340ca2 to
f57f533
Compare
3 participants
Theme.ktColor.ktType.kt