Merge pull request #75 from OpenPecha/feat/feedbucket

feedbucket_color_change
OpenPecha · Mar 7, 2024 · eb0a54c · eb0a54c
2 parents f63897e + a307ef4
commit eb0a54c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/static/css/feedbucketStyle.css b/static/css/feedbucketStyle.css
@@ -8,9 +8,12 @@
     z-index: 99999;
   }
   #messageImage{
-    width:30px;
-    height:30px;
+    width:13px;
+    height:13px;
     margin-right: 10px;
+    background-color: #b83c64;
+    border-radius: 50%;
+    padding: 5px;
   }
   #crossImage{
     width:15px;

diff --git a/templates/base.html b/templates/base.html
@@ -268,9 +268,12 @@
 
 
     <div class="container" id="imageContainer">   
-      <img src="https://cdn.pixabay.com/photo/2017/01/10/03/54/icon-1968237_640.png" alt="icon" id="messageImage">
+      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" color="#d73449" style="color:#FFFFFF" height="16" width="16" xmlns="http://www.w3.org/2000/svg" id="messageImage">
+        <path fill="none" d="M0 0h24v24H0z"></path>
+        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path>
+      </svg>
       <img src="https://cdn.icon-icons.com/icons2/2406/PNG/512/times_error_fail_failure_failed_cross_icon_145926.png" alt="icon" id="crossImage" class="hidden">
-    </div> 
+    </div>
 
     <script type="text/javascript">
       // This function will load the feedbucket script dynamically
@@ -281,24 +284,25 @@
         s.src = "https://cdn.feedbucket.app/assets/feedbucket.js";
         s.dataset.feedbucket = '0csPeBQ216w32NZdoqnk';
         document.head.appendChild(s);
-        const crossImage =document.querySelector("#crossImage")
-        const messageImage =document.querySelector("#messageImage")
+        const crossImage =document.querySelector("#crossImage");
+        const messageImage =document.querySelector("#messageImage");
 
-        const feedbucket = document.querySelector("feedbucket-app")
+        const feedbucket = document.querySelector("feedbucket-app");
         // Remove the event listener so the script isn't loaded multiple times
-        messageImage.classList.toggle('hidden')
-        crossImage.classList.toggle('hidden')
-        let container=document.getElementById('imageContainer')
+        messageImage.classList.toggle('hidden');
+        crossImage.classList.toggle('hidden');
+        let container=document.getElementById('imageContainer');
         if(feedbucket.classList.contains('hidden')){
-          feedbucket.classList.remove('hidden')
+          feedbucket.classList.remove('hidden');
         }else{
-          feedbucket.classList.add('hidden')
+          feedbucket.classList.add('hidden');
         }
       }
 
       // Add click event listener to the container
       document.getElementById('imageContainer').addEventListener('click', loadFeedbucket);
     </script>
+