style: minimal dark theme

[Nick-1979]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced new localization keys for NFT and governance functionalities.
  • Added a new QuickActionButton component for enhanced modularity.

• Improvements

  • Adjusted font sizes across various components for a more cohesive visual appearance.
  • Updated button and grid styles to align with the new theme specifications.
  • Enhanced the visual representation of various UI elements, including borders and colors.
  • Simplified translation function calls for consistency.
  • Improved styling for popover and button components to enhance user experience.
  • Updated the AccountLabel component to use borders instead of background colors for profile labels.
  • Modified icon sizes and styles across multiple components for better visual consistency.
  • Enhanced the AccountBrief component with theme-based image styling.
  • Refined display logic for balance information in the AccountDetails component.
  • Introduced an animated success icon in the FailSuccessIcon component for improved visual feedback.
  • Replaced the HideNumbers component with HideBalance for better UI integration.
  • Updated the HideBalance component to toggle visibility based on theme and user interaction.
  • Added a new optional prop inHeading to the AddressDropdown component for enhanced styling flexibility.
  • Adjusted the visual presentation of the Currency and FavoriteChains components to improve consistency with the theme.
  • Removed the hideNumbers prop from several components to streamline state management.
  • Enhanced resource management in hooks by implementing unsubscribe mechanisms for storage watchers.

• Version Updates

  • Updated package version to 0.29.0.

[coderabbitai[bot]]

[!CAUTION]

Review failed

The pull request is closed.

Walkthrough

The pull request includes multiple changes across various components within the PolkaGate extension. The updates primarily focus on visual styling adjustments, including modifications to button colors, font sizes, and border properties. Notably, the TwoButtons component's secondary button styling is refined, while other components like AccountBodyFs, HomeMenu, and ShowValidator receive similar aesthetic enhancements. Additionally, the Filters component sees improvements in UI consistency and code organization. Overall, the changes are cosmetic, maintaining existing functionality while updating the visual presentation.

Changes

File Path	Change Summary
packages/extension-polkagate/src/components/TwoButtons.tsx	Updated borderColor and color properties of the secondary button's sx prop.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx	Adjusted fontSize of Identity component to 22px and added iconWidth prop to OptionalCopyButton.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx	Added opacity: 0.5 style to DragIndicatorIcon.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx	Changed icon sizes from 30px to 25px for multiple buttons and adjusted minHeight of Grid.
packages/extension-polkagate/src/fullscreen/stake/solo/partials/ShowValidator.tsx	Updated borderRightColor and maxWidth of Grid components.
packages/extension-polkagate/src/fullscreen/stake/solo/partials/ValidatorsTableFS.tsx	Changed border color of Grid for validator items from secondary.main to secondary.light.
packages/extension-polkagate/src/partials/Asset.tsx	Altered borderColor of Grid from primary.main to primary.light.
packages/extension-polkagate/src/partials/QuickAction.tsx	Changed background color of Grid for dark mode.
packages/extension-polkagate/src/partials/QuickActionFullScreen.tsx	Introduced QuickActionButton component and updated goToGovernance function for type consistency.
packages/extension-polkagate/src/popup/staking/partial/Filters.tsx	Simplified Typography rendering and updated Divider background color.
packages/extension-polkagate/src/popup/staking/partial/ShowPool.tsx	Modified border colors for Grid elements and simplified t function calls.
packages/extension-polkagate/src/popup/staking/partial/ValidatorInfo.tsx	Updated border colors for Grid components in ValidatorInformation section.
packages/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/Filters.tsx	Adjusted import statements and simplified Checkbox2 labels.
packages/extension-polkagate/src/themes/dark.ts	Modified light value of secondary color in darkTheme.
packages/extension/package.json	Updated version from 0.27.0 to 0.29.0.
packages/extension/public/locales/en/translation.json	Added new localization keys for NFT functionalities and modified existing ones.
packages/extension/src/packageInfo.ts	Updated version property from '0.27.0' to '0.29.0'.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx	Changed borderColor in Popover component's PaperProps styling.
packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx	Adjusted font sizes for Price and BalanceRow components to 21px.
packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx	Reduced font sizes for "Total" label and FormatPrice component.
packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx	Updated STORAGE_LABEL constant for simplified format.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx	Changed font size for FormatPrice component to 21px.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx	Adjusted font sizes for portfolio title and amount.
packages/extension-polkagate/src/components/FormatPrice.tsx	Modified Skeleton component's sx prop and added variant='text'.
packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx	Updated Typography color property for "Assets" label and adjusted border width for AssetsBoxes.
packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx	Removed conditional margin-top from FormatPrice component.
packages/extension-polkagate/src/popup/home/AccountLabel.tsx	Changed profile label styling from background color to border and adjusted font size.
packages/extension-polkagate/src/popup/staking/partial/ShowRoles.tsx	Added optional chaining for pool properties and updated borderColor in styling.
packages/extension-polkagate/src/popup/account/AccountBrief.tsx	Added useTheme hook for grayscale filter based on theme mode and updated Divider background color.
packages/extension-polkagate/src/popup/account/index.tsx	Updated Divider and bottom Grid background color to secondary.light.
packages/extension-polkagate/src/popup/staking/solo/index.tsx	Updated color properties to secondary.light and refined logic for displaying ToBeReleased.
packages/extension-polkagate/src/popup/home/YouHave.tsx	Replaced previous toggle mechanism with HideBalance component for improved UI.
packages/extension-polkagate/src/components/SVG/HideBalance.tsx	Introduced HideBalance component with ClosedEye and OpenEye SVG icons for balance visibility toggle.
packages/extension-polkagate/src/themes/baseTheme.ts	Changed import statement for ThemeOptions to a type-only import.
packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx	Introduced AnimatedCheckIcon for animated success representation.
packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx	Changed borderBottomColor in Grid header styling.
packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx	Updated borderColor in Grid styling.
packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx	Replaced HideNumbers component with HideBalance and adjusted layout.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx	Updated borderColor in Grid styling.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx	Introduced color variable for theme-based icon coloring and updated borderColor in Grid.
packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx	Updated borderColor in button styling.
packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx	Changed borderColor in Grid styling for list indicators.

Possibly related PRs

• 1554 - This PR focuses on refactoring the codebase to utilize React's memo functionality to decrease unnecessary re-renders. The changes in this PR could be related to the main PR, as they both aim to optimize rendering performance.

• 1565 - This PR introduces refactoring to utilize the FormatPrice component, which is also used in the main PR. The changes in this PR could be related to the main PR's modifications to the TwoButtons component.

• 1571 - This PR addresses an issue with user-added chains and their price IDs, which could be related to the main PR's changes in the TwoButtons component, as it involves handling chain-specific data.

Suggested labels

new feature

🐰 In the land of code where changes bloom,
Buttons and colors find their room.
With sizes adjusted, the visuals align,
PolkaGate shines, oh how divine!
From fonts to borders, all in a dance,
A whimsical update, give it a chance! 🌼

[!WARNING]

Rate limit exceeded

@Nick-1979 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 50 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR. We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our [FAQ](https://docs.coderabbit.ai/faq) for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 8f2cab26718c4e631ac1eac045f1355f1dd9a691 and 2d6c9dab870162939e908bed44db7acc5ba7d33f.

---

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](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , 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 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.