From e5a03c8a039271fd4c6d06f89c9d47fe1e77bf8b Mon Sep 17 00:00:00 2001
From: Nathan McCallum <hey@nathan-mccallum.com>
Date: Sat, 18 Jun 2022 09:27:55 +1000
Subject: [PATCH] Fix icon titles in nav bars

---
 app/components/menu/bottomBar.tsx             | 20 ++++++++++---------
 .../menu/bottomBar/bottomBarSection.tsx       |  5 +++--
 app/components/menu/icon.tsx                  |  6 ++++--
 app/components/menu/topBar.tsx                |  1 +
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/components/menu/bottomBar.tsx b/app/components/menu/bottomBar.tsx
index 55fce11c..a761d3fd 100644
--- a/app/components/menu/bottomBar.tsx
+++ b/app/components/menu/bottomBar.tsx
@@ -26,28 +26,28 @@ class BottomBar extends React.Component {
           <div className='ui blue inverted compact labeled icon menu small'>
             <BottomBarSection
               progressPercent={BodyRPCStore.food_percent_full}
-              iconName='food'
+              iconStyle='food'
               topText={`${rn(BodyRPCStore.food_stored)} / ${rn(BodyRPCStore.food_capacity)}`}
               bottomText={`${rn(BodyRPCStore.food_hour)} / hr`}
             />
 
             <BottomBarSection
               progressPercent={BodyRPCStore.ore_percent_full}
-              iconName='ore'
+              iconStyle='ore'
               topText={`${rn(BodyRPCStore.ore_stored)} / ${rn(BodyRPCStore.ore_capacity)}`}
               bottomText={`${rn(BodyRPCStore.ore_hour)} / hr`}
             />
 
             <BottomBarSection
               progressPercent={BodyRPCStore.water_percent_full}
-              iconName='water'
+              iconStyle='water'
               topText={`${rn(BodyRPCStore.water_stored)} / ${rn(BodyRPCStore.water_capacity)}`}
               bottomText={`${rn(BodyRPCStore.water_hour)} / hr`}
             />
 
             <BottomBarSection
               progressPercent={BodyRPCStore.energy_percent_full}
-              iconName='energy'
+              iconStyle='energy'
               topText={`${rn(BodyRPCStore.energy_stored)} / ${rn(BodyRPCStore.energy_capacity)}`}
               bottomText={`${rn(BodyRPCStore.energy_hour)} / hr`}
             />
@@ -55,7 +55,7 @@ class BottomBar extends React.Component {
             {BodyRPCStore.type !== 'space station' ? (
               <BottomBarSection
                 progressPercent={BodyRPCStore.waste_percent_full}
-                iconName='waste'
+                iconStyle='waste'
                 topText={`${rn(BodyRPCStore.waste_stored)} / ${rn(BodyRPCStore.waste_capacity)}`}
                 bottomText={`${rn(BodyRPCStore.waste_hour)} / hr`}
               />
@@ -65,7 +65,7 @@ class BottomBar extends React.Component {
 
             {BodyRPCStore.type !== 'space station' ? (
               <BottomBarSection
-                iconName='happiness'
+                iconStyle='happiness'
                 topText={rn(BodyRPCStore.happiness)}
                 bottomText={`${rn(BodyRPCStore.happiness_hour)} / hr`}
               />
@@ -74,7 +74,7 @@ class BottomBar extends React.Component {
             )}
 
             <BottomBarSection
-              iconName='plots'
+              iconStyle='plots'
               topText={`${BodyRPCStore.building_count} / ${
                 BodyRPCStore.building_count + BodyRPCStore.plots_available
               }`}
@@ -83,7 +83,8 @@ class BottomBar extends React.Component {
             />
 
             <BottomBarSection
-              iconName='build'
+              iconStyle='build'
+              iconTitle='Build Queue'
               topText={
                 BodyRPCStore.build_queue_len +
                 (BodyRPCStore.type !== 'space station' ? ` / ${BodyRPCStore.build_queue_size}` : '')
@@ -97,7 +98,8 @@ class BottomBar extends React.Component {
             />
 
             <BottomBarSection
-              iconName='dashboard'
+              iconStyle='dashboard'
+              iconTitle='RPC Count'
               topText={`${EmpireRPCStore.rpc_count} / ${rn(ServerRPCStore.rpc_limit)}`}
               bottomText='Actions'
               title='This is the maximum number of requests you can send to the server in a 24 hour period.'
diff --git a/app/components/menu/bottomBar/bottomBarSection.tsx b/app/components/menu/bottomBar/bottomBarSection.tsx
index ec3fe053..ee6a10b5 100644
--- a/app/components/menu/bottomBar/bottomBarSection.tsx
+++ b/app/components/menu/bottomBar/bottomBarSection.tsx
@@ -4,7 +4,8 @@ import ProgressBar from 'app/components/menu/bottomBar/progressBar';
 import { IconStyle } from 'app/interfaces/menu/icons';
 
 type Props = {
-  iconName: IconStyle;
+  iconStyle: IconStyle;
+  iconTitle?: string;
   topText: string;
   bottomText: string;
   progressPercent?: number;
@@ -17,7 +18,7 @@ class BottomBarSection extends React.Component<Props> {
       <div className='item'>
         {this.props.progressPercent ? <ProgressBar percent={this.props.progressPercent} /> : ''}
 
-        {<Icon style={this.props.iconName} size='large' />}
+        {<Icon style={this.props.iconStyle} title={this.props.iconTitle} size='large' />}
 
         <span title={this.props.title}>
           <p style={{ margin: 0 }}>{this.props.topText}</p>
diff --git a/app/components/menu/icon.tsx b/app/components/menu/icon.tsx
index a2eb9de3..380ef73e 100644
--- a/app/components/menu/icon.tsx
+++ b/app/components/menu/icon.tsx
@@ -7,20 +7,22 @@ import * as util from 'app/util';
 type Props = {
   style: IconStyle;
   size?: IconSize;
+  title?: string;
 };
 
 class Icon extends React.Component<Props> {
   render() {
     const { style } = this.props;
     const size = this.props.size || 'small';
+    const title = this.props.title || util.humanize(style);
 
     return (
       <img
         src={`${environment.getAssetsUrl()}ui/${size === 'large' ? 'l' : 's'}/${style}.png`}
         style={{ maxHeight: 36, margin: 2 }}
         className='ui image'
-        title={util.humanize(style)}
-        alt={util.humanize(style) + ' Icon'}
+        title={title}
+        alt={`${title} Icon`}
       />
     );
   }
diff --git a/app/components/menu/topBar.tsx b/app/components/menu/topBar.tsx
index 3d381685..aee51caf 100644
--- a/app/components/menu/topBar.tsx
+++ b/app/components/menu/topBar.tsx
@@ -33,6 +33,7 @@ class TopBar extends React.Component {
             <a className='item' onClick={() => MenuStore.toggleMapMode()}>
               <Icon
                 style={MenuStore.mapMode === PLANET_MAP_MODE ? 'star_map' : 'planet_side'}
+                title={MenuStore.mapMode === PLANET_MAP_MODE ? 'Star Map' : 'Back to Planet'}
                 size='large'
               />
             </a>
-- 
2.51.2