Merge pull request #1193 from Microsoft/jwilaby/#942-unique-icons

Jwilaby/#942 unique icons

packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointExplorer.scss

@@ -1,4 +1,8 @@
-ul > li.message::before {
-  -webkit-mask: url(../../../media/ic_bot_explorer.svg);
-  -webkit-mask-size: 12px;
+ul > li > svg.message-icon {
+  width: 12px;
+  height: 12px;
+  padding-right: 5px;
+  position: relative;
+  top: 2px;
+  fill: var(--explorer-panel-group-title-color);
 }

packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointExplorer.scss.d.ts

@@ -1,2 +1,2 @@
 // This is a generated file. Changes are likely to result in being overwritten
-export const message: string;
+export const messageIcon: string;

packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointExplorer.tsx

@@ -58,14 +58,21 @@ export class EndpointExplorer extends ServicePane<EndpointProps> {
       .map((model, index) => {
         return (
           <li
-            className={ styles.message }
             data-index={ index }
             key={ index }
             onClick={ this.onLinkClick }
             onKeyPress={ this.onHandleKeyPress }
             tabIndex={ 0 }
-            title={ model.endpoint } 
+            title={ model.endpoint }
           >
+            <svg className={ styles.messageIcon }
+                 xmlns="http://www.w3.org/2000/svg"
+                 role="presentation"
+                 viewBox="0 0 16 16"
+                 width="12px"
+                 height="12px">
+              <path d="M0 1h16v11H5.71L2 15.71V12H0V1zm15 10V2H1v9h2v2.29L5.29 11H15z"/>
+            </svg>
             { model.name }
           </li>);
       });
@@ -87,14 +94,14 @@ export class EndpointExplorer extends ServicePane<EndpointProps> {
   protected onLinkClick: MouseEventHandler<HTMLLIElement> = (event: SyntheticEvent<HTMLLIElement>): void => {
     const { currentTarget } = event;
     const { index } = currentTarget.dataset;
-    const { [index]: endpointService } = this.props.endpointServices;
+    const { [+index]: endpointService } = this.props.endpointServices;
     this.props.openEndpointInEmulator(endpointService);
   }
 
   protected onContextMenuOverLiElement(li: HTMLLIElement) {
     super.onContextMenuOverLiElement(li);
     const { index } = li.dataset;
-    const { [index]: endpointService } = this.props.endpointServices;
+    const { [+index]: endpointService } = this.props.endpointServices;
     this.props.openContextMenuForService(new EndpointService(endpointService), EndpointEditorContainer);
   }
 

packages/app/client/src/ui/shell/explorer/servicePane/servicePane.scss

@@ -25,20 +25,28 @@
 .add-icon-button {
   right: 10px;
   top: calc(50% - 1px);
+
   & > svg {
     fill: var(--explorer-panel-group-title-color);
     height: 12px;
     width: 12px;
+
     &:hover {
       fill: var(--log-panel-link);
     }
   }
 }
 
 .sort-icon-button {
-  color: var(--explorer-panel-group-title-color);
+  > svg {
+    fill: var(--explorer-panel-group-title-color);
+  }
+
   right: 50px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
+  width: 14px;
+  height: 14px;
+
   &:hover {
     color: var(--log-panel-link);
   }
@@ -66,11 +74,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-left: 13px;
 
     &:hover {
       background-color: var(--list-item-hover-bg);
       border: var(--list-item-hover-border);
     }
+
     &:focus {
       background-color: var(--focused-list-item);
     }
@@ -84,18 +94,6 @@
     & span {
       color: var(--neutral-7);
     }
-
-    &::before {
-      content: "";
-      background-color: var(--explorer-panel-group-title-color);
-      background-size: contain;
-      display: inline-block;
-      height: 12px;
-      margin-left: 13px;
-      margin-right: 5px;
-      opacity: .5;
-      width: 12px;
-    }
   }
 }
 

packages/app/client/src/ui/shell/explorer/servicePane/servicePane.tsx

@@ -70,7 +70,12 @@ export abstract class ServicePane<T extends ServicePaneProps, S extends ServiceP
           onKeyPress={ this.onControlKeyPress }
           onClick={ this.onSortClick }
           className={ `${styles.sortIconButton } ${styles.serviceIcon }` }>
-          ⮁
+          <svg viewBox="0 0 34.761 26.892" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+            <g>
+              <path d="M15.359 9.478l-6.226-6.21v17.557H7.426V3.268L1.2 9.478 0 8.281 8.279 0l8.279 8.281z"/>
+              <path d="M34.761 18.612l-8.279 8.281-8.282-8.281 1.2-1.2 6.226 6.21V6.068h1.707v17.557l6.226-6.21z"/>
+            </g>
+          </svg>
         </button>
         <button aria-label="Add"
           onKeyPress={ this.onControlKeyPress }