From 34ec577fcdf9c38b154f94cf6a95432377990cbb Mon Sep 17 00:00:00 2001
From: Alisson Oliveira Souza <alisson_tecsouza@hotmail.com>
Date: Fri, 10 Nov 2023 11:50:41 -0300
Subject: [PATCH] fix(wrike): Fix integration on new UI

Closes #1922
---
 src/content/wrike.js | 11 ++++++-----
 src/styles/style.css |  5 +++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/content/wrike.js b/src/content/wrike.js
index 1fecb8bec..a7bd2174f 100644
--- a/src/content/wrike.js
+++ b/src/content/wrike.js
@@ -6,15 +6,16 @@
 
 'use strict';
 
+
 togglbutton.render(
-  'task-title:not(.toggl)',
+  'work-item-title:not(.toggl)',
   { observe: true },
   function (elem) {
-    const container = document.querySelector('settings-bar-content')
+    const container = document.querySelector('action-panel')
     const viewContainer = document.querySelector('entity-view')
 
     const getTitleElement = function () {
-      const wsTaskTitle = document.querySelectorAll('task-title');
+      const wsTaskTitle = elem.querySelectorAll('task-title');
       if (wsTaskTitle.length === 1 && wsTaskTitle[0].textContent !== '') {
         return wsTaskTitle[0];
       }
@@ -25,7 +26,7 @@ togglbutton.render(
       const titleElem = getTitleElement();
       const titleElemText = titleElem ? titleElem.textContent : 'not found';
     
-      return `${viewContainer.querySelector('author').firstChild.textContent} ${titleElemText.trim().replace(' - Wrike', '')}`.trim();
+      return `${titleElemText.trim().replace(' - Wrike', '')}`.trim();
     };
 
     const projectText = function () {
@@ -40,6 +41,6 @@ togglbutton.render(
       projectName: projectText
     });
 
-    container.append(link);
+    container.prepend(link);
   }
 );
diff --git a/src/styles/style.css b/src/styles/style.css
index b2b0627dc..4ce8bfa9c 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -766,13 +766,14 @@ a.toggl-button.toggl-plan {
 /********* WRIKE *********/
 .toggl-button.wrike {
   display: flex !important;
-  height: 24px;
+  height: 100%;
   align-items: center;
   font-size: 12px;
   gap: 4px;
   text-decoration: none;
   color: rgb(80, 79, 79);
-  padding: 0 0 0 16px;
+  padding: 0 16px 0 0;
+  text-wrap: nowrap;
 }
 
 /********* ASSEMBLA *********/