From 1dfb497e424b972be8e5535dc9399242b6cddec7 Mon Sep 17 00:00:00 2001
From: dragoni7 <sdgibson18@outlook.com>
Date: Tue, 24 Sep 2024 14:09:29 -0700
Subject: [PATCH] Made auto equip mod more clear

---
 .../armor-mods/components/ModCustomization.tsx |  4 ++--
 .../armor-mods/components/RequiredMod.tsx      | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/features/armor-mods/components/ModCustomization.tsx b/src/features/armor-mods/components/ModCustomization.tsx
index d2fcd9a..35847b1 100644
--- a/src/features/armor-mods/components/ModCustomization.tsx
+++ b/src/features/armor-mods/components/ModCustomization.tsx
@@ -1,4 +1,4 @@
-import { RootState, store } from '../../../store';
+import { RootState } from '../../../store';
 import ArmorConfig from './ArmorConfig';
 import { Grid, Stack, styled, Typography } from '@mui/material';
 import useArtificeMods from '../../../hooks/use-artifice-mods';
@@ -32,7 +32,7 @@ const ModCustomization: React.FC = () => {
       {requiredMods.length !== 0 ? (
         <>
           <Grid item md={12} marginLeft={{ md: 4, lg: 8 }}>
-            <StyledSubTitle>REQUIRED MODS</StyledSubTitle>
+            <StyledSubTitle>REQUIRED MODS // CLICK MODS TO AUTO EQUIP</StyledSubTitle>
           </Grid>
           <Grid item md={10} marginBottom={6} marginLeft={{ md: 4, lg: 8 }}>
             <Stack direction="row" spacing={2}>
diff --git a/src/features/armor-mods/components/RequiredMod.tsx b/src/features/armor-mods/components/RequiredMod.tsx
index 94766fb..bd53d95 100644
--- a/src/features/armor-mods/components/RequiredMod.tsx
+++ b/src/features/armor-mods/components/RequiredMod.tsx
@@ -3,12 +3,13 @@ import { Tooltip, styled } from '@mui/material';
 import { autoEquipStatMod } from '../mod-utils';
 import { useDispatch } from 'react-redux';
 import { D2LTooltip } from '@/components/D2LTooltip';
+import { animated, useSpring } from 'react-spring';
 
 interface RequiredModProps {
   required: { mod: ManifestArmorStatMod; equipped: boolean };
 }
 
-const RequiredModImg = styled('img')(({ theme }) => ({
+const RequiredModImg = styled(animated.img)(({ theme }) => ({
   maxWidth: '71px',
   width: '58%',
   height: 'auto',
@@ -18,6 +19,19 @@ const RequiredModImg = styled('img')(({ theme }) => ({
 
 export default function RequiredMod({ required }: RequiredModProps) {
   const dispatch = useDispatch();
+  const [border, api] = useSpring(
+    () => ({
+      from: { border: '3px solid rgba(100, 10, 10, 1)' },
+      to: async (next) => {
+        await next({ border: '3px solid rgba(100, 10, 10, 0)' });
+        await next({ border: '3px solid rgba(100, 10, 10, 1)' });
+      },
+      loop: true,
+
+      config: { duration: 1900, tension: 120, friction: 14 },
+    }),
+    []
+  );
 
   function handleOnClick() {
     autoEquipStatMod(required.mod, dispatch);
@@ -28,8 +42,8 @@ export default function RequiredMod({ required }: RequiredModProps) {
       <RequiredModImg
         src={required.mod.icon}
         onClick={handleOnClick}
+        style={border}
         sx={{
-          border: `3px solid ${required.equipped ? 'rgba(100,100,100,0.35)' : 'red'}`,
           '&:hover': { scale: 1.07 },
         }}
       />