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

extract Heading1 and Heading2 components

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 03:55:40 -07:00
parent 5f4226d673
commit 075a6cfef4
1 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/src/WardrobePage.js
View file

@ -178,9 +178,7 @@ function SearchPanel({ query, wornItemIds, onWearItem }) {
return ( return (
<Box color="green.800"> <Box color="green.800">
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" mb="6"> <Heading1 mb="6">Searching for "{query}"</Heading1>
Searching for "{query}"
</Heading>
{resultsSection} {resultsSection}
</Box> </Box>
); );
@ -209,13 +207,7 @@ function ItemsPanel({ zonesAndItems, onWearItem }) {
function OutfitHeading() { function OutfitHeading() {
return ( return (
<PseudoBox role="group" d="inline-block"> <PseudoBox role="group" d="inline-block">
<Heading <Heading1 mb="6">
size="2xl"
mb="6"
wordBreak="break-word"
fontFamily="Delicious"
fontWeight="800"
>
<Editable defaultValue="Zafara Agent (roopal27)"> <Editable defaultValue="Zafara Agent (roopal27)">
{({ isEditing, onRequestEdit }) => ( {({ isEditing, onRequestEdit }) => (
<> <>
@ -242,7 +234,7 @@ function OutfitHeading() {
</> </>
)} )}
</Editable> </Editable>
</Heading> </Heading1>
</PseudoBox> </PseudoBox>
); );
} }
@ -250,9 +242,7 @@ function OutfitHeading() {
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) { function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
return ( return (
<Box> <Box>
<Heading size="xl" color="green.800" mb="3" fontFamily="Delicious"> <Heading2 mb="3">{zoneName}</Heading2>
{zoneName}
</Heading>
<ItemList <ItemList
items={items} items={items}
wornItemIds={[wornItemId]} wornItemIds={[wornItemId]}
@ -330,4 +320,20 @@ function Item({ item, isWorn, onWear }) {
); );
} }
function Heading1({ children, ...props }) {
return (
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}>
{children}
</Heading>
);
}
function Heading2({ children, ...props }) {
return (
<Heading size="xl" color="green.800" fontFamily="Delicious" {...props}>
{children}
</Heading>
);
}
export default WardrobePage; export default WardrobePage;