Skip to content

F
frontend
Commit 4909deeb authored by tom's avatar tom
Browse files
Options

styles for icon-button and close-button

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