From 7498923df2ad8c5ada9a658cae8489b759d45ef1 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Mon, 28 Sep 2020 21:05:09 -0400
Subject: [PATCH] leap: use indigo-react icons

---
 pkg/interface/src/logic/lib/omnibox.js        |   2 +-
 .../views/components/leap/OmniboxResult.js    | 131 ++++++------------
 2 files changed, 41 insertions(+), 92 deletions(-)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index 94b23f177..429d7414c 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -68,7 +68,7 @@ const appIndex = function (apps) {
     });
   // add groups separately
   applications.push(
-    result('Groups', '/~groups', 'groups', null)
+    result('Groups', '/~groups', 'Groups', null)
   );
   return applications;
 };
diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.js b/pkg/interface/src/views/components/leap/OmniboxResult.js
index 7d60a5245..e03c4d3b1 100644
--- a/pkg/interface/src/views/components/leap/OmniboxResult.js
+++ b/pkg/interface/src/views/components/leap/OmniboxResult.js
@@ -26,43 +26,20 @@ export class OmniboxResult extends Component {
   }
 
   getIcon(icon, dark, selected, link) {
-    // graphicStyle is only necessary for pngs
-    //
-    //TODO can be removed after indigo-react 1.2
-    //which includes icons for apps
-    let graphicStyle = {};
-
-    if (icon.toLowerCase() !== 'dojo') {
-      graphicStyle = (!dark && this.state.hovered) ||
-        selected === link ||
-        (dark && !(this.state.hovered || selected === link))
-        ? { filter: 'invert(1)' }
-        : { filter: 'invert(0)' };
-    } else {
-      graphicStyle =
-        (!dark && this.state.hovered) ||
-          selected === link ||
-          (dark && !(this.state.hovered || selected === link))
-          ? { filter: 'invert(0)' }
-          : { filter: 'invert(1)' };
-    }
-
-    const iconFill = this.state.hovered || selected === link ? 'white' : 'black';
-    const sigilFill = this.state.hovered || selected === link ? '#3a8ff7' : '#ffffff';
+    const iconFill = (this.state.hovered || (selected === link)) ? 'white' : 'black';
+    const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
 
     let graphic = <div />;
     if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') {
-      graphic =
-        <img className="mr2 v-mid dib" height="16"
-          width="16" src={`/~landscape/img/${icon.toLowerCase()}.png`}
-          style={graphicStyle}
-        />;
+      icon = (icon === 'Dojo') ? 'ChevronEast' : icon;
+      icon = (icon === 'Link') ? 'Links' : icon;
+      graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='16px' color={iconFill} />;
     } else if (icon === 'logout') {
-      graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' fill={iconFill} />;
+      graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' color={iconFill} />;
     } else if (icon === 'profile') {
       graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />;
     } else {
-      graphic = <Icon verticalAlign="middle" mr='2' size="16px" fill={iconFill} />;
+      graphic = <Icon verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
     }
 
     return graphic;
@@ -78,68 +55,40 @@ export class OmniboxResult extends Component {
     const graphic = this.getIcon(icon, dark, selected, link);
 
     return (
-        <Row
-          py='2'
-          px='2'
-          display='flex'
-          flexDirection='row'
-          style={{ cursor: 'pointer' }}
-          onMouseEnter={() => this.setHover(true)}
-          onMouseLeave={() => this.setHover(false)}
-          backgroundColor={
-            this.state.hovered || selected === link ? 'blue' : 'white'
-          }
-          onClick={navigate}
-          width="100%"
-          ref={this.result}
+      <Row
+      py='2'
+      px='2'
+      cursor='pointer'
+      onMouseEnter={() => this.setHover(true)}
+      onMouseLeave={() => this.setHover(false)}
+      backgroundColor={
+        this.state.hovered || selected === link ? 'blue' : 'white'
+      }
+      onClick={navigate}
+      width="100%"
+      ref={this.result}
+      >
+        {graphic}
+        <Text
+        display="inline-block"
+        verticalAlign="middle"
+        color={this.state.hovered || selected === link ? 'white' : 'black'}
+        maxWidth="60%"
+        style={{ flexShrink: 0 }}
+        mr='1'
         >
-          {this.state.hovered || selected === link ? (
-            <>
-            {graphic}
-              <Text
-                display="inline-block"
-                verticalAlign="middle"
-                color='white'
-                maxWidth="60%"
-                style={{ flexShrink: 0 }}
-                mr='1'>
-                {text}
-              </Text>
-            <Text pr='2'
-            display="inline-block"
-            verticalAlign="middle"
-            color='white'
-            width='100%'
-            textAlign='right'
-            >
-                {subtext}
-              </Text>
-            </>
-          ) : (
-            <>
-            {graphic}
-              <Text
-                mr='1'
-                display="inline-block"
-                verticalAlign="middle"
-                maxWidth="60%"
-                style={{ flexShrink: 0 }}
-              >
-              {text}
-            </Text>
-              <Text
-                pr='2'
-                display="inline-block"
-                verticalAlign="middle"
-                gray
-                width='100%'
-                textAlign='right'
-              >
-                {subtext}
-              </Text>
-            </>
-          )}
-        </Row>
+          {text}
+        </Text>
+        <Text pr='2'
+        display="inline-block"
+        verticalAlign="middle"
+        color={this.state.hovered || selected === link ? 'white' : 'black'}
+        width='100%'
+        textAlign='right'
+        >
+          {subtext}
+        </Text>
+      </Row>
     );
   }
 }