From 705d48ab60354c8967eed83436074764641cdc34 Mon Sep 17 00:00:00 2001
From: Anton Rudnikov <anton@rudnikov.net>
Date: Mon, 9 Jan 2023 10:34:40 +0000
Subject: [PATCH] Use CSS for styling instead of JS

---
 src/StatusBar.ts | 16 ++++++++++------
 styles.css       | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/StatusBar.ts b/src/StatusBar.ts
index e11782e..d9c9623 100644
--- a/src/StatusBar.ts
+++ b/src/StatusBar.ts
@@ -15,21 +15,25 @@ export class StatusBar {
         this.element.addClass('mod-clickable');
         this.element.setAttr('aria-label-position', 'top')
 
-        this.iconElement = this.element.createSpan({ text: '' });
-        this.iconElement.style.marginRight = '5px';
+        this.iconElement = this.element.createSpan({ text: '', cls: 'hints-status-bar-icon' });
         this.hintsElement = this.element.createSpan({ text: "Hints" });
 
         this.updateState('refresh-cw', 'Loading...')
     }
 
     updateState(icon: string, description: string | null, options: { forceShow?: boolean; error?: boolean } = {}) {
-        const show = this.plugin.settings.showInStatusBar || options.forceShow
+        const visible = this.plugin.settings.showInStatusBar || options.forceShow
 
         setIcon(this.iconElement, icon);
         this.element.setAttr('aria-label', description ?? '')
-        this.element.style.color = options.error ? 'var(--text-error)' : '';
-        this.element.style.padding = show ? '0 var(--size-2-2)' : '0';
-        this.element.style.display = show ? '' : 'none';
+        this.element.removeClass('hints-status-bar-error', 'hints-status-bar-hidden')
+
+        if (options.error) {
+            this.element.addClass('hints-status-bar-error');
+        }
+        if (!visible) {
+            this.element.addClass('hints-status-bar-hidden');
+        }
     }
 
     setDefaultState() {
diff --git a/styles.css b/styles.css
index 71cc60f..3251b14 100644
--- a/styles.css
+++ b/styles.css
@@ -1,8 +1,12 @@
-/*
+.hints-status-bar-icon {
+    margin-right: 5px;
+}
 
-This CSS file will be included with your plugin, and
-available in the app when your plugin is enabled.
+.hints-status-bar-error {
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--text-error);
+}
 
-If your plugin does not need CSS, delete this file.
-
-*/
+.hints-status-bar-hidden {
+    display: none;
+}