Merge pull request #9428 from robojumper/color-boosted-stats-in-loadout

Make it more obvious in Loadouts when stat is boosted by Font mods
DestinyItemManager · Dec 4, 2023 · b05c74c · b05c74c
2 parents 2d9170f + 00b98e0
commit b05c74c
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 10 deletions.
diff --git a/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss b/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss
@@ -84,6 +84,10 @@
     margin-right: 8px;
     font-size: 1.2em;
 
+    &:global(.boostedValue) {
+      color: $stat-modded;
+    }
+
     img {
       height: 20px;
       width: 20px;

diff --git a/src/app/store-stats/CharacterStats.scss b/src/app/store-stats/CharacterStats.scss
@@ -1,3 +1,5 @@
+@import '../variables';
+
 /* INT/DIS/STR bars */
 .stat-bars {
   width: 100%;
@@ -107,8 +109,10 @@
       flex: 0;
       font-size: 11px;
       color: var(--theme-header-characters-txt);
-      &.pointerCursor {
-        cursor: pointer;
+      &.boostedValue {
+        color: $stat-modded;
+        font-weight: bold;
+        text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
       }
       .phone-portrait & {
         font-size: 12px;

diff --git a/src/app/store-stats/CharacterStats.tsx b/src/app/store-stats/CharacterStats.tsx
@@ -56,7 +56,7 @@ function CharacterPower({ stats }: { stats: PowerStat[] }) {
           )}
         >
           <div
-            className={clsx('stat', { pointerCursor: stat.onClick })}
+            className="stat"
             aria-label={`${stat.name} ${stat.value}`}
             role={stat.onClick ? 'button' : 'group'}
             onClick={stat.onClick}
@@ -174,7 +174,13 @@ function CharacterStats({
           key={stat.hash}
           tooltip={<StatTooltip stat={stat} equippedHashes={equippedHashes} />}
         >
-          <div className="stat" aria-label={`${stat.name} ${stat.value}`} role="group">
+          <div
+            className={clsx('stat', {
+              boostedValue: stat.breakdown?.some((change) => change.source === 'runtimeEffect'),
+            })}
+            aria-label={`${stat.name} ${stat.value}`}
+            role="group"
+          >
             <BungieImage src={stat.icon} alt={stat.name} />
             <div>{stat.value}</div>
           </div>

diff --git a/src/app/themes/_theme-europa.scss b/src/app/themes/_theme-europa.scss
@@ -54,7 +54,7 @@
   --theme-header-nav-bg: #1d2b5e;
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: #2a418f;
-  --theme-header-characters-txt: #aaa;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.625);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);

diff --git a/src/app/themes/_theme-neomuna.scss b/src/app/themes/_theme-neomuna.scss
@@ -56,7 +56,7 @@
   --theme-header-nav-bg: #0b2432;
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: #10364d;
-  --theme-header-characters-txt: #aaa;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.625);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);

diff --git a/src/app/themes/_theme-pyramid.scss b/src/app/themes/_theme-pyramid.scss
@@ -53,7 +53,7 @@
   --theme-header-nav-bg: black;
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: #101010;
-  --theme-header-characters-txt: #aaa;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.625);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);

diff --git a/src/app/themes/_theme-throneworld.scss b/src/app/themes/_theme-throneworld.scss
@@ -49,7 +49,7 @@
   --theme-header-nav-bg: #1b422c;
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: #265c42;
-  --theme-header-characters-txt: #ccc;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.8);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);

diff --git a/src/app/themes/_theme-vexnet.scss b/src/app/themes/_theme-vexnet.scss
@@ -54,7 +54,7 @@
   --theme-header-nav-bg: #0d2f63;
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: #204c74;
-  --theme-header-characters-txt: #aaa;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.625);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);

diff --git a/src/app/themes/_theme.scss b/src/app/themes/_theme.scss
@@ -51,7 +51,7 @@
   --theme-header-nav-bg: var(--theme-app-bg-gradient);
   --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
   --theme-header-characters-bg: var(--theme-app-bg-gradient);
-  --theme-header-characters-txt: #ccc;
+  --theme-header-characters-txt: rgba(255, 255, 255, 0.8);
 
   // Dropdown menu
   --theme-dropdown-menu-bg: var(--theme-fill-modal);