lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles for icon-button and close-button

Browse Source
This commit is contained in:
tom
2025-03-20 19:25:21 +01:00
parent f7b62b10a9
commit 730678be0f
70 changed files with 400 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
icons/close.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

icons/heart_filled.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path d="m10 3.557-.555-.577c-.947-.946-2.205-.989-3.508-.97a4.876 4.876 0 0 0-3.469 1.547A5.443 5.443 0 0 0 1.001 7.22a5.46 5.46 0 0 0 1.363 3.709L10 18.5l7.636-7.58a5.46 5.46 0 0 0 1.363-3.709 5.443 5.443 0 0 0-1.467-3.664 4.876 4.876 0 0 0-3.47-1.546c-1.302-.02-2.56.023-3.507.969L10 3.557Z" fill="currentColor"/>
<svg viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m10 4.34-.555-.578c-.947-.946-2.205-.988-3.508-.97A4.876 4.876 0 0 0 2.468 4.34a5.443 5.443 0 0 0-1.467 3.664 5.46 5.46 0 0 0 1.363 3.71L10 19.282l7.636-7.58a5.46 5.46 0 0 0 1.363-3.71 5.443 5.443 0 0 0-1.467-3.663 4.876 4.876 0 0 0-3.47-1.547c-1.302-.019-2.56.023-3.507.97L10 4.338Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 398 B

icons/heart_outline.svg
+3 -3
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor" stroke="currentColor" stroke-width=".4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor"/>
<svg viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.005 4.24a5.332 5.332 0 0 1 7.542 7.532l-.007.008L10 19.328l-7.54-7.54-.007-.007a5.332 5.332 0 0 1 7.542-7.532l.003-.002.007-.007Zm1.017 1.061L10.004 6.32 8.98 5.312a3.862 3.862 0 0 0-5.465 5.453L10 17.25l6.485-6.493A3.862 3.862 0 0 0 11.022 5.3Z" fill="currentColor" stroke="currentColor" stroke-width=".4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.005 4.24a5.332 5.332 0 0 1 7.542 7.532l-.007.008L10 19.328l-7.54-7.54-.007-.007a5.332 5.332 0 0 1 7.542-7.532l.003-.002.007-.007Zm1.017 1.061L10.004 6.32 8.98 5.312a3.862 3.862 0 0 0-5.465 5.453L10 17.25l6.485-6.493A3.863 3.863 0 0 0 11.022 5.3Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 776 B

After

Width:  |  Height:  |  Size: 768 B

icons/wallets/metamask.svg
+13 -13
View File
@@ -1,14 +1,14 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.004 2.61 13.2 8.432l1.443-3.434 6.36-2.386Z" fill="#E2761B"/>
<path d="m2.988 2.61 7.741 5.876-1.372-3.489-6.369-2.386Zm15.208 13.492L16.117 19.3l4.447 1.229 1.279-4.356-3.647-.07Zm-16.032.071 1.271 4.356L7.882 19.3l-2.078-3.198-3.64.071Z" fill="#E4761B"/>
<path d="m7.631 10.7-1.24 1.882 4.417.197-.157-4.765L7.63 10.7Zm8.73 0L13.3 7.959l-.101 4.82 4.408-.197-1.248-1.883Zm-8.479 8.6 2.651-1.3-2.29-1.795-.36 3.095ZM13.46 18l2.658 1.3-.368-3.095L13.459 18Z" fill="#E4761B"/>
<path d="M16.117 19.3 13.458 18l.212 1.741-.023.733 2.47-1.174Zm-8.235 0 2.47 1.174-.015-.733.196-1.74-2.65 1.299Z" fill="#D7C1B3"/>
<path d="M10.392 15.055 8.18 14.4l1.561-.717.65 1.37Zm3.208 0 .65-1.37 1.57.716-2.22.654Z" fill="#233447"/>
<path d="m7.882 19.3.377-3.198-2.455.071L7.882 19.3Zm7.859-3.198.376 3.198 2.079-3.127-2.455-.07Zm1.867-3.52-4.408.197.408 2.276.65-1.37 1.57.716 1.78-1.82Zm-9.428 1.82 1.569-.718.643 1.37.416-2.275-4.416-.197 1.788 1.82Z" fill="#CD6116"/>
<path d="m6.392 12.582 1.85 3.623L8.18 14.4l-1.788-1.82Zm9.435 1.82-.078 1.803 1.859-3.623-1.78 1.82Zm-5.02-1.623-.415 2.276.518 2.686.117-3.537-.22-1.425Zm2.393 0-.212 1.417.094 3.545.526-2.686-.408-2.276Z" fill="#E4751F"/>
<path d="m13.608 15.055-.526 2.686.377.26 2.29-1.796.078-1.804-2.22.654ZM8.18 14.4l.063 1.804L10.533 18l.377-.26-.518-2.685L8.18 14.4Z" fill="#F6851B"/>
<path d="m13.647 20.474.023-.733-.196-.173h-2.957l-.18.173.016.733-2.47-1.174.862.709 1.749 1.22h3.004l1.757-1.22.862-.709-2.47 1.174Z" fill="#C0AD9E"/>
<path d="m13.459 18-.377-.26H10.91l-.377.26-.196 1.741.18-.173h2.957l.196.173-.211-1.74Z" fill="#161616"/>
<path d="M21.333 8.81 22 5.595l-.996-2.985-7.545 5.623L16.36 10.7l4.102 1.206.91-1.064-.392-.283.628-.575-.487-.378.628-.48-.416-.316ZM2 5.595l.666 3.213-.423.315.627.48-.478.379.627.575-.392.283.902 1.064 4.102-1.206 2.902-2.465L2.988 2.61 2 5.596Z" fill="#763D16"/>
<path d="M20.462 11.904 16.361 10.7l1.247 1.883-1.86 3.623 2.448-.032h3.647l-1.38-4.269ZM7.632 10.7l-4.103 1.205-1.365 4.27h3.64l2.439.03-1.851-3.622 1.24-1.883Zm5.568 2.08.259-4.545 1.192-3.237H9.357l1.176 3.237.275 4.545.094 1.433.008 3.529h2.172l.016-3.529.102-1.433Z" fill="#F6851B"/>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path fill="#E2761B" d="M19.004 1 11.2 6.82l1.443-3.434L19.003 1Z"/>
<path fill="#E4761B" d="M.988 1 8.73 6.875 7.357 3.386.988 1Zm15.208 13.492-2.078 3.197 4.447 1.229 1.278-4.356-3.647-.07Zm-16.031.07 1.27 4.356 4.447-1.229-2.078-3.197-3.64.07Z"/>
<path fill="#E4761B" d="m5.631 9.088-1.239 1.883 4.416.197-.157-4.765-3.02 2.685Zm8.73 0-3.06-2.74-.101 4.82 4.408-.197-1.247-1.883ZM5.882 17.69l2.651-1.3-2.29-1.795-.36 3.095Zm5.577-1.3 2.659 1.3-.369-3.095-2.29 1.796Z"/>
<path fill="#D7C1B3" d="m14.118 17.69-2.66-1.3.213 1.74-.024.733 2.47-1.174Zm-8.236 0 2.47 1.173-.015-.733.196-1.74-2.65 1.3Z"/>
<path fill="#233447" d="M8.392 13.444 6.18 12.79l1.561-.716.651 1.37Zm3.208 0 .651-1.37 1.569.716-2.22.654Z"/>
<path fill="#CD6116" d="m5.882 17.69.377-3.199-2.455.071 2.078 3.127Zm7.86-3.199.376 3.198 2.078-3.127-2.455-.07Zm1.866-3.52-4.408.197.408 2.276.65-1.37 1.57.716 1.78-1.82ZM6.18 12.79l1.57-.717.642 1.37.416-2.276-4.416-.197 1.788 1.82Z"/>
<path fill="#E4751F" d="m4.392 10.97 1.851 3.624-.063-1.804-1.788-1.82Zm9.435 1.82-.078 1.804 1.859-3.623-1.78 1.82Zm-5.02-1.622-.415 2.276.518 2.686.117-3.537-.22-1.425Zm2.393 0-.212 1.418.094 3.544.526-2.686-.408-2.276Z"/>
<path fill="#F6851B" d="m11.608 13.444-.526 2.686.377.26 2.29-1.796.079-1.804-2.22.654ZM6.18 12.79l.063 1.804 2.29 1.796.377-.26-.518-2.686-2.212-.654Z"/>
<path fill="#C0AD9E" d="m11.647 18.863.024-.733-.196-.173H8.518l-.18.173.015.733-2.47-1.174.862.709 1.75 1.22h3.003l1.757-1.22.863-.709-2.471 1.174Z"/>
<path fill="#161616" d="m11.459 16.39-.377-.26H8.91l-.377.26-.196 1.74.18-.173h2.957l.197.173-.212-1.74Z"/>
<path fill="#763D16" d="M19.333 7.198 20 3.985 19.004 1l-7.545 5.623L14.36 9.09l4.102 1.205.91-1.064-.393-.283.628-.575-.486-.378.627-.48-.416-.316ZM0 3.985l.667 3.213-.424.315.628.48-.479.379.628.575-.393.283.902 1.064 4.102-1.205 2.902-2.466L.988 1 0 3.985Z"/>
<path fill="#F6851B" d="M18.463 10.294 14.36 9.089l1.247 1.882-1.859 3.623 2.447-.031h3.647l-1.38-4.27ZM5.63 9.089l-4.1 1.205-1.365 4.268h3.639l2.44.032-1.852-3.623 1.24-1.882Zm5.57 2.079.258-4.545 1.192-3.237H7.357l1.176 3.237.275 4.545.094 1.433.008 3.529h2.172l.016-3.529.102-1.433Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

package.json
+2 -2
View File
@@ -45,7 +45,7 @@
"@blockscout/bens-types": "1.4.1",
"@blockscout/stats-types": "2.5.0-alpha",
"@blockscout/visualizer-types": "0.2.0",
"@chakra-ui/react": "3.12.0",
"@chakra-ui/react": "3.13.0",
"@cloudnouns/kit": "1.1.6",
"@emotion/react": "11.14.0",
"@growthbook/growthbook-react": "0.21.0",
@@ -124,7 +124,7 @@
"xss": "^1.0.14"
},
"devDependencies": {
"@chakra-ui/cli": "3.2.5",
"@chakra-ui/cli": "3.13.0",
"@eslint/compat": "1.2.2",
"@eslint/js": "9.14.0",
"@next/eslint-plugin-next": "15.0.3",
public/icons/name.d.ts
Vendored
+1
View File
@@ -35,6 +35,7 @@
| "checkered_flag"
| "clock-light"
| "clock"
| "close"
| "coins/bitcoin"
| "collection"
| "columns"
toolkit/chakra/alert.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
{ closable && (
<CloseButton
pos="relative"
size="sm"
m={ 0.5 }
alignSelf="flex-start"
onClick={ handleClose }
/>
toolkit/chakra/badge.tsx
+3 -1
View File
@@ -11,12 +11,13 @@ import { Skeleton } from './skeleton';
export interface BadgeProps extends Omit<ChakraBadgeProps, 'colorScheme'> {
loading?: boolean;
iconStart?: IconName;
endElement?: React.ReactNode;
truncated?: boolean;
}
export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
function Badge(props, ref) {
const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props;
const { loading, iconStart, children, asChild = true, truncated = false, endElement, ...rest } = props;
const child = <chakra.span overflow="hidden" textOverflow="ellipsis">{ children }</chakra.span>;
@@ -31,6 +32,7 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
<ChakraBadge display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
{ iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
{ childrenElement }
{ endElement }
</ChakraBadge>
</Skeleton>
);
toolkit/chakra/close-button.tsx
+6 -5
View File
@@ -1,13 +1,14 @@
import type { ButtonProps } from '@chakra-ui/react';
import { IconButton as ChakraIconButton, useRecipe } from '@chakra-ui/react';
import { useRecipe } from '@chakra-ui/react';
import * as React from 'react';
import IconSvg from 'ui/shared/IconSvg';
import { recipe as closeButtonRecipe } from '../theme/recipes/close-button.recipe';
import { IconButton } from './icon-button';
export interface CloseButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
variant?: 'plain';
size?: 'sm' | 'md' | 'lg';
size?: 'md';
}
export const CloseButton = React.forwardRef<
@@ -19,8 +20,8 @@ export const CloseButton = React.forwardRef<
const styles = recipe(recipeProps);
return (
<ChakraIconButton aria-label="Close" ref={ ref } css={ styles } { ...restProps }>
{ props.children ?? <IconSvg name="cross" boxSize={ 6 }/> }
</ChakraIconButton>
<IconButton aria-label="Close" ref={ ref } css={ styles } { ...restProps }>
{ props.children ?? <IconSvg name="close"/> }
</IconButton>
);
});
toolkit/chakra/icon-button.tsx
+27 -6
View File
@@ -2,22 +2,43 @@ import React from 'react';
import { Button, type ButtonProps } from './button';
export interface IconButtonProps extends ButtonProps {}
// TODO @tom2drum variants for icon buttons: prev-next, top-bar, copy-to-clipboard, filter column
export interface IconButtonProps extends Omit<ButtonProps, 'size'> {
size?: '2xs' | 'md';
}
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
function IconButton(props, ref) {
const { size, variant = 'plain', ...rest } = props;
const sizeStyle = (() => {
switch (size) {
case '2xs': {
return {
_icon: { boxSize: 5 },
boxSize: 5,
borderRadius: 'sm',
};
}
case 'md': {
return {
_icon: { boxSize: 5 },
boxSize: 8,
};
}
default:
return {};
}
})();
return (
<Button
ref={ ref }
display="inline-flex"
justifyContent="center"
px="0"
py="0"
{ ...(size ? { size } : { height: 'auto', minW: 'auto' }) }
alignItems="center"
p={ 0 }
minW="auto"
{ ...sizeStyle }
flexShrink="0"
variant={ variant }
{ ...rest }
toolkit/chakra/select.tsx
-3
View File
@@ -63,9 +63,6 @@ const SelectClearTrigger = React.forwardRef<
return (
<ChakraSelect.ClearTrigger asChild { ...props } ref={ ref }>
<CloseButton
variant="plain"
focusVisibleRing="inside"
focusRingWidth="2px"
pointerEvents="auto"
/>
</ChakraSelect.ClearTrigger>
toolkit/chakra/toaster.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const Toaster = () => {
) }
{ closable && (
<Toast.CloseTrigger asChild>
<CloseButton size="md"/>
<CloseButton/>
</Toast.CloseTrigger>
) }
</Toast.Root>
toolkit/theme/foundations/semanticTokens.ts
+13 -2
View File
@@ -23,11 +23,13 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
dropdown: {
fg: {
DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
selected: { value: { _light: '{colors.blue.600}', _dark: '{colors.gray.50}' } },
selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.whiteAlpha.800}' } },
},
bg: {
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
},
border: {
DEFAULT: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.600}' } },
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.600}' } },
},
},
header: {
@@ -53,6 +55,15 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
DEFAULT: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
},
},
icon_secondary: {
fg: {
DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.whiteAlpha.800}' } },
},
bg: {
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
},
},
hero: {
bg: {
DEFAULT: {
toolkit/theme/recipes/button.recipe.ts
+27 -8
View File
@@ -96,13 +96,13 @@ export const recipe = defineRecipe({
// When any items (filters) are selected in the popover, the button should change its background and text color.
// The last CSS selector is for redefining styles for the TabList component.
_selected: {
bg: 'button.dropdown.border.selected',
bg: 'button.dropdown.bg.selected',
color: 'button.dropdown.fg.selected',
borderColor: 'button.dropdown.border.selected',
borderColor: 'transparent',
_hover: {
bg: 'button.dropdown.border.selected',
bg: 'button.dropdown.bg.selected',
color: 'button.dropdown.fg.selected',
borderColor: 'button.dropdown.border.selected',
borderColor: 'transparent',
},
},
},
@@ -241,12 +241,31 @@ export const recipe = defineRecipe({
color: 'text.secondary',
},
},
icon_secondary: {
bg: 'transparent',
color: 'button.icon_secondary.fg',
border: 'none',
_hover: {
color: 'link.primary.hover',
},
_selected: {
bg: 'button.icon_secondary.bg.selected',
color: 'button.icon_secondary.fg.selected',
_hover: {
bg: 'button.icon_secondary.bg.selected',
color: 'button.icon_secondary.fg.selected',
},
},
_expanded: {
color: 'link.primary.hover',
},
},
},
size: {
'2xs': { px: 2, h: 5, textStyle: 'xs', borderRadius: 'sm', gap: 1 },
xs: { px: 2, h: 6, textStyle: 'sm', borderRadius: 'sm', gap: 1 },
sm: { px: 3, h: 8, textStyle: 'md', borderRadius: 'base', gap: 1 },
md: { px: 3, h: 10, textStyle: 'md', borderRadius: 'base', gap: 2, '& .chakra-spinner': { '--spinner-size': '20px' } },
'2xs': { px: 2, h: 5, minW: 5, textStyle: 'xs', borderRadius: 'sm', gap: 1 },
xs: { px: 2, h: 6, minW: 6, textStyle: 'sm', borderRadius: 'sm', gap: 1 },
sm: { px: 3, h: 8, minW: 8, textStyle: 'md', borderRadius: 'base', gap: 1 },
md: { px: 3, h: 10, minW: 10, textStyle: 'md', borderRadius: 'base', gap: 2, '& .chakra-spinner': { '--spinner-size': '20px' } },
},
},
defaultVariants: {
toolkit/theme/recipes/close-button.recipe.ts
+1 -3
View File
@@ -27,9 +27,7 @@ export const recipe = defineRecipe({
},
},
size: {
sm: { boxSize: 6 },
md: { boxSize: 8 },
lg: { boxSize: 10 },
md: { boxSize: 5 },
},
},
defaultVariants: {
toolkit/theme/recipes/dialog.recipe.ts
+7 -7
View File
@@ -45,7 +45,8 @@ export const recipe = defineSlotRecipe({
zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
bg: 'dialog.bg',
color: 'dialog.fg',
boxShadow: 'lg',
boxShadow: 'size.lg',
borderRadius: 'xl',
_open: {
animationDuration: 'moderate',
},
@@ -68,14 +69,13 @@ export const recipe = defineSlotRecipe({
footer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
justifyContent: 'flex-start',
gap: '3',
px: '0',
pt: '2',
pb: '0',
p: '0',
mt: '6',
},
title: {
textStyle: 'heading.md',
textStyle: 'heading.lg',
fontWeight: '500',
},
description: {
@@ -145,7 +145,7 @@ export const recipe = defineSlotRecipe({
},
md: {
content: {
maxW: '640px',
maxW: '728px',
},
},
cover: {
ui/address/contract/ContractSourceAddressSelector.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect,
maxW={{ base: '180px', lg: 'none' }}
loading={ isLoading }
/>
<Flex columnGap={ 2 } alignItems="center">
<Flex alignItems="center">
<CopyToClipboard text={ selectedItem.address } ml={ 0 }/>
<LinkNewTab
label="Open contract details page in new tab"
ui/address/contract/methods/ContractAbiItem.tsx
+5 -2
View File
@@ -100,9 +100,12 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
</Box>
<Badge colorPalette={ isRead ? 'purple_alt' : 'blue_alt' } flexShrink={ 0 }>{ isRead ? 'read' : 'write' }</Badge>
{ 'method_id' in data && (
<Badge display="inline-flex" alignItems="center" flexShrink={ 0 }>
<Badge
flexShrink={ 0 }
endElement={ <CopyToClipboard text={ data.method_id } as="div"/> }
gap={ 0 }
>
{ data.method_id }
<CopyToClipboard text={ data.method_id } as="div"/>
</Badge>
) }
</AccordionItemTrigger>
ui/address/contract/methods/form/ContractMethodArrayButton.tsx
-1
View File
@@ -27,7 +27,6 @@ const ContractMethodArrayButton = ({ className, type, index, onClick, isDisabled
data-index={ index }
variant="outline"
boxSize={ 5 }
flexShrink={ 0 }
onClick={ handleClick }
disabled={ isDisabled }
>
ui/address/contract/methods/form/ContractMethodFieldInput.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
const inputEndElement = (
<Flex alignItems="center">
<ClearButton onClick={ handleClear } isDisabled={ isDisabled } minW={ 6 } isVisible={ field.value !== undefined && field.value !== '' }/>
<ClearButton onClick={ handleClear } isDisabled={ isDisabled } isVisible={ field.value !== undefined && field.value !== '' }/>
{ data.type === 'address' && <ContractMethodAddressButton onClick={ handleAddressButtonClick } isDisabled={ isDisabled }/> }
{ argTypeMatchInt && !isNativeCoin && (hasTimestampButton ? (
<Button
ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
+1 -1
View File
@@ -68,8 +68,8 @@ const ContractMethodMultiplyButton = ({ onClick, isDisabled, initialValue, onCha
<PopoverTrigger>
<IconButton
variant="subtle"
size="xs"
cursor="pointer"
boxSize={ 6 }
p={ 0 }
disabled={ isDisabled }
borderBottomLeftRadius={ 0 }
ui/address/details/AddressFavoriteButton.tsx
+4 -4
View File
@@ -62,13 +62,13 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
<IconButton
className={ className }
aria-label="edit"
variant="outline"
size="sm"
flexShrink={ 0 }
variant="icon_secondary"
size="md"
selected={ Boolean(watchListId) }
onClick={ onClick }
onFocusCapture={ onFocusCapture }
>
<IconSvg name={ watchListId ? 'star_filled' : 'star_outline' } boxSize={ 5 }/>
<IconSvg name={ watchListId ? 'star_filled' : 'star_outline' }/>
</IconButton>
</Tooltip>
) }
ui/address/details/AddressQrCode.tsx
+3 -4
View File
@@ -62,12 +62,11 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
<IconButton
className={ className }
aria-label="Show QR code"
variant="outline"
size="sm"
variant="icon_secondary"
size="md"
onClick={ onOpen }
flexShrink={ 0 }
>
<IconSvg name="qr_code" boxSize={ 5 }/>
<IconSvg name="qr_code"/>
</IconButton>
</Tooltip>
ui/address/tokenSelect/TokenSelect.tsx
+3 -3
View File
@@ -73,11 +73,11 @@ const TokenSelect = ({ onClick }: Props) => {
>
<IconButton
aria-label="Show all tokens"
variant="outline"
size="sm"
variant="icon_secondary"
size="md"
onClick={ handleIconButtonClick }
>
<IconSvg name="wallet" boxSize={ 5 }/>
<IconSvg name="wallet"/>
</IconButton>
</Link>
</Tooltip>
ui/advancedFilter/filters/AddressFilter.tsx
+2 -4
View File
@@ -78,13 +78,11 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
<IconButton
aria-label="add"
variant="outline"
minW="30px"
w="30px"
h="30px"
size="md"
ml={ 2 }
onClick={ onAddFieldClick }
>
<IconSvg name="plus" w="20px" h="20px"/>
<IconSvg name="plus"/>
</IconButton>
) }
</Flex>
ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
-1
View File
@@ -44,7 +44,6 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
aria-label={ section.open ? 'Collapse section' : 'Expand section' }
variant="link"
boxSize={ 6 }
flexShrink={ 0 }
>
<IconSvg
name="arrows/east-mini"
ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
+4 -6
View File
@@ -45,24 +45,22 @@ const ContractVerificationFieldLibraryItem = ({ index, fieldsLength, onAddFieldC
<IconButton
aria-label="delete"
variant="outline"
w="30px"
h="30px"
size="md"
onClick={ handleRemoveButtonClick }
disabled={ isDisabled }
>
<IconSvg name="minus" w="20px" h="20px"/>
<IconSvg name="minus"/>
</IconButton>
) }
{ fieldsLength < LIMIT && (
<IconButton
aria-label="add"
variant="outline"
w="30px"
h="30px"
size="md"
onClick={ handleAddButtonClick }
disabled={ isDisabled }
>
<IconSvg name="plus" w="20px" h="20px"/>
<IconSvg name="plus"/>
</IconButton>
) }
</Flex>
ui/marketplace/Banner/FeaturedApp.tsx
+3 -2
View File
@@ -129,9 +129,10 @@ const FeaturedApp = ({
<IconButton
aria-label="Mark as favorite"
title="Mark as favorite"
// TODO @tom2drum fix this button
boxSize={ 8 }
variant="icon_secondary"
size="md"
onClick={ handleFavoriteClick }
selected={ isFavorite }
>
<FavoriteIcon isFavorite={ isFavorite }/>
</IconButton>
ui/marketplace/Banner/FeaturedAppMobile.tsx
+3 -2
View File
@@ -143,9 +143,10 @@ const FeaturedAppMobile = ({
top={{ base: 1, sm: '18px' }}
aria-label="Mark as favorite"
title="Mark as favorite"
// TODO @tom2drum fix this button
boxSize={ 8 }
variant="icon_secondary"
size="md"
onClick={ onFavoriteClick }
selected={ isFavorite }
>
<FavoriteIcon isFavorite={ isFavorite }/>
</IconButton>
ui/marketplace/FavoriteIcon.tsx
+1 -6
View File
@@ -7,15 +7,10 @@ interface Props extends HTMLChakraProps<'div'> {
isFavorite: boolean;
};
const FavoriteIcon = ({ isFavorite, color, ...rest }: Props) => {
const heartFilledColor = { _light: 'blue.600', _dark: 'blue.300' };
const defaultColor = isFavorite ? heartFilledColor : (color || 'gray.400');
const FavoriteIcon = ({ isFavorite, ...rest }: Props) => {
return (
<IconSvg
name={ isFavorite ? 'heart_filled' : 'heart_outline' }
color={ defaultColor }
boxSize={ 5 }
{ ...rest }
/>
);
ui/marketplace/MarketplaceAppCard.tsx
+9 -13
View File
@@ -183,7 +183,7 @@ const MarketplaceAppCard = ({
>
More info
</Link>
<Flex alignItems="center">
<Flex alignItems="center" gap={ 1 }>
<Rating
appId={ id }
rating={ rating }
@@ -197,25 +197,21 @@ const MarketplaceAppCard = ({
<IconButton
aria-label="Mark as favorite"
title="Mark as favorite"
variant="ghost"
colorScheme="gray"
boxSize={{ base: 6, md: '30px' }}
variant="icon_secondary"
size="md"
onClick={ handleFavoriteClick }
ml={ 2 }
selected={ isFavorite }
>
<FavoriteIcon isFavorite={ isFavorite }/>
</IconButton>
<CopyToClipboard
text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
type="share"
boxSize={{ base: 6, md: '30px' }}
variant="ghost"
colorScheme="gray"
color="gray.400"
_hover={{ color: 'gray.400' }}
ml={{ base: 1, md: 0 }}
display="inline-flex"
borderRadius="base"
variant="icon_secondary"
size="md"
borderRadius="none"
ml={ 0 }
boxSize={ 8 }
/>
</Flex>
</Flex>
ui/marketplace/MarketplaceAppModal.tsx
+9 -14
View File
@@ -130,8 +130,6 @@ const MarketplaceAppModal = ({
const isMobile = useIsMobile();
const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
const iconColor = { _light: 'blue.600', _dark: 'gray.400' };
return (
<DialogRoot
open={ Boolean(data.id) }
@@ -218,25 +216,22 @@ const MarketplaceAppModal = ({
<IconButton
aria-label="Mark as favorite"
title="Mark as favorite"
variant="outline"
w={ 9 }
h={ 8 }
flexShrink={ 0 }
variant="icon_secondary"
size="md"
onClick={ handleFavoriteClick }
selected={ isFavorite }
>
<FavoriteIcon isFavorite={ isFavorite } color={ iconColor }/>
<FavoriteIcon isFavorite={ isFavorite }/>
</IconButton>
<CopyToClipboard
text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
type="share"
variant="outline"
w={ 9 }
h={ 8 }
color={ iconColor }
_hover={{ color: iconColor }}
display="inline-flex"
borderRadius="base"
variant="icon_secondary"
size="md"
borderRadius="none"
ml={ 0 }
boxSize={ 8 }
/>
</Flex>
</Flex>
ui/marketplace/MarketplaceAppTopBar.tsx
-1
View File
@@ -53,7 +53,6 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
<ButtonBackTo
href={ goBackUrl }
hint="Back to dApps list"
size="sm"
loading={ isLoading }
/>
<Link
ui/pages/Chakra.tsx
+2
View File
@@ -16,6 +16,7 @@ import CollapsibleShowcase from 'ui/showcases/Collapsible';
import ContentLoaderShowcase from 'ui/showcases/ContentLoader';
import DialogShowcase from 'ui/showcases/Dialog';
import FieldShowcase from 'ui/showcases/Field';
import IconButtonShowcase from 'ui/showcases/IconButton';
import InputShowcase from 'ui/showcases/Input';
import LinkShowcase from 'ui/showcases/Link';
import MenuShowcase from 'ui/showcases/Menu';
@@ -55,6 +56,7 @@ const tabs = [
{ label: 'Collapsible', value: 'collapsible', component: <CollapsibleShowcase/> },
{ label: 'Content loader', value: 'content-loader', component: <ContentLoaderShowcase/> },
{ label: 'Dialog', value: 'dialog', component: <DialogShowcase/> },
{ label: 'Icon button', value: 'icon-button', component: <IconButtonShowcase/> },
{ label: 'Input', value: 'input', component: <InputShowcase/> },
{ label: 'Field', value: 'field', component: <FieldShowcase/> },
{ label: 'Link', value: 'link', component: <LinkShowcase/> },
ui/pages/Chart.tsx
+8 -11
View File
@@ -16,7 +16,6 @@ import * as metadata from 'lib/metadata';
import * as mixpanel from 'lib/mixpanel/index';
import getQueryParamString from 'lib/router/getQueryParamString';
import { Button } from 'toolkit/chakra/button';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Select } from 'toolkit/chakra/select';
import { Skeleton } from 'toolkit/chakra/skeleton';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
@@ -230,16 +229,14 @@ const Chart = () => {
{ !isMobile && (isInBrowser && ((window.navigator.share as any) ?
shareButton :
(
<IconButton variant="outline" size="sm" asChild p={ 1 }>
<CopyToClipboard
text={ config.app.baseUrl + router.asPath }
type="link"
boxSize={ 8 }
color="button.outline.fg"
ml={ 0 }
borderRadius="base"
/>
</IconButton>
<CopyToClipboard
text={ config.app.baseUrl + router.asPath }
type="link"
ml={ 0 }
borderRadius="none"
variant="icon_secondary"
size="md"
/>
)
)) }
{ (hasItems || lineQuery.isPlaceholderData) && (
ui/pages/Marketplace.tsx
+3 -4
View File
@@ -163,12 +163,11 @@ const Marketplace = () => {
<MenuRoot>
<MenuTrigger asChild>
<IconButton
variant="dropdown"
size="sm"
px="9px"
variant="icon_secondary"
size="md"
ml="auto"
>
<IconSvg name="dots" boxSize="18px"/>
<IconSvg name="dots"/>
</IconButton>
</MenuTrigger>
<MenuContent>
ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx
+4 -4
View File
@@ -51,11 +51,11 @@ const PublicTagsSubmitFieldAddresses = () => {
aria-label="add"
data-index={ index }
variant="outline"
boxSize="30px"
size="md"
onClick={ handleAddFieldClick }
disabled={ isDisabled }
>
<IconSvg name="plus" boxSize={ 5 }/>
<IconSvg name="plus"/>
</IconButton>
) }
{ fields.length > 1 && (
@@ -63,11 +63,11 @@ const PublicTagsSubmitFieldAddresses = () => {
aria-label="delete"
data-index={ index }
variant="outline"
boxSize="30px"
size="md"
onClick={ handleRemoveFieldClick }
disabled={ isDisabled }
>
<IconSvg name="minus" boxSize={ 5 }/>
<IconSvg name="minus"/>
</IconButton>
) }
</GridItem>
ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
+4 -4
View File
@@ -102,11 +102,11 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
aria-label="add"
data-index={ index }
variant="outline"
boxSize="30px"
size="md"
onClick={ handleAddClick }
disabled={ isDisabled }
>
<IconSvg name="plus" boxSize={ 5 }/>
<IconSvg name="plus"/>
</IconButton>
) }
{ onRemoveClick && (
@@ -114,11 +114,11 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
aria-label="delete"
data-index={ index }
variant="outline"
boxSize="30px"
size="md"
onClick={ handleRemoveClick }
disabled={ isDisabled }
>
<IconSvg name="minus" boxSize={ 5 }/>
<IconSvg name="minus"/>
</IconButton>
) }
</Flex>
ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
+2 -2
View File
@@ -78,8 +78,8 @@ const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Pr
return (
<MenuRoot unmountOnExit={ false }>
<MenuTrigger asChild>
<IconButton variant="dropdown" size="sm" className={ className } onClick={ handleButtonClick } aria-label="Show address menu">
<IconSvg name="dots" boxSize="18px"/>
<IconButton variant="icon_secondary" size="md" className={ className } onClick={ handleButtonClick } aria-label="Show address menu">
<IconSvg name="dots"/>
</IconButton>
</MenuTrigger>
<MenuContent>
ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
+4 -1
View File
@@ -53,7 +53,6 @@ const TokenInfoMenuItem = ({ hash, type }: ItemProps) => {
}, [ router ]);
const element = (() => {
const icon = <IconSvg name="edit" boxSize={ 6 } p={ 1 }/>;
const isVerifiedAddress = verifiedAddressesQuery.data?.verifiedAddresses
.find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase());
const hasApplication = applicationsQuery.data?.submissions.some(({ tokenAddress }) => tokenAddress.toLowerCase() === hash.toLowerCase());
@@ -70,6 +69,8 @@ const TokenInfoMenuItem = ({ hash, type }: ItemProps) => {
switch (type) {
case 'button': {
const icon = <IconSvg name="edit" boxSize={ 6 } p={ 0.5 }/>;
return (
<AuthGuard onAuthSuccess={ onAuthSuccess }>
{ ({ onClick }) => (
@@ -79,6 +80,8 @@ const TokenInfoMenuItem = ({ hash, type }: ItemProps) => {
);
}
case 'menu_item': {
const icon = <IconSvg name="edit" boxSize={ 6 } p={ 1 }/>;
return (
<AuthGuard onAuthSuccess={ onAuthSuccess }>
{ ({ onClick }) => (
ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
+4 -4
View File
@@ -21,11 +21,11 @@ const ButtonItem = ({ className, label, onClick, icon, isDisabled }: Props) => {
className={ className }
onClick={ onClick }
disabled={ isDisabled }
size="sm"
variant="outline"
px="4px"
size="md"
variant="icon_secondary"
_icon={{ boxSize: 6 }}
>
{ typeof icon === 'string' ? <IconSvg name={ icon } boxSize={ 6 }/> : icon }
{ typeof icon === 'string' ? <IconSvg name={ icon }/> : icon }
</IconButton>
</Tooltip>
);
ui/shared/ClearButton.tsx
+3 -12
View File
@@ -1,8 +1,7 @@
import { chakra } from '@chakra-ui/react';
import React from 'react';
import { IconButton } from 'toolkit/chakra/icon-button';
import IconSvg from 'ui/shared/IconSvg';
import { CloseButton } from 'toolkit/chakra/close-button';
interface Props {
onClick: (e: React.SyntheticEvent) => void;
@@ -13,23 +12,15 @@ interface Props {
const ClearButton = ({ onClick, isDisabled, isVisible = true, className }: Props) => {
return (
<IconButton
<CloseButton
disabled={ isDisabled || !isVisible }
className={ className }
aria-label="Clear input"
title="Clear input"
size="sm"
onClick={ onClick }
opacity={ isVisible ? 1 : 0 }
visibility={ isVisible ? 'visible' : 'hidden' }
>
<IconSvg
name="status/error"
boxSize={ 3 }
color={{ _light: 'gray.300', _dark: 'gray.600' }}
_hover={{ color: { _light: 'gray.200', _dark: 'gray.500' } }}
/>
</IconButton>
/>
);
};
ui/shared/CopyToClipboard.tsx
+4 -5
View File
@@ -1,4 +1,3 @@
import { chakra } from '@chakra-ui/react';
import React from 'react';
import type { IconButtonProps } from 'toolkit/chakra/icon-button';
@@ -62,14 +61,14 @@ const CopyToClipboard = (props: Props) => {
ml={ 2 }
borderRadius="sm"
loadingSkeleton={ isLoading }
color="icon.info"
_hover={{ color: 'link.primary.hover' }}
variant="icon_secondary"
size="2xs"
{ ...rest }
>
<IconSvg name={ iconName } boxSize="full"/>
<IconSvg name={ iconName }/>
</IconButton>
</Tooltip>
);
};
export default React.memo(chakra(CopyToClipboard));
export default React.memo(CopyToClipboard);
ui/shared/PrevNext.tsx
+4 -2
View File
@@ -41,10 +41,11 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
aria-label="prev"
borderRadius="sm"
variant="subtle"
boxSize={ 6 }
onClick={ handelPrevClick }
disabled={ isPrevDisabled }
>
<IconSvg name="arrows/east-mini" boxSize={ 6 }/>
<IconSvg name="arrows/east-mini"/>
</IconButton>
</Tooltip>
<Tooltip content={ nextLabel }>
@@ -52,11 +53,12 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
aria-label="next"
borderRadius="sm"
variant="subtle"
boxSize={ 6 }
ml="10px"
onClick={ handelNextClick }
disabled={ isNextDisabled }
>
<IconSvg name="arrows/east-mini" boxSize={ 6 } transform="rotate(180deg)"/>
<IconSvg name="arrows/east-mini" transform="rotate(180deg)"/>
</IconButton>
</Tooltip>
</Box>
ui/shared/ResetIconButton.tsx
+2 -8
View File
@@ -1,8 +1,7 @@
import React from 'react';
import { IconButton } from 'toolkit/chakra/icon-button';
import { CloseButton } from 'toolkit/chakra/close-button';
import { Tooltip } from 'toolkit/chakra/tooltip';
import IconSvg from 'ui/shared/IconSvg';
type Props = {
onClick: () => void;
@@ -11,12 +10,7 @@ type Props = {
const ResetIconButton = ({ onClick }: Props) => {
return (
<Tooltip content="Reset filter">
<IconButton ml={ 1 } variant="link" onClick={ onClick }>
<IconSvg
name="cross"
boxSize={ 5 }
/>
</IconButton>
<CloseButton onClick={ onClick } ml={ 1 }/>
</Tooltip>
);
};
ui/shared/TableItemActionButtons.tsx
+4 -6
View File
@@ -21,28 +21,26 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props
<IconButton
aria-label="edit"
variant="link"
size="2xs"
onClick={ onEditClick }
onFocusCapture={ onFocusCapture }
loadingSkeleton={ isLoading }
display="inline-block"
flexShrink={ 0 }
borderRadius="none"
>
<IconSvg name="edit" boxSize={ 5 }/>
<IconSvg name="edit"/>
</IconButton>
</Tooltip>
<Tooltip content="Delete">
<IconButton
aria-label="delete"
variant="link"
size="2xs"
onClick={ onDeleteClick }
onFocusCapture={ onFocusCapture }
loadingSkeleton={ isLoading }
display="inline-block"
flexShrink={ 0 }
borderRadius="none"
>
<IconSvg name="delete" boxSize={ 5 }/>
<IconSvg name="delete"/>
</IconButton>
</Tooltip>
</HStack>
ui/shared/address/AddressAddToWallet.tsx
+3 -5
View File
@@ -130,13 +130,11 @@ const AddressAddToWallet = ({ className, token, tokenId, isLoading, variant = 'i
<IconButton
className={ className }
aria-label="Add token to wallet"
variant="outline"
size="sm"
px={ 1 }
variant="plain"
size="md"
onClick={ handleClick }
flexShrink={ 0 }
>
<IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 6 }/>
<IconSvg name={ WALLETS_INFO[wallet].icon }/>
</IconButton>
</Tooltip>
);
ui/shared/buttons/ButtonBackTo.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import React from 'react';
import type { ButtonProps } from 'toolkit/chakra/button';
import type { IconButtonProps } from 'toolkit/chakra/icon-button';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Link } from 'toolkit/chakra/link';
import { Tooltip } from 'toolkit/chakra/tooltip';
import IconSvg from 'ui/shared/IconSvg';
interface Props extends ButtonProps {
interface Props extends IconButtonProps {
href?: string;
hint?: string;
}
ui/shared/chart/ChartMenu.tsx
+2 -2
View File
@@ -119,8 +119,8 @@ const ChartMenu = ({
<>
<MenuRoot>
<MenuTrigger asChild>
<IconButton variant="dropdown" size="sm" aria-label="Open chart options menu" loadingSkeleton={ isLoading } borderRadius="base" borderWidth="0">
<IconSvg name="dots" boxSize={ 4 } transform="rotate(-90deg)"/>
<IconButton variant="icon_secondary" size="md" aria-label="Open chart options menu" loadingSkeleton={ isLoading }>
<IconSvg name="dots"/>
</IconButton>
</MenuTrigger>
<MenuContent>
ui/shared/chart/ChartWidget.tsx
+3 -5
View File
@@ -111,13 +111,11 @@ const ChartWidget = ({
<IconButton
hidden={ !zoomRange }
aria-label="Reset zoom"
w={ 9 }
h={ 8 }
size="sm"
variant="outline"
size="md"
variant="icon_secondary"
onClick={ handleZoomReset }
>
<IconSvg name="repeat" boxSize={ 4 }/>
<IconSvg name="repeat"/>
</IconButton>
</Tooltip>
ui/shared/filters/PopoverFilterRadio.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ const PopoverFilterRadio = ({ name, hasActiveFilter, collection, isLoading, onCh
variant="filter"
>
<SelectControl
triggerProps={{ asChild: true, pr: 2 }}
triggerProps={{ asChild: true, px: { base: 1, lg: 2 } }}
noIndicator
defaultValue={ [ collection.items[0].value ] }
>
ui/shared/forms/inputs/file/FileSnippet.tsx
+4 -9
View File
@@ -1,7 +1,7 @@
import { Box, Flex, Text, chakra } from '@chakra-ui/react';
import React from 'react';
import { IconButton } from 'toolkit/chakra/icon-button';
import { CloseButton } from 'toolkit/chakra/close-button';
import { Tooltip } from 'toolkit/chakra/tooltip';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
@@ -83,18 +83,13 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
</Box>
</Tooltip>
) }
<IconButton
aria-label="remove"
boxSize={ 6 }
display="inline-block"
flexShrink={ 0 }
<CloseButton
aria-label="Remove"
ml="auto"
onClick={ handleRemove }
disabled={ isDisabled }
alignSelf="flex-start"
>
<IconSvg name="cross" boxSize={ 6 }/>
</IconButton>
/>
</Flex>
<Text color="text.secondary" mt={ 1 }>
{ file.size.toLocaleString(undefined, { notation: 'compact', maximumFractionDigits: 2, unit: 'byte', unitDisplay: 'narrow', style: 'unit' }) }
ui/shared/links/LinkNewTab.tsx
+3 -3
View File
@@ -20,13 +20,13 @@ const LinkNewTab = ({ className, label, href }: Props) => {
<IconButton
asChild
aria-label={ label ?? 'Open link' }
color="link.secondary"
_hover={{ color: 'link.primary.hover' }}
variant="icon_secondary"
size="md"
className={ className }
borderRadius={ 0 }
>
<Link href={ href } target="_blank">
<IconSvg name="open-link" boxSize={ 5 }/>
<IconSvg name="open-link"/>
</Link>
</IconButton>
</Tooltip>
ui/shared/pagination/Pagination.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ const Pagination = (props: Props) => {
aria-label="Prev page"
variant="outline"
w={ 9 }
size="sm"
h={ 8 }
onClick={ onPrevPageClick }
disabled={ !canGoBackwards || isLoading || page === 1 }
loadingSkeleton={ showSkeleton }
@@ -68,7 +68,7 @@ const Pagination = (props: Props) => {
aria-label="Next page"
variant="outline"
w={ 9 }
size="sm"
h={ 8 }
onClick={ onNextPageClick }
disabled={ !hasNextPage || isLoading }
loadingSkeleton={ showSkeleton }
ui/shared/sort/Sort.tsx
+2 -4
View File
@@ -23,12 +23,10 @@ const Sort = (props: Props) => {
<IconButton
loadingSkeleton={ isLoading }
aria-label="sort"
size="sm"
size="md"
variant="outline"
colorScheme="gray"
width="36px"
>
<IconSvg name="arrows/up-down" boxSize={ 5 }/>
<IconSvg name="arrows/up-down"/>
</IconButton>
</SelectControl>
);
ui/showcases/Button.tsx
+2 -7
View File
@@ -2,7 +2,6 @@ import React from 'react';
import { Button, ButtonGroupRadio } from 'toolkit/chakra/button';
import { Checkbox } from 'toolkit/chakra/checkbox';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Link } from 'toolkit/chakra/link';
import { PopoverContent, PopoverRoot, PopoverTrigger, PopoverBody } from 'toolkit/chakra/popover';
import { Tooltip } from 'toolkit/chakra/tooltip';
@@ -105,10 +104,10 @@ const ButtonShowcase = () => {
<Tooltip content="Tooltip content">
<div>
<PopoverTrigger>
<IconButton variant="dropdown" size="md" px={ 2 }>
<Button variant="dropdown" size="md" px={ 2 }>
<IconSvg name="explorer" boxSize={ 5 }/>
With tooltip
</IconButton>
</Button>
</PopoverTrigger>
</div>
</Tooltip>
@@ -188,10 +187,6 @@ const ButtonShowcase = () => {
<Button variant="subtle" size="xs" disabled>Disabled: Now+1h</Button>
</Sample>
<Sample label="variant: ??? marketplace card???">
TBD
</Sample>
<Sample label="variant: plain">
<Button variant="plain">Default</Button>
<Button variant="plain" data-hover>Hovered</Button>
ui/showcases/CloseButton.tsx
-3
View File
@@ -25,9 +25,6 @@ const CloseButtonShowcase = () => {
<Sample label="size: md">
<CloseButton size="md" outline="1px dashed lightpink"/>
</Sample>
<Sample label="size: lg">
<CloseButton size="lg" outline="1px dashed lightpink"/>
</Sample>
</SamplesStack>
</Section>
</Container>
ui/showcases/IconButton.tsx
+107
View File
@@ -0,0 +1,107 @@
import React from 'react';
import { Checkbox } from 'toolkit/chakra/checkbox';
import { IconButton } from 'toolkit/chakra/icon-button';
import { PopoverBody, PopoverContent, PopoverTrigger, PopoverRoot } from 'toolkit/chakra/popover';
import IconSvg from 'ui/shared/IconSvg';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const IconButtonShowcase = () => {
return (
<Container value="icon-button">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack>
<Sample label="variant: icon_secondary">
<IconButton size="md" variant="icon_secondary">
<IconSvg name="heart_outline"/>
</IconButton>
<IconButton size="md" variant="icon_secondary" data-hover>
<IconSvg name="heart_outline"/>
</IconButton>
<IconButton size="md" variant="icon_secondary" disabled>
<IconSvg name="heart_outline"/>
</IconButton>
<IconButton size="md" variant="icon_secondary" selected>
<IconSvg name="heart_filled"/>
</IconButton>
<IconButton size="md" variant="icon_secondary" selected data-hover>
<IconSvg name="heart_filled"/>
</IconButton>
<IconButton size="md" variant="icon_secondary" selected disabled>
<IconSvg name="heart_filled"/>
</IconButton>
</Sample>
<Sample label="variant: dropdown">
<PopoverRoot>
<PopoverTrigger>
<IconButton size="md" variant="dropdown">
<IconSvg name="filter"/>
</IconButton>
</PopoverTrigger>
<PopoverContent>
<PopoverBody>
Popover content
</PopoverBody>
</PopoverContent>
</PopoverRoot>
<PopoverRoot>
<PopoverTrigger>
<IconButton size="md" variant="dropdown" expanded>
<IconSvg name="filter"/>
</IconButton>
</PopoverTrigger>
<PopoverContent>
<PopoverBody>
Popover content
</PopoverBody>
</PopoverContent>
</PopoverRoot>
<PopoverRoot>
<PopoverTrigger>
<IconButton size="md" variant="dropdown" selected>
<IconSvg name="filter"/>
</IconButton>
</PopoverTrigger>
<PopoverContent>
<PopoverBody display="flex" flexDirection="column" gap={ 2 }>
<Checkbox defaultChecked>First option</Checkbox>
<Checkbox>Second option</Checkbox>
</PopoverBody>
</PopoverContent>
</PopoverRoot>
<IconButton size="md" variant="dropdown" disabled>
<IconSvg name="filter"/>
</IconButton>
<IconButton size="md" variant="dropdown" loading>
<IconSvg name="filter"/>
</IconButton>
<IconButton size="md" variant="dropdown" loadingSkeleton>
<IconSvg name="filter"/>
</IconButton>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: 2xs">
<IconButton size="2xs" variant="icon_secondary" outline="1px dashed lightpink">
<IconSvg name="star_outline"/>
</IconButton>
</Sample>
<Sample label="size: md">
<IconButton size="md" variant="icon_secondary" outline="1px dashed lightpink">
<IconSvg name="star_outline"/>
</IconButton>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(IconButtonShowcase);
ui/showcases/Menu.tsx
+4 -4
View File
@@ -16,8 +16,8 @@ const MenuShowcase = () => {
<Sample label="variant: subtle">
<MenuRoot>
<MenuTrigger asChild>
<IconButton variant="dropdown" size="sm">
<IconSvg name="dots" boxSize="18px"/>
<IconButton variant="icon_secondary" size="md">
<IconSvg name="dots"/>
</IconButton>
</MenuTrigger>
<MenuContent>
@@ -30,8 +30,8 @@ const MenuShowcase = () => {
<MenuRoot>
<MenuTrigger asChild>
<IconButton variant="dropdown" size="sm" loadingSkeleton>
<IconSvg name="dots" boxSize="18px"/>
<IconButton variant="icon_secondary" size="md" loadingSkeleton>
<IconSvg name="dots"/>
</IconButton>
</MenuTrigger>
<MenuContent>
ui/snippets/networkMenu/NetworkMenu.tsx
+1
View File
@@ -25,6 +25,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
marginLeft="auto"
overflow="hidden"
width={{ base: 'auto', lg: isCollapsed === false ? '36px' : '0px', xl: isCollapsed ? '0px' : '36px' }}
visibility={{ base: 'visible', lg: isCollapsed === false ? 'visible' : 'hidden', xl: isCollapsed ? 'hidden' : 'visible' }}
isActive={ menu.open }
onClick={ menu.onToggle }
/>
ui/snippets/networkMenu/NetworkMenuButton.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const NetworkMenuButton = ({ isActive, onClick, className, ...rest }: Props, ref
display="inline-flex"
alignItems="center"
ref={ ref }
h={ 9 }
boxSize={ 9 }
borderRadius="base"
backgroundColor={ isActive ? { _light: 'blue.50', _dark: 'gray.800' } : 'transparent' }
onClick={ onClick }
ui/snippets/searchBar/SearchBarInput.tsx
+1
View File
@@ -119,6 +119,7 @@ const SearchBarInput = (
boxSize="20px"
my="2px"
mr={ 3 }
ml={ 2 }
borderRadius="sm"
borderWidth="1px"
borderColor="gray.400"
ui/snippets/searchBar/SearchBarRecentKeywords.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
) :
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ kw }</Text>
}
<ClearButton onClick={ removeKeyword(kw) } flexShrink={ 0 } boxSize={ 6 }/>
<ClearButton onClick={ removeKeyword(kw) }/>
</Flex>
)) }
</Box>
ui/snippets/topBar/NetworkMenu.tsx
+2 -1
View File
@@ -19,11 +19,12 @@ const NetworkMenu = () => {
<PopoverTrigger>
<IconButton
variant="link"
size="2xs"
aria-label="Network menu"
borderRadius="sm"
onClick={ menu.onToggle }
>
<IconSvg name="networks" boxSize={ 4 } p="1px"/>
<IconSvg name="networks"/>
</IconButton>
</PopoverTrigger>
<NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
ui/snippets/topBar/settings/Settings.tsx
+2 -1
View File
@@ -25,10 +25,11 @@ const Settings = () => {
<PopoverTrigger>
<IconButton
variant="link"
size="2xs"
borderRadius="sm"
aria-label="User settings"
>
<IconSvg name="gear_slim" boxSize={ 5 } p="1px"/>
<IconSvg name="gear_slim"/>
</IconButton>
</PopoverTrigger>
<PopoverContent overflowY="hidden" w="auto" fontSize="sm">
ui/snippets/user/profile/UserProfileContentWallet.tsx
+3 -4
View File
@@ -61,13 +61,12 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
{ web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
<IconButton
aria-label="Open wallet"
color="icon.info"
boxSize={ 5 }
variant="icon_secondary"
size="2xs"
onClick={ handleOpenWalletClick }
loading={ web3Wallet.isOpen }
flexShrink={ 0 }
>
<IconSvg name="gear_slim" boxSize={ 5 }/>
<IconSvg name="gear_slim"/>
</IconButton>
) }
</Flex>
ui/snippets/user/wallet/UserWalletMenuContent.tsx
+3 -4
View File
@@ -43,12 +43,11 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isRecon
{ isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
<IconButton
aria-label="Open wallet"
color="icon.info"
boxSize={ 5 }
variant="icon_secondary"
size="2xs"
onClick={ handleOpenWalletClick }
flexShrink={ 0 }
>
<IconSvg name="gear_slim" boxSize={ 5 }/>
<IconSvg name="gear_slim"/>
</IconButton>
) }
</Flex>
ui/verifiedAddresses/VerifiedAddressesListItem.tsx
+3 -3
View File
@@ -69,12 +69,12 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
<Tooltip content="Edit" disabled={ isLoading }>
<IconButton
aria-label="edit"
boxSize={ 5 }
variant="link"
size="2xs"
borderRadius="none"
flexShrink={ 0 }
onClick={ handleEditClick }
>
<IconSvg name="edit" boxSize={ 4 } flexShrink={ 0 }/>
<IconSvg name="edit"/>
</IconButton>
</Tooltip>
</>
ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
+3 -3
View File
@@ -86,12 +86,12 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
<Tooltip content="Edit" disabled={ isLoading }>
<IconButton
aria-label="edit"
boxSize={ 5 }
variant="link"
size="2xs"
borderRadius="none"
flexShrink={ 0 }
onClick={ handleEditClick }
>
<IconSvg name="edit" boxSize={ 4 } flexShrink={ 0 }/>
<IconSvg name="edit"/>
</IconButton>
</Tooltip>
) : null }
yarn.lock
+38 -15
View File
@@ -1593,16 +1593,16 @@
dependencies:
"@chainsafe/is-ip" "^2.0.1"
"@chakra-ui/cli@3.2.5":
version "3.2.5"
resolved "https://registry.yarnpkg.com/@chakra-ui/cli/-/cli-3.2.5.tgz#a7a4587ed065ff3d6b7f440d8553b66c9e71641c"
integrity sha512-h8LO1r3M00C4dm6T7/cyecd9lGkaRGMka1W44N6dbXWb2pbGR1xgm7x0OXru0YnYl/xaEy/wb58FEAssfhEg4w==
"@chakra-ui/cli@3.13.0":
version "3.13.0"
resolved "https://registry.yarnpkg.com/@chakra-ui/cli/-/cli-3.13.0.tgz#00d8be740b8e31ce93e6517fa427e75f602dc714"
integrity sha512-MbtkzhmDc/tjyzXjRg3l5SvIbLjI+y3s1WiFWLMnzXKpsmHQYi7Ud0rUCUvVj10Pip+asHKzw4lw/ZYx936mjg==
dependencies:
"@clack/prompts" "0.7.0"
"@clack/prompts" "0.10.0"
"@pandacss/is-valid-prop" "0.41.0"
"@types/cli-table" "^0.3.4"
"@types/debug" "^4.1.12"
"@visulima/boxen" "^1.0.10"
"@visulima/boxen" "^1.0.30"
bundle-n-require "1.1.1"
chokidar "3.6.0"
cli-table "^0.3.11"
@@ -1610,6 +1610,7 @@
debug "^4.3.5"
globby "14.0.2"
https-proxy-agent "^7.0.5"
look-it-up "2.1.0"
node-fetch "3.3.2"
package-manager-detector "0.1.2"
prettier "3.3.3"
@@ -1617,10 +1618,10 @@
sucrase "^3.35.0"
zod "^3.23.8"
"@chakra-ui/[email protected]2.0":
version "3.12.0"
resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-3.12.0.tgz#d3ff2c46bf643c8d155f22f9aae76c6b0a9b39b6"
integrity sha512-/RsSVyc9FjVuysZnFW3jJ+SIikWo/DfFWICEPis2EBNiCMaQgtjROKthiH4JUX39pXTd45tzJUrRVEN2p0cjNw==
"@chakra-ui/[email protected]3.0":
version "3.13.0"
resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-3.13.0.tgz#9dd01a6876b7d19dbfbf936645a64466106a7746"
integrity sha512-HqFXuVhiQCftQT5+/9F6w0aZufHgvaSr7jJoMP+BUxihF6uaSSW2YHy2eKK4a5SWNLMOnZHYQbUUrC3WSGcYxg==
dependencies:
"@ark-ui/react" "4.9.2"
"@emotion/is-prop-valid" "1.3.1"
@@ -1631,6 +1632,14 @@
csstype "3.1.3"
fast-safe-stringify "2.1.1"
"@clack/[email protected]":
version "0.4.1"
resolved "https://registry.yarnpkg.com/@clack/core/-/core-0.4.1.tgz#36c8aed3f4904060a39275817e804e7a8ffb7e1c"
integrity sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==
dependencies:
picocolors "^1.0.0"
sisteransi "^1.0.5"
"@clack/core@^0.3.3":
version "0.3.3"
resolved "https://registry.yarnpkg.com/@clack/core/-/core-0.3.3.tgz#233ccebf779aa5a66fc68ee48df5e58cd226fd94"
@@ -1639,7 +1648,16 @@
picocolors "^1.0.0"
sisteransi "^1.0.5"
"@clack/prompts@0.7.0", "@clack/prompts@^0.7.0":
"@clack/prompts@0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@clack/prompts/-/prompts-0.10.0.tgz#3fb268c1eb9b4fc6bc5952744273e7a0cb01995a"
integrity sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==
dependencies:
"@clack/core" "0.4.1"
picocolors "^1.0.0"
sisteransi "^1.0.5"
"@clack/prompts@^0.7.0":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@clack/prompts/-/prompts-0.7.0.tgz#6aaef48ea803d91cce12bc80811cfcb8de2e75ea"
integrity sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==
@@ -7203,10 +7221,10 @@
resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf"
integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==
"@visulima/boxen@^1.0.10":
version "1.0.23"
resolved "https://registry.yarnpkg.com/@visulima/boxen/-/boxen-1.0.23.tgz#5e67c5b677f006dde626024235b6dd81a65cf162"
integrity sha512-os8zpUA6Iizcbp2JtH43diakJB1EagyEk57v1KaNd6Eh1A7XekNZw0AyUW5AdVmOoeWC0wZkrMXBNWxHL35AQQ==
"@visulima/boxen@^1.0.30":
version "1.0.30"
resolved "https://registry.yarnpkg.com/@visulima/boxen/-/boxen-1.0.30.tgz#8100cacee027c797c32fcc8263ae97cafafead06"
integrity sha512-izo776RvDFeipY7tJspA0wFrcq/Ih0Qhe/zu6v7O4OlURy2ViFmy+2ZSUYTHSSwKrmVeZWrUUJSpaepZPLPMMQ==
"@vitejs/plugin-react@^4.0.0":
version "4.0.0"
@@ -14044,6 +14062,11 @@ long@^5.0.0:
resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
[email protected]:
version "2.1.0"
resolved "https://registry.yarnpkg.com/look-it-up/-/look-it-up-2.1.0.tgz#278a7ffc9da60a928452a0bab5452bb8855d7d13"
integrity sha512-nMoGWW2HurtuJf6XAL56FWTDCWLOTSsanrgwOyaR5Y4e3zfG5N/0cU5xWZSEU3tBxhQugRbV1xL9jb+ug7yZww==
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"