Swapped battery and capacity in UI to better align visually

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "controller-tools"
-version = "0.2.0"
+version = "0.2.1"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ControllerTools",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The missing game controller menu. Displays the current battery % and charging status",
   "scripts": {
     "build": "shx rm -rf dist && rollup -c",

src/index.tsx

@@ -115,14 +115,14 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({ }) => {
               {
                 (controller.capacity > 0 || controller.status !== "unknown") &&
                 <div className={gamepadDialogClasses.FieldChildren}>
-                  <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginRight: '4px' }, size: '2em' }}>
-                    {getBatteryIcon(controller)}
-                  </IconContext.Provider>
                   {
                     // since we don't have battery level yet for Xbox, don't show capactiy for the MS vendor
                     controller.vendorId != 1118 &&
-                    <span>{controller.capacity}%</span>
+                    <span style={{ display: "inline-block", textAlign: "right", }}>{controller.capacity}%</span>
                   }
+                  <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginLeft: "6px" }, size: '2em' }}>
+                    {getBatteryIcon(controller)}
+                  </IconContext.Provider>
                 </div>
               }
             </div>