Mobile pause icon fix, style improvements

wrenhawth · Jul 15, 2024 · 438aca8 · 438aca8
1 parent 3e15e4d
commit 438aca8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/src/App.css b/src/App.css
@@ -133,12 +133,14 @@ sl-button:hover>sl-icon {
 .name-options {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: 0 16px;
+  gap: 0;
+  align-items: center;
 
   p {
     border: 1px dashed white;
     border-radius: 50%;
     padding: 8px;
+    margin: 4px;
     background-color: hsla(220, 100%, 70%, .8);;
     font-size: 24px;
   }

diff --git a/src/components/canvas/PlayPause.tsx b/src/components/canvas/PlayPause.tsx
@@ -6,7 +6,6 @@ import { ZINDEX } from "../../utils/zIndex"
 import { useCanvasWidth } from "./utils"
 
 export const PlayPause = () => {
-    const [isHovering, setIsHovering] = useState(false)
     const [isPlaying, setIsPlaying] = useState(false)
     const width = useCanvasWidth()
     useTick(() => {
@@ -23,7 +22,7 @@ export const PlayPause = () => {
     })
 
 
-    const iconFill = isHovering ? ['hsl(20deg 100% 60%)', 'hsl(40deg 100% 60%)'] : ['hsl(20deg 100% 80%)', 'hsl(40deg 100% 80%)']
+    // const iconFill = isHovering ? ['hsl(20deg 100% 60%)', 'hsl(40deg 100% 60%)'] : ['hsl(20deg 100% 80%)', 'hsl(40deg 100% 80%)']
     return (
         <Container
             x={width / 2}
@@ -32,17 +31,11 @@ export const PlayPause = () => {
             zIndex={ZINDEX.OCTOPUS + 1}
         >
             <Text
-                text={isPlaying ? "⏸" : "⏵"}
+                text={isPlaying ? "⏸️" : "▶️"}
                 // y={HEIGHT / 2 - 50}
                 y={50}
                 anchor={0.5}
                 eventMode='static'
-                pointerover={() => {
-                    setIsHovering(true)
-                }}
-                pointerout={() => {
-                    setIsHovering(false)
-                }}
                 pointertap={() => {
                     const transport = getTransport()
                     if (transport.state === 'started') {
@@ -52,11 +45,10 @@ export const PlayPause = () => {
                     }
                 }}
                 style={{
-                    fontSize: 48,
+                    fontSize: 32,
                     stroke: '#ffffff',
-                    fill: iconFill,
                     // fill: iconFill,
-                    fillGradientType: 0
+                    // fillGradientType: 0
                     // fill: ['#ffffff', '#eeeeee']
                 } as ComponentProps<typeof Text>['style']}
             />