Handle hovering in `Cell.Label`

1 files changed, 13 insertions, 4 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index f73066058b..61216f5ccb 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -166,11 +166,20 @@ export function Container({ children }: ContainerProps) {
   return <View style={styles.cellContainer}>{children}</View>;
 }
 
-export function Label({ children }: ContainerProps) {
+export type LabelProps = {
+  children: React.Node,
+  cellHoverStyle?: Types.ViewStyle,
+};
+
+export function Label({ children, cellHoverStyle }: LabelProps) {
   return (
-    <View style={styles.label.container}>
-      <Text style={styles.label.text}>{children}</Text>
-    </View>
+    <CellHoverContext.Consumer>
+      {(hovered) => (
+        <View style={[styles.label.container, hovered && cellHoverStyle]}>
+          <Text style={styles.label.text}>{children}</Text>
+        </View>
+      )}
+    </CellHoverContext.Consumer>
   );
 }