adding cpu to bar

eww/eww.scss

@@ -110,6 +110,11 @@ tooltip label {
     background-color: $widget-background;
     border-radius: 5px;
 }
+.cpubar {
+    color: $base0D;
+    background-color: $widget-background;
+    border-radius: 5px;
+}
 .brightbar trough highlight {
     background-image: linear-gradient(to right, $orange 30%, #f2cdcd 50%, $orange 100% *50);
     border-radius: 10px;
@@ -152,7 +157,10 @@ tooltip label {
 .iconbat {
     color: $base0B;
 }
-.iconbat, .iconmem {
+.iconcpu {
+    color: $base0B;
+}
+.iconbat, .iconmem, .iconcpu {
     font-size: 15;
     margin: 10px;
 }
@@ -177,7 +185,7 @@ tooltip label {
 .mem_module {
     background-color: rgba(00, 00, 00, 0.0);
     border-radius: 16px;
-    margin: 0px 10px 0px 3px;
+    margin: 0px 10px 0px 10px;
   }
 
 .bat_module {
@@ -186,6 +194,12 @@ tooltip label {
     margin: 0px 10px 0px 10px;
   }
 
+.cpu_module {
+    background-color: rgba(00, 00, 00, 0.0);
+    border-radius: 16px;
+    margin: 0px 10px 0px 10px;
+  }
+
 .works {
     font-size: 22px;
     font-weight: normal;

eww/eww.yuck

@@ -146,6 +146,21 @@
                 :tooltip "${EWW_BATTERY["BAT1"].capacity}% battery left"
                 " "))))
 
+(defwidget cpu []
+		(box
+		    :class "cpu_module"
+		    :vexpand "false"
+		    :hexpand "false" 
+        (circular-progress
+            :value {EWW_CPU.avg}
+            :class "cpubar"
+            :thickness 4
+            (button 
+                :onclick "scripts/pop system"
+                :class "iconcpu"
+                :tooltip "using ${EWW_CPU.avg}% of cpu"
+                " "))))
+
 (defwidget mem []
 		(box 
         :class "mem_module" 
@@ -233,6 +248,7 @@
          (wifi)
          (sep)
          (bat)
+         (cpu)
          (mem)
          (sep)
          (clock_module)