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) {
return (
<Tooltip
shouldWrapChildren
textAlign="center"
fontSize="xs"
placement="bottom-start"
label="This item is converted to HTML5, and ready to use on Neopets.com!"
<HTML5BadgeLayout
backgroundColor={greenBackground}
borderColor={greenBorderColor}
color={greenTextColor}
aria-label="HTML5 supported!"
tooltipLabel="This item is converted to HTML5, and ready to use on Neopets.com!"
>
<Flex
align="center"
border="1px solid"
backgroundColor={greenBackground}
borderColor={greenBorderColor}
color={greenTextColor}
borderRadius="md"
boxShadow="md"
paddingX="2"
paddingY="1"
transition="all 0.2s"
aria-label="HTML5 supported!"
<CheckCircleIcon fontSize="xs" />
<Icon
viewBox="0 0 36 36"
fontSize="xl"
// Visual re-balancing, there's too much visual right-padding here!
marginRight="-1"
>
<CheckCircleIcon fontSize="xs" />
<Icon
viewBox="0 0 36 36"
fontSize="xl"
// Visual re-balancing, there's too much visual right-padding here!
marginRight="-1"
>
{/* 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>
{/* 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>
</HTML5BadgeLayout>
);
} else {
return (
<Tooltip
shouldWrapChildren
textAlign="center"
fontSize="xs"
placement="bottom-start"
label={
<HTML5BadgeLayout
backgroundColor={yellowBackground}
borderColor={yellowBorderColor}
color={yellowTextColor}
aria-label="HTML5 not supported"
tooltipLabel={
<>
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
@ -943,40 +929,51 @@ function HTML5Badge({ usesHTML5 }) {
</>
}
>
<Flex
align="center"
border="1px solid"
backgroundColor={yellowBackground}
borderColor={yellowBorderColor}
color={yellowTextColor}
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"
/>
<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 */}
<path
fill="#DD2E44"
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"
/>
</Icon>
</Flex>
</Tooltip>
{/* From Twemoji Not Allowed */}
<path
fill="#DD2E44"
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"
/>
</Icon>
</HTML5BadgeLayout>
);
}
}
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 }) {
return (
<IconButton