OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

remove hover effect from item loading placeholders

Browse source 
this has been annoying me for a while 😅 it's confusing and surprising that they act interactable when they very much aren't yet!
This commit is contained in:
Emi Matchu 2020-08-31 17:41:28 -07:00
parent 64ad77ec49
commit bfb0979801
1 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/WardrobePage/Item.js
View file

@ -102,7 +102,7 @@ function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) {
*/ */
function ItemSkeleton() { function ItemSkeleton() {
return ( return (
<ItemContainer> <ItemContainer isFocusable={false}>
<Skeleton width="50px" height="50px" /> <Skeleton width="50px" height="50px" />
<Box width="3" /> <Box width="3" />
<Skeleton height="1.5rem" width="12rem" /> <Skeleton height="1.5rem" width="12rem" />
@ -117,7 +117,7 @@ function ItemSkeleton() {
* styles - including for its children, who sometimes reference it as an * styles - including for its children, who sometimes reference it as an
* .item-container parent! * .item-container parent!
*/ */
function ItemContainer({ children }) { function ItemContainer({ children, isFocusable = true }) {
const theme = useTheme(); const theme = useTheme();
const focusBackgroundColor = useColorModeValue( const focusBackgroundColor = useColorModeValue(
@ -142,11 +142,12 @@ function ItemContainer({ children }) {
borderRadius="lg" borderRadius="lg"
d="flex" d="flex"
alignItems="center" alignItems="center"
cursor="pointer" cursor={isFocusable ? "pointer" : undefined}
border="1px" border="1px"
borderColor="transparent" borderColor="transparent"
className={cx([ className={cx([
"item-container", "item-container",
isFocusable &&
css` css`
&:hover, &:hover,
input:focus + & { input:focus + & {