Sync prod w/ main

[marc-aurele-besner]

User description

Sync prod w/ main

Including:

• fix bug when trying to filter row by your own wallet #823
• Organize brand color #820
• Switch metadata for Autonomys #824
• Fix Tooltip #827
• Raw status is mention twice in operators table editor #829
• Memoize Apollo client to avoid the client re-render (canceling request from previous client in the process) #833
• Fix z-index issue on Nominators page #831

---

PR Type

enhancement

---

Description

• Updated color scheme across multiple components to enhance the UI consistency and appearance.
• Replaced various color classes with new ones, such as text-purpleAccent with text-primaryAccent.
• Updated gradient color classes for dark mode to improve visual aesthetics.
• Modified Tailwind CSS configuration to rename and update color variables.
• Memoized Apollo client creation to prevent unnecessary re-renders.

---

Changes walkthrough 📝

	Relevant files
Enhancement	14 files RegisterOperators.tsx Update color scheme for RegisterOperators component            explorer/src/components/Staking/RegisterOperators.tsx Updated color classes for dark mode. Replaced text-purpleRoyal with text-purpleUndertone. Changed gradient colors for dark mode. +18/-18  ActionsModal.tsx Update color scheme for ActionsModal component                      explorer/src/components/WalletSideKick/ActionsModal.tsx Updated color classes for dark mode. Replaced dark:bg-purpleAccent with dark:bg-primaryAccent. +11/-11  DesktopTable.tsx Update color scheme for DesktopTable component                      explorer/src/components/common/DesktopTable.tsx Updated color classes for dark mode. Replaced text-purpleShade2 with text-purpleShade. +9/-9      index.tsx Update color scheme for Farming component                                explorer/src/components/Farming/index.tsx Updated button and background color classes. Changed gradient colors for dark mode. +3/-3      AccountLatestRewards.tsx Update color scheme for AccountLatestRewards component      explorer/src/components/Consensus/Account/AccountLatestRewards.tsx Updated color classes for dark mode. Replaced text-purpleShade2 with text-purpleShade. +9/-9      Footer.tsx Update color scheme for Footer component                                  explorer/src/components/layout/Footer.tsx Updated hover color classes for links. Replaced hover:text-purpleAccent with hover:text-primaryAccent. +11/-11  ActionsModal.tsx Update color scheme for Staking ActionsModal component      explorer/src/components/Staking/ActionsModal.tsx Updated color classes for dark mode. Replaced dark:bg-purpleAccent with dark:bg-primaryAccent. +4/-4      ExtrinsicsLab.tsx Update color scheme for ExtrinsicsLab component                    explorer/src/components/WalletSideKick/ExtrinsicsLab.tsx Updated color classes for dark mode. Replaced dark:bg-purpleAccent with dark:bg-primaryAccent. +4/-4      AccountPreviousRewards.tsx Update color scheme for AccountPreviousRewards component  explorer/src/components/Consensus/Account/AccountPreviousRewards.tsx Updated color classes for dark mode. Replaced text-purpleShade2 with text-purpleShade. +7/-7      TableNavigation.tsx Update color scheme for TableNavigation component                explorer/src/components/common/TableNavigation.tsx Updated color classes for navigation buttons. Replaced text-purpleAccent with text-primaryAccent. +4/-4      ActionsDropdown.tsx Update color scheme for ActionsDropdown component                explorer/src/components/Staking/ActionsDropdown.tsx Updated color classes for dropdown button. Replaced bg-purpleAccent with bg-primaryAccent. +4/-4      HomeCards.tsx Update color scheme for HomeCards component                            explorer/src/components/Consensus/Home/HomeCards.tsx Updated gradient color classes for dark mode. Replaced purpleMedium with pastelPurple. +6/-6      OperatorsList.tsx Update color scheme for OperatorsList component                    explorer/src/components/Staking/OperatorsList.tsx Updated hover color classes for links. Replaced hover:text-purpleAccent with hover:text-primaryAccent. +6/-6      DomainsList.tsx Update color scheme for DomainsList component                        explorer/src/components/Domain/DomainsList.tsx Updated hover color classes for links. Replaced hover:text-purpleAccent with hover:text-primaryAccent. +5/-5
Configuration changes	1 files tailwind.config.ts Update Tailwind CSS color configuration                                    explorer/tailwind.config.ts Renamed gradient color variables. Updated color palette for purples and primary colors. +15/-29
Additional files (token-limit)	32 files OperatorsList.tsx ...                                                                                                            explorer/src/components/StakeWars/OperatorsList.tsx ... +1/-1      AccountBadge.tsx ...                                                                                                            explorer/src/components/WalletSideKick/AccountBadge.tsx ... +2/-2      LogDetailsEventList.tsx ...                                                                                                            explorer/src/components/Consensus/Log/LogDetailsEventList.tsx ... +1/-1      Tooltip.tsx ...                                                                                                            explorer/src/components/common/Tooltip.tsx ... +1/-1      Layout.tsx ...                                                                                                            explorer/src/components/layout/Layout.tsx ... +1/-1      ExtrinsicDetailsEventList.tsx ...                                                                                                            explorer/src/components/Consensus/Extrinsic/ExtrinsicDetailsEventList.tsx ... +1/-1      OperatorNominatorTable.tsx ...                                                                                                            explorer/src/components/Staking/OperatorNominatorTable.tsx ... +1/-1      AccountHeader.tsx ...                                                                                                            explorer/src/components/WalletSideKick/AccountHeader.tsx ... +1/-1      BlockDetailsEventList.tsx ...                                                                                                            explorer/src/components/Consensus/Block/BlockDetailsEventList.tsx ... +1/-1      BlockDetailsExtrinsicList.tsx ...                                                                                                            explorer/src/components/Consensus/Block/BlockDetailsExtrinsicList.tsx ... +1/-1      ExtrinsicTable.tsx ...                                                                                                            explorer/src/components/Consensus/Extrinsic/ExtrinsicTable.tsx ... +1/-1      LogList.tsx ...                                                                                                            explorer/src/components/Consensus/Log/LogList.tsx ... +1/-1      LeaderboardHeader.tsx ...                                                                                                            explorer/src/components/layout/LeaderboardHeader.tsx ... +1/-1      ExtrinsicList.tsx ...                                                                                                            explorer/src/components/Consensus/Extrinsic/ExtrinsicList.tsx ... +1/-1      FarmingHeader.tsx ...                                                                                                            explorer/src/components/layout/FarmingHeader.tsx ... +1/-1      StakingHeader.tsx ...                                                                                                            explorer/src/components/layout/StakingHeader.tsx ... +1/-1      ConsensusHeader.tsx ...                                                                                                            explorer/src/components/layout/ConsensusHeader.tsx ... +1/-1      DomainHeader.tsx ...                                                                                                            explorer/src/components/layout/DomainHeader.tsx ... +1/-1      BlockDetailsLogList.tsx ...                                                                                                            explorer/src/components/Consensus/Block/BlockDetailsLogList.tsx ... +1/-1      AccountRewardList.tsx ...                                                                                                            explorer/src/components/Consensus/Account/AccountRewardList.tsx ... +1/-1      BlockList.tsx ...                                                                                                            explorer/src/components/Consensus/Block/BlockList.tsx ... +1/-1      index.tsx ...                                                                                                            explorer/src/components/WalletButton/index.tsx ... +1/-1      SimpleSpinner.tsx ...                                                                                                            explorer/src/components/common/SimpleSpinner.tsx ... +1/-1      index.tsx ...                                                                                                            explorer/src/components/common/ErrorFallback/index.tsx ... +1/-1      SearchBar.tsx ...                                                                                                            explorer/src/components/common/SearchBar.tsx ... +1/-1      StatItem.tsx ...                                                                                                            explorer/src/components/common/StatItem.tsx ... +1/-1      GetDiscordRoles.tsx ...                                                                                                            explorer/src/components/WalletSideKick/GetDiscordRoles.tsx ... +1/-1      HeaderChainDropdown.tsx ...                                                                                                            explorer/src/components/layout/HeaderChainDropdown.tsx ... +1/-1      SectionHeader.tsx ...                                                                                                            explorer/src/components/layout/SectionHeader.tsx ... +1/-1      AccountBalancePieChart.tsx ...                                                                                                            explorer/src/components/Consensus/Account/AccountBalancePieChart.tsx ... +1/-1      CookieBanner.tsx ...                                                                                                            explorer/src/components/common/CookieBanner.tsx ... +1/-1      AstronautImage.tsx ...                                                                                                            explorer/src/components/common/ErrorFallback/AstronautImage.tsx ... +1/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[netlify]

✅ Deploy Preview for astral-prod ready!

Name	Link
🔨 Latest commit	9edd96e
🔍 Latest deploy log	https://app.netlify.com/sites/astral-prod/deploys/66cf071bca2cc90008b0f3b8
😎 Deploy Preview	https://deploy-preview-835--astral-prod.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for dev-astral ready!

Name	Link
🔨 Latest commit	9edd96e
🔍 Latest deploy log	https://app.netlify.com/sites/dev-astral/deploys/66cf071bc9983e0008c16808
😎 Deploy Preview	https://deploy-preview-835--dev-astral.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Code Consistency The new gradient color classes for dark mode should be consistent across all components. It seems like the gradient color values are being updated in multiple places, which could lead to inconsistencies if not all instances are updated. Consider centralizing these color definitions in a shared configuration or utility file. Styling Consistency The button class changes for dark mode should be consistent across the application. The new class dark:bg-primaryAccent is used here, but similar buttons in other components do not use this class. This could lead to a lack of uniformity in button styles across the application. Possible Accessibility Issue The changes in text color classes might affect the readability and accessibility of the table headers under different themes. Ensure that the contrast ratios meet accessibility standards.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Consistency	Maintain consistent color usage across the application Ensure that the color hex code used for the 'color' property in the object is consistent with the theme or design guidelines of the application. explorer/src/components/Consensus/Account/AccountBalancePieChart.tsx [37] -color: '#ABCFEF', +color: '#D9F0FC', # Assuming '#D9F0FC' is the standard color used elsewhere for similar purposes Suggestion importance[1-10]: 8 Why: Ensuring consistent color usage is important for maintaining a cohesive design and user experience across the application. This suggestion addresses a potential inconsistency.	8
Maintainability	Simplify dark mode CSS by using a single class Consider using a single class to handle the dark mode styles instead of multiple individual classes for each property. This can simplify the code and make it easier to manage. explorer/src/components/AutoId/index.tsx [11] -<div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'> +<div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:custom-dark-gradient sm:p-6'> Suggestion importance[1-10]: 7 Why: The suggestion to use a single class for dark mode styles can improve maintainability by reducing redundancy and making the code easier to manage. However, it is not crucial for functionality.	7
	Refactor the conditional style application for clarity and reduced redundancy Use a conditional rendering approach to apply styles based on the isDesktop state to reduce redundancy and improve readability. explorer/src/components/Consensus/Account/AccountBalanceStats.tsx [21] -const backgroundStyle = !isDesktop - ? 'dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo rounded-[20px]' - : '' +const backgroundStyle = `rounded-[20px] ${!isDesktop ? 'dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo' : ''}` Suggestion importance[1-10]: 6 Why: The refactoring suggestion improves code readability and reduces redundancy, which is beneficial for maintainability, although it does not address a critical issue.	6
Best practice	Use descriptive class names for better readability and maintainability Consider using a more descriptive class name for the dark mode gradient to enhance code readability and maintainability. explorer/src/components/Consensus/Account/AccountDetailsCard.tsx [24] -<div className='mb-4 rounded-[20px] border border-slate-100 bg-white p-6 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo md:p-4'> +<div className='mb-4 rounded-[20px] border border-slate-100 bg-white p-6 shadow dark:border-none dark:custom-dark-gradient md:p-4'> Suggestion importance[1-10]: 7 Why: Using descriptive class names enhances code readability and maintainability, making it easier for developers to understand and manage the codebase. This is a good practice but not essential for functionality.	7