cuter play/pause button at top of controls

This commit is contained in:
Emi Matchu 2020-09-24 06:04:59 -07:00
parent c4a9ee8497
commit 5027a62ec5

View file

@ -2,6 +2,7 @@ import React from "react";
import { css, cx } from "emotion";
import {
Box,
Button,
DarkMode,
Flex,
IconButton,
@ -88,9 +89,9 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
padding={{ base: 2, lg: 6 }}
display="grid"
overflow="auto"
gridTemplateAreas={`"back sharing"
"space space"
"picker picker"`}
gridTemplateAreas={`"back play-pause sharing"
"space space space"
"picker picker picker"`}
gridTemplateRows="auto minmax(1rem, 1fr) auto"
className={cx(
css`
@ -139,6 +140,11 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
d="inline-flex" // Not sure why <a> requires this to style right! ^^`
/>
</Box>
<Box gridArea="play-pause" display="flex" justifyContent="center">
<DarkMode>
<PlayPauseButton />
</DarkMode>
</Box>
<Stack
gridArea="sharing"
alignSelf="flex-end"
@ -152,9 +158,6 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
<Box>
<CopyLinkButton outfitState={outfitState} />
</Box>
<Box>
<PlayPauseButton />
</Box>
</Stack>
<Box gridArea="space" onClick={maybeUnlockFocus} />
<Flex gridArea="picker" justify="center" onClick={maybeUnlockFocus}>
@ -246,17 +249,25 @@ function CopyLinkButton({ outfitState }) {
function PlayPauseButton() {
const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true);
const label = isPaused ? "Start animations" : "Stop animations";
return (
<Tooltip label={label} placement="left">
<Box>
<ControlButton
icon={isPaused ? <MdPlayArrow /> : <MdPause />}
aria-label={label}
<Button
leftIcon={isPaused ? <MdPause /> : <MdPlayArrow />}
size="sm"
color="gray.300"
variant="outline"
borderColor="gray.300"
borderRadius="full"
backgroundColor="blackAlpha.500"
marginTop="0.3rem" // to center-align with buttons (not sure on amt?)
_hover={{
backgroundColor: "gray.600",
borderColor: "gray.50",
color: "gray.50",
}}
onClick={() => setIsPaused(!isPaused)}
/>
</Box>
</Tooltip>
>
{isPaused ? <>Paused</> : <>Playing</>}
</Button>
);
}