status-im
/
dappconnect-chat-sdk
mirror of https://github.com/status-im/dappconnect-chat-sdk.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

simplify and fix IconButton

This commit is contained in:
Pavel Prichodko 2023-01-23 15:29:37 +01:00
parent 0ded6bc3a4
commit 07168dc47c
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 25 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/components/src/composer/composer.tsx
View File

@ -39,11 +39,11 @@ const Composer = (props: BaseProps) => {
</YStack>
<XStack alignItems="center" justifyContent="space-between" pt={8}>
<Stack space={12} flexDirection="row">
<IconButton noBackground icon={<ImageIcon />} />
<IconButton noBackground icon={<ReactionIcon />} />
<IconButton noBackground icon={<FormatIcon />} />
<IconButton icon={<ImageIcon />} transparent />
<IconButton icon={<ReactionIcon />} transparent />
<IconButton icon={<FormatIcon />} transparent />
</Stack>
<IconButton noBackground icon={<AudioIcon />} />
<IconButton icon={<AudioIcon />} transparent />
</XStack>
</YStack>
)

53
packages/components/src/icon-button/icon-button.tsx
View File

@ -12,14 +12,12 @@ const Base = styled(Stack, {
cursor: 'pointer',
userSelect: 'none',
borderRadius: 10,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
animation: 'fast',
width: 30,
height: 30,
borderWidth: 1,
padding: 4,
backgroundColor: '$neutral-10',
borderColor: '$neutral-10',
@ -32,7 +30,14 @@ const Base = styled(Stack, {
},
variants: {
noBackground: {
selected: {
true: {
backgroundColor: '$neutral-30',
borderColor: '$neutral-30',
},
},
transparent: {
true: {
backgroundColor: 'transparent',
borderColor: '$neutral-20',
@ -48,30 +53,6 @@ const Base = styled(Stack, {
},
},
},
selected: {
true: {
backgroundColor: '$neutral-30',
borderColor: '$neutral-30',
},
},
} as const,
})
const Icon = styled(Text, {
color: '$neutral-50',
width: 20,
height: 20,
hoverStyle: {
color: '$neutral-100',
},
variants: {
selected: {
true: {
color: '$neutral-100',
},
},
} as const,
})
@ -79,17 +60,21 @@ interface Props {
icon: React.ReactElement
onPress?: () => void
selected?: boolean
noBackground?: boolean
transparent?: boolean
// FIXME: enforce aria-label for accessibility
// 'aria-label'?: string
}
const IconButton = (props: Props) => {
const { icon, noBackground, selected, onPress } = props
const { icon, transparent, selected, onPress } = props
return (
<Base selected={selected} onPress={onPress} noBackground={noBackground}>
<Icon selected={selected} pointerEvents="none">
{cloneElement(icon, { color: '$neutral-50' })}
</Icon>
<Base selected={selected} onPress={onPress} transparent={transparent}>
{cloneElement(icon, {
color: selected ? '$neutral-100' : '$neutral-50',
size: 20,
pressEvents: 'none',
})}
</Base>
)
}

51
yarn.lock
View File

@ -15680,16 +15680,7 @@ react-docgen@6.0.0-alpha.3:
resolve "^1.17.0"
strip-indent "^3.0.0"
"react-dom@^16.8.0 || ^17.0.0", react-dom@^17.0.0:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler "^0.20.2"
react-dom@^18.1.0:
react-dom@18.1.0, "react-dom@^16.8.0 || ^17.0.0", react-dom@^17.0.0, react-dom@^18.1.0, react-dom@^18.2.0:
version "18.1.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
@ -15697,14 +15688,6 @@ react-dom@^18.1.0:
loose-envify "^1.1.0"
scheduler "^0.22.0"
react-dom@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-element-to-jsx-string@^15.0.0:
version "15.0.0"
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@ -15959,28 +15942,13 @@ react-style-singleton@^2.2.1:
invariant "^2.2.4"
tslib "^2.0.0"
react@18.1.0:
react@18.1.0, "react@^16.8.0 || ^17.0.0", react@^17.0.0, react@^18.2.0:
version "18.1.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
dependencies:
loose-envify "^1.1.0"
"react@^16.8.0 || ^17.0.0", react@^17.0.0:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
react@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
read-pkg-up@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@ -16511,14 +16479,6 @@ sax@>=0.6.0, sax@^1.2.4:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
scheduler@^0.20.2:
version "0.20.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler@^0.22.0:
version "0.22.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
@ -16526,13 +16486,6 @@ scheduler@^0.22.0:
dependencies:
loose-envify "^1.1.0"
scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
dependencies:
loose-envify "^1.1.0"
schema-utils@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"