feat: make button background black, fix resize events

bertyhell · Aug 11, 2024 · e2c3dc0 · e2c3dc0
1 parent 58ce4a6
commit e2c3dc0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -67,6 +67,10 @@ function App() {
   const [hoveredSnapPoints, setHoveredSnapPoints] = useState<HoverPoint[]>([]);
 
   const handleWindowResize = () => {
+    console.log('handle window resize', {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
     setCanvasSize(new Point(window.innerWidth, window.innerHeight));
   };
 
@@ -234,14 +238,14 @@ function App() {
    */
   useEffect(() => {
     console.log('init app');
-    window.document.addEventListener('keyup', handleKeyUp);
-    window.document.addEventListener('resize', handleWindowResize);
+    document.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('resize', handleWindowResize);
 
     handleWindowResize();
 
     return () => {
-      window.document.removeEventListener('keyup', handleKeyUp);
-      window.document.removeEventListener('resize', handleWindowResize);
+      document.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('resize', handleWindowResize);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -22,7 +22,7 @@ export const Button: FC<ButtonProps> = ({
     <>
       <button
         className={
-          'bg-transparent text-blue-700 font-semibold py-2 px-2 border border-blue-500 rounded w-10 h-10 flex flex-row justify-center items-center hover:bg-blue-500 hover:text-white hover:border-transparent  data-[active=true]:bg-blue-500 data-[active=true]:text-white data-[active=true]:border-transparent' +
+          'bg-gray-950 text-blue-700 font-semibold py-2 px-2 border border-blue-500 rounded w-10 h-10 flex flex-row justify-center items-center hover:bg-blue-500 hover:text-white hover:border-transparent  data-[active=true]:bg-blue-500 data-[active=true]:text-white data-[active=true]:border-transparent' +
           (className ? ' ' + className : '')
         }
         data-active={active}