reorganize bar, make styles consistent

ags/styles/components/_bar.scss

@@ -1,10 +1,18 @@
 @use '../theme_colors.scss' as *;
 
 window.bar {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     background: color-mix(in srgb, $base00, transparent 15%);
-    margin: 0;
+    
+    >box {
+        padding: 0.25rem 0;
+    }
+
+    >box>*:not(box), >box>box>* {
+        margin: 0 0.25rem;
+        padding: 0 0.5rem;
+        background: $base01;
+        border-radius: 1rem;
+    }
 
     * {
         color: $base0A;
@@ -17,7 +25,6 @@ window.bar {
     .tray .item {
         padding: 0;
         margin: 0;
-        background: transparent;
 
         image {
             padding: 0;

ags/styles/components/_battery_info.scss

@@ -33,24 +33,20 @@ window.battery_info {
 
 window.battery_info button {
     transition: all 0.2s ease-in-out;
-    background: color-mix(in srgb, $base00, transparent 15%);
+    background: $base00;
     border: 2px solid $base01;
     margin: 5px;
 
     &:hover {
         background: $base01;
-
-        * {
-            color: $base0A;
-        }
     }
 
     &.active {
-        background: $base01;
-        border: 2px solid $base00;
+        background: $base0A;
+        border: 0.5px solid $base00;
 
         * {
-            color: $base0A;
+            color: $base01;
         }
     }
 }

ags/widget/bar/bar.tsx

@@ -28,19 +28,21 @@ export default function Bar(monitor_id: number) {
         hexpand
     >
         <centerbox hexpand>
-            {Workspace()}
             <box>
+                {Workspace()}
                 <menubutton hasFrame={false}>
                     <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
                     <popover>
                         <Gtk.Calendar />
                     </popover>
                 </menubutton>
-                {BatteryInfo({ battery })}
+            </box>
+            <box>
                 {NetworkInfo()}
             </box>
             <box>
                 <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
+                {BatteryInfo({ battery })}
                 {TrayView()}
             </box>
         </centerbox>

ags/widget/bar/components/network_info.tsx

@@ -69,11 +69,11 @@ export default function NetworkInfo() {
     const dataBinding = bind(networkUsage);
     const binding = bind(currentConn);
 
-    return binding.as(Boolean) ? <box spacing={3}>
+    return binding.as(Boolean) ? <>
         {binding.as(getConnection).as(data => data && <label label={data} />)}
         {dataBinding.as(data => <>
             <label label={`TX: ${toHumanReadable(data.totalTx / 4, "B/s")}`} />
             <label label={`RX: ${toHumanReadable(data.totalRx / 4, "B/s")}`} />
         </>)}
-    </box> : <label>No network</label>
+    </> : <label>No network</label>
 }