Update button for opening sidebar and cached rants to match new Rumbl…

…e design

Resolves #1

CHANGELOG.md

@@ -1,5 +1,13 @@
 # RantStats Extension for Rumble.com
 
+## 1.2.0
+
+Update button for opening sidebar and cached rants to match new Rumble design ([Issue #1](https://github.com/rantstats/rantstats-extension/issues/1))
+
+## 1.1.0
+
+Fix errors and refresh issues
+
 ## 1.0.0
 
 Initial release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "rantstats-extension",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Add support for capturing paid Rumble Rants for Rumble.com livestreams.",
     "main": "output/pages/content/content.js",
     "scripts": {

src/components/open-chat/open-chat.scss

@@ -1,7 +1,16 @@
+// always show sticky box
+#chat-sticky-rants {
+    display: block !important;
+}
+
 #rs-display-chat-button-div {
     margin-bottom: 10px;
 
     #rs-display-chat-button {
+        margin-left: 1rem;
+        margin-right: 1rem;
+        padding: 0.75rem 0;
+
         font-weight: bold;
         font-size: 1.2em;
 
@@ -36,7 +45,9 @@
 // change style of chat
 #chat-history-list {
     .chat-history--row {
-        padding: 2px;
+        padding: 2px 0.75rem;
+        margin-left: 0;
+        margin-right: 0;
     }
 
     &.theme-light {

src/components/open-chat/open-chat.ts

@@ -35,20 +35,34 @@ export const addChatButton = (onclick: () => void): boolean => {
     listItem.onclick = onclick
     listItem.title = 'Open Rant Stats'
 
+    const pillDivItem = document.createElement('div') as HTMLDivElement
+    pillDivItem.classList.add('chat-history--rant-sticky--pill')
+    pillDivItem.style.background = '#bb0218'
+    listItem.appendChild(pillDivItem)
+
     const imageItem = document.createElement('div') as HTMLDivElement
     imageItem.classList.add('chat--profile-pic')
     imageItem.style.position = 'relative'
     imageItem.style.marginRight = '0.25rem'
     imageItem.style.backgroundColor = '#37c'
     imageItem.style.backgroundImage = `url(${chrome.runtime.getURL("images/dollar.svg")})`
     imageItem.setAttribute('data-small', '')
-    listItem.appendChild(imageItem)
+    pillDivItem.appendChild(imageItem)
 
     const textItem = document.createElement('div') as HTMLDivElement
     textItem.classList.add('chat-history--rant-price')
     textItem.style.position = 'relative'
-    textItem.textContent = 'View Rants'
-    listItem.appendChild(textItem)
+    textItem.textContent = 'Rants'
+    pillDivItem.appendChild(textItem)
+
+    const wellDivItem = document.createElement('div') as HTMLDivElement
+    wellDivItem.classList.add('chat-history--rant-progressbar--well')
+    listItem.appendChild(wellDivItem)
+
+    const progressBarDivItem = document.createElement('div') as HTMLDivElement
+    progressBarDivItem.classList.add('chat-history--rant-progressbar')
+    progressBarDivItem.style.width = '100%'
+    wellDivItem.appendChild(progressBarDivItem)
 
     rantList.insertBefore(listItem, rantList.firstChild)
     return true

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "RantStats Extension for Rumble.com",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Add support for capturing paid Rumble Rants for Rumble.com livestreams.",
     "icons": {
         "16": "images/icon-16.png",