From d66b43e9fd34109792c34ec15ff7915de099a326 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Tue, 15 Mar 2022 11:29:42 +0100
Subject: [PATCH] Add active styling to existing bangs while editing.

---
 source/options/components/page-main.ts        | 3 ++-
 source/options/scss/components/page-main.scss | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/source/options/components/page-main.ts b/source/options/components/page-main.ts
index 23e24b5..2f28bbf 100644
--- a/source/options/components/page-main.ts
+++ b/source/options/components/page-main.ts
@@ -118,6 +118,7 @@ export class PageMain extends Component<Props, State> {
     const {bangs, editorError} = this.state;
 
     const availableBangs = bangs.map((bang) => {
+      const active = bang.id === this.state.editorBang.id ? 'active' : '';
       const onClick = () => {
         this.setState({
           editorBang: {...bang},
@@ -126,7 +127,7 @@ export class PageMain extends Component<Props, State> {
 
       return html`
         <li>
-          <button onClick=${onClick}>
+          <button class="${active}" onClick=${onClick}>
             ${bang.name}<span class="bang-id">${bang.id}</span>
           </button>
         </li>
diff --git a/source/options/scss/components/page-main.scss b/source/options/scss/components/page-main.scss
index 5d77506..29f8c57 100644
--- a/source/options/scss/components/page-main.scss
+++ b/source/options/scss/components/page-main.scss
@@ -123,6 +123,11 @@
       padding: 16px;
       width: 100%;
 
+      &.active {
+        border-color: var(--da-3);
+        color: var(--da-3);
+      }
+
       &:hover {
         background-color: var(--da-3);
         border-color: var(--da-3);