Handle hovering in `Cell.SubText`

1 files changed, 9 insertions, 4 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index 27b5b9dce9..81999d3a5f 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -185,14 +185,19 @@ export function Label({ children, cellHoverStyle }: LabelProps) {
 
 export type SubTextProps = {
   children: React.Node,
+  cellHoverStyle?: Types.ViewStyle,
   style?: Types.ViewStyle,
 };
 
-export function SubText({ children, style, ...otherProps }: SubTextProps) {
+export function SubText({ children, style, cellHoverStyle, ...otherProps }: SubTextProps) {
   return (
-    <Text style={[styles.subtext, style]} {...otherProps}>
-      {children}
-    </Text>
+    <CellHoverContext.Consumer>
+      {(hovered) => (
+        <Text style={[styles.subtext, style, hovered && cellHoverStyle]} {...otherProps}>
+          {children}
+        </Text>
+      )}
+    </CellHoverContext.Consumer>
   );
 }