cherry cola adjustments + tab button hover fixes + closing tabs shouldn't create weird broken things anymore

mods/cherrycola/styles.css

@@ -1,14 +1,15 @@
 /*
  * cherry cola
  * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * under the MIT license
  */
 
- :root {
+:root {
-
   --cola-main: #180915;
   --cola-sec: #1d0919;
   --cola-tet: #492341;
+  --cola-info: #9b6890;
   --cola-accent: #bf799b;
   --cola-gray: #8a8a8a;
   --cola-brown: #755241;
@@ -24,11 +25,11 @@
   --theme_dark--main: var(--cola-main);
   --theme_dark--sidebar: var(--cola-sec);
   --theme_dark--overlay: var(--cola-sec);
-  --theme_dark--dragarea: var(--cola-tet);
+  --theme_dark--dragarea: #210a1c;
   --theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
-  rgba(20, 0, 16, 0.2) 0px 2px 4px;
+    rgba(20, 0, 16, 0.2) 0px 2px 4px;
   --theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
-  rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
+    rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
 
   /* Scrollbar */
   --theme_dark--scrollbar: var(--cola-sec);
@@ -59,8 +60,8 @@
 
   /* Default text colors */
   --theme_dark--text: #ffffff;
-  --theme_dark--text_ui: var(--cola-gray);
+  --theme_dark--text_ui: var(--cola-info);
-  --theme_dark--text_ui_info: var(--cola-gray);
+  --theme_dark--text_ui_info: var(--cola-info);
 
   /* Text color options */
   --theme_dark--text_gray: var(--cola-gray);
@@ -140,12 +141,10 @@
   --theme_dark--code_number: var(--theme_dark--text_purple);
   --theme_dark--code_string: var(--theme_dark--text_orange);
   --theme_dark--code_attr-value: var(--theme_dark--text_orange);
-
 }
 
 /* Quotations as serif */
-.notion-dark-theme
+.notion-dark-theme .notion-quote-block {
-  .notion-quote-block{
   font-family: Georgia, 'Times New Roman', Times, serif;
   background-color: var(--cola-sec);
 }

mods/core/buttons.js

@@ -83,19 +83,19 @@ module.exports = (store) => {
 
   (async () => {
     for (let btn of buttons.insert) {
-      buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
+      buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
         btn
       ]()}</button>`;
     }
     for (let btn of buttons.insert) {
-      buttons.element.querySelector(`.window-button#btn-${btn}`).onclick =
+      buttons.element.querySelector(`.window-button.btn-${btn}`).onclick =
         buttons.actions[btn];
     }
     if (store().frameless && !store().tiling_mode && !is_mac) {
       window.addEventListener('resize', (event) => {
         Promise.resolve(buttons.icons.maximize()).then((icon) => {
           icon = icon.toString();
-          const el = buttons.element.querySelector('#btn-maximize');
+          const el = buttons.element.querySelector('.btn-maximize');
           if (el.innerHTML != icon) el.innerHTML = icon;
         });
       });

mods/core/css/buttons.css

@@ -37,9 +37,7 @@
   background: var(--theme--interactive_hover);
   box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
 }
-.window-button#btn-close:hover {
+.window-button.btn-close:hover {
   background: var(--theme--button_close);
-}
+  color: var(--theme--button_close-fill);
-.window-button#btn-close:hover svg line {
-  stroke: var(--theme--button_close-fill);
 }

mods/core/css/tabs.css

@@ -95,7 +95,7 @@ body,
   color: var(--theme--text);
   -webkit-app-region: no-drag;
   border: none;
-  background-color: transparent;
+  background: transparent;
 }
 #titlebar .window-buttons-area {
   margin: 0.5em 0.55em 0.5em auto;
@@ -132,6 +132,7 @@ body,
 }
 #tabs .tab:not(.new) span:not(.close) {
   width: 8.5em;
+  margin-right: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -166,9 +167,15 @@ body,
   opacity: 1;
 }
 #tabs .tab .close:hover,
-#tabs .tab.new span:hover {
+#tabs .tab.new span:hover,
+#titlebar .window-button:hover {
+  border-radius: 4px;
   background: var(--theme--table-border);
-  border-radius: 5px;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+#titlebar .window-button.btn-close:hover {
+  background: var(--theme--button_close);
+  color: var(--theme--button_close-fill);
 }
 #tabs .tab.dragged-over {
   box-shadow: inset 4px 0 0 0 var(--theme--selected);

mods/core/render.js

@@ -223,7 +223,7 @@ module.exports = (store, __exports) => {
         const list = new Map(this.state.tabs);
         while (this.state.tabs.get(id) && this.state.tabs.get(id).open) id++;
         list.delete(id);
-        this.openTab(id, { state: list, load: url || true });
+        return this.openTab(id, { state: list, load: url || true });
       }
       openTab(
         id,
@@ -237,64 +237,80 @@ module.exports = (store, __exports) => {
           load: false,
         }
       ) {
-        if (!id && id !== 0) {
+        return new Promise((res, rej) => {
-          if (state.get(this.views.current.id).open) return;
+          if (!id && id !== 0) {
-          const currentIndex = [...state].findIndex(
+            if (state.get(this.views.current.id).open) return res(true);
-            ([id, { title, open }]) => id === this.views.current.id
+            const currentIndex = [...state].findIndex(
-          );
+              ([id, { title, open }]) => id === this.views.current.id
-          id = (
+            );
-            [...state].find(
+            id = ([...state].find(
               ([id, { title, open }], tabIndex) =>
                 open && tabIndex > currentIndex
-            ) || [...state].find(([id, { title, open }]) => open)
+            ) || [...state].find(([id, { title, open }]) => open))[0];
-          ).title;
-        }
-        const current_src = this.views.current.$el().src;
-        this.views.current.id = id;
-        this.setState(
-          {
-            tabs: state.set(id, {
-              title: state.get(id) ? state.get(id).title : 'notion.so',
-              open: true,
-            }),
-            slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
-            slideOut: slideOut,
-          },
-          async () => {
-            this.focusTab();
-            if (load) {
-              await new Promise((res, rej) => {
-                let attempt;
-                attempt = setInterval(() => {
-                  if (!document.body.contains(this.views.html[id])) return;
-                  clearInterval(attempt);
-                  res();
-                }, 50);
-              });
-              this.views.html[id].style.opacity = '0';
-              let unhide;
-              unhide = () => {
-                this.views.html[id].style.opacity = '';
-                this.views.html[id].removeEventListener(
-                  'did-stop-loading',
-                  unhide
-                );
-              };
-              this.views.html[id].addEventListener('did-stop-loading', unhide);
-              this.views.html[id].loadURL(
-                typeof load === 'string'
-                  ? load
-                  : store().default_page
-                  ? idToNotionURL(store().default_page)
-                  : current_src
-              );
-              // this.views.html[id].getWebContents().openDevTools();
-            }
-            setTimeout(() => {
-              this.setState({ slideIn: new Set(), slideOut: new Set() });
-            }, 150);
           }
-        );
+          const current_src = this.views.current.$el().src;
+          this.views.current.id = id;
+          this.setState(
+            {
+              tabs: state.set(id, {
+                title: state.get(id) ? state.get(id).title : 'notion.so',
+                open: true,
+              }),
+              slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
+              slideOut: slideOut,
+            },
+            async () => {
+              this.focusTab();
+              new Promise((resolve, reject) => {
+                let attempt,
+                  clear = () => {
+                    clearInterval(attempt);
+                    return true;
+                  };
+                attempt = setInterval(() => {
+                  if (this.views.current.id !== id) return clear() && reject();
+                  if (document.body.contains(this.views.html[id]))
+                    return clear() && resolve();
+                }, 50);
+              })
+                .then(() => {
+                  if (load) {
+                    this.views.html[id].style.opacity = '0';
+                    let unhide;
+                    unhide = () => {
+                      this.views.html[id].style.opacity = '';
+                      this.views.html[id].removeEventListener(
+                        'did-stop-loading',
+                        unhide
+                      );
+                    };
+                    this.views.html[id].addEventListener(
+                      'did-stop-loading',
+                      unhide
+                    );
+                    this.views.html[id].loadURL(
+                      typeof load === 'string'
+                        ? load
+                        : store().default_page
+                        ? idToNotionURL(store().default_page)
+                        : current_src
+                    );
+                  }
+                })
+                .catch(() => {
+                  // nothing
+                })
+                .finally(() => {
+                  setTimeout(() => {
+                    this.setState(
+                      { slideIn: new Set(), slideOut: new Set() },
+                      () => res(true)
+                    );
+                  }, 150);
+                });
+            }
+          );
+        });
       }
       closeTab(id) {
         if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
@@ -302,7 +318,7 @@ module.exports = (store, __exports) => {
         list.set(id, { ...list.get(id), open: false });
         if (![...list].filter(([id, { title, open }]) => open).length)
           return electron.remote.getCurrentWindow().close();
-        this.openTab(
+        return this.openTab(
           this.views.current.id === id ? null : this.views.current.id,
           { state: list, slideOut: this.state.slideOut.add(id) }
         );