fix button mousemove

src/atoms/button/index.tsx

@@ -41,9 +41,11 @@ const Button = (props: ButtonProps) => {
     const element: HTMLElement | null = document.querySelector(querySelector);
 
     if (!element) return;
-    element.addEventListener('mousemove', (event) => {
-      const x = event.pageX - event.offsetX;
-      const y = event.pageY - event.offsetY;
+    element.addEventListener('mousemove', event => {
+      const target: HTMLElement | null = event.target as HTMLElement;
+      const x = event.pageX - target?.offsetLeft ?? 0;
+      const y = event.pageY - target?.offsetTop ?? 0;
+
       element.style.setProperty('--x', `${x}px`);
       element.style.setProperty('--y', `${y}px`);
     });

src/atoms/button/styles.tsx

@@ -28,36 +28,35 @@ export const ButtonWrapper = styled.button<ButtonProps>`
   --txt: var(--white, hsl(0, 0%, 100%));
   --hover: hsl(186, 62%, 49%);
 
-  border-width: ${(props) => (props.variant === 'outline' ? '3px' : 0)};
+  border-width: ${props => (props.variant === 'outline' ? '3px' : 0)};
   border-style: solid;
   border-color: var(--button);
-  border-radius: ${(props) => (props.variant === 'text' ? 0 : '999px')};
-  background-color: ${(props) =>
+  border-radius: ${props => (props.variant === 'text' ? 0 : '999px')};
+  background-color: ${props =>
     props.variant === 'solid' ? 'var(--button)' : 'transparent'};
-  width: ${(props) =>
+  width: ${props =>
     props.value ? (props.circle ? '36px' : 'min-content') : '36px'};
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: ${(props) => (props.value ? (props.circle ? 0 : '0 20px') : 0)};
+  padding: ${props => (props.value ? (props.circle ? 0 : '0 20px') : 0)};
   text-transform: uppercase;
   white-space: nowrap;
   transition-duration: 0.3s;
   cursor: pointer;
 
   &:hover {
-    border-color: ${(props) =>
-      props.variant === 'solid' ? '' : 'var(--hover)'};
-    background-color: ${(props) =>
+    border-color: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
+    background-color: ${props =>
       props.variant === 'solid' ? 'var(--hover)' : 'transparent'};
 
     span {
-      color: ${(props) => (props.variant === 'solid' ? '' : 'var(--hover)')};
+      color: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
     }
 
     svg {
-      fill: ${(props) => (props.variant === 'solid' ? '' : 'var(--hover)')};
+      fill: ${props => (props.variant === 'solid' ? '' : 'var(--hover)')};
     }
   }
 
@@ -75,15 +74,15 @@ export const ButtonWrapper = styled.button<ButtonProps>`
   }
 
   .spinner {
-    border-top-color: ${(props) =>
+    border-top-color: ${props =>
       props.variant === 'solid' ? '' : 'var(--button)'};
   }
 
   span {
     position: relative;
     font-size: 0.75rem;
     font-weight: var(--bold, 700);
-    color: ${(props) =>
+    color: ${props =>
       props.variant === 'solid' ? 'var(--txt)' : 'var(--button)'};
     pointer-events: none;
     transition-duration: 0.3s;
@@ -93,47 +92,47 @@ export const ButtonWrapper = styled.button<ButtonProps>`
     width: auto;
     min-width: 20px;
     height: 20px;
-    fill: ${(props) =>
+    fill: ${props =>
       props.variant === 'solid' ? 'var(--txt)' : 'var(--button)'};
     transition: 0.3s;
   }
 
-  ${(props) =>
+  ${props =>
     props.color === 'danger' &&
     css`
       --button: var(--red, hsl(354, 83%, 64%));
       --hover: hsl(354, 83%, 54%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'info' &&
     css`
       --button: var(--grey, hsl(0, 0%, 85%));
       --hover: hsl(0, 0%, 75%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'purple' &&
     css`
       --button: var(--purple, hsl(256, 55%, 43%));
       --hover: hsl(256, 55%, 33%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'white' &&
     css`
       --button: var(--white);
       --hover: var(--grey);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'black' &&
     css`
       --button: var(--default, hsl(0, 0%, 16%));
       --hover: hsl(0, 0%, 6%);
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'magic' &&
     css`
       position: relative;
@@ -168,7 +167,7 @@ export const ButtonWrapper = styled.button<ButtonProps>`
       }
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'live' &&
     css`
       animation: ${live} 1s infinite;

src/atoms/checkbox/index.tsx

@@ -26,6 +26,7 @@ const Checkbox = (props: Props) => {
     style,
     className = '',
   } = props;
+
   return (
     <CheckboxWrapper
       error={error}

src/atoms/checkbox/styles.tsx

@@ -12,7 +12,7 @@ export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   position: relative;
   height: 24px;
   padding-left: 0;
-  cursor: ${(props) => (props.disabled ? 'auto' : 'pointer')};
+  cursor: ${props => (props.disabled ? 'auto' : 'pointer')};
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -23,13 +23,13 @@ export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   }
 
   span {
-    color: ${(props) =>
+    color: ${props =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : props.disabled
         ? 'var(--grey, hsl(0, 0%, 85%))'
         : null};
-    border-color: ${(props) =>
+    border-color: ${props =>
       props.error ? 'var(--red, hsl(354, 83%, 64%))' : null};
   }
 `;
@@ -79,7 +79,7 @@ export const Checkmark = styled.span<CheckboxErrorProps>`
   top: 0;
   left: 0;
   border: 2px solid
-    ${(props) =>
+    ${props =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : 'var(--grey, hsl(0, 0%, 85%))'};

src/atoms/spinner/styles.tsx

@@ -16,10 +16,9 @@ const rotation = keyframes`
 
 export const Loading = styled.div<LoadingProps>`
   border: 5px solid rgba(255, 255, 255, 0.4);
-  border-top-color: ${(props) =>
-    props.fill || 'var(--white, hsl(0, 0%, 100%))'};
+  border-top-color: ${props => props.fill || 'var(--white, hsl(0, 0%, 100%))'};
   border-radius: 50%;
-  width: ${(props) => props.size || '20px'};
-  height: ${(props) => props.size || '20px'};
+  width: ${props => props.size || '20px'};
+  height: ${props => props.size || '20px'};
   animation: ${rotation} 0.8s ease infinite;
 `;

src/atoms/tag/styles.tsx

@@ -24,29 +24,29 @@ export const TagWrapper = styled.span<TagWrapperProps>`
     margin-left: 5px;
   }
 
-  ${(props) =>
+  ${props =>
     props.color === 'orange' &&
     css`
       border-color: var(--orange, hsl(36, 100%, 57%));
       background-color: var(--orange, hsl(36, 100%, 57%));
     `}
 
-  ${(props) =>
+  ${props =>
     props.color === 'danger' &&
     css`
       border-color: var(--red, hsl(354, 83%, 64%));
       background-color: var(--red, hsl(354, 83%, 64%));
     `}
 
-    ${(props) =>
+    ${props =>
       props.color === 'info' &&
       css`
         border-color: var(--grey, hsl(0, 0%, 85%));
         background-color: var(--lightGrey, hsl(0, 0%, 98%));
         color: var(--default, hsl(0, 0%, 16%));
       `}
 
-  ${(props) =>
+  ${props =>
     props.variant === 'outline' &&
     css`
       border-color: var(--default, hsl(0, 0%, 16%));