From 223c3bef6f4844718258d678f42b29bcb5528a90 Mon Sep 17 00:00:00 2001
From: Jason Robbins <jrobbins@gmail.com>
Date: Fri, 20 Jan 2023 09:13:24 -0800
Subject: [PATCH] Fix selected gate display. (#2682)

---
 client-src/elements/chromedash-app.js       |  3 +++
 client-src/elements/chromedash-gate-chip.js | 13 ++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client-src/elements/chromedash-app.js b/client-src/elements/chromedash-app.js
index d4026430..e903071b 100644
--- a/client-src/elements/chromedash-app.js
+++ b/client-src/elements/chromedash-app.js
@@ -279,11 +279,14 @@ class ChromedashApp extends LitElement {
 
   hideSidebar() {
     this.sidebarHidden = true;
+    this.selectedGateId = 0;
+    this.pageComponent.selectedGateId = 0;
   }
 
   showGateColumn(feature, stageId, gate) {
     this.gateColumnRef.value.setContext(feature, stageId, gate);
     this.selectedGateId = gate.id;
+    this.pageComponent.selectedGateId = gate.id;
     this.showSidebar();
   }
 
diff --git a/client-src/elements/chromedash-gate-chip.js b/client-src/elements/chromedash-gate-chip.js
index 98a49cf2..269642e1 100644
--- a/client-src/elements/chromedash-gate-chip.js
+++ b/client-src/elements/chromedash-gate-chip.js
@@ -1,5 +1,4 @@
 import {LitElement, css, html, nothing} from 'lit';
-import {styleMap} from 'lit-html/directives/style-map.js';
 import {SHARED_STYLES} from '../sass/shared-css.js';
 
 
@@ -58,6 +57,10 @@ class ChromedashGateChip extends LitElement {
        height: 27px;
      }
 
+     sl-button.selected::part(base) {
+       border: 2px solid var(--dark-spot-color);
+     }
+
      sl-button::part(base):hover {
        text-decoration: underline;
      }
@@ -147,13 +150,9 @@ class ChromedashGateChip extends LitElement {
     const stateName = GATE_STATE_TO_NAME[this.gate.state];
     const className = stateName.toLowerCase().replaceAll(' ', '_');
     const iconName = GATE_STATE_TO_ICON[this.gate.state];
-    let selectedBorder = '';
-    if (this.gate.id == this.selectedGateId) {
-      selectedBorder = styleMap({border: '2px solid var(--dark-spot-color)'});
-    }
+    const selected = (this.gate.id == this.selectedGateId) ? 'selected' : '';
     return html`
-      <sl-button pill size="small" class=${className}
-        style=${selectedBorder}
+      <sl-button pill size="small" class="${className} ${selected}"
         title="${teamName}: ${gateName}: ${stateName}"
         @click=${this.openApprovalsDialog}
         >