Update Icon

src/scripts/background.js

@@ -757,7 +757,22 @@ window.TogglButton = {
           ctx.closePath();
           ctx.fill();
           ctx.lineWidth = 2.5;
+          // Fill 360 arc with the same background color
           ctx.beginPath();
+          ctx.strokeStyle = '#e57cd8';
+          ctx.arc(
+            this.naturalWidth * 0.5,
+            this.naturalHeight * 0.5,
+            this.naturalWidth * 0.5 - 1,
+            quart * -1,
+            circ - quart,
+            false
+          );
+          ctx.stroke();
+          // Then progressively add the white arc
+          ctx.closePath();
+          ctx.beginPath();
+          ctx.strokeStyle = '#ffffff';
           ctx.arc(
             this.naturalWidth * 0.5,
             this.naturalHeight * 0.5,

src/scripts/components/Pomodoro.tsx

@@ -68,13 +68,13 @@ const Clock = styled.svg`
 `;
 
 const ActiveRing = styled.circle`
-  stroke: #e20505;
+  stroke: #e57cd8;
   stroke-dasharray: 892 892;
   animation-iteration-count: 1;
 `;
 
 const Stop = styled.rect`
-  fill: #f41d1d;
+  fill: #ff897a;
   opacity: 0;
   transition: 0.2s opacity ease-in;
   cursor: pointer;

src/styles/style.css

@@ -83,6 +83,7 @@
   height: 19px;
   display: inline-block;
   vertical-align: middle;
+  margin-right: 3px;
 }
 
 .toggl-button span {