refactor: some more negative positioning/margin hacks

[myxmaster]

Description

This cleans up some more layout issues. (I hope it is ok that I make several PRs for this stuff from time to time, instead of tackling all of those issues in 1 big PR - but doing everything at once would be a lot of work, coding and reviewing).

All 3 files:

• cleaned up margin/positioning hacks
• centralized styles
• removed explicit fontFamily (ZeusText handels it)

Channel screen:

• Hourglass now vertically centered
• Divider added above "Routing History"
  -> Question: should we place Routing History below the "general" channel details, where "Pending HTLCs" sits as well? if yes, use Divider here too (where exactly?)?

Before	After

Product Details:

• Active switch now similar to other menus

Before	After

POS Settings:

• Switches and 3 sub settings (Reconciliation, Categories, Products) now similar to other menus

Before	After

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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 refactoring UI elements across several screens to enhance layout consistency, centralize styling, and modernize component usage. The changes aim to remove legacy positioning hacks and standardize the appearance of interactive elements like switches and tappable rows, resulting in a cleaner and more predictable user interface.

Highlights

• Layout Consistency & Cleanup: Eliminated negative margins and positioning hacks across the Channel, Product Details, and POS Settings screens to improve UI consistency.
• Styling Centralization: Moved inline styles to StyleSheet.create and removed redundant fontFamily declarations, relying on a global font handler (ZeusText).
• UI Component Modernization: Replaced @rneui/themed ListItem components with custom TouchableOpacity and View structures for improved flexibility and consistency in tappable rows and switch controls.
• Channel Screen Enhancements: Vertically centered the Hourglass icon in the 'Pending HTLCs' section and introduced a divider above the 'Routing History' section for better visual organization.
• Product Details & POS Settings UI Alignment: Standardized the appearance and behavior of switches and related settings (e.g., 'Active' switch, 'Dev Mode', 'Disable Tips') to match other application menus.

Changelog

• views/Channels/Channel.tsx
  • Removed Icon and ListItem imports from @rneui/themed.
  • Refactored the 'Pending HTLCs' section from ListItem to TouchableOpacity with Row and Text components, incorporating HourglassIcon and CaretRight SVG for navigation.
  • Refactored the 'Routing History' section similarly, adding a Divider above it and using TouchableOpacity with Row and Text components, and CaretRight SVG.
  • Adjusted the status style to use marginVertical instead of margin.
  • Added new styles tappableRow and tappableRowText for consistent row presentation.
• views/POS/ProductDetails.tsx
  • Removed ListItem import from @rneui/themed.
  • Modified padding for a View containing product details from padding to paddingVertical and paddingHorizontal.
  • Removed explicit fontFamily: 'PPNeueMontreal-Book' from a Text style.
  • Refactored the 'Active' switch UI from ListItem to a custom View with Text and Switch components, applying a new switchRow style.
  • Adjusted padding for the button container from paddingHorizontal and paddingVertical to a single padding.
  • Added a new switchRow style for consistent switch presentation.
• views/Settings/PointOfSale.tsx
  • Added StyleSheet, TouchableOpacity, CaretRight (SVG), and Row imports.
  • Removed Icon and ListItem imports from @rneui/themed.
  • Removed explicit fontFamily: 'PPNeueMontreal-Book' from multiple Text styles.
  • Refactored the 'Dev Mode', 'Disable Tips', 'Enable Printer', and 'Show Keypad' switch settings from ListItem to custom View components with Text and Switch, utilizing new switchRow and settingLabel styles.
  • Refactored the rendering of LIST_ITEMS (Reconciliation, Categories, Products) from ListItem to TouchableOpacity with Row, Text, and CaretRight SVG, applying new tappableRow and settingLabel styles.
  • Defined new styles switchRow, tappableRow, and settingLabel for consistent UI elements.

Activity

• No human activity has been recorded on this pull request yet.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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

1. 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. ↩

[gemini-code-assist]

Code Review

This pull request provides a great cleanup of layout code in Channel.tsx, ProductDetails.tsx, and PointOfSale.tsx. The changes successfully remove positioning hacks like negative margins and left properties, replacing them with a more robust and maintainable Flexbox-based approach. Centralizing styles for rows and removing redundant fontFamily properties further improves code quality. The refactoring from @rneui/themed's ListItem to custom TouchableOpacity components makes the layout code more consistent across the app. I've kept the suggestion to further improve consistency.