From 438aca8112aacd6f9304e04aef6d2eccd0749f67 Mon Sep 17 00:00:00 2001
From: Wren Hawthorne <wrenhawth@gmail.com>
Date: Mon, 15 Jul 2024 00:05:26 -0700
Subject: [PATCH] Mobile pause icon fix, style improvements

---
 src/App.css                         |  4 +++-
 src/components/canvas/PlayPause.tsx | 16 ++++------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index f4cc7b4..a0b86c9 100644
--- 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
index bce04f4..1ca3d61 100644
--- 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']}
             />