Lower opacity for common build pieces in swap menu (#2484)

* Lower opacity for common build pieces in swap menu Refer to Issue #2336 Added conditionals to check for the changed build piece, then added to CardThemed elements * ran yarn run mini-ci and yarn run nx format:write
frzyc · Oct 6, 2024 · 7f31c5b · 7f31c5b
1 parent a8aee38
commit 7f31c5b
Showing 1 changed file with 38 additions and 4 deletions.
diff --git a/libs/gi/ui/src/components/build/EquipBuildModal.tsx b/libs/gi/ui/src/components/build/EquipBuildModal.tsx
@@ -94,6 +94,12 @@ function Content(props: Props) {
     setCopyCurrent(false)
     onHide()
   }
+
+  // conditionals for the changed artifact (opacity)
+  const isWeaponChanged = currentWeaponId !== newWeaponId
+  const isArtifactChanged = (slotKey: ArtifactSlotKey) =>
+    currentArtifactIds[slotKey] !== newArtifactIds[slotKey]
+
   return (
     <CardThemed>
       <CardHeader
@@ -183,7 +189,13 @@ function Content(props: Props) {
               columns={{ xs: 2, sm: 3, md: 4, lg: 6 }}
             >
               <Grid item xs={1}>
-                <CardThemed sx={{ height: '100%', maxHeight: '8em' }}>
+                <CardThemed
+                  sx={{
+                    height: '100%',
+                    maxHeight: '8em',
+                    opacity: isWeaponChanged ? 1 : 0.5,
+                  }}
+                >
                   <WeaponCardNano
                     weaponId={currentWeaponId}
                     weaponTypeKey={weaponTypeKey}
@@ -193,7 +205,15 @@ function Content(props: Props) {
               </Grid>
               {Object.entries(currentArtifactIds).map(([slotKey, id]) => (
                 <Grid item key={id || slotKey} xs={1}>
-                  <CardThemed sx={{ height: '100%', maxHeight: '8em' }}>
+                  <CardThemed
+                    sx={{
+                      height: '100%',
+                      maxHeight: '8em',
+                      opacity: isArtifactChanged(slotKey as ArtifactSlotKey)
+                        ? 1
+                        : 0.5,
+                    }}
+                  >
                     <ArtifactCardNano
                       artifactId={id}
                       slotKey={slotKey}
@@ -235,7 +255,13 @@ function Content(props: Props) {
               columns={{ xs: 2, sm: 3, md: 4, lg: 6 }}
             >
               <Grid item xs={1}>
-                <CardThemed sx={{ height: '100%', maxHeight: '8em' }}>
+                <CardThemed
+                  sx={{
+                    height: '100%',
+                    maxHeight: '8em',
+                    opacity: isWeaponChanged ? 1 : 0.5,
+                  }}
+                >
                   <WeaponCardNano
                     weaponId={newWeaponId}
                     weaponTypeKey={weaponTypeKey}
@@ -245,7 +271,15 @@ function Content(props: Props) {
               </Grid>
               {Object.entries(newArtifactIds).map(([slotKey, id]) => (
                 <Grid item key={id || slotKey} xs={1}>
-                  <CardThemed sx={{ height: '100%', maxHeight: '8em' }}>
+                  <CardThemed
+                    sx={{
+                      height: '100%',
+                      maxHeight: '8em',
+                      opacity: isArtifactChanged(slotKey as ArtifactSlotKey)
+                        ? 1
+                        : 0.5,
+                    }}
+                  >
                     <ArtifactCardNano
                       artifactId={id}
                       slotKey={slotKey}