From 4e92c067913501b21ac0e9bc83b0f2567732649c Mon Sep 17 00:00:00 2001
From: Xmader <xmader@outlook.com>
Date: Wed, 19 May 2021 02:10:28 -0400
Subject: [PATCH] refactor: btn color theme

---
 src/btn.css | 10 +++++++---
 src/btn.ts  |  8 +++++---
 src/main.ts |  2 ++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/btn.css b/src/btn.css
index d8c156d..2cd584e 100644
--- a/src/btn.css
+++ b/src/btn.css
@@ -52,15 +52,19 @@ button {
 /* fix `View in LibreScore` button text overflow */
 button:last-of-type {
   width: unset !important;
-  color: #2e68c0;
-  background: #e1effe;
 }
 
 button:hover {
   background: #1a4f9f;
 }
 
-button:last-of-type:hover {
+/* light theme btn */
+button.light {
+  color: #2e68c0;
+  background: #e1effe;
+}
+
+button.light:hover {
   background: #c3ddfd;
 }
 
diff --git a/src/btn.ts b/src/btn.ts
index f67745b..4f6de48 100644
--- a/src/btn.ts
+++ b/src/btn.ts
@@ -25,16 +25,17 @@ const getBtnContainer = (): HTMLDivElement => {
   return btnParent
 }
 
-const buildDownloadBtn = (icon: ICON) => {
+const buildDownloadBtn = (icon: ICON, lightTheme = false) => {
   const btn = document.createElement('button')
   btn.type = 'button'
+  if (lightTheme) btn.className = 'light'
 
   // build icon svg element
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   svg.setAttribute('viewBox', '0 0 24 24')
   const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
   svgPath.setAttribute('d', icon)
-  svgPath.setAttribute('fill', icon === ICON.DOWNLOAD ? '#fff' : '#2e68c0')
+  svgPath.setAttribute('fill', lightTheme ? '#2e68c0' : '#fff')
   svg.append(svgPath)
 
   const textNode = document.createElement('span')
@@ -63,6 +64,7 @@ interface BtnOptions {
   readonly disabled?: boolean;
   readonly tooltip?: string;
   readonly icon?: ICON;
+  readonly lightTheme?: boolean;
 }
 
 export enum BtnListMode {
@@ -76,7 +78,7 @@ export class BtnList {
   constructor (private getBtnParent: () => HTMLDivElement = getBtnContainer) { }
 
   add (options: BtnOptions): BtnElement {
-    const btnTpl = buildDownloadBtn(options.icon ?? ICON.DOWNLOAD)
+    const btnTpl = buildDownloadBtn(options.icon ?? ICON.DOWNLOAD, options.lightTheme)
     const setText = (btn: BtnElement) => {
       const textNode = btn.querySelector('span')
       return (str: string): void => {
diff --git a/src/main.ts b/src/main.ts
index a0c59ff..4014910 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -137,8 +137,10 @@ const main = (): void => {
     action: BtnAction.openUrl(() => getLibreScoreLink(scoreinfo)),
     tooltip: 'BETA',
     icon: ICON.LIBRESCORE,
+    lightTheme: true,
   })
 
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   btnList.commit(BtnListMode.InPage)
 }