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

extract OutfitNameEditButton

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 04:04:02 -07:00
parent 09b928865e
commit 255b77d0cf
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/src/WardrobePage.js
View file

@ -215,22 +215,7 @@ function OutfitHeading() {
<EditablePreview /> <EditablePreview />
<EditableInput /> <EditableInput />
{!isEditing && ( {!isEditing && (
<PseudoBox <OutfitNameEditButton onRequestEdit={onRequestEdit} />
d="inline-block"
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
position="absolute"
>
<IconButton
icon="edit"
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
)} )}
</> </>
)} )}
@ -240,6 +225,27 @@ function OutfitHeading() {
); );
} }
function OutfitNameEditButton({ onRequestEdit }) {
return (
<PseudoBox
d="inline-block"
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
position="absolute"
>
<IconButton
icon="edit"
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
);
}
function Heading1({ children, ...props }) { function Heading1({ children, ...props }) {
return ( return (
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}> <Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}>