style: change colors and spaces #1611
Conversation
WalkthroughThis pull request introduces several enhancements across multiple components within the codebase. Key modifications include the addition of new optional properties to the Changes
Possibly related PRs
Suggested reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (8)
packages/extension-polkagate/src/components/VaadinIcon.tsx (3)
10-11: Add JSDoc comments for the new propsWhile the prop types are clear, adding documentation would improve maintainability.
interface VaadinIconProps extends React.HTMLAttributes<HTMLElement> { icon: string; + /** Enables continuous rotation animation when true */ spin?: boolean; + /** Enables subtle floating animation when true */ float?: boolean; }
15-33: Consider using styled-components or CSS modules instead of direct DOM manipulationThe current approach of injecting styles directly into document.head has several drawbacks:
- It's not SSR-friendly
- It modifies the global scope
- No cleanup on component unmount
Consider using styled-components or CSS modules:
import styled, { keyframes } from 'styled-components'; const spinAnimation = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const floatAnimation = keyframes` 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } `; const StyledVaadinIcon = styled(({ spin, float, ...props }) => <vaadin-icon {...props} />)` animation: ${props => props.spin ? `${spinAnimation} 3s linear infinite` : ''} ${props => props.float ? `${floatAnimation} 2s ease-in-out infinite` : ''}; `;
36-39: Add error handling for style combinationThe style combination logic should handle cases where the style prop might be undefined or invalid.
const combinedStyles: React.CSSProperties = { - animation: `${spin ? 'vaadinSpin 3s linear infinite' : ''} ${float ? 'float 2s ease-in-out infinite' : ''}`, + animation: [ + spin && 'vaadinSpin 3s linear infinite', + float && 'float 2s ease-in-out infinite' + ].filter(Boolean).join(' ') || undefined, ...style };packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx (1)
66-66: Consider applying dividerWidth consistentlyThe
dividerWidthprop is only applied to the firstTaskButton. For visual consistency, consider applying it to both buttons or removing it if not needed for the second button.packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx (1)
56-58: Consider using a theme constant for the divider width.While the width change is valid, using magic numbers (81%) in styling can make maintenance more challenging. Consider defining this value in your theme configuration or as a constant.
- <Divider sx={{ bgcolor: 'divider', height: '2px', width: '81%' }} /> + <Divider sx={{ bgcolor: 'divider', height: '2px', width: theme.spacing.dividerWidth || '81%' }} />packages/extension-polkagate/src/partials/SettingSubMenu.tsx (1)
96-99: Remove commented out onClick handlerThe commented out onClick handler with 'noop' should either be removed or implemented properly.
- <IconButton - // onClick={noop} - sx={{ height: '35px', p: 0, width: '35px' }} - > + <IconButton + sx={{ height: '35px', p: 0, width: '35px' }} + >packages/extension-polkagate/src/partials/Menu.tsx (1)
136-136: Fix inconsistent spacing in float property.There's an extra space between
floatand the=operator.- <VaadinIcon float ={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} /> + <VaadinIcon float={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx (1)
73-73: Document the significance of the default dividerWidth valueThe default value of
66%fordividerWidthseems arbitrary. Consider adding a comment explaining why this specific value was chosen, or extract it into a named constant if it's used elsewhere in the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
- packages/extension-polkagate/src/components/VaadinIcon.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx (3 hunks)
- packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx (3 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx (3 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx (8 hunks)
- packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx (1 hunks)
- packages/extension-polkagate/src/partials/Menu.tsx (6 hunks)
- packages/extension-polkagate/src/partials/SettingSubMenu.tsx (4 hunks)
- packages/extension/public/locales/en/translation.json (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
🔇 Additional comments (15)
packages/extension-polkagate/src/components/VaadinIcon.tsx (1)
6-6: LGTM: Import change is appropriateThe addition of
useEffectimport is necessary for managing the animation styles injection.packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx (2)
12-12: LGTM! Well-typed props interface.The function signature is properly typed with optional props, maintaining backward compatibility.
53-53: LGTM! Clean color property implementation.The color property implementation with fallback to 'white' is clean and maintains backward compatibility.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx (1)
123-123: Verify the VaadinIcon float property implementation.The
floatproperty being passed to VaadinIcon is non-standard. Please ensure that:
- The VaadinIcon component properly handles this prop
- The animation behavior works as expected across browsers
✅ Verification successful
The float property is properly implemented in VaadinIcon component
The VaadinIcon component correctly implements the
floatprop:
- It's properly typed in the
VaadinIconPropsinterface- It adds a CSS animation that smoothly translates the icon vertically
- The animation is defined via
@keyframes floatand applied conditionally- The implementation is clean and works across browsers
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for VaadinIcon component definition and usage of float prop ast-grep --pattern 'interface VaadinIconProps { $$$ float?: $_ $$$ }'Length of output: 77
Script:
#!/bin/bash # Let's first find the VaadinIcon component definition fd "VaadinIcon" --type f # Then search for any float-related styling or props rg "VaadinIcon.*float" -A 2Length of output: 1314
Script:
#!/bin/bash # Let's examine the VaadinIcon component implementation to understand how float prop is used cat packages/extension-polkagate/src/components/VaadinIcon.tsxLength of output: 1458
packages/extension-polkagate/src/partials/SettingSubMenu.tsx (4)
88-90: LGTM: Improved semantic stylingThe changes improve semantic styling by using the proper 'divider' color token instead of text.primary, which better follows Material-UI theming conventions.
107-117: LGTM: Consistent styling improvementsThe styling changes maintain visual consistency with other components while improving the lock icon's visibility.
126-128: Consistent divider stylingThis change follows the same pattern as previous divider updates, maintaining consistency throughout the component.
168-168: Minor formatting improvementThis is a minor formatting change that improves code readability without affecting functionality.
packages/extension-polkagate/src/partials/Menu.tsx (1)
37-40: Clean implementation with proper state management.The Menu component implementation shows good practices with:
- Well-structured state management
- Clear separation of concerns
- Smooth animations for better UX
packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx (2)
33-41: LGTM: Interface changes enhance component flexibilityThe new optional properties (
disabled,dividerWidth,loading) are well-organized and provide better customization options for the TaskButton component.
103-104: 🛠️ Refactor suggestionConsider using MUI's built-in components
Since the project already uses Material-UI (MUI), consider replacing the
Circlecomponent frombetter-react-spinkitwith MUI's built-inCircularProgresscomponent. This would:
- Reduce external dependencies
- Maintain consistent styling with other MUI components
- Ensure better long-term maintainability
Example implementation:
- import { Circle } from 'better-react-spinkit'; + import { CircularProgress } from '@mui/material'; // Later in the code: - <Circle - color={theme.palette.primary.main} - scaleEnd={0.7} - scaleStart={0.4} - size={25} - /> + <CircularProgress + size={25} + sx={{ color: theme.palette.primary.main }} + />Likely invalid or redundant comment.
packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx (3)
116-116: LGTM: Consistent divider width implementation.The addition of
dividerWidthprops to TaskButton components improves visual consistency, with appropriate width adjustments (76% for top-level and 73% for nested buttons) to account for different nesting levels.Also applies to: 149-149, 165-165, 180-180, 195-195, 210-210
146-146: LGTM: Improved divider styling.The divider styling changes enhance visual hierarchy and alignment within the nested menu structure.
234-234: LGTM: Improved type safety.The removal of type assertions for the
chainprop suggests better type definitions. Let's verify the component prop types are properly defined.Also applies to: 263-263
✅ Verification successful
Based on the search results, I can see that both EditPool and RemoveAll components in the pool-related code have proper type definitions for the
chainprop:
- EditPool component (packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/editPool/index.tsx):
interface Props { chain: Chain | null | undefined; // other props... }
- RemoveAll component (packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/removeAll/index.tsx):
interface Props { chain: Chain | null | undefined; // other props... }Type safety improvement confirmed
The components have proper type definitions for the
chainprop, allowing for null and undefined values. This validates the removal of type assertions as a legitimate type safety improvement.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify EditPool and RemoveAll component prop types # Test: Search for prop type definitions in these components echo "Checking EditPool component prop types..." ast-grep --pattern 'interface Props { $$$ chain: $_ $$$ }' echo "Checking RemoveAll component prop types..." ast-grep --pattern 'interface Props { $$$ chain: $_ $$$ }'Length of output: 120757
packages/extension/public/locales/en/translation.json (1)
1412-1413: LGTM! The translation entries are properly formatted.The new entry for theme switching functionality is correctly added and follows i18n best practices.
packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx
Show resolved
Hide resolved
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- packages/extension-polkagate/src/components/VaadinIcon.tsx (1 hunks)
🔇 Additional comments (3)
packages/extension-polkagate/src/components/VaadinIcon.tsx (3)
6-11: LGTM! Clean interface extensionThe new props are properly typed as optional booleans, following TypeScript best practices.
37-41: LGTM! Clean style compositionThe style computation properly combines animations with existing styles while respecting accessibility preferences.
43-48: The @ts-ignore issue needs to be addressedThis issue was previously identified. Please refer to the existing review comment for the solution to properly type the vaadin-icon element.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx (2 hunks)
- packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx (2 hunks)
🔇 Additional comments (4)
packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx (3)
33-33: LGTM! Grid alignment change improves visual consistency.The justifyContent modification aligns with the PR's styling objectives and matches similar alignment changes in other components.
34-34: Verify divider width consistency across components.While the bgcolor change to 'divider' improves theme consistency, the width (83%) differs from other components mentioned in the summary (81%). Consider standardizing the divider widths across components for better visual consistency.
#!/bin/bash # Search for Divider width declarations to check consistency rg -g '*.tsx' -g '*.ts' 'Divider.*width.*%' -A 1 -B 1Consider standardizing to 81% width to match other components:
- <Divider sx={{ bgcolor: 'divider', height: '1px', mr: '10px', width: '83%' }} /> + <Divider sx={{ bgcolor: 'divider', height: '1px', mr: '10px', width: '81%' }} />
17-17: Verify consistent function declaration spacing across the codebase.The added space between function name and parameters should follow a consistent pattern throughout the codebase.
packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx (1)
21-21: LGTM! Style changes look good.The function declaration formatting and Grid container alignment changes are consistent with React/TypeScript conventions and improve the layout.
Also applies to: 56-56
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx (3 hunks)
- packages/extension-polkagate/src/partials/SettingSubMenu.tsx (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/extension-polkagate/src/partials/SettingSubMenu.tsx
🔇 Additional comments (2)
packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx (2)
12-12: LGTM: Well-structured prop interface with proper defaults.The new optional props with TypeScript types and default values provide good flexibility while maintaining backward compatibility.
53-55: LGTM: Improved style configurability.The replacement of hardcoded values with configurable props enhances the component's reusability.
packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx (2)
Line range hint
52-106: Consider extracting common icon styles to reduce duplication.The TaskButton icons share identical styling properties. Consider extracting the common styles to a constant or styled component.
const commonIconStyle = { height: '25px', width: '25px', color: theme.palette.text.primary }; // Usage example: <VaadinIcon icon='vaadin:file-text' style={commonIconStyle} />
Line range hint
89-99: Consider extracting camera settings check logic.The camera settings check logic could be extracted into a separate hook or utility function for better reusability and separation of concerns.
const useCameraSettings = () => { const { t } = useTranslation(); const getCameraDisabledMessage = (onSettingsClick: () => void) => settings.camera !== 'on' ? ( <Grid fontSize='12px' item letterSpacing='-1.5%' ml='19.5%' onClick={onSettingsClick} sx={{ cursor: 'pointer' }} textAlign='left'> {t('Allow QR camera access in the extension's setting in order to use this feature')} <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 12, mb: '-2px', stroke: '#BA2882' }} /> </Grid> ) : undefined; return { isCameraDisabled: settings.camera !== 'on', getCameraDisabledMessage }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- packages/extension-polkagate/src/components/AccountIcons.tsx (1 hunks)
- packages/extension-polkagate/src/components/Identicon.tsx (3 hunks)
- packages/extension-polkagate/src/components/Main.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx (2 hunks)
- packages/extension-ui/src/types.ts (0 hunks)
💤 Files with no reviewable changes (1)
- packages/extension-ui/src/types.ts
✅ Files skipped from review due to trivial changes (1)
- packages/extension-polkagate/src/components/Main.tsx
🔇 Additional comments (5)
packages/extension-polkagate/src/components/Identicon.tsx (1)
71-71:⚠️ Potential issueFix invalid rgba color value.
The background color uses an invalid rgba value where the green channel is 292, which exceeds the maximum valid value of 255.
Apply this fix:
- background: rgba(192, 192, 292, 0.25); + background: rgba(192, 192, 192, 0.25);Likely invalid or redundant comment.
packages/extension-polkagate/src/components/AccountIcons.tsx (2)
57-57: LGTM! Robust fallback handling added.The addition of a fallback value (
formatted || address) improves the component's resilience by ensuring the Identicon always receives a value, even whenformattedis unavailable.
57-57: Verify handling of undefined values.Since both
formattedandaddresscould potentially be undefined (from the Props interface), we should verify that the Identicon component handles undefined values appropriately.✅ Verification successful
No issues with undefined value handling
The Identicon component is properly typed to accept
value?: AccountId | string | nulland the implementation shows it's directly passed to an underlying Icon component. The AccountIcons component correctly passes either the formatted address or the raw address to Identicon, both of which are string types. Since the Identicon's Props interface explicitly allows for undefined/null values through the optional type declaration, this is safe.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check how Identicon handles undefined values # Search for Identicon component implementation and its value prop handling ast-grep --pattern 'interface Props { $$$ value?: $_; $$$ }' # Search for any null checks or undefined handling in Identicon rg -A 5 'value(\s+|[^a-zA-Z])' --type typescriptLength of output: 13572
Script:
#!/bin/bash # Let's check the Identicon component implementation to see how it handles undefined values ast-grep --pattern 'function Identicon({ $$$, value, $$$ }: Props) { $$$ }' # Also search for any direct usage of the value prop rg -t tsx -t ts "value[^a-zA-Z]" packages/extension-polkagate/src/components/Identicon.tsx -A 5Length of output: 205
Script:
#!/bin/bash # Let's try a different approach to find Identicon implementation rg --type-add 'ts:*.{ts,tsx}' -t ts "value[^a-zA-Z]" packages/extension-polkagate/src/components/Identicon.tsx -A 5 # Also check how AccountIcons uses Identicon rg --type-add 'ts:*.{ts,tsx}' -t ts "Identicon" packages/extension-polkagate/src/components/AccountIcons.tsx -A 5Length of output: 946
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx (2)
13-13: LGTM: Translation hook import is necessary.The uncommented
useTranslationimport is required as the component actively uses it for text translations throughout the UI.
22-22: LGTM: Style consistency improvement.The added space after the function name aligns with the PR's styling objectives.
| @@ -14,7 +12,7 @@ import Icon from '@polkadot/react-identicon'; | |||
|
|
|||
| interface Props { | |||
| className?: string; | |||
| iconTheme?: IconTheme | string; | |||
| iconTheme?: IconTheme; | |||
There was a problem hiding this comment.
💡 Codebase verification
Type restriction on iconTheme is a breaking change
The search results show that iconTheme prop is widely used throughout the codebase with string values, specifically:
- Many components pass
chain?.icon || 'polkadot'as the iconTheme - The fallback value 'polkadot' is a string literal
Changing the type from IconTheme | string to just IconTheme would break these existing usages. The type should continue to support string values to maintain compatibility.
🔗 Analysis chain
Verify usage of string-based icon themes.
The type restriction from IconTheme | string to IconTheme improves type safety but could be a breaking change if string values were being passed to this prop.
Let's verify all usages of this component with the iconTheme prop:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for Identicon component usage with iconTheme prop
rg -A 2 '<Identicon.*iconTheme'
Length of output: 33
Script:
#!/bin/bash
# Let's try a broader search for Identicon usage and manually inspect the results
rg -l '<Identicon'
# Also search for any imports of the Identicon component to trace its usage
rg -l "import.*Identicon"
# Additionally, let's check if there are any direct references to iconTheme
rg "iconTheme"
Length of output: 5402
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx (3)
76-79: Type safety improvement looks good!The changes properly handle the case where the background image might be undefined in storage. The conditional check
imgUrl && tryToApplyImg(imgUrl)prevents potential runtime errors.Consider using a type guard instead of the eslint suppression:
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -const imgUrl = res?.['backgroundImage']?.[mode] as string | undefined; +const backgroundImage = res?.backgroundImage as BgImage | undefined; +const imgUrl = backgroundImage?.[mode];This would provide better type safety and eliminate the need for the eslint suppression.
Line range hint
1-107: Consider architectural improvements for better maintainabilityA few suggestions to improve the component's architecture:
- Extract Chrome storage operations into a custom hook:
function useBackgroundImage(mode: string) { const [bgImage, setBgImage] = useState<string>(); const saveImage = useCallback((url: string) => { // Chrome storage logic }, [mode]); // ... other operations return { bgImage, saveImage, clearImage }; }
- Move image URL construction to a configuration file:
// config/images.ts export const getImagePath = (theme: string, index: number) => `${process.env.BG_THEME_BASE_URL}/${theme}/${index}.jpeg`;
- Consider implementing proper error boundaries for more robust error handling.
These changes would improve testability, maintainability, and separation of concerns.
Would you like me to provide more detailed implementations for any of these suggestions?
CSP needs to be updated to allow GitHub image source
The manifest's Content Security Policy doesn't include
img-srcdirective to allow loading images from GitHub. The current CSP only definesscript-srcandobject-src:"content_security_policy": { "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" }Add the following to the CSP to securely allow GitHub raw content:
- Update the CSP in
packages/extension/manifest.jsonto include:img-src 'self' https://raw.githubusercontent.com🔗 Analysis chain
Line range hint
11-11: Verify image source securityThe hardcoded image path from GitHub raw content could potentially be a security concern:
const imagePath = `https://raw.githubusercontent.com/PolkaGate/backgrounds/main/${process.env['BG_THEME'] || 'general'}`;Consider:
- Using Content Security Policy (CSP) headers to restrict image sources
- Implementing image validation before applying to background
- Adding a fallback mechanism if the GitHub repository is unavailable
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if CSP headers are defined in the manifest rg -A 5 "content_security_policy" manifest.jsonLength of output: 101
Script:
#!/bin/bash # Look for manifest files in the repository fd manifest.json # Check for any CSP related configurations in the codebase rg -i "content.?security.?policy" # Check the actual image loading implementation ast-grep --pattern 'const imagePath = `https://raw.githubusercontent.com/PolkaGate/backgrounds/main/${$_}`'Length of output: 452
Script:
#!/bin/bash # Check the content of the manifest.json to see CSP configuration cat packages/extension/manifest.json | grep -A 5 "content_security_policy" # Check how the background image is being used ast-grep --pattern 'style={{ backgroundImage: `url(${$_})` }}'Length of output: 257
enjoy new styles ;)
Summary by CodeRabbit
Release Notes
New Features
VaadinIconcomponent with optionalspinandfloatproperties for dynamic animations.TaskButtoncomponent now supportsdisabled,dividerWidth, andloadingstates for improved customization.ThemeChangercomponent allowing customizable color and border options.Improvements
AccountSettingandSettingSubMenucomponents.These updates aim to enhance user experience through improved visual feedback and customization options.