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

Refactor HTML5Badge

Browse source 
let's de-dupe that stuff, baby!
This commit is contained in:
Emi Matchu 2021-02-09 21:45:29 -08:00
parent 3599c78a85
commit 828fb65cf4
1 changed files with 65 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
src/app/ItemPage.js
View file

@ -891,50 +891,36 @@ function HTML5Badge({ usesHTML5 }) {
if (usesHTML5) { if (usesHTML5) {
return ( return (
<Tooltip <HTML5BadgeLayout
shouldWrapChildren backgroundColor={greenBackground}
textAlign="center" borderColor={greenBorderColor}
fontSize="xs" color={greenTextColor}
placement="bottom-start" aria-label="HTML5 supported!"
label="This item is converted to HTML5, and ready to use on Neopets.com!" tooltipLabel="This item is converted to HTML5, and ready to use on Neopets.com!"
> >
<Flex <CheckCircleIcon fontSize="xs" />
align="center" <Icon
border="1px solid" viewBox="0 0 36 36"
backgroundColor={greenBackground} fontSize="xl"
borderColor={greenBorderColor} // Visual re-balancing, there's too much visual right-padding here!
color={greenTextColor} marginRight="-1"
borderRadius="md"
boxShadow="md"
paddingX="2"
paddingY="1"
transition="all 0.2s"
aria-label="HTML5 supported!"
> >
<CheckCircleIcon fontSize="xs" /> {/* From Twemoji Keycap 5 */}
<Icon <path
viewBox="0 0 36 36" fill="currentColor"
fontSize="xl" d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
// Visual re-balancing, there's too much visual right-padding here! />
marginRight="-1" </Icon>
> </HTML5BadgeLayout>
{/* From Twemoji Keycap 5 */}
<path
fill="currentColor"
d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
/>
</Icon>
</Flex>
</Tooltip>
); );
} else { } else {
return ( return (
<Tooltip <HTML5BadgeLayout
shouldWrapChildren backgroundColor={yellowBackground}
textAlign="center" borderColor={yellowBorderColor}
fontSize="xs" color={yellowTextColor}
placement="bottom-start" aria-label="HTML5 not supported"
label={ tooltipLabel={
<> <>
This item isn't converted to HTML5 yet, so it might not appear in This item isn't converted to HTML5 yet, so it might not appear in
Neopets.com customization yet. Once it's ready, it could look a bit Neopets.com customization yet. Once it's ready, it could look a bit
@ -943,40 +929,51 @@ function HTML5Badge({ usesHTML5 }) {
</> </>
} }
> >
<Flex <WarningTwoIcon fontSize="xs" marginRight="1" />
align="center" <Icon viewBox="0 0 36 36" fontSize="xl">
border="1px solid" {/* From Twemoji Keycap 5 */}
backgroundColor={yellowBackground} <path
borderColor={yellowBorderColor} fill="currentColor"
color={yellowTextColor} d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
borderRadius="md" />
boxShadow="md"
paddingX="2"
paddingY="1"
transition="all 0.2s"
aria-label="HTML5 not supported"
>
<WarningTwoIcon fontSize="xs" marginRight="1" />
<Icon viewBox="0 0 36 36" fontSize="xl">
{/* From Twemoji Keycap 5 */}
<path
fill="currentColor"
d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
/>
{/* From Twemoji Not Allowed */} {/* From Twemoji Not Allowed */}
<path <path
fill="#DD2E44" fill="#DD2E44"
opacity="0.75" opacity="0.75"
d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z" d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"
/> />
</Icon> </Icon>
</Flex> </HTML5BadgeLayout>
</Tooltip>
); );
} }
} }
function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
return (
<Tooltip
shouldWrapChildren
textAlign="center"
fontSize="xs"
placement="bottom-start"
label={tooltipLabel}
>
<Flex
align="center"
border="1px solid"
borderRadius="md"
boxShadow="md"
paddingX="2"
paddingY="1"
transition="all 0.2s"
{...props}
>
{children}
</Flex>
</Tooltip>
);
}
function PlayPauseButton({ isPaused, onClick }) { function PlayPauseButton({ isPaused, onClick }) {
return ( return (
<IconButton <IconButton