fix(notion): Timer link on Notion main page

Creates timer link on left side of page title, which works on the main page and popups

src/scripts/content/notion.js

@@ -1,24 +1,23 @@
 'use strict';
 
-// Selectors here are madness, it works for as of Dec 4th 2019
-// Button renders in popup/dialog view
+// Button renders left of page title
 togglbutton.render(
-  '.notion-peek-renderer:not(.toggl)',
+  '.notion-page-controls + div:not(.toggl)',
   { observe: true },
   function (elem) {
+    elem.style.position = 'relative';
+
     function getDescription () {
-      const descriptionElem = elem.querySelector('.notion-scroller .notion-selectable div[contenteditable="true"]');
+      const descriptionElem = elem;
       return descriptionElem ? descriptionElem.textContent.trim() : '';
     }
 
     const link = togglbutton.createTimerLink({
       className: 'notion',
+      buttonType: 'minimal',
       description: getDescription
     });
 
-    const root = elem.querySelector('div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)');
-    if (root) {
-      root.prepend(link);
-    }
+    elem.prepend(link);
   }
 );

src/styles/style.css

@@ -1328,16 +1328,11 @@ li .toggl-button.heflo {
 }
 
 /********* NOTION *********/
-.toggl-button.notion {
-  color: rgb(55, 53, 47);
+.toggl-button.notion.min {
   cursor: pointer !important;
-  margin-right: 8px;
-  margin-top: 4px;
-  text-decoration: none;
-}
-
-body.notion-body.dark .toggl-button.notion {
-  color: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  top: 17px;
+  left: -30px;
 }
 
 /********* TURTLE *********/