Update eslint and add stylistic/jsx-self-closing-comp (#1607)

gui/eslint.config.js

@@ -2,6 +2,7 @@ import { FlatCompat } from '@eslint/eslintrc';
 import eslint from '@eslint/js';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
+import stylistic from '@stylistic/eslint-plugin';
 
 const compat = new FlatCompat();
 
@@ -41,6 +42,7 @@ export const gui = [
     files: ['src/**/*.{js,jsx,ts,tsx,json}'],
     plugins: {
       '@typescript-eslint': tseslint.plugin,
+      '@stylistic': stylistic,
     },
     rules: {
       'react/react-in-jsx-scope': 'off',
@@ -60,6 +62,7 @@ export const gui = [
           ignoreRestSiblings: true,
         },
       ],
+      '@stylistic/jsx-self-closing-comp': 'error',
     },
     settings: {
       'import/resolver': {

gui/package.json

@@ -72,6 +72,7 @@
     "@dword-design/eslint-plugin-import-alias": "^4.0.9",
     "@openapi-codegen/cli": "^2.0.2",
     "@openapi-codegen/typescript": "^8.0.2",
+    "@stylistic/eslint-plugin": "^5.5.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tauri-apps/cli": "~2",
     "@types/file-saver": "^2.0.7",
@@ -88,12 +89,12 @@
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-import-resolver-typescript": "^3.10.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.10.0",
     "prettier": "^3.3.3",
@@ -102,7 +103,7 @@
     "spdx-satisfies": "^5.0.1",
     "tailwind-gradient-mask-image": "^1.2.0",
     "tailwindcss": "^3.4.13",
-    "typescript-eslint": "^8.8.0",
+    "typescript-eslint": "^8.46.2",
     "vite": "^5.4.8"
   }
 }

gui/src/App.tsx

@@ -75,9 +75,9 @@ function Layout() {
 
   return (
     <>
-      <SerialDetectionModal></SerialDetectionModal>
-      <VersionUpdateModal></VersionUpdateModal>
-      <UnknownDeviceModal></UnknownDeviceModal>
+      <SerialDetectionModal />
+      <VersionUpdateModal />
+      <UnknownDeviceModal />
       <SentryRoutes>
         <Route element={<AppLayout />}>
           <Route
@@ -158,7 +158,7 @@ function Layout() {
             />
             <Route path="trackers-assign" element={<TrackersAssignPage />} />
             <Route path="enter-vr" element={<EnterVRPage />} />
-            <Route path="mounting/choose" element={<MountingChoose />}></Route>
+            <Route path="mounting/choose" element={<MountingChoose />} />
             <Route path="mounting/auto" element={<AutomaticMountingPage />} />
             <Route path="mounting/manual" element={<ManualMountingPage />} />
             <Route path="reset-tutorial" element={<ResetTutorialPage />} />
@@ -177,7 +177,7 @@ function Layout() {
             <Route path="stay-aligned" element={<StayAlignedSetup />} />
             <Route path="done" element={<DonePage />} />
           </Route>
-          <Route path="*" element={<TopBar></TopBar>}></Route>
+          <Route path="*" element={<TopBar />} />
         </Route>
       </SentryRoutes>
     </>
@@ -301,10 +301,8 @@ export default function App() {
                 <VersionContext.Provider value={updateFound}>
                   <div className="h-full w-full text-standard bg-background-80 text-background-10">
                     <Preload />
-                    {!websocketAPI.isConnected && (
-                      <ConnectionLost></ConnectionLost>
-                    )}
-                    {websocketAPI.isConnected && <Layout></Layout>}
+                    {!websocketAPI.isConnected && <ConnectionLost />}
+                    {websocketAPI.isConnected && <Layout />}
                   </div>
                 </VersionContext.Provider>
               </StatusProvider>

gui/src/components/BVHButton.tsx

@@ -64,7 +64,7 @@ export function BVHButton(props: React.HTMLAttributes<HTMLButtonElement>) {
           'border',
           recording ? 'border-status-critical' : 'border-transparent'
         )}
-      ></BigButton>
+      />
     </Localized>
   );
 }

gui/src/components/EmptyLayout.tsx

@@ -6,7 +6,7 @@ export function EmptyLayout({ children }: { children: ReactNode }) {
   return (
     <div className="empty-layout h-full">
       <div style={{ gridArea: 't' }}>
-        <TopBar></TopBar>
+        <TopBar />
       </div>
       <div style={{ gridArea: 'c' }} className="mt-2 relative">
         {children}

gui/src/components/ErrorConsentModal.tsx

@@ -35,8 +35,8 @@ export function ErrorConsentModal({
               <Localized
                 id={'error_collection_modal-description_v2'}
                 elems={{
-                  b: <b></b>,
-                  h1: <span className="text-lg font-bold"></span>,
+                  b: <b />,
+                  h1: <span className="text-lg font-bold" />,
                 }}
               >
                 <Typography

gui/src/components/MainLayout.tsx

@@ -61,10 +61,10 @@ export function MainLayout({
     <div className="">
       <div className="main-layout w-full h-screen">
         <div style={{ gridArea: 't' }}>
-          <TopBar></TopBar>
+          <TopBar />
         </div>
         <div style={{ gridArea: 's' }} className="overflow-y-auto">
-          <Navbar></Navbar>
+          <Navbar />
         </div>
         <div
           style={{ gridArea: 'c' }}
@@ -81,7 +81,7 @@ export function MainLayout({
             style={{ gridArea: 'w' }}
             className="overflow-y-auto mr-2 my-2 rounded-xl bg-background-70 flex flex-col gap-2 p-2 widgets"
           >
-            <WidgetsComponent></WidgetsComponent>
+            <WidgetsComponent />
           </div>
         )}
       </div>

gui/src/components/Navbar.tsx

@@ -70,13 +70,13 @@ export function MainLinks() {
 
   return (
     <>
-      <NavButton to="/" icon={<CubeIcon></CubeIcon>}>
+      <NavButton to="/" icon={<CubeIcon />}>
         {l10n.getString('navbar-home')}
       </NavButton>
       <NavButton
         to="/onboarding/trackers-assign"
         state={{ alonePage: true }}
-        icon={<HumanIcon></HumanIcon>}
+        icon={<HumanIcon />}
       >
         {l10n.getString('navbar-trackers_assign')}
       </NavButton>
@@ -84,7 +84,7 @@ export function MainLinks() {
         to="/onboarding/mounting/choose"
         match="/onboarding/mounting/*"
         state={{ alonePage: true }}
-        icon={<WrenchIcon></WrenchIcon>}
+        icon={<WrenchIcon />}
       >
         {l10n.getString('navbar-mounting')}
       </NavButton>
@@ -92,12 +92,12 @@ export function MainLinks() {
         to="/onboarding/body-proportions/scaled"
         match="/onboarding/body-proportions/*"
         state={{ alonePage: true }}
-        icon={<RulerIcon></RulerIcon>}
+        icon={<RulerIcon />}
       >
         {l10n.getString('navbar-body_proportions')}
       </NavButton>
       {config?.showNavbarOnboarding && (
-        <NavButton to="/onboarding/home" icon={<SparkleIcon></SparkleIcon>}>
+        <NavButton to="/onboarding/home" icon={<SparkleIcon />}>
           {l10n.getString('navbar-onboarding')}
         </NavButton>
       )}
@@ -111,18 +111,18 @@ export function Navbar() {
 
   return isMobile ? (
     <div className="flex flex-row justify-around px-2 pt-2 bg-background-80 gap-2">
-      <MainLinks></MainLinks>
+      <MainLinks />
     </div>
   ) : (
     <div className="flex flex-col h-full p-2 gap-2">
       <div className="flex flex-col flex-grow gap-2">
-        <MainLinks></MainLinks>
+        <MainLinks />
       </div>
       <NavButton
         to="/settings/trackers"
         match="/settings/*"
         state={{ scrollTo: 'steamvr' }}
-        icon={<GearIcon></GearIcon>}
+        icon={<GearIcon />}
       >
         {l10n.getString('navbar-settings')}
       </NavButton>

gui/src/components/SerialDetectionModal.tsx

@@ -69,7 +69,7 @@ export function SerialDetectionModal() {
         {!showWifiForm && (
           <>
             <div className="flex flex-col items-center gap-3 fill-accent-background-20">
-              <USBIcon></USBIcon>
+              <USBIcon />
               <div className="flex flex-col items-center gap-2">
                 <Typography variant="main-title">
                   {l10n.getString('serial_detection-new_device-p0')}
@@ -101,7 +101,7 @@ export function SerialDetectionModal() {
           >
             <div className="flex flex-col items-center gap-3">
               <div className="fill-background-10">
-                <BulbIcon></BulbIcon>
+                <BulbIcon />
               </div>
               <Typography variant="main-title">
                 {l10n.getString('serial_detection-new_device-p0')}

gui/src/components/TopBar.tsx

@@ -155,7 +155,7 @@ export function TopBar({
   return (
     <>
       <div className="flex gap-0 flex-col">
-        <div className="h-[3px]"></div>
+        <div className="h-[3px]" />
         <div data-tauri-drag-region className="flex gap-2 h-[38px] z-50">
           <div
             className="flex px-2 py-2 justify-around z-50"
@@ -168,7 +168,7 @@ export function TopBar({
                   className="flex justify-around flex-col select-all"
                   data-tauri-drag-region
                 >
-                  <SlimeVRIcon></SlimeVRIcon>
+                  <SlimeVRIcon />
                 </NavLink>
               )}
               {(isTauri || !isMobile) && !config?.decorations && (
@@ -181,7 +181,7 @@ export function TopBar({
               )}
               {(!(isMobile && !config?.decorations) || showVersionMobile) && (
                 <>
-                  <VersionTag></VersionTag>
+                  <VersionTag />
                   {doesMatchSettings && (
                     <div
                       className={classNames(
@@ -206,7 +206,7 @@ export function TopBar({
                     openUrl(url).catch(() => window.open(url, '_blank'));
                   }}
                 >
-                  <DownloadIcon></DownloadIcon>
+                  <DownloadIcon />
                 </div>
               )}
             </div>
@@ -222,11 +222,7 @@ export function TopBar({
                   data-tauri-drag-region
                 >
                   {progress !== undefined && (
-                    <ProgressBar
-                      progress={progress}
-                      height={3}
-                      parts={3}
-                    ></ProgressBar>
+                    <ProgressBar progress={progress} height={3} parts={3} />
                   )}
                 </div>
               </>
@@ -256,7 +252,7 @@ export function TopBar({
               data-tauri-drag-region
               state={{ scrollTo: 'steamvr' }}
             >
-              <GearIcon></GearIcon>
+              <GearIcon />
             </NavLink>
 
             {!isMobile && (
@@ -271,7 +267,7 @@ export function TopBar({
                   )
                 }
               >
-                <QuestionIcon></QuestionIcon>
+                <QuestionIcon />
               </div>
             )}
 
@@ -281,19 +277,19 @@ export function TopBar({
                   className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
                   onClick={() => getCurrentWindow().minimize()}
                 >
-                  <MinimiseIcon></MinimiseIcon>
+                  <MinimiseIcon />
                 </div>
                 <div
                   className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
                   onClick={() => getCurrentWindow().toggleMaximize()}
                 >
-                  <MaximiseIcon></MaximiseIcon>
+                  <MaximiseIcon />
                 </div>
                 <div
                   className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
                   onClick={() => tryCloseApp()}
                 >
-                  <CloseIcon></CloseIcon>
+                  <CloseIcon />
                 </div>
               </>
             )}
@@ -301,7 +297,7 @@ export function TopBar({
         </div>
         {isMobile && progress !== undefined && (
           <div className="flex gap-2 px-2 h-6 mb-2 justify-center flex-col border-b border-accent-background-30">
-            <ProgressBar progress={progress} height={3} parts={3}></ProgressBar>
+            <ProgressBar progress={progress} height={3} parts={3} />
           </div>
         )}
       </div>
@@ -335,7 +331,7 @@ export function TopBar({
           setConnectedTrackerWarning(false);
           getCurrentWindow().requestUserAttention(null);
         }}
-      ></TrackersStillOnModal>
+      />
       <ErrorConsentModal
         isOpen={config?.errorTracking === null}
         accept={() => setConfig({ errorTracking: true })}

gui/src/components/TrackingPauseButton.tsx

@@ -45,7 +45,7 @@ export function TrackingPauseButton(
         }
         onClick={toggleTracking}
         className={classNames(props.className, 'min-h-24')}
-      ></BigButton>
+      />
     </Localized>
   );
 }

gui/src/components/TrayOrExitModal.tsx

@@ -57,13 +57,13 @@ export function TrayOrExitModal({
             name="exitType"
             label={l10n.getString('tray_or_exit_modal-radio-exit')}
             value="0"
-          ></Radio>
+          />
           <Radio
             control={control}
             name="exitType"
             label={l10n.getString('tray_or_exit_modal-radio-tray')}
             value="1"
-          ></Radio>
+          />
         </div>
 
         <Button type="submit" variant="primary">

gui/src/components/UnknownDeviceModal.tsx

@@ -63,7 +63,7 @@ export function UnknownDeviceModal() {
             </Typography>
             <Localized
               id="unknown_device-modal-description"
-              elems={{ b: <b></b> }}
+              elems={{ b: <b /> }}
               vars={{ deviceId: currentTracker ?? 'ERROR' }}
             >
               <Typography

gui/src/components/WidgetsComponent.tsx

@@ -33,7 +33,7 @@ function UnprioritizedStatuses() {
           key={status.id}
           elems={{
             PublicFixLink: (
-              <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public"></A>
+              <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public" />
             ),
           }}
         >
@@ -52,33 +52,33 @@ export function WidgetsComponent() {
   return (
     <>
       <div className="grid grid-cols-2 gap-2 w-full [&>*:nth-child(odd):last-of-type]:col-span-full">
-        <ResetButton type={ResetType.Yaw} size="big"></ResetButton>
-        <ResetButton type={ResetType.Full} size="big"></ResetButton>
-        <ResetButton type={ResetType.Mounting} size="big"></ResetButton>
+        <ResetButton type={ResetType.Yaw} size="big" />
+        <ResetButton type={ResetType.Full} size="big" />
+        <ResetButton type={ResetType.Mounting} size="big" />
         <ResetButton
           type={ResetType.Mounting}
           size="big"
           bodyPartsToReset="feet"
-        ></ResetButton>
+        />
         <ResetButton
           type={ResetType.Mounting}
           size="big"
           bodyPartsToReset="fingers"
-        ></ResetButton>
-        <ClearMountingButton></ClearMountingButton>
-        {!window.__ANDROID__?.isThere() && <BVHButton></BVHButton>}
-        <TrackingPauseButton></TrackingPauseButton>
+        />
+        <ClearMountingButton />
+        {!window.__ANDROID__?.isThere() && <BVHButton />}
+        <TrackingPauseButton />
       </div>
       <div className="w-full">
-        <OverlayWidget></OverlayWidget>
+        <OverlayWidget />
       </div>
       <div className="mb-2">
         <ToggleableSkeletonVisualizerWidget height={400} />
       </div>
-      <UnprioritizedStatuses></UnprioritizedStatuses>
+      <UnprioritizedStatuses />
       {config?.debug && (
         <div className="w-full">
-          <DeveloperModeWidget></DeveloperModeWidget>
+          <DeveloperModeWidget />
         </div>
       )}
     </>

gui/src/components/commons/ArrowLink.tsx

@@ -36,13 +36,13 @@ export function ArrowLink({
     <NavLink to={to} state={state} className={classes}>
       {direction === 'left' && (
         <div className="flex flex-col justify-center">
-          <ArrowLeftIcon></ArrowLeftIcon>
+          <ArrowLeftIcon />
         </div>
       )}
       {children}
       {direction === 'right' && (
         <div className="flex flex-col justify-center">
-          <ArrowRightIcon></ArrowRightIcon>
+          <ArrowRightIcon />
         </div>
       )}
     </NavLink>

gui/src/components/commons/BodyDisplay.tsx

@@ -94,7 +94,7 @@ function Dot({
           height: dotSize,
           outlineWidth: globalVelocity * 2 + 2,
         }}
-      ></div>
+      />
       {trackers?.map(({ tracker }, index) => (
         <Tracker
           tracker={tracker}
@@ -187,7 +187,7 @@ export function BodyDisplay({
           variant === 'tracker-select' && 'mx-10'
         )}
       >
-        <PersonFrontIcon width={width}></PersonFrontIcon>
+        <PersonFrontIcon width={width} />
         {slotsButtonsPos.map((dotData) => (
           <Dot
             {...dotData}

gui/src/components/commons/BodyInteractions.tsx

@@ -198,7 +198,7 @@ export function BodyInteractions({
         className="absolute w-full h-full top-0 z-10"
         width="100%"
         height="100%"
-      ></canvas>
+      />
       <div className="flex">
         <div ref={leftContainerRef} className="z-10">
           {leftControls}
@@ -210,7 +210,7 @@ export function BodyInteractions({
             variant === 'tracker-select' && 'mobile:mx-0 xs:mx-10'
           )}
         >
-          <PersonFrontIcon width={width} mirror={mirror}></PersonFrontIcon>
+          <PersonFrontIcon width={width} mirror={mirror} />
           {slotsButtonsPos.map(
             ({ top, left, height, width, id, hidden, buttonOffset }) => (
               <div
@@ -234,7 +234,7 @@ export function BodyInteractions({
                         height: dotsSize,
                         animationDuration: '1.5s',
                       }}
-                    ></div>
+                    />
                   )}
                   <div
                     className={classNames(
@@ -249,7 +249,7 @@ export function BodyInteractions({
                       width: dotsSize,
                       height: dotsSize,
                     }}
-                  ></div>
+                  />
                 </div>
               </div>
             )

gui/src/components/commons/BodyPartIcon.tsx

@@ -28,155 +28,103 @@ export const mapPart: Record<
     currentLocales: string[];
   }) => JSX.Element
 > = {
-  [BodyPart.UPPER_CHEST]: ({ width }) => (
-    <UpperChestIcon width={width}></UpperChestIcon>
-  ),
-  [BodyPart.CHEST]: ({ width }) => <ChestIcon width={width}></ChestIcon>,
-  [BodyPart.HEAD]: ({ width }) => <HeadsetIcon width={width}></HeadsetIcon>,
-  [BodyPart.HIP]: ({ width }) => <HipIcon width={width}></HipIcon>,
-  [BodyPart.LEFT_HIP]: ({ width }) => <HipIcon width={width}></HipIcon>, // Unused
-  [BodyPart.RIGHT_HIP]: ({ width }) => <HipIcon width={width}></HipIcon>, // Unused
+  [BodyPart.UPPER_CHEST]: ({ width }) => <UpperChestIcon width={width} />,
+  [BodyPart.CHEST]: ({ width }) => <ChestIcon width={width} />,
+  [BodyPart.HEAD]: ({ width }) => <HeadsetIcon width={width} />,
+  [BodyPart.HIP]: ({ width }) => <HipIcon width={width} />,
+  [BodyPart.LEFT_HIP]: ({ width }) => <HipIcon width={width} />, // Unused
+  [BodyPart.RIGHT_HIP]: ({ width }) => <HipIcon width={width} />, // Unused
   [BodyPart.LEFT_FOOT]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
-      <PawIcon></PawIcon>
+      <PawIcon />
     ) : (
-      <FootIcon width={width}></FootIcon>
+      <FootIcon width={width} />
     ),
-  [BodyPart.LEFT_HAND]: ({ width }) => (
-    <ControllerIcon width={width}></ControllerIcon>
-  ),
-  [BodyPart.LEFT_LOWER_ARM]: ({ width }) => (
-    <LowerArmIcon width={width}></LowerArmIcon>
-  ),
-  [BodyPart.LEFT_LOWER_LEG]: ({ width }) => (
-    <AnkleIcon width={width}></AnkleIcon>
-  ),
-  [BodyPart.LEFT_SHOULDER]: ({ width }) => (
-    <ShoulderIcon width={width}></ShoulderIcon>
-  ),
-  [BodyPart.LEFT_UPPER_ARM]: ({ width }) => (
-    <UpperArmIcon width={width}></UpperArmIcon>
-  ),
-  [BodyPart.LEFT_UPPER_LEG]: ({ width }) => (
-    <UpperLegIcon width={width}></UpperLegIcon>
-  ),
-  [BodyPart.NECK]: ({ width }) => <NeckIcon width={width}></NeckIcon>,
-  [BodyPart.NONE]: ({ width }) => <SlimeVRIcon width={width}></SlimeVRIcon>,
+  [BodyPart.LEFT_HAND]: ({ width }) => <ControllerIcon width={width} />,
+  [BodyPart.LEFT_LOWER_ARM]: ({ width }) => <LowerArmIcon width={width} />,
+  [BodyPart.LEFT_LOWER_LEG]: ({ width }) => <AnkleIcon width={width} />,
+  [BodyPart.LEFT_SHOULDER]: ({ width }) => <ShoulderIcon width={width} />,
+  [BodyPart.LEFT_UPPER_ARM]: ({ width }) => <UpperArmIcon width={width} />,
+  [BodyPart.LEFT_UPPER_LEG]: ({ width }) => <UpperLegIcon width={width} />,
+  [BodyPart.NECK]: ({ width }) => <NeckIcon width={width} />,
+  [BodyPart.NONE]: ({ width }) => <SlimeVRIcon width={width} />,
   [BodyPart.RIGHT_FOOT]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
-      <PawIcon></PawIcon>
+      <PawIcon />
     ) : (
-      <FootIcon width={width} flipped></FootIcon>
+      <FootIcon width={width} flipped />
     ),
   [BodyPart.RIGHT_HAND]: ({ width }) => (
-    <ControllerIcon width={width} flipped></ControllerIcon>
+    <ControllerIcon width={width} flipped />
   ),
   [BodyPart.RIGHT_LOWER_ARM]: ({ width }) => (
-    <LowerArmIcon width={width} flipped></LowerArmIcon>
+    <LowerArmIcon width={width} flipped />
   ),
   [BodyPart.RIGHT_LOWER_LEG]: ({ width }) => (
-    <AnkleIcon width={width} flipped></AnkleIcon>
-  ),
-  [BodyPart.RIGHT_SHOULDER]: ({ width }) => (
-    <ShoulderIcon width={width}></ShoulderIcon>
+    <AnkleIcon width={width} flipped />
   ),
+  [BodyPart.RIGHT_SHOULDER]: ({ width }) => <ShoulderIcon width={width} />,
   [BodyPart.RIGHT_UPPER_ARM]: ({ width }) => (
-    <UpperArmIcon width={width} flipped></UpperArmIcon>
+    <UpperArmIcon width={width} flipped />
   ),
   [BodyPart.RIGHT_UPPER_LEG]: ({ width }) => (
-    <UpperLegIcon width={width} flipped></UpperLegIcon>
+    <UpperLegIcon width={width} flipped />
   ),
-  [BodyPart.WAIST]: ({ width }) => <WaistIcon width={width}></WaistIcon>,
+  [BodyPart.WAIST]: ({ width }) => <WaistIcon width={width} />,
   [BodyPart.LEFT_THUMB_METACARPAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_THUMB_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_THUMB_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_INDEX_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_THUMB_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_THUMB_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_INDEX_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_INDEX_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_INDEX_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_MIDDLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_INDEX_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_MIDDLE_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_MIDDLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_MIDDLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_RING_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_MIDDLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_RING_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_RING_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_RING_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_LITTLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_RING_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_LITTLE_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_LITTLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_LITTLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_THUMB_METACARPAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_THUMB_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_THUMB_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_INDEX_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_THUMB_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_THUMB_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_INDEX_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_INDEX_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_INDEX_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_INDEX_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_MIDDLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_MIDDLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_MIDDLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_RING_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_MIDDLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_RING_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_RING_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_RING_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_RING_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_LITTLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_LITTLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
 };
 
 export function BodyPartIcon({

gui/src/components/commons/Button.tsx

@@ -29,7 +29,7 @@ function ButtonContent({
       </div>
       {loading && (
         <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center fill-background-10">
-          <LoaderIcon slimeState={SlimeState.JUMPY}></LoaderIcon>
+          <LoaderIcon slimeState={SlimeState.JUMPY} />
         </div>
       )}
     </>

gui/src/components/commons/Checkbox.tsx

@@ -101,7 +101,7 @@ export const CheckboxInternal = forwardRef<
                 'right-0': checked && !loading,
                 'bg-background-30': disabled,
               })}
-            ></div>
+            />
           </div>
         )}
         {label}
@@ -144,7 +144,7 @@ export function CheckBox({
           checked={value}
           onChange={onChange}
           ref={ref}
-        ></CheckboxInternal>
+        />
       )}
     />
   );

gui/src/components/commons/Dropdown.tsx

@@ -72,7 +72,7 @@ export function DropdownItems({
       <div
         className="z-[999] fixed top-0 w-full h-full"
         onClick={onBackdropClick}
-      ></div>
+      />
       <div
         ref={ref}
         className={classNames(
@@ -210,7 +210,7 @@ export function DropdownInside({
               direction == 'down' && 'rotate-0'
             )}
           >
-            <ArrowDownIcon size={16}></ArrowDownIcon>
+            <ArrowDownIcon size={16} />
           </div>
         </div>
         {error?.message && (
@@ -238,7 +238,7 @@ export function DropdownInside({
             onBackdropClick={() => {
               setOpen(false);
             }}
-          ></DropdownItems>,
+          />,
           document.body
         )}
     </>
@@ -265,7 +265,7 @@ export function Dropdown({
           name={name}
           onChange={onChange}
           value={value}
-        ></DropdownInside>
+        />
       )}
     />
   );

gui/src/components/commons/FileInput.tsx

@@ -49,7 +49,7 @@ export const FileInputContentBlank = ({
           <Localized
             id={label}
             elems={{
-              u: <span className="underline text-background-20"></span>,
+              u: <span className="underline text-background-20" />,
             }}
           >
             <Typography>
@@ -85,7 +85,7 @@ export const FileInputContentFile = ({
           {directory ? <FolderIcon /> : <FileIcon />}
           <span>{importedFileName}</span>
         </div>
-        <span className="flex-grow"></span>
+        <span className="flex-grow" />
         <a
           href="#"
           className="h-12 w-12 hover:bg-accent-background-20 cursor-pointer"
@@ -188,7 +188,7 @@ export const FileInputInside = forwardRef<
         accept={accept}
         multiple={multiple}
         capture={capture}
-      ></input>
+      />
     </label>
   );
 });
@@ -233,7 +233,7 @@ export const FileInput = ({
           capture={capture}
           multiple={multiple}
           importedFileName={importedFileName}
-        ></FileInputInside>
+        />
       )}
     />
   );

gui/src/components/commons/Input.tsx

@@ -98,13 +98,13 @@ export const InputInside = forwardRef<
           value={computedValue} // Do we want that behaviour ?
           disabled={disabled}
           ref={ref}
-        ></input>
+        />
         {type === 'password' && (
           <div
             className="fill-background-10 absolute inset-y-0 right-0 pr-6 z-10 my-auto w-[16px] h-[16px] cursor-pointer"
             onClick={togglePassword}
           >
-            <EyeIcon width={16} closed={forceText}></EyeIcon>
+            <EyeIcon width={16} closed={forceText} />
           </div>
         )}
         {error?.message && (
@@ -154,7 +154,7 @@ export const Input = ({
           onChange={onChange}
           ref={ref}
           name={name}
-        ></InputInside>
+        />
       )}
     />
   );

gui/src/components/commons/LangSelector.tsx

@@ -59,6 +59,6 @@ export function LangSelector({
       items={languagesItems}
       direction={direction}
       alignment={alignment}
-    ></Dropdown>
+    />
   );
 }

gui/src/components/commons/PersonFrontIcon.tsx

@@ -38,11 +38,7 @@ export function PersonFrontIcon({
       viewBox="0 0 165 392"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <image
-        height={'105%'}
-        x="8.5%"
-        href="/images/front-standing-pose.webp"
-      ></image>
+      <image height={'105%'} x="8.5%" href="/images/front-standing-pose.webp" />
       {/* <path d="M84.53 224.074C83.953 230.874 88.569 266.874 90.951 280.984C92.085 287.671 95.195 298.565 94.076 304.349C92.476 312.411 92.017 322.843 92.896 328.918C93.451 332.607 95.196 349.618 92.696 355.845C91.389 359.108 88.996 375.832 88.996 375.832C82.756 391.587 86.278 390.812 86.278 390.812C88.21 393.183 91.519 390.998 91.519 390.998C92.1549 391.464 92.9388 391.682 93.7241 391.612C94.5094 391.542 95.2421 391.188 95.785 390.616C97.949 392.407 100.471 390.396 100.471 390.396C103.189 391.807 105.71 389.205 105.71 389.205C107.271 389.991 107.653 388.998 107.653 388.998C112.337 388.698 105.039 373.706 105.039 373.706C103.291 360.242 106.773 352.748 106.773 352.748C118.178 318.926 118.758 309.948 114.199 297.204C112.915 293.524 112.59 292.067 113.181 290.47C114.547 286.783 113.551 271.953 115.217 266.064C118.431 254.706 121.602 225.903 123.254 212.464C125.475 194.364 115.388 170.088 115.388 170.088C113.179 160.21 116.418 125.016 116.418 125.016C120.941 132.054 120.768 144.477 120.768 144.477C120.05 157.506 131.294 177.42 131.294 177.42C136.694 185.649 138.742 193.456 138.742 194.036C138.742 196.407 138.223 202.145 138.223 202.145L138.43 207.145C138.803 209.721 139.034 212.316 139.123 214.918C138.28 227.953 140.35 225.501 140.35 225.501C142.098 225.501 144.018 215.011 144.018 215.011C144.018 217.711 143.357 225.811 144.818 228.869C146.564 232.512 147.848 228.244 147.871 227.387C148.333 210.787 149.33 215.138 149.33 215.138C150.301 228.602 151.494 231.644 153.63 230.591C155.25 229.818 153.769 214.433 153.769 214.433C156.544 223.572 158.649 225.027 158.649 225.027C163.229 228.243 160.397 219.361 159.76 217.602C156.371 208.256 156.267 205.017 156.267 205.017C160.501 213.417 163.692 213.104 163.692 213.104C167.822 211.786 160.083 199.894 155.548 194.197C153.234 191.297 150.248 187.408 149.384 185.097C147.973 181.188 146.907 168.62 146.907 168.62C146.48 153.79 142.813 147.348 142.813 147.348C136.544 137.314 135.365 118.598 135.365 118.598L135.09 87C132.89 65.445 117.01 65.29 117.01 65.29C100.957 62.9 98.723 57.714 98.723 57.714C95.323 52.821 97.266 43.44 97.266 43.44C100.087 41.145 101.175 35.053 101.175 35.053C105.859 31.461 105.63 26.205 103.466 26.262C101.73 26.308 102.123 24.87 102.123 24.87C105.052 1.208 84.046 0 84.046 0H80.836C80.836 0 59.821 1.208 62.746 24.864C62.746 24.864 63.139 26.304 61.388 26.256C59.23 26.199 59.029 31.456 63.696 35.047C63.696 35.047 64.783 41.137 67.605 43.434C67.605 43.434 69.548 52.814 66.148 57.708C66.148 57.708 63.922 62.894 47.861 65.284C47.861 65.284 31.952 65.44 29.788 86.994L29.488 118.594C29.488 118.594 28.331 137.311 22.038 147.344C22.038 147.344 18.389 153.787 17.967 168.616C17.967 168.616 16.898 181.184 15.492 185.093C14.635 187.393 11.653 191.276 9.32001 194.193C4.74601 199.878 -2.94199 211.745 1.17101 213.1C1.17101 213.1 4.37901 213.412 8.59601 205.013C8.59601 205.013 8.50901 208.229 5.12501 217.598C4.46001 219.334 1.63201 228.217 6.21301 225.024C6.21301 225.024 8.33501 223.567 11.093 214.43C11.093 214.43 9.61301 229.815 11.26 230.588C13.412 231.642 14.586 228.599 15.56 215.135C15.56 215.135 16.56 210.787 17.017 227.384C17.04 228.241 18.295 232.509 20.049 228.866C21.529 225.811 20.864 217.727 20.864 215.008C20.864 215.008 22.764 225.498 24.536 225.498C24.536 225.498 26.624 227.95 25.767 214.915C25.628 212.786 26.375 208.415 26.467 207.142L26.667 202.142C26.667 202.142 26.146 196.417 26.146 194.033C26.146 193.442 28.194 185.646 33.594 177.417C33.594 177.417 44.826 157.494 44.103 144.474C44.103 144.474 43.947 132.051 48.47 125.013C48.47 125.013 51.68 160.205 49.505 170.085C49.505 170.085 39.405 194.358 41.629 212.461C43.27 225.937 46.435 254.702 49.657 266.061C51.34 271.938 50.345 286.761 51.693 290.467C52.301 292.076 51.982 293.558 50.675 297.201C46.141 309.947 46.718 318.925 58.123 352.745C58.123 352.745 61.633 360.239 59.859 373.703C59.859 373.703 52.572 388.695 57.239 388.995C57.239 388.995 57.604 389.988 59.182 389.202C59.182 389.202 61.703 391.802 64.427 390.393C64.427 390.393 66.95 392.407 69.106 390.613C69.6451 391.185 70.3751 391.54 71.158 391.61C71.9409 391.681 72.7225 391.462 73.355 390.995C73.355 390.995 76.664 393.227 78.63 390.809C78.63 390.809 82.123 391.584 75.904 375.829C75.904 375.829 73.522 359.129 72.209 355.842C69.709 349.621 71.474 332.57 72.009 328.915C72.87 322.806 72.409 312.398 70.835 304.346C69.684 298.575 72.801 287.679 73.952 280.981C76.317 266.881 80.952 230.881 80.373 224.071L82.288 224.743C83.0863 224.756 83.8692 224.522 84.53 224.074Z" /> */}
       <circle
         className="body-part-circle"

gui/src/components/commons/ProgressBar.tsx

@@ -28,7 +28,7 @@ export function ProgressBar({
           animated={animated}
           parts={parts}
           bottom={bottom}
-        ></Bar>
+        />
       ))}
     </div>
   );
@@ -74,7 +74,7 @@ export function Bar({
           width: `${value * 100}%`,
           height: `${height}px`,
         }}
-      ></div>
+      />
     </div>
   );
 }

gui/src/components/commons/TipBox.tsx

@@ -28,7 +28,7 @@ export function TipBox({
           hideIcon && 'hidden'
         )}
       >
-        <BulbIcon></BulbIcon>
+        <BulbIcon />
       </div>
       <div className="flex flex-col">
         <Typography
@@ -62,7 +62,7 @@ export function WarningBox({
           hideIcon && 'hidden'
         )}
       >
-        <WarningIcon></WarningIcon>
+        <WarningIcon />
       </div>
       <div className="flex flex-col justify-center w-full">
         <Typography

gui/src/components/commons/Tooltip.tsx

@@ -406,7 +406,7 @@ export function DrawerTooltip({
           opacity: drawerStyle ? 0.5 : 0,
           pointerEvents: drawerStyle ? 'all' : 'none',
         }}
-      ></div>
+      />
       <div
         className={classNames(
           'fixed z-50 w-full text-background-10 max-h-full -bottom-full transition-all overflow-clip'
@@ -425,7 +425,7 @@ export function DrawerTooltip({
               className="absolute right-4 top-3 h-6 w-6 bg-background-70 rounded-full flex justify-center items-center"
               onClick={() => close()}
             >
-              <CloseIcon size={20} className="stroke-white"></CloseIcon>
+              <CloseIcon size={20} className="stroke-white" />
             </button>
           </div>
           <div

gui/src/components/commons/VerticalStepper.tsx

@@ -66,7 +66,7 @@ export function VerticalStep({
         )}
       >
         {isPrevious ? (
-          <CheckIcon></CheckIcon>
+          <CheckIcon />
         ) : (
           <Typography variant="section-title">{index + 1}</Typography>
         )}
@@ -141,7 +141,7 @@ export default function VerticalStepper({
             prevStep={prevStep}
             goTo={goTo}
             isActive={currStep === index}
-          ></StepComponent>
+          />
         </VerticalStep>
       ))}
     </ol>

gui/src/components/commons/icon/ChestIcon.tsx

@@ -7,7 +7,7 @@ export function ChestIcon({ width = 24 }: { width?: number }) {
       width={width}
       viewBox="0 0 50 50"
     >
-      <path d="M 20 2 C 18.156 2 16.700141 3.1345312 15.619141 4.0195312 C 12.698141 4.2755313 4 7.245 4 15 C 4 17.305 4.551 19.068203 4.875 19.908203 C 4.262 20.969203 3 23.679 3 28 C 3 28.352 3.184375 28.677422 3.484375 28.857422 L 8.484375 31.857422 C 8.835375 32.068422 9.2804219 32.044922 9.6074219 31.794922 C 10.290422 31.270922 10.833578 30.512578 11.267578 29.642578 C 11.118578 28.880578 11 28.05 11 27 L 11 21 C 11 20.448 11.448 20 12 20 C 12.43 20 12.790641 20.27425 12.931641 20.65625 C 12.944641 20.68425 12.982 20.797656 13 20.847656 C 13.197 21.404656 14.365 24 19 24 C 23.133 24 23.984531 19.976687 24.019531 19.804688 C 24.113531 19.329687 24.535 19.018531 25 19.019531 C 25.465 19.019531 25.886469 19.330687 25.980469 19.804688 C 26.015469 19.976687 26.867 24 31 24 C 35.635 24 36.803 21.405656 37 20.847656 C 37.018 20.797656 37.055359 20.68425 37.068359 20.65625 C 37.209359 20.27525 37.57 20 38 20 C 38.552 20 39 20.448 39 21 L 39 27 C 39 28.05 38.881422 28.881578 38.732422 29.642578 C 39.166422 30.513578 39.709578 31.269969 40.392578 31.792969 C 40.719578 32.042969 41.164625 32.066469 41.515625 31.855469 L 46.515625 28.855469 C 46.815625 28.676469 47 28.352 47 28 C 47 23.679 45.738 20.969203 45.125 19.908203 C 45.449 19.068203 46 17.305 46 15 C 46 7.245 37.301859 4.2755312 34.380859 4.0195312 C 33.299859 3.1345312 31.844 2 30 2 L 25 2 L 20 2 z M 25 22.609375 C 23.953 24.323375 22.059 26 19 26 C 16.075 26 14.195 25.130766 13 24.134766 L 13 27 C 13 28.281 13.194875 29.155016 13.421875 30.166016 C 13.692875 31.375016 14 32.746 14 35 C 14 35.027 13.987375 35.049172 13.984375 35.076172 C 13.994375 35.366172 14 35.669 14 36 L 14 42 C 14 44.997 18.628641 47.438484 19.556641 47.896484 C 19.693641 47.965484 19.847 48 20 48 L 25 48 L 30 48 C 30.153 48 30.306359 47.965484 30.443359 47.896484 C 31.371359 47.438484 36 44.997 36 42 L 36 36 C 36 35.669 36.005625 35.366172 36.015625 35.076172 C 36.012625 35.049172 36 35.027 36 35 C 36 32.746 36.307125 31.375016 36.578125 30.166016 C 36.805125 29.155016 37 28.281 37 27 L 37 24.134766 C 35.805 25.130766 33.925 26 31 26 C 27.941 26 26.047 24.323375 25 22.609375 z"></path>
+      <path d="M 20 2 C 18.156 2 16.700141 3.1345312 15.619141 4.0195312 C 12.698141 4.2755313 4 7.245 4 15 C 4 17.305 4.551 19.068203 4.875 19.908203 C 4.262 20.969203 3 23.679 3 28 C 3 28.352 3.184375 28.677422 3.484375 28.857422 L 8.484375 31.857422 C 8.835375 32.068422 9.2804219 32.044922 9.6074219 31.794922 C 10.290422 31.270922 10.833578 30.512578 11.267578 29.642578 C 11.118578 28.880578 11 28.05 11 27 L 11 21 C 11 20.448 11.448 20 12 20 C 12.43 20 12.790641 20.27425 12.931641 20.65625 C 12.944641 20.68425 12.982 20.797656 13 20.847656 C 13.197 21.404656 14.365 24 19 24 C 23.133 24 23.984531 19.976687 24.019531 19.804688 C 24.113531 19.329687 24.535 19.018531 25 19.019531 C 25.465 19.019531 25.886469 19.330687 25.980469 19.804688 C 26.015469 19.976687 26.867 24 31 24 C 35.635 24 36.803 21.405656 37 20.847656 C 37.018 20.797656 37.055359 20.68425 37.068359 20.65625 C 37.209359 20.27525 37.57 20 38 20 C 38.552 20 39 20.448 39 21 L 39 27 C 39 28.05 38.881422 28.881578 38.732422 29.642578 C 39.166422 30.513578 39.709578 31.269969 40.392578 31.792969 C 40.719578 32.042969 41.164625 32.066469 41.515625 31.855469 L 46.515625 28.855469 C 46.815625 28.676469 47 28.352 47 28 C 47 23.679 45.738 20.969203 45.125 19.908203 C 45.449 19.068203 46 17.305 46 15 C 46 7.245 37.301859 4.2755312 34.380859 4.0195312 C 33.299859 3.1345312 31.844 2 30 2 L 25 2 L 20 2 z M 25 22.609375 C 23.953 24.323375 22.059 26 19 26 C 16.075 26 14.195 25.130766 13 24.134766 L 13 27 C 13 28.281 13.194875 29.155016 13.421875 30.166016 C 13.692875 31.375016 14 32.746 14 35 C 14 35.027 13.987375 35.049172 13.984375 35.076172 C 13.994375 35.366172 14 35.669 14 36 L 14 42 C 14 44.997 18.628641 47.438484 19.556641 47.896484 C 19.693641 47.965484 19.847 48 20 48 L 25 48 L 30 48 C 30.153 48 30.306359 47.965484 30.443359 47.896484 C 31.371359 47.438484 36 44.997 36 42 L 36 36 C 36 35.669 36.005625 35.366172 36.015625 35.076172 C 36.012625 35.049172 36 35.027 36 35 C 36 32.746 36.307125 31.375016 36.578125 30.166016 C 36.805125 29.155016 37 28.281 37 27 L 37 24.134766 C 35.805 25.130766 33.925 26 31 26 C 27.941 26 26.047 24.323375 25 22.609375 z" />
     </svg>
   );
 }

gui/src/components/commons/icon/ControllerIcon.tsx

@@ -23,23 +23,23 @@ export function ControllerIcon({
           <path
             d="M118.822 208.203c-2.618-.617-4.697-3.542-5.882-8.273-.291-1.162-.298-1.318-.28-6.087.025-6.892.614-23.54.873-24.712.407-1.836.45-2.166.39-2.962-.101-1.363-.496-2.192-1.523-3.2-1.327-1.302-3.303-2.24-6.48-3.078-1.73-.456-3.586-1.518-6.604-3.78-3.429-2.571-4.412-3.847-7.412-9.617-.584-1.123-1.155-2.09-1.27-2.152-.259-.138-1.272-.289-5.165-.769-3.5-.43-6.014-.807-6.642-.992-.827-.245-1.493-1.177-2.218-3.103-.921-2.446-2.059-8.04-2.059-10.122 0-2.587 1.23-6.419 2.836-8.832.83-1.247 1.148-1.489 2.265-1.723 7.263-1.526 53.58-5.18 66.688-5.262 3.11-.019 3.213-.012 3.65.26 1.497.931 3.276 3.686 4.198 6.502.86 2.622 1.011 4.66.57 7.652-.873 5.938-2.877 9.425-6.303 10.969-.767.345-1.928.65-3.119.822-.955.137-1.121.36-1.443 1.948-.523 2.573-1.864 5.5-4.178 9.114-1.084 1.694-1.407 2.78-2.776 9.339-1.166 5.587-1.297 6.347-1.893 11.008-.914 7.15-2.987 22.105-3.276 23.631-.85 4.5-4.377 9.213-9.243 12.352-1.778 1.146-2.492 1.352-3.704 1.067zm-1.16-48.81c4.208-.596 8.777-2.031 12.644-3.97 5.698-2.858 9.94-7.053 11.599-11.471.494-1.315.643-2.34.42-2.88-.147-.354-.203-.38-.802-.38-.78 0-5.773.591-14.198 1.683-6.609.855-9.629 1.2-13.24 1.511-4.913.423-10.917.694-15.438.696-1.622 0-3.59.038-4.373.083-1.345.078-1.431.099-1.561.385-.206.452.06 1.523.715 2.881 1.05 2.177 2.932 4.619 4.83 6.27 5.185 4.512 11.77 6.274 19.405 5.192z"
             transform="scale(.26458)"
-          ></path>
+          />
           <path
             d="M111.38 158.518c-4.784-.43-8.953-2.192-12.419-5.25-1.997-1.763-4.05-4.546-4.817-6.531l-.371-.963 5.355-.078c5.019-.074 10.45-.275 11.662-.432.514-.067.533-.057.533.272 0 .498.536 1.333 1.111 1.732 1.473 1.02 3.312 1.046 5.07.434 1.981-.69 2.783-1.579 2.79-2.727l.002-.577 2.26-.276c1.242-.151 4.913-.616 8.157-1.033 7.376-.947 10.484-1.306 10.568-1.222.135.135-.508 1.937-1.101 3.092-2.017 3.922-6.233 7.574-11.529 9.985-5.871 2.674-12.356 4.016-17.272 3.574zm20.458-8.081c.958-.439 1.503-.858 1.904-1.464 1.196-1.808-.01-3.98-2.721-4.896-.637-.216-1.009-.263-1.75-.22-1.096.064-1.542.264-2.423 1.084-1.089 1.013-1.487 2.354-1.026 3.457.397.949 1.521 1.89 2.731 2.285.858.28 2.388.165 3.285-.246z"
             transform="scale(.26458)"
-          ></path>
+          />
           <path
             d="M109.855 171.583c-.839-.29-1.655-.856-1.744-1.21-.04-.163.093-.688.324-1.268.588-1.483.61-2.105.143-3.918-.463-1.793-.495-2.343-.15-2.528 1.115-.596 3.07 1.299 3.795 3.679.243.797.25.956.114 2.196-.193 1.752-.4 2.931-.548 3.126-.173.226-1.173.186-1.934-.077z"
             transform="scale(.26458)"
-          ></path>
+          />
           <path
             d="M128.454 149.37c-.797-.376-1.472-1.276-1.603-1.798-.207-.822.52-1.842 1.577-2.38 1.397-.714 3.825.066 4.176 1.128.35 1.062.33 2.041-.436 2.602-1.214.889-2.465 1.04-3.714.449z"
             transform="scale(.26458)"
-          ></path>
+          />
           <path
             d="M113.895 146.8c-.662-.31-1.51-1.648-1.238-1.67l6.153-.485c.284-.023-.434 1.493-1.413 1.947-1.272.591-2.557.65-3.502.207z"
             transform="scale(.26458)"
-          ></path>
+          />
         </g>
       </g>
     </svg>

gui/src/components/commons/icon/CrossIcon.tsx

@@ -17,7 +17,7 @@ export function CrossIcon({
         fillRule="evenodd"
         d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
         clipRule="evenodd"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/FootIcon.tsx

@@ -16,7 +16,7 @@ export function FootIcon({
       <path
         transform={flipped ? undefined : 'scale(-1,1) translate(-28,0)'}
         d="M11.5 3A1.5 2 0 0 0 10 5a1.5 2 0 0 0 1.5 2A1.5 2 0 0 0 13 5a1.5 2 0 0 0-1.5-2zm3.244.678a1 1.333 0 0 0-1 1.334 1 1.333 0 0 0 1 1.332 1 1.333 0 0 0 1-1.332 1 1.333 0 0 0-1-1.334zm2.33 1.039a.863 1.151 0 0 0-.861 1.15.863 1.151 0 0 0 .861 1.15.863 1.151 0 0 0 .863-1.15.863 1.151 0 0 0-.863-1.15zm1.582 1.863a.611.815 0 0 0-.61.815.611.815 0 0 0 .61.816.611.815 0 0 0 .612-.816.611.815 0 0 0-.612-.815zM13.918 8C11.629 8 10 9.731 10 12c0 2.887 3 2.82 3 5 0 1.604-1.272 2.766-1.781 4.295a3.5 3.5 0 0 0-.096.305c-.014.054-.031.108-.043.164a3.5 3.5 0 0 0-.08.736 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5c0-3.91 1.998-5.5 1.998-8.5 0-3.612-3.317-6-6.08-6zm5.582.666a.5.667 0 0 0-.5.666.5.667 0 0 0 .5.668.5.667 0 0 0 .5-.668.5.667 0 0 0-.5-.666z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/HeadsetIcon.tsx

@@ -4,7 +4,7 @@ export function HeadsetIcon({ width = 24 }: { width?: number }) {
       <path
         transform="scale(0.75, 0.75) translate(120, 96)"
         d="M576 64H64C28.7 64 0 92.7 0 128v256c0 35.3 28.7 64 64 64h120.4c24.2 0 46.4-13.7 57.2-35.4l32-64c8.8-17.5 26.7-28.6 46.3-28.6s37.5 11.1 46.3 28.6l32 64c10.8 21.7 33 35.4 57.2 35.4H576c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64zM96 240a64 64 0 11128 0 64 64 0 11-128 0zm384-64a64 64 0 110 128 64 64 0 110-128z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/HumanIcon.tsx

@@ -1,8 +1,8 @@
 export function HumanIcon({ width = 20 }: { width?: number }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={width} viewBox="0 0 512 512">
-      <path d="M256 112a56 56 0 1156-56 56.06 56.06 0 01-56 56z"></path>
-      <path d="M432 112.8l-.45.12-.42.13c-1 .28-2 .58-3 .89-18.61 5.46-108.93 30.92-172.56 30.92-59.13 0-141.28-22-167.56-29.47a73.79 73.79 0 00-8-2.58c-19-5-32 14.3-32 31.94 0 17.47 15.7 25.79 31.55 31.76v.28l95.22 29.74c9.73 3.73 12.33 7.54 13.6 10.84 4.13 10.59.83 31.56-.34 38.88l-5.8 45-32.19 176.19q-.15.72-.27 1.47l-.23 1.27c-2.32 16.15 9.54 31.82 32 31.82 19.6 0 28.25-13.53 32-31.94s28-157.57 42-157.57 42.84 157.57 42.84 157.57c3.75 18.41 12.4 31.94 32 31.94 22.52 0 34.38-15.74 32-31.94a57.17 57.17 0 00-.76-4.06L329 301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1.09 1.09 0 00.08-.15c1.08-2 6-6.48 17.48-10.79l89.28-31.21a16.9 16.9 0 001.62-.52c16-6 32-14.3 32-31.93S451 107.81 432 112.8z"></path>
+      <path d="M256 112a56 56 0 1156-56 56.06 56.06 0 01-56 56z" />
+      <path d="M432 112.8l-.45.12-.42.13c-1 .28-2 .58-3 .89-18.61 5.46-108.93 30.92-172.56 30.92-59.13 0-141.28-22-167.56-29.47a73.79 73.79 0 00-8-2.58c-19-5-32 14.3-32 31.94 0 17.47 15.7 25.79 31.55 31.76v.28l95.22 29.74c9.73 3.73 12.33 7.54 13.6 10.84 4.13 10.59.83 31.56-.34 38.88l-5.8 45-32.19 176.19q-.15.72-.27 1.47l-.23 1.27c-2.32 16.15 9.54 31.82 32 31.82 19.6 0 28.25-13.53 32-31.94s28-157.57 42-157.57 42.84 157.57 42.84 157.57c3.75 18.41 12.4 31.94 32 31.94 22.52 0 34.38-15.74 32-31.94a57.17 57.17 0 00-.76-4.06L329 301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1.09 1.09 0 00.08-.15c1.08-2 6-6.48 17.48-10.79l89.28-31.21a16.9 16.9 0 001.62-.52c16-6 32-14.3 32-31.93S451 107.81 432 112.8z" />
     </svg>
   );
 }

gui/src/components/commons/icon/LoaderIcon.tsx

@@ -20,28 +20,28 @@ export function LoaderIcon({
         alt="Slime jumping"
         width={size}
         // className="crisp-edges"
-      ></img>
+      />
       <img
         hidden={slimeState !== SlimeState.HAPPY}
         src="/images/happy-slime.gif"
         alt="Happy slime"
         width={size}
         // className="crisp-edges"
-      ></img>
+      />
       <img
         hidden={slimeState !== SlimeState.SAD}
         src="/images/sad-slime.gif"
         alt="Sad slime"
         width={size}
         // className="crisp-edges"
-      ></img>
+      />
       <img
         hidden={slimeState !== SlimeState.CURIOUS}
         src="/images/curious-slime.gif"
         alt="Slime looking for something"
         width={size}
         // className="crisp-edges"
-      ></img>
+      />
     </>
   );
 }

gui/src/components/commons/icon/LowerArmIcon.tsx

@@ -16,7 +16,7 @@ export function LowerArmIcon({
       <path
         transform={flipped ? 'scale(-1,1) translate(-50,0)' : undefined}
         d="M27.203 1.98c-1.019 0-1.954.56-2.437 1.458L17.26 15.858c-.157.291-.24.619-.24.95v16.22l-4.74 5.49a1.001 1.001 0 0 0 .156 1.407l9.386 7.818a.998.998 0 0 0 1.416-.17l8.354-10.443a13.001 13.001 0 0 0 2.668-7.072L35 20.83A2.83 2.83 0 0 0 32.17 18h-.008a2.83 2.83 0 0 0-2.73 2.086l-2.41 5.935-2.026-3.019L25 16l4.734-10.09c.847-1.836-.491-3.93-2.513-3.93h-.018z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/PawIcon.tsx

@@ -15,7 +15,7 @@ export function PawIcon({
       <path
         transform={`${transform} scale(0.75, 0.75) translate(96, 96)`}
         d="M490.39 182.75c-5.55-13.19-14.77-22.7-26.67-27.49l-.16-.06a46.46 46.46 0 00-17-3.2h-.64c-27.24.41-55.05 23.56-69.19 57.61-10.37 24.9-11.56 51.68-3.18 71.64 5.54 13.2 14.78 22.71 26.73 27.5l.13.05a46.53 46.53 0 0017 3.2c27.5 0 55.6-23.15 70-57.65 10.24-24.87 11.37-51.63 2.98-71.6zM381.55 329.61c-15.71-9.44-30.56-18.37-40.26-34.41C314.53 250.8 298.37 224 256 224s-58.57 26.8-85.39 71.2c-9.72 16.06-24.6 25-40.36 34.48-18.07 10.86-36.74 22.08-44.8 44.16a66.93 66.93 0 00-4.65 25c0 35.95 28 65.2 62.4 65.2 17.75 0 36.64-6.15 56.63-12.66 19.22-6.26 39.09-12.73 56.27-12.73s37 6.47 56.15 12.73C332.2 457.85 351 464 368.8 464c34.35 0 62.3-29.25 62.3-65.2a67 67 0 00-4.75-25c-8.06-22.1-26.74-33.33-44.8-44.19zM150 188.85c11.9 14.93 27 23.15 42.52 23.15a42.88 42.88 0 006.33-.47c32.37-4.76 52.54-44.26 45.92-90C242 102.3 234.6 84.39 224 71.11 212.12 56.21 197 48 181.49 48a42.88 42.88 0 00-6.33.47c-32.37 4.76-52.54 44.26-45.92 90 2.76 19.2 10.16 37.09 20.76 50.38zm163.16 22.68a42.88 42.88 0 006.33.47c15.53 0 30.62-8.22 42.52-23.15 10.59-13.29 17.95-31.18 20.75-50.4 6.62-45.72-13.55-85.22-45.92-90a42.88 42.88 0 00-6.33-.47C315 48 299.88 56.21 288 71.11c-10.6 13.28-18 31.19-20.76 50.44-6.62 45.72 13.55 85.22 45.92 89.98zM111.59 308.8l.14-.05c11.93-4.79 21.16-14.29 26.69-27.48 8.38-20 7.2-46.75-3.15-71.65C120.94 175.16 92.85 152 65.38 152a46.4 46.4 0 00-17 3.2l-.14.05c-11.9 4.75-21.13 14.29-26.66 27.48-8.38 20-7.2 46.75 3.15 71.65C39.06 288.84 67.15 312 94.62 312a46.4 46.4 0 0016.97-3.2z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/SlimeUpIcon.tsx

@@ -15,11 +15,11 @@ export function SlimeUpIcon({ width = 60 }: { width?: number }) {
           strokeWidth="0.265"
           rx="6.963"
           ry="3.423"
-        ></rect>
+        />
         <path
           strokeWidth="0.195"
           d="M59.587 23.923c.514 0 .978.382 1.313 1.001.336.62.402 1.512.543 2.425l1.376 8.937v40.902l-1.38 8.95c-.14.917-.206 1.805-.542 2.425-.335.619-.8 1.001-1.314 1.001-1.028 0-2.14-1.59-1.856-3.427l1.38-8.949V36.286l-1.377-8.937c-.281-1.826.828-3.426 1.857-3.426z"
-        ></path>
+        />
       </g>
     </svg>
   );

gui/src/components/commons/icon/SlimeVRIcon.tsx

@@ -9,13 +9,13 @@ export function SlimeVRIcon({ width = 28 }: { width?: number }) {
       viewBox="0 0 380 380"
     >
       <g fill="none" stroke="#fff">
-        <path strokeWidth="13.62" d="M72.867 191.74l37-39 39 36"></path>
-        <path strokeWidth="13.62" d="M208.87 187.74l38-35 36 38"></path>
+        <path strokeWidth="13.62" d="M72.867 191.74l37-39 39 36" />
+        <path strokeWidth="13.62" d="M208.87 187.74l38-35 36 38" />
         <path
           strokeLinecap="square"
           strokeWidth="17"
           d="M56.867 253.74s130.61-31.182 248 5c13.45 4.146 20.244 2.975 20-8s1.909-126.06-46-131"
-        ></path>
+        />
       </g>
     </svg>
   );

gui/src/components/commons/icon/UpperArmIcon.tsx

@@ -16,7 +16,7 @@ export function UpperArmIcon({
       <path
         transform={flipped ? undefined : 'scale(-1,1) translate(-50,0)'}
         d="M47.625 12.219c-.171-.137-8.614-8.622-8.918-8.926a.999.999 0 0 0-1.414 0c-1.996 1.996-4.216 8.745-4.291 15.364-2.309 3.104-2.842 7.479-2.965 9.393-3.187.334-5.254 2.287-6.943 3.884-.81.765-1.573 1.486-2.359 1.96-1.967 1.183-4.493 2.413-5.596 2.937a14.019 14.019 0 0 0-1.657-1.082c-.947-.52-2.496-.683-3.151-.73l-3.092-1.816A1.478 1.478 0 0 0 6.5 33 1.5 1.5 0 0 0 5 34.5c0 .35.082.689.629 1.236.597.597 1.101 1.14 2.976 3.014l-2.907 2.258H2a.998.998 0 0 0-.97 1.242l1 2.992a1 1 0 0 0 .651.706l2.973 1a1.015 1.015 0 0 0 .483.038l6.027-1a.988.988 0 0 0 .436-.187l3.946-2.959c.428-.233 3.692-1.952 8.755-2.856 5.89-1.052 9.31-2.796 10.608-3.565.058-.018.116-.033.176-.051.684-.192 1.716-.483 2.495-2.046.334-.669.54-1.318.74-1.947.325-1.022.605-1.906 1.378-2.659C46.089 24.46 48 20.085 48 13a.997.997 0 0 0-.375-.781z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/UpperChestIcon.tsx

@@ -7,7 +7,7 @@ export function UpperChestIcon({ width = 24 }: { width?: number }) {
       width={width}
       viewBox="0 0 50 50"
     >
-      <path d="M 20 2 C 18.156 2 16.700141 3.1345312 15.619141 4.0195312 C 12.698141 4.2755313 4 7.245 4 15 C 4 17.305 4.551 19.068203 4.875 19.908203 C 4.262 20.969203 3 23.679 3 28 C 3 28.352 3.184375 28.677422 3.484375 28.857422 L 8.484375 31.857422 C 8.835375 32.068422 9.2804219 32.044922 9.6074219 31.794922 C 10.290422 31.270922 10.833578 30.512578 11.267578 29.642578 C 11.118578 28.880578 11 28.05 11 27 L 11 21 C 11 20.448 11.448 20 12 20 C 12.43 20 12.790641 20.27425 12.931641 20.65625 C 12.944641 20.68425 12.982 20.797656 13 20.847656 C 13.197 21.404656 14.365 24 19 24 C 23.133 24 23.984531 19.976687 24.019531 19.804688 C 24.113531 19.329687 24.535 19.018531 25 19.019531 C 25.465 19.019531 25.886469 19.330687 25.980469 19.804688 C 26.015469 19.976687 26.867 24 31 24 C 35.635 24 36.803 21.405656 37 20.847656 C 37.018 20.797656 37.055359 20.68425 37.068359 20.65625 C 37.209359 20.27525 37.57 20 38 20 C 38.552 20 39 20.448 39 21 L 39 27 C 39 28.05 38.881422 28.881578 38.732422 29.642578 C 39.166422 30.513578 39.709578 31.269969 40.392578 31.792969 C 40.719578 32.042969 41.164625 32.066469 41.515625 31.855469 L 46.515625 28.855469 C 46.815625 28.676469 47 28.352 47 28 C 47 23.679 45.738 20.969203 45.125 19.908203 C 45.449 19.068203 46 17.305 46 15 C 46 7.245 37.301859 4.2755312 34.380859 4.0195312 C 33.299859 3.1345312 31.844 2 30 2 L 25 2 L 20 2 z M 25 22.609375 C 23.953 24.323375 22.059 26 19 26 C 16.075 26 14.195 25.130766 13 24.134766 L 13 27 C 13 28.281 13.194875 29.155016 13.421875 30.166016 C 13.692875 31.375016 14 32.746 14 35 C 14 35.027 13.987375 35.049172 13.984375 35.076172 C 13.994375 35.366172 14 35.669 14 36 L 14 42 C 14 44.997 18.628641 47.438484 19.556641 47.896484 C 19.693641 47.965484 19.847 48 20 48 L 25 48 L 30 48 C 30.153 48 30.306359 47.965484 30.443359 47.896484 C 31.371359 47.438484 36 44.997 36 42 L 36 36 C 36 35.669 36.005625 35.366172 36.015625 35.076172 C 36.012625 35.049172 36 35.027 36 35 C 36 32.746 36.307125 31.375016 36.578125 30.166016 C 36.805125 29.155016 37 28.281 37 27 L 37 24.134766 C 35.805 25.130766 33.925 26 31 26 C 27.941 26 26.047 24.323375 25 22.609375 z"></path>
+      <path d="M 20 2 C 18.156 2 16.700141 3.1345312 15.619141 4.0195312 C 12.698141 4.2755313 4 7.245 4 15 C 4 17.305 4.551 19.068203 4.875 19.908203 C 4.262 20.969203 3 23.679 3 28 C 3 28.352 3.184375 28.677422 3.484375 28.857422 L 8.484375 31.857422 C 8.835375 32.068422 9.2804219 32.044922 9.6074219 31.794922 C 10.290422 31.270922 10.833578 30.512578 11.267578 29.642578 C 11.118578 28.880578 11 28.05 11 27 L 11 21 C 11 20.448 11.448 20 12 20 C 12.43 20 12.790641 20.27425 12.931641 20.65625 C 12.944641 20.68425 12.982 20.797656 13 20.847656 C 13.197 21.404656 14.365 24 19 24 C 23.133 24 23.984531 19.976687 24.019531 19.804688 C 24.113531 19.329687 24.535 19.018531 25 19.019531 C 25.465 19.019531 25.886469 19.330687 25.980469 19.804688 C 26.015469 19.976687 26.867 24 31 24 C 35.635 24 36.803 21.405656 37 20.847656 C 37.018 20.797656 37.055359 20.68425 37.068359 20.65625 C 37.209359 20.27525 37.57 20 38 20 C 38.552 20 39 20.448 39 21 L 39 27 C 39 28.05 38.881422 28.881578 38.732422 29.642578 C 39.166422 30.513578 39.709578 31.269969 40.392578 31.792969 C 40.719578 32.042969 41.164625 32.066469 41.515625 31.855469 L 46.515625 28.855469 C 46.815625 28.676469 47 28.352 47 28 C 47 23.679 45.738 20.969203 45.125 19.908203 C 45.449 19.068203 46 17.305 46 15 C 46 7.245 37.301859 4.2755312 34.380859 4.0195312 C 33.299859 3.1345312 31.844 2 30 2 L 25 2 L 20 2 z M 25 22.609375 C 23.953 24.323375 22.059 26 19 26 C 16.075 26 14.195 25.130766 13 24.134766 L 13 27 C 13 28.281 13.194875 29.155016 13.421875 30.166016 C 13.692875 31.375016 14 32.746 14 35 C 14 35.027 13.987375 35.049172 13.984375 35.076172 C 13.994375 35.366172 14 35.669 14 36 L 14 42 C 14 44.997 18.628641 47.438484 19.556641 47.896484 C 19.693641 47.965484 19.847 48 20 48 L 25 48 L 30 48 C 30.153 48 30.306359 47.965484 30.443359 47.896484 C 31.371359 47.438484 36 44.997 36 42 L 36 36 C 36 35.669 36.005625 35.366172 36.015625 35.076172 C 36.012625 35.049172 36 35.027 36 35 C 36 32.746 36.307125 31.375016 36.578125 30.166016 C 36.805125 29.155016 37 28.281 37 27 L 37 24.134766 C 35.805 25.130766 33.925 26 31 26 C 27.941 26 26.047 24.323375 25 22.609375 z" />
     </svg>
   );
 }

gui/src/components/commons/icon/UpperLegIcon.tsx

@@ -16,7 +16,7 @@ export function UpperLegIcon({
       <path
         transform={flipped ? 'scale(-1,1) translate(-50,0)' : undefined}
         d="M42.727.059a.998.998 0 0 0-.774.043A1.042 1.042 0 0 0 41.516 0H24.313c-.04 0-.079.016-.118.02a.972.972 0 0 0-.8.238c-2.407 2.172-5.836 7.715-6.793 11.773-2.012 2.281-2.11 4.774-.313 7.828.617 1.043.746 2.262.895 3.676.086.8.171 1.625.355 2.492.29 1.325.883 2.637 1.453 3.907.32.707.621 1.37.863 2.02.29.78.618 1.605.95 2.437.797 2.004 1.789 4.5 2.144 6.28.082 1.087-.012 2-.367 2.638-1.227 2.18-2.941 1.793-4.988 2.664-2.153.922-3.508 1.32-4.32 1.472-2.07.387-1.864.57-1.864.934 0 .113.016.219.035.324.168.766.922 1.3 1.77 1.3.156 0 .32-.015.48-.038a3.2 3.2 0 0 0 1.086-.352c.09.063.188.102.285.149.493.234 1.028.27 1.618.27 2.011 0 3.293-.063 4.207-.15 1.511-.14 2.02-.331 3.074-.378.152-.008.316-.012.504-.012.898 0 2.734.54 4.84.54.562 0 1.02-.114 1.394-.298 1.024-.496 1.399-1.543 1.399-2.48 0-1.566-1.063-2.547-2.04-5.121-.44-1.328-.91-3.035-1.253-5.418-.047-.344-.075-.668-.106-.996l-.047-.602c-.164-2.992.45-5.394.965-7.37.43-1.653.8-3.083.594-4.4-.473-3.015-1.781-4.863-2.563-5.964-.148-.207-.32-.453-.414-.61.223-.484 1.043-1.53 2.39-2.168 2.15-1.015 11.349-6.57 13.712-13.27A1.007 1.007 0 0 0 42.727.06Z"
-      ></path>
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/WaistIcon.tsx

@@ -7,7 +7,7 @@ export function WaistIcon({ width = 24 }: { width?: number }) {
       width={width}
       viewBox="0 0 72 72"
     >
-      <path d="M17 2c-.3 0-.6.2-.8.4-.2.3-.3.7-.2 1 2.9 7.1 3.1 15.3.6 22.4-.6 2-1.5 3.9-2.4 5.7-.1.2-.2.5-.3.7 13.2 4.2 26.7 4.1 40.2-.1-.6-1.4-1.9-3.9-2.7-6.3-2.5-7.1-2.3-15.3.6-22.4.1-.3.1-.7-.1-.9-.2-.3-.5-.5-.9-.5H17zM9.863 14.75a.944.944 0 0 0-.664.35c-.4.4-.298 1.1.102 1.4l2.1 1.8H3.9c-.5.1-1 .6-1 1.1 0 .6.4 1 1 1h7.5l-2.1 1.8c-.4.4-.502 1-.102 1.4.4.4 1 .5 1.4.1 1.6-1.3 4.002-3.4 4.202-3.6.4-.4.5-1 0-1.5-.2-.2-3.201-2.7-4.201-3.6a.908.908 0 0 0-.737-.25zm48.237.1a.846.846 0 0 0-.7.25c-1 .9-3.9 3.3-4.2 3.6-.4.4-.4 1.1 0 1.5.2.2 3.2 2.7 4.2 3.6.4.4 1 .3 1.4-.1.4-.4.3-1.1-.1-1.4l-2.1-1.8h7.5c.6 0 1-.4 1-1s-.4-1-1-1h-7.5l2.1-1.8c.4-.4.4-1.1.1-1.5-.2-.2-.45-.325-.7-.35zm-3 19.45c-14.2 4.6-28.4 4.6-42.2.1-.5 1.1-1 2.3-1.4 3.5-.1.4-.3.8-.4 1.2 8.4 1.7 15.9 7 22.1 15.8 6.4-9.3 14.5-14.8 23.6-16.1l-.3-.9c-.4-1.2-.9-2.4-1.4-3.6zm2.3 6.8c-8.9 1.2-16.8 6.8-23 16.3V66h17.5c.3 0 .6-.2.8-.4 4.8-7.1 6.5-16.2 4.7-24.5zm-46.8.2c-1.7 8.3 0 17.3 4.7 24.3.2.3.5.4.8.4h16.2v-8.4s0-.1-.1-.1c-6-9.2-13.3-14.6-21.6-16.2z"></path>
+      <path d="M17 2c-.3 0-.6.2-.8.4-.2.3-.3.7-.2 1 2.9 7.1 3.1 15.3.6 22.4-.6 2-1.5 3.9-2.4 5.7-.1.2-.2.5-.3.7 13.2 4.2 26.7 4.1 40.2-.1-.6-1.4-1.9-3.9-2.7-6.3-2.5-7.1-2.3-15.3.6-22.4.1-.3.1-.7-.1-.9-.2-.3-.5-.5-.9-.5H17zM9.863 14.75a.944.944 0 0 0-.664.35c-.4.4-.298 1.1.102 1.4l2.1 1.8H3.9c-.5.1-1 .6-1 1.1 0 .6.4 1 1 1h7.5l-2.1 1.8c-.4.4-.502 1-.102 1.4.4.4 1 .5 1.4.1 1.6-1.3 4.002-3.4 4.202-3.6.4-.4.5-1 0-1.5-.2-.2-3.201-2.7-4.201-3.6a.908.908 0 0 0-.737-.25zm48.237.1a.846.846 0 0 0-.7.25c-1 .9-3.9 3.3-4.2 3.6-.4.4-.4 1.1 0 1.5.2.2 3.2 2.7 4.2 3.6.4.4 1 .3 1.4-.1.4-.4.3-1.1-.1-1.4l-2.1-1.8h7.5c.6 0 1-.4 1-1s-.4-1-1-1h-7.5l2.1-1.8c.4-.4.4-1.1.1-1.5-.2-.2-.45-.325-.7-.35zm-3 19.45c-14.2 4.6-28.4 4.6-42.2.1-.5 1.1-1 2.3-1.4 3.5-.1.4-.3.8-.4 1.2 8.4 1.7 15.9 7 22.1 15.8 6.4-9.3 14.5-14.8 23.6-16.1l-.3-.9c-.4-1.2-.9-2.4-1.4-3.6zm2.3 6.8c-8.9 1.2-16.8 6.8-23 16.3V66h17.5c.3 0 .6-.2.8-.4 4.8-7.1 6.5-16.2 4.7-24.5zm-46.8.2c-1.7 8.3 0 17.3 4.7 24.3.2.3.5.4.8.4h16.2v-8.4s0-.1-.1-.1c-6-9.2-13.3-14.6-21.6-16.2z" />
     </svg>
   );
 }

gui/src/components/firmware-tool/DeviceCard.tsx

@@ -101,18 +101,18 @@ export function DeviceCardControl({
                   checked={value || false}
                   type="checkbox"
                   disabled={disabled}
-                ></input>
+                />
               </div>
 
               <div className="w-full">
-                <DeviceCardContent {...props}></DeviceCardContent>
+                <DeviceCardContent {...props} />
               </div>
             </label>
           )}
-        ></Controller>
+        />
       ) : (
         <div className="px-2 h-full">
-          <DeviceCardContent {...props}></DeviceCardContent>
+          <DeviceCardContent {...props} />
         </div>
       )}
       <div
@@ -129,7 +129,7 @@ export function DeviceCardControl({
           bottom
           height={6}
           colorClass="bg-accent-background-20"
-        ></ProgressBar>
+        />
       </div>
       {online !== null && (
         <div className="absolute top-2 right-2">
@@ -137,7 +137,7 @@ export function DeviceCardControl({
             status={
               online ? TrackerStatusEnum.OK : TrackerStatusEnum.DISCONNECTED
             }
-          ></TrackerStatus>
+          />
         </div>
       )}
     </div>

gui/src/components/firmware-tool/FirmwareTool.tsx

@@ -103,26 +103,26 @@ function FirmwareToolContent() {
         <div className="m-4 h-full">
           {isError && (
             <div className="w-full flex flex-col justify-center items-center gap-3 h-full">
-              <LoaderIcon slimeState={SlimeState.SAD}></LoaderIcon>
+              <LoaderIcon slimeState={SlimeState.SAD} />
               {!isCompatible ? (
                 <Localized id="firmware_tool-not_compatible">
-                  <Typography variant="section-title"></Typography>
+                  <Typography variant="section-title" />
                 </Localized>
               ) : (
                 <Localized id="firmware_tool-not_available">
-                  <Typography variant="section-title"></Typography>
+                  <Typography variant="section-title" />
                 </Localized>
               )}
               <Localized id="firmware_tool-retry">
-                <Button variant="primary" onClick={() => refetch()}></Button>
+                <Button variant="primary" onClick={() => refetch()} />
               </Localized>
             </div>
           )}
           {isLoading && (
             <div className="w-full flex flex-col justify-center items-center gap-3 h-full">
-              <LoaderIcon slimeState={SlimeState.JUMPY}></LoaderIcon>
+              <LoaderIcon slimeState={SlimeState.JUMPY} />
               <Localized id="firmware_tool-loading">
-                <Typography variant="section-title"></Typography>
+                <Typography variant="section-title" />
               </Localized>
             </div>
           )}

gui/src/components/firmware-tool/steps/BoardDefaultsStep.tsx

@@ -39,7 +39,7 @@ function BoardDefaultsGraph({ graph }: { graph: ComponentNode[] }) {
                 className="p-2 rounded-full fill-background-10 hover:bg-background-50 hover:fill-status-critical cursor-pointer"
                 onClick={() => onDelete && onDelete()}
               >
-                <TrashIcon size={20}></TrashIcon>
+                <TrashIcon size={20} />
               </div>
             )}
           </div>
@@ -65,7 +65,7 @@ function BoardDefaultsGraph({ graph }: { graph: ComponentNode[] }) {
             checked={c.value}
             variant="toggle"
             outlined
-          ></CheckboxInternal>
+          />
         </div>
       );
     }
@@ -86,7 +86,7 @@ function BoardDefaultsGraph({ graph }: { graph: ComponentNode[] }) {
             }
             variant="primary"
             onChange={(e) => c.onMutate(e.currentTarget.value)}
-          ></InputInside>
+          />
         </div>
       );
     }
@@ -109,7 +109,7 @@ function BoardDefaultsGraph({ graph }: { graph: ComponentNode[] }) {
             value={c.value}
             variant="secondary"
             maxHeight={200}
-          ></DropdownInside>
+          />
         </div>
       );
     }
@@ -140,7 +140,7 @@ function BoardDefaultsGraph({ graph }: { graph: ComponentNode[] }) {
               <div className="flex flex-col justify-center">
                 <div className="flex justify-center">
                   <Localized id="firmware_tool-board_defaults-add">
-                    <Button variant="primary" onClick={c.add}></Button>
+                    <Button variant="primary" onClick={c.add} />
                   </Localized>
                 </div>
               </div>
@@ -205,21 +205,17 @@ export function BoardDefaultsStep({
             {l10n.getString('firmware_tool-board_defaults-description')}
           </Typography>
         </div>
-        <BoardDefaultsGraph graph={graph}></BoardDefaultsGraph>
+        <BoardDefaultsGraph graph={graph} />
         <div className="flex justify-between">
           <Localized id="firmware_tool-previous_step">
-            <Button variant="secondary" onClick={prevStep}></Button>
+            <Button variant="secondary" onClick={prevStep} />
           </Localized>
           <div className="flex gap-2">
             <Localized id="firmware_tool-board_defaults-reset">
-              <Button variant="secondary" onClick={reset}></Button>
+              <Button variant="secondary" onClick={reset} />
             </Localized>
             <Localized id="firmware_tool-ok">
-              <Button
-                variant="primary"
-                disabled={!valid}
-                onClick={submit}
-              ></Button>
+              <Button variant="primary" disabled={!valid} onClick={submit} />
             </Localized>
           </div>
         </div>

gui/src/components/firmware-tool/steps/BuildStep.tsx

@@ -92,7 +92,7 @@ export function BuildStep({
                   ? SlimeState.JUMPY
                   : SlimeState.SAD
               }
-            ></LoaderIcon>
+            />
             <Typography variant="section-title">
               {l10n.getString('firmware_tool-build-' + buildStatus.status)}
             </Typography>
@@ -110,14 +110,14 @@ export function BuildStep({
                   prevStep();
                 }
               }}
-            ></Button>
+            />
           </Localized>
           <Localized id="firmware_tool-retry">
             <Button
               variant="secondary"
               disabled={hasPendingBuild}
               onClick={() => startBuild()}
-            ></Button>
+            />
           </Localized>
         </div>
       </div>

gui/src/components/firmware-tool/steps/FlashBtnStep.tsx

@@ -32,7 +32,7 @@ export function FlashBtnStep({
                       'firmware_tool-flashbtn_step-board_SLIMEVR-r11'
                     )}
                   </Typography>
-                  <img src="/images/R11_board_reset.webp"></img>
+                  <img src="/images/R11_board_reset.webp" />
                 </div>
                 <div className="bg-background-80 p-2 rounded-lg gap-2 flex flex-col justify-between">
                   <Typography variant="main-title">R12</Typography>
@@ -41,7 +41,7 @@ export function FlashBtnStep({
                       'firmware_tool-flashbtn_step-board_SLIMEVR-r12'
                     )}
                   </Typography>
-                  <img src="/images/R12_board_reset.webp"></img>
+                  <img src="/images/R12_board_reset.webp" />
                 </div>
 
                 <div className="bg-background-80 p-2 rounded-lg gap-2 flex flex-col justify-between">
@@ -51,7 +51,7 @@ export function FlashBtnStep({
                       'firmware_tool-flashbtn_step-board_SLIMEVR-r14'
                     )}
                   </Typography>
-                  <img src="/images/R14_board_reset_sw.webp"></img>
+                  <img src="/images/R14_board_reset_sw.webp" />
                 </div>
               </div>
             </>
@@ -69,7 +69,7 @@ export function FlashBtnStep({
                 onClick={() => {
                   prevStep();
                 }}
-              ></Button>
+              />
             </Localized>
             <Localized id="firmware_tool-next_step">
               <Button
@@ -77,7 +77,7 @@ export function FlashBtnStep({
                 onClick={() => {
                   nextStep();
                 }}
-              ></Button>
+              />
             </Localized>
           </div>
         </div>

gui/src/components/firmware-tool/steps/FlashingMethodStep.tsx

@@ -148,18 +148,18 @@ function SerialDevicesList({
   return (
     <div className="p-4 rounded-lg bg-background-60 w-full flex flex-col gap-3">
       <Localized id="firmware_tool-flash_method_serial-title">
-        <Typography variant="main-title"></Typography>
+        <Typography variant="main-title" />
       </Localized>
       <Localized id="firmware_tool-flash_method_serial-wifi">
-        <Typography variant="section-title"></Typography>
+        <Typography variant="section-title" />
       </Localized>
       <div className="flex flex-col gap-3 text-background-10">
         <TipBox>
           <Localized
             id={'firmware_tool-flash_method_step-ota-info'}
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
           >
-            <Typography whitespace="whitespace-pre-wrap"></Typography>
+            <Typography whitespace="whitespace-pre-wrap" />
           </Localized>
         </TipBox>
         <Localized
@@ -186,13 +186,13 @@ function SerialDevicesList({
         </Localized>
       </div>
       <Localized id="firmware_tool-flash_method_serial-devices-label">
-        <Typography variant="section-title"></Typography>
+        <Typography variant="section-title" />
       </Localized>
       {Object.keys(devices).length === 0 && !loading ? (
         <div className="flex justify-center items-center flex-col gap-4 py-4">
-          <LoaderIcon slimeState={SlimeState.SAD}></LoaderIcon>
+          <LoaderIcon slimeState={SlimeState.SAD} />
           <Localized id="firmware_tool-flash_method_serial-no_devices">
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </div>
       ) : (
@@ -209,7 +209,7 @@ function SerialDevicesList({
           display="block"
           direction="down"
           variant="secondary"
-        ></Dropdown>
+        />
       )}
     </div>
   );
@@ -291,16 +291,16 @@ function OTADevicesList({
   return (
     <div className="p-4 rounded-lg bg-background-60 w-full flex flex-col gap-3">
       <Localized id="firmware_tool-flash_method_ota-title">
-        <Typography variant="main-title"></Typography>
+        <Typography variant="main-title" />
       </Localized>
       <Localized id="firmware_tool-flash_method_ota-devices">
-        <Typography variant="section-title"></Typography>
+        <Typography variant="section-title" />
       </Localized>
       {devices.length === 0 && (
         <div className="flex justify-center items-center flex-col gap-4 py-4">
-          <LoaderIcon slimeState={SlimeState.SAD}></LoaderIcon>
+          <LoaderIcon slimeState={SlimeState.SAD} />
           <Localized id="firmware_tool-flash_method_ota-no_devices">
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </div>
       )}
@@ -312,7 +312,7 @@ function OTADevicesList({
             name={`ota.selectedDevices.id-${device.id?.id ?? 0}`}
             deviceNames={deviceNames(device)}
             color="bg-background-70"
-          ></DeviceCardControl>
+          />
         ))}
       </div>
     </div>
@@ -402,7 +402,7 @@ export function FlashingMethodStep({
                   name="flashingMethod"
                   value={FirmwareUpdateMethod.OTAFirmwareUpdate.toString()}
                   label=""
-                ></Radio>
+                />
               </Localized>
               <Localized
                 id="firmware_tool-flash_method_step-serial-v2"
@@ -413,7 +413,7 @@ export function FlashingMethodStep({
                   name="flashingMethod"
                   value={FirmwareUpdateMethod.SerialFirmwareUpdate.toString()}
                   label=""
-                ></Radio>
+                />
               </Localized>
             </div>
             <div className="flex flex-grow">
@@ -424,7 +424,7 @@ export function FlashingMethodStep({
                   control={control}
                   watch={watch}
                   reset={reset}
-                ></SerialDevicesList>
+                />
               )}
               {flashingMethod ===
                 FirmwareUpdateMethod.OTAFirmwareUpdate.toString() && (
@@ -433,7 +433,7 @@ export function FlashingMethodStep({
                   control={control}
                   watch={watch}
                   reset={reset}
-                ></OTADevicesList>
+                />
               )}
             </div>
           </div>
@@ -448,7 +448,7 @@ export function FlashingMethodStep({
                     goTo('Defaults');
                   }
                 }}
-              ></Button>
+              />
             </Localized>
             <Localized id="firmware_tool-next_step">
               <Button
@@ -459,7 +459,7 @@ export function FlashingMethodStep({
                   selectedDevices.length === 0
                 }
                 onClick={nextStep}
-              ></Button>
+              />
             </Localized>
           </div>
         </div>

gui/src/components/firmware-tool/steps/FlashingStep.tsx

@@ -185,7 +185,7 @@ export function FlashingStep({
                 progress={val.progress}
                 key={id}
                 deviceNames={val.deviceNames}
-              ></DeviceCardControl>
+              />
             );
           })}
           <div className="flex gap-2 self-end">
@@ -194,14 +194,14 @@ export function FlashingStep({
                 variant="secondary"
                 disabled={trackerWithErrors.length === 0}
                 onClick={retryError}
-              ></Button>
+              />
             </Localized>
             <Localized id="firmware_tool-flashing_step-flash_more">
               <Button
                 variant="secondary"
                 disabled={hasPendingTrackers}
                 onClick={() => goTo('FlashingMethod')}
-              ></Button>
+              />
             </Localized>
             <Localized id="firmware_tool-flashing_step-exit">
               <Button
@@ -210,7 +210,7 @@ export function FlashingStep({
                   clear();
                   nav('/');
                 }}
-              ></Button>
+              />
             </Localized>
           </div>
         </div>

gui/src/components/firmware-tool/steps/SelectSourceStep.tsx

@@ -47,7 +47,7 @@ function Selector({
           )}
         >
           <Localized id="firmware_tool-select_source-official">
-            <Typography></Typography>
+            <Typography />
           </Localized>
         </div>
       )}
@@ -59,7 +59,7 @@ function Selector({
           )}
         >
           <Localized id="firmware_tool-select_source-dev">
-            <Typography color="text-background-90"></Typography>
+            <Typography color="text-background-90" />
           </Localized>
         </div>
       )}
@@ -195,7 +195,7 @@ export function SelectSourceSetep({
               <div className="grid md:grid-cols-3 gap-4">
                 <div className="flex flex-col gap-1 w-full">
                   <Localized id="firmware_tool-select_source-board_type">
-                    <Typography variant="section-title"></Typography>
+                    <Typography variant="section-title" />
                   </Localized>
                   <div className="flex flex-col gap-4 md:max-h-[305px] overflow-y-auto bg-background-80 rounded-lg p-4">
                     {possibleBoards?.map((board) => (
@@ -217,13 +217,13 @@ export function SelectSourceSetep({
                             `board_type-${board.replace('BOARD_', '')}`
                           ) ?? board.replace('BOARD_', '').replaceAll('_', ' ')
                         }
-                      ></Selector>
+                      />
                     ))}
                   </div>
                 </div>
                 <div className="flex flex-col gap-1 w-full">
                   <Localized id="firmware_tool-select_source-firmware">
-                    <Typography variant="section-title"></Typography>
+                    <Typography variant="section-title" />
                   </Localized>
                   <div className="flex flex-col gap-4 md:max-h-[305px] overflow-y-auto bg-background-80 rounded-lg p-4">
                     {sourcesGroupped?.map(({ name, official, disabled }) => (
@@ -239,13 +239,13 @@ export function SelectSourceSetep({
                           }));
                         }}
                         text={formatSource(name, official)}
-                      ></Selector>
+                      />
                     ))}
                   </div>
                 </div>
                 <div className="flex flex-col gap-1 w-full">
                   <Localized id="firmware_tool-select_source-version">
-                    <Typography variant="section-title"></Typography>
+                    <Typography variant="section-title" />
                   </Localized>
                   <div className="flex flex-col gap-4 md:max-h-[305px] overflow-y-auto bg-background-80 rounded-lg p-4">
                     {possibleVersions?.map(({ name, disabled }) => (
@@ -266,7 +266,7 @@ export function SelectSourceSetep({
                           }));
                         }}
                         text={name}
-                      ></Selector>
+                      />
                     ))}
                   </div>
                 </div>
@@ -281,7 +281,7 @@ export function SelectSourceSetep({
                         goTo('Build');
                       else nextStep();
                     }}
-                  ></Button>
+                  />
                 </Localized>
               </div>
             </div>
@@ -289,20 +289,20 @@ export function SelectSourceSetep({
 
           {isFetching && (
             <div className="flex justify-center flex-col items-center gap-3 h-44">
-              <LoaderIcon slimeState={SlimeState.JUMPY}></LoaderIcon>
+              <LoaderIcon slimeState={SlimeState.JUMPY} />
               <Localized id="firmware_tool-loading">
-                <Typography></Typography>
+                <Typography />
               </Localized>
             </div>
           )}
           {isError && (
             <div className="flex justify-center flex-col items-center gap-3 h-44">
-              <LoaderIcon slimeState={SlimeState.SAD}></LoaderIcon>
+              <LoaderIcon slimeState={SlimeState.SAD} />
               <Localized id="firmware_tool-select_source-error">
-                <Typography></Typography>
+                <Typography />
               </Localized>
               <Localized id="firmware_tool-retry">
-                <Button variant="primary" onClick={() => refetch()}></Button>
+                <Button variant="primary" onClick={() => refetch()} />
               </Localized>
             </div>
           )}

gui/src/components/firmware-update/FirmwareUpdate.tsx

@@ -93,7 +93,7 @@ const StatusList = ({ status }: { status: Record<string, UpdateStatus> }) => {
         online={device?.trackers.some(
           ({ status }) => status === TrackerStatus.OK
         )}
-      ></DeviceCardControl>
+      />
     );
   });
 };
@@ -336,15 +336,15 @@ export function FirmwareUpdate() {
     <div className="flex flex-col p-4 w-full items-center justify-center">
       <div className="mobile:w-full w-10/12 h-full flex flex-col gap-2">
         <Localized id="firmware_update-title">
-          <Typography variant="main-title"></Typography>
+          <Typography variant="main-title" />
         </Localized>
         <div className="grid md:grid-cols-2 xs:grid-cols-1 gap-5">
           <div className="flex flex-col gap-2">
             <Localized id="firmware_update-devices">
-              <Typography variant="section-title"></Typography>
+              <Typography variant="section-title" />
             </Localized>
             <Localized id="firmware_update-devices-description">
-              <Typography variant="standard"></Typography>
+              <Typography variant="standard" />
             </Localized>
             <div className="flex flex-col gap-4 overflow-y-auto xs:max-h-[530px]">
               {devices.length === 0 &&
@@ -361,9 +361,9 @@ export function FirmwareUpdate() {
               )}
               <div className="flex flex-col gap-4 h-full">
                 {statusKeys.length > 0 ? (
-                  <StatusList status={status}></StatusList>
+                  <StatusList status={status} />
                 ) : (
-                  <DeviceList control={control} devices={devices}></DeviceList>
+                  <DeviceList control={control} devices={devices} />
                 )}
                 {devices.length === 0 && statusKeys.length === 0 && (
                   <div
@@ -371,9 +371,9 @@ export function FirmwareUpdate() {
                       'rounded-xl bg-background-60 justify-center flex-col items-center flex pb-10 py-5 gap-5'
                     )}
                   >
-                    <LoaderIcon slimeState={SlimeState.JUMPY}></LoaderIcon>
+                    <LoaderIcon slimeState={SlimeState.JUMPY} />
                     <Localized id="firmware_update-looking_for_devices">
-                      <Typography></Typography>
+                      <Typography />
                     </Localized>
                   </div>
                 )}
@@ -385,7 +385,7 @@ export function FirmwareUpdate() {
               id="firmware_update-changelog-title"
               vars={{ version: currentFirmwareRelease?.name ?? 'unknown' }}
             >
-              <Typography variant="main-title"></Typography>
+              <Typography variant="main-title" />
             </Localized>
             <div className="overflow-y-scroll max-h-[430px] md:h-[430px] bg-background-60 rounded-lg p-4">
               <Markdown
@@ -404,25 +404,21 @@ export function FirmwareUpdate() {
         </div>
         <div className="flex justify-end pb-2 gap-2 mobile:flex-col">
           <Localized id="firmware_update-retry">
-            <Button
-              variant="secondary"
-              disabled={!canRetry}
-              onClick={retry}
-            ></Button>
+            <Button variant="secondary" disabled={!canRetry} onClick={retry} />
           </Localized>
           <Localized id="firmware_update-update">
             <Button
               variant="primary"
               disabled={!canStartUpdate}
               onClick={startUpdate}
-            ></Button>
+            />
           </Localized>
           <Localized id="firmware_update-exit">
             <Button
               variant="primary"
               onClick={exit}
               disabled={hasPendingTrackers}
-            ></Button>
+            />
           </Localized>
         </div>
       </div>

gui/src/components/home/Home.tsx

@@ -49,7 +49,7 @@ export function Home() {
         to="/vr-mode"
         className="xs:hidden absolute z-50 h-12 w-12 rounded-full bg-accent-background-30 bottom-3 right-3 flex justify-center items-center fill-background-10"
       >
-        <HeadsetIcon></HeadsetIcon>
+        <HeadsetIcon />
       </NavLink>
       <div className="h-full overflow-y-auto">
         <div
@@ -74,12 +74,12 @@ export function Home() {
             <WarningBox whitespace={false}>
               <div className="flex gap-2 justify-between items-center w-full">
                 <div className="flex">
-                  <Localized id={'vrc_config-invalid'}></Localized>
+                  <Localized id={'vrc_config-invalid'} />
                 </div>
                 <div className="flex">
                   <Link to="/vrc-warnings">
                     <div className="rounded-md p-2 bg-background-90 bg-opacity-15 hover:bg-background-10 hover:bg-opacity-25 text-nowrap">
-                      <Localized id={'vrc_config-show_more'}></Localized>
+                      <Localized id={'vrc_config-show_more'} />
                     </div>
                   </Link>
                 </div>
@@ -119,7 +119,7 @@ export function Home() {
               <TrackersTable
                 flatTrackers={trackers}
                 clickedTracker={(tracker) => sendToSettings(tracker)}
-              ></TrackersTable>
+              />
             </div>
           )}
         </div>

gui/src/components/onboarding/BodyAssignment.tsx

@@ -395,7 +395,7 @@ export function BodyAssignment({
             </div>
           </div>
         }
-      ></BodyInteractions>
+      />
     </>
   );
 }

gui/src/components/onboarding/NeckWarningModal.tsx

@@ -40,7 +40,7 @@ export function NeckWarningModal({
         <div className="flex w-full flex-col flex-grow items-center gap-3">
           <Localized
             id="tracker_selection_menu-neck_warning"
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
           >
             <WarningBox>
               <b>Warning:</b> A neck tracker can be deadly if adjusted too

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -15,7 +15,7 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
   return !state.alonePage ? (
     <div className="onboarding-layout h-full">
       <div style={{ gridArea: 't' }}>
-        <TopBar progress={state.progress}></TopBar>
+        <TopBar progress={state.progress} />
       </div>
       <div style={{ gridArea: 'c' }} className="mt-2 relative">
         <div className="absolute top-12 mobile:top-0 right-2 z-50">
@@ -23,14 +23,14 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
             visible={true}
             modalVisible={showWarning}
             onClick={() => setShowWarning(true)}
-          ></SkipSetupButton>
+          />
         </div>
         <div className="h-full w-full overflow-y-auto">{children}</div>
         <SkipSetupWarningModal
           accept={skipSetup}
           onClose={() => setShowWarning(false)}
           isOpen={showWarning}
-        ></SkipSetupWarningModal>
+        />
       </div>
     </div>
   ) : (

gui/src/components/onboarding/SkipSetupButton.tsx

@@ -35,7 +35,7 @@ export function SkipSetupButton({
       onClick={onClick}
     >
       <div className="flex flex-col justify-center items-center">
-        <EscapeIcon size={42}></EscapeIcon>
+        <EscapeIcon size={42} />
         <p className="text-standard">ESC</p>
       </div>
     </button>

gui/src/components/onboarding/SkipSetupWarningModal.tsx

@@ -40,7 +40,7 @@ export function SkipSetupWarningModal({
     >
       <div className="flex w-full h-full flex-col ">
         <div className="flex flex-col flex-grow items-center gap-3">
-          <Localized id="onboarding-setup_warning" elems={{ b: <b></b> }}>
+          <Localized id="onboarding-setup_warning" elems={{ b: <b /> }}>
             <WarningBox>
               <b>Warning:</b> The setup is needed for good tracking, this is
               required if this is your first time using SlimeVR.

gui/src/components/onboarding/StepperSlider.tsx

@@ -83,9 +83,7 @@ export function StepDot({
       )}
       onClick={onClick}
     >
-      {active && (
-        <div className="flex h-2 w-2 rounded-full bg-background-10"></div>
-      )}
+      {active && <div className="flex h-2 w-2 rounded-full bg-background-10" />}
       {done && <CheckIcon />}
     </div>
   );
@@ -183,7 +181,7 @@ export function StepperSlider({
         {Array.from({ length: steps.length }).map((_, index) => (
           <div key={index} className="flex items-center gap-2">
             {index !== 0 && (
-              <div className="w-5 h-1 bg-background-50 rounded-full"></div>
+              <div className="w-5 h-1 bg-background-50 rounded-full" />
             )}
             <StepDot
               active={index === step}

gui/src/components/onboarding/pages/CalibrationTutorial.tsx

@@ -130,18 +130,18 @@ export function CalibrationTutorialPage() {
               </div>
               <Localized
                 id="onboarding-calibration_tutorial-description-v1"
-                elems={{ b: <b></b> }}
+                elems={{ b: <b /> }}
               >
                 <Typography>Description on calibration of IMU</Typography>
               </Localized>
               <div>
                 <div className="xs:hidden flex flex-row justify-center">
                   <div className="stroke-none fill-background-10 ">
-                    <TaybolIcon width="220"></TaybolIcon>
+                    <TaybolIcon width="220" />
                   </div>
                 </div>
                 <div className="flex justify-center">
-                  <LoaderIcon slimeState={slimeStatus}></LoaderIcon>
+                  <LoaderIcon slimeState={slimeStatus} />
                 </div>
                 <ProgressBar
                   progress={
@@ -155,7 +155,7 @@ export function CalibrationTutorialPage() {
                   height={14}
                   animated={true}
                   colorClass={progressBarClass}
-                ></ProgressBar>
+                />
               </div>
               <div className="flex justify-center">
                 <Typography variant="section-title">{progressText}</Typography>
@@ -204,7 +204,7 @@ export function CalibrationTutorialPage() {
           </div>
           <div className="mobile:hidden flex self-center w-[32rem] mobile:absolute">
             <div className="stroke-none xs:fill-background-10 mobile:fill-background-50 mobile:blur-sm">
-              <TaybolIcon width="450"></TaybolIcon>
+              <TaybolIcon width="450" />
             </div>
           </div>
         </div>

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -189,21 +189,21 @@ export function ConnectTrackersPage() {
       >
         <div className="flex flex-col items-center gap-2 ">
           <Localized id={(errorLabelMap as any)[provisioningStatus]}>
-            <Typography variant="main-title"></Typography>
+            <Typography variant="main-title" />
           </Localized>
           <Localized id={`${(errorLabelMap as any)[provisioningStatus]}-desc`}>
             <Typography
               variant="standard"
               whitespace="whitespace-pre-wrap"
               block
-            ></Typography>
+            />
           </Localized>
           <video
             src={CONNECT_TRACKER}
             loop
             autoPlay
             className="w-full aspect-video rounded-md mt-2"
-          ></video>
+          />
           <div className="flex gap-3 pt-5 justify-end w-full">
             <Button
               variant="tertiary"
@@ -239,7 +239,7 @@ export function ConnectTrackersPage() {
           </div>
           <Localized
             id={currentTip}
-            elems={{ em: <em className="italic"></em>, b: <b></b> }}
+            elems={{ em: <em className="italic" />, b: <b /> }}
           >
             <TipBox>Conditional tip</TipBox>
           </Localized>
@@ -251,7 +251,7 @@ export function ConnectTrackersPage() {
                 vars={parseStatusToLocale(status, connectedIMUTrackers, l10n)}
                 elems={{
                   PublicFixLink: (
-                    <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public"></A>
+                    <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public" />
                   ),
                 }}
               >
@@ -274,7 +274,7 @@ export function ConnectTrackersPage() {
                 'right-5 bottom-8'
               )}
             >
-              <LoaderIcon slimeState={slimeStatus}></LoaderIcon>
+              <LoaderIcon slimeState={slimeStatus} />
             </div>
 
             <div className="flex flex-col grow self-center">
@@ -291,7 +291,7 @@ export function ConnectTrackersPage() {
                 height={14}
                 animated={true}
                 colorClass={progressBarClass}
-              ></ProgressBar>
+              />
             </div>
           </div>
           <div className="flex flex-row mt-4 gap-3">
@@ -339,14 +339,14 @@ export function ConnectTrackersPage() {
                       'rounded-xl h-16 animate-pulse',
                       state.alonePage ? 'bg-background-80' : 'bg-background-70'
                     )}
-                  ></div>
+                  />
                 )}
                 {tracker && (
                   <TrackerCard
                     tracker={tracker.tracker}
                     device={tracker.device}
                     smol
-                  ></TrackerCard>
+                  />
                 )}
               </div>
             ))}

gui/src/components/onboarding/pages/ConnectionLost.tsx

@@ -30,21 +30,21 @@ function Error({ title, desc }: { title: string; desc: string }) {
 
   return (
     <>
-      <LoaderIcon slimeState={SlimeState.SAD} size={200}></LoaderIcon>
+      <LoaderIcon slimeState={SlimeState.SAD} size={200} />
       <div>
         <Localized id={title}>
-          <Typography variant="main-title"></Typography>
+          <Typography variant="main-title" />
         </Localized>
         <Localized id={desc}>
-          <Typography variant="standard"></Typography>
+          <Typography variant="standard" />
         </Localized>
         {isTauri && (
           <div className="flex gap-2 justify-center mt-4">
             <Localized id="websocket-error-close">
-              <Button variant="primary" onClick={closeApp}></Button>
+              <Button variant="primary" onClick={closeApp} />
             </Localized>
             <Localized id="websocket-error-logs">
-              <Button variant="secondary" onClick={openLogsFolder}></Button>
+              <Button variant="secondary" onClick={openLogsFolder} />
             </Localized>
           </div>
         )}
@@ -65,10 +65,10 @@ export function ConnectionLost() {
         <div className="flex flex-col items-center gap-4 -mt-12">
           {isLoading && (
             <>
-              <LoaderIcon slimeState={SlimeState.JUMPY} size={200}></LoaderIcon>
+              <LoaderIcon slimeState={SlimeState.JUMPY} size={200} />
               <div>
                 <Localized id="websocket-connecting">
-                  <Typography variant="main-title"></Typography>
+                  <Typography variant="main-title" />
                 </Localized>
               </div>
             </>
@@ -77,13 +77,10 @@ export function ConnectionLost() {
             <Error
               title="websocket-connection_lost"
               desc="websocket-connection_lost-desc"
-            ></Error>
+            />
           )}
           {isTimedOut && (
-            <Error
-              title="websocket-timedout"
-              desc="websocket-timedout-desc"
-            ></Error>
+            <Error title="websocket-timedout" desc="websocket-timedout-desc" />
           )}
         </div>
       </div>

gui/src/components/onboarding/pages/Done.tsx

@@ -15,7 +15,7 @@ export function DonePage() {
   return (
     <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
       <div className="flex flex-col gap-5 items-center z-10">
-        <SlimeVRIcon></SlimeVRIcon>
+        <SlimeVRIcon />
         <Typography variant="main-title">
           {l10n.getString('onboarding-done-title')}
         </Typography>

gui/src/components/onboarding/pages/Home.tsx

@@ -15,7 +15,7 @@ export function HomePage() {
     <>
       <div className="flex relative flex-col gap-5 h-full items-center w-full justify-center px-4 overflow-clip">
         <div className="flex flex-col gap-5 items-center z-10 scale-150 mb-20">
-          <SlimeVRIcon></SlimeVRIcon>
+          <SlimeVRIcon />
           <Typography variant="mobile-title">
             {l10n.getString('onboarding-home')}
           </Typography>
@@ -33,7 +33,7 @@ export function HomePage() {
             height: '300vw',
             width: '300vw',
           }}
-        ></div>
+        />
         <img
           className="absolute"
           src="/images/slime-girl.webp"

gui/src/components/onboarding/pages/ResetTutorial.tsx

@@ -39,9 +39,7 @@ export function ResetTutorialPage() {
         )
         .sort(
           (a, b) =>
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             TORSO_PARTS.indexOf(a.tracker.info!.bodyPart)! -
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             TORSO_PARTS.indexOf(b.tracker.info!.bodyPart)!
         ),
     [assignedTrackers]
@@ -55,9 +53,7 @@ export function ResetTutorialPage() {
         )
         .sort(
           (a, b) =>
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             RIGHT_LEG_PARTS.indexOf(a.tracker.info!.bodyPart)! -
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             RIGHT_LEG_PARTS.indexOf(b.tracker.info!.bodyPart)!
         ),
     [assignedTrackers]
@@ -71,9 +67,7 @@ export function ResetTutorialPage() {
         )
         .sort(
           (a, b) =>
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             LEFT_LEG_PARTS.indexOf(a.tracker.info!.bodyPart)! -
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             LEFT_LEG_PARTS.indexOf(b.tracker.info!.bodyPart)!
         ),
     [assignedTrackers]
@@ -177,7 +171,7 @@ export function ResetTutorialPage() {
             width={isMobile ? 160 : undefined}
             trackers={[order[curIndex]]}
             hideUnassigned={true}
-          ></BodyDisplay>
+          />
           <div
             className={classNames(
               'self-center w-72 md-max:hidden',

gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx

@@ -37,7 +37,7 @@ export function AssignmentTutorialPage() {
                   </Typography>
                 </div>
                 <div className="stroke-background-10 fill-background-10 flex justify-center">
-                  <StickerSlime width="65%"></StickerSlime>
+                  <StickerSlime width="65%" />
                 </div>
               </div>
               <div className="flex flex-col gap-10 xs:w-1/4">
@@ -49,7 +49,7 @@ export function AssignmentTutorialPage() {
                   </Typography>
                 </div>
                 <div className="fill-background-10 stroke-background-10 flex justify-center">
-                  <TrackerArrow width="75%"></TrackerArrow>
+                  <TrackerArrow width="75%" />
                 </div>
                 <div>
                   <Typography variant="section-title">
@@ -59,7 +59,7 @@ export function AssignmentTutorialPage() {
                   </Typography>
                 </div>
                 <div className="fill-background-10 stroke-background-10 flex justify-center">
-                  <ExtensionArrow width="75%"></ExtensionArrow>
+                  <ExtensionArrow width="75%" />
                 </div>
               </div>
             </div>

gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx

@@ -53,7 +53,7 @@ export function AutomaticProportionsPage() {
                   { type: 'numbered', component: VerifyResultsStep },
                   { type: 'fullsize', component: DoneStep },
                 ]}
-              ></StepperSlider>
+              />
             </div>
           </div>
         </div>

gui/src/components/onboarding/pages/body-proportions/BodyProportions.tsx

@@ -141,7 +141,7 @@ function ProportionItem({
                   <Typography
                     variant="standard"
                     whitespace="whitespace-pre-wrap"
-                  ></Typography>
+                  />
                 </Localized>
               }
               preferedDirection="bottom"
@@ -228,11 +228,7 @@ function ProportionItem({
             )}
             onClick={toggleOpen}
           >
-            {open ? (
-              <ArrowUpIcon size={50}></ArrowUpIcon>
-            ) : (
-              <ArrowDownIcon size={50}></ArrowDownIcon>
-            )}
+            {open ? <ArrowUpIcon size={50} /> : <ArrowDownIcon size={50} />}
           </div>
         )}
       </div>
@@ -252,7 +248,7 @@ function ProportionItem({
                 precise={precise}
                 part={part}
                 onBoneChange={onBoneChange}
-              ></ProportionItem>
+              />
             ))}
           </div>
         </div>
@@ -285,7 +281,7 @@ export function BodyProportions({
               part={part}
               precise={precise}
               onBoneChange={changeBoneValue}
-            ></ProportionItem>
+            />
           ))}
         </div>
       </div>

gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx

@@ -216,7 +216,7 @@ function ImportExportButtons() {
     <>
       <div className="flex">
         <IconButton
-          icon={<UploadFileIcon width={25}></UploadFileIcon>}
+          icon={<UploadFileIcon width={25} />}
           onClick={onImport}
           className={classNames(
             'transition-colors',
@@ -225,13 +225,13 @@ function ImportExportButtons() {
           )}
         >
           <Localized id="onboarding-manual_proportions-import">
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </IconButton>
       </div>
       <div className="flex">
         <IconButton
-          icon={<ImportIcon size={25}></ImportIcon>}
+          icon={<ImportIcon size={25} />}
           onClick={() => {
             exporting.current = true;
 
@@ -242,7 +242,7 @@ function ImportExportButtons() {
           }}
         >
           <Localized id="onboarding-manual_proportions-export">
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </IconButton>
       </div>
@@ -264,26 +264,26 @@ function LinearRatioToggle({ control }: { control: ManualProportionControls }) {
         <>
           {value ? (
             <IconButton
-              icon={<PercentIcon size={25}></PercentIcon>}
+              icon={<PercentIcon size={25} />}
               onClick={() => onChange(!value)}
             >
               <Localized id="onboarding-manual_proportions-grouped_proportions">
-                <Typography variant="standard"></Typography>
+                <Typography variant="standard" />
               </Localized>
             </IconButton>
           ) : (
             <IconButton
-              icon={<RulerIcon width={25}></RulerIcon>}
+              icon={<RulerIcon width={25} />}
               onClick={() => onChange(!value)}
             >
               <Localized id="onboarding-manual_proportions-all_proportions">
-                <Typography variant="standard"></Typography>
+                <Typography variant="standard" />
               </Localized>
             </IconButton>
           )}
         </>
       )}
-    ></Controller>
+    />
   );
 }
 
@@ -300,7 +300,7 @@ function PreciseToggle({ control }: { control: ManualProportionControls }) {
               onClick={() => onChange(!value)}
             >
               <Localized id="onboarding-manual_proportions-normal_increment">
-                <Typography variant="standard"></Typography>
+                <Typography variant="standard" />
               </Localized>
             </IconButton>
           ) : (
@@ -309,13 +309,13 @@ function PreciseToggle({ control }: { control: ManualProportionControls }) {
               onClick={() => onChange(!value)}
             >
               <Localized id="onboarding-manual_proportions-precise_increment">
-                <Typography variant="standard"></Typography>
+                <Typography variant="standard" />
               </Localized>
             </IconButton>
           )}
         </>
       )}
-    ></Controller>
+    />
   );
 }
 
@@ -347,18 +347,18 @@ function ButtonsControl({ control }: { control: ManualProportionControls }) {
   return (
     <div className="bg-background-60 rounded-md flex gap-2">
       <div className="flex">
-        <LinearRatioToggle control={control}></LinearRatioToggle>
+        <LinearRatioToggle control={control} />
       </div>
       <div className="flex">
-        <PreciseToggle control={control}></PreciseToggle>
+        <PreciseToggle control={control} />
       </div>
       <div className="flex">
         <IconButton
-          icon={<FullResetIcon width={20}></FullResetIcon>}
+          icon={<FullResetIcon width={20} />}
           onClick={() => setShowWarning(true)}
         >
           <Localized id="reset-reset_all">
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </IconButton>
       </div>
@@ -373,11 +373,11 @@ function ButtonsControl({ control }: { control: ManualProportionControls }) {
                   : 'onboarding-manual_proportions-fine_tuning_button'
               }
             >
-              <Typography variant="standard"></Typography>
+              <Typography variant="standard" />
             </Localized>
           }
           disabled={!canUseFineTuning}
-          icon={<HumanIcon width={20}></HumanIcon>}
+          icon={<HumanIcon width={20} />}
           onClick={() =>
             nav('/onboarding/body-proportions/auto', {
               state: { alonePage: state.alonePage },
@@ -385,12 +385,12 @@ function ButtonsControl({ control }: { control: ManualProportionControls }) {
           }
         >
           <Localized id={'onboarding-manual_proportions-fine_tuning_button'}>
-            <Typography variant="standard"></Typography>
+            <Typography variant="standard" />
           </Localized>
         </IconButton>
       </div>
-      <div className="flex flex-grow"></div>
-      <ImportExportButtons></ImportExportButtons>
+      <div className="flex flex-grow" />
+      <ImportExportButtons />
       <ProportionsResetModal
         accept={() => {
           resetAll();
@@ -398,7 +398,7 @@ function ButtonsControl({ control }: { control: ManualProportionControls }) {
         }}
         onClose={() => setShowWarning(false)}
         isOpen={showWarning}
-      ></ProportionsResetModal>
+      />
     </div>
   );
 }
@@ -445,13 +445,13 @@ export function ManualProportionsPage() {
     <>
       <div className="flex w-full h-full gap-2 bg-background-70 p-2">
         <div className="flex flex-col flex-grow gap-2">
-          <ButtonsControl control={control}></ButtonsControl>
+          <ButtonsControl control={control} />
           <div className="bg-background-60 h-20 rounded-md flex-grow overflow-y-auto">
             <BodyProportions
               precise={precise ?? defaultValues.precise}
               type={ratio ? 'ratio' : 'linear'}
               variant={state.alonePage ? 'alone' : 'onboarding'}
-            ></BodyProportions>
+            />
           </div>
         </div>
         <div className="rounded-md overflow-clip w-1/3 bg-background-60 hidden mobile:hidden sm:flex relative">
@@ -479,13 +479,13 @@ export function ManualProportionsPage() {
                 type={ResetType.Full}
                 size="small"
                 className="w-full h-full bg-background-50 hover:bg-background-40 text-background-10"
-              ></ResetButton>
+              />
             </div>
             <Tooltip
               preferedDirection="bottom"
               content={
                 <Localized id="onboarding-manual_proportions-estimated_height">
-                  <Typography></Typography>
+                  <Typography />
                 </Localized>
               }
             >

gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx

@@ -58,7 +58,7 @@ export function ProportionsResetModal({
                 ? 'reset-reset_all_warning_default-v2'
                 : 'reset-reset_all_warning-v2'
             }
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
           >
             <WarningBox>
               <b>Warning:</b> This will reset your proportions to being just

gui/src/components/onboarding/pages/body-proportions/ScaledProportions.tsx

@@ -62,22 +62,22 @@ export function ScaledProportionsPage() {
             <WarningBox>
               <Localized
                 id="onboarding-scaled_proportions-manual_height-warning"
-                elems={{ b: <b></b> }}
+                elems={{ b: <b /> }}
               >
                 <Typography
                   whitespace="whitespace-pre-line"
                   color="text-background-60"
-                ></Typography>
+                />
               </Localized>
               <ul className="list-disc ml-8">
                 {!hasHmd && (
                   <Localized id="onboarding-scaled_proportions-manual_height-warning-no_hmd">
-                    <li></li>
+                    <li />
                   </Localized>
                 )}
                 {!hasHandControllers && (
                   <Localized id="onboarding-scaled_proportions-manual_height-warning-no_controllers">
-                    <li></li>
+                    <li />
                   </Localized>
                 )}
               </ul>
@@ -101,7 +101,7 @@ export function ScaledProportionsPage() {
                     ]
               }
               back={() => navigate('/onboarding/reset-tutorial', { state })}
-            ></StepperSlider>
+            />
           </div>
           {state.alonePage && (
             <div className="flex justify-end">
@@ -110,7 +110,7 @@ export function ScaledProportionsPage() {
                   to="/onboarding/body-proportions/manual"
                   variant="secondary"
                   state={{ alonePage: state.alonePage }}
-                ></Button>
+                />
               </Localized>
             </div>
           )}

gui/src/components/onboarding/pages/body-proportions/autobone-steps/AutoboneErrorModal.tsx

@@ -36,13 +36,13 @@ export function AutoboneErrorModal({
           <Localized
             id="onboarding-automatic_proportions-error_modal-v2"
             elems={{
-              b: <b></b>,
+              b: <b />,
               docs: (
                 <A
                   href={`${DOCS_SITE}/server/body-config.html#common-issues--debugging`}
-                ></A>
+                />
               ),
-              discord: <A href={SLIMEVR_DISCORD}></A>,
+              discord: <A href={SLIMEVR_DISCORD} />,
             }}
           >
             <WarningBox>

gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckFloorHeight.tsx

@@ -79,7 +79,7 @@ export function CheckFloorHeightStep({
               </Typography>
               <Localized
                 id="onboarding-automatic_proportions-check_floor_height-calculation_warning-v2"
-                elems={{ u: <span className="underline"></span> }}
+                elems={{ u: <span className="underline" /> }}
               >
                 <Typography bold>
                   Press the button to get your height!

gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx

@@ -67,7 +67,7 @@ export function CheckHeightStep({
               </Typography>
               <Localized
                 id="onboarding-automatic_proportions-check_height-calculation_warning-v3"
-                elems={{ u: <span className="underline"></span> }}
+                elems={{ u: <span className="underline" /> }}
               >
                 <Typography bold>
                   Press the button to get your height!

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx

@@ -26,19 +26,19 @@ export function PreparationStep({
           </Typography>
           <div>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-0">
-              <Typography></Typography>
+              <Typography />
             </Localized>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-1">
-              <Typography></Typography>
+              <Typography />
             </Localized>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-2">
-              <Typography></Typography>
+              <Typography />
             </Localized>
           </div>
         </div>
         <div className="grid grid-cols-3 py-4 gap-2">
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success" />
             <img
               src="/images/reset/FullResetPose.webp"
               className="h-full object-contain"
@@ -46,7 +46,7 @@ export function PreparationStep({
             />
           </div>
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success" />
             <img
               src="/images/reset/FullResetPoseSide.webp"
               className="h-full object-contain"
@@ -54,7 +54,7 @@ export function PreparationStep({
             />
           </div>
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CrossIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-critical"></CrossIcon>
+            <CrossIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-critical" />
             <img
               src="/images/reset/FullResetPoseWrong.webp"
               className="h-full object-contain"
@@ -73,7 +73,7 @@ export function PreparationStep({
             size="small"
             type={ResetType.Full}
             onReseted={nextStep}
-          ></ResetButton>
+          />
         </div>
       </div>
     </div>

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx

@@ -81,11 +81,11 @@ export function Recording({
           setModalOpen(false);
           resetSteps();
         }}
-      ></AutoboneErrorModal>
+      />
       <div className="flex flex-col items-center w-full justify-between">
         <div className="flex gap-1 flex-col justify-center items-center">
           <div className="flex text-status-critical justify-center items-center gap-1">
-            <div className="w-2 h-2 rounded-lg bg-status-critical"></div>
+            <div className="w-2 h-2 rounded-lg bg-status-critical" />
             <Typography color="text-status-critical">
               {l10n.getString(
                 'onboarding-automatic_proportions-recording-title'
@@ -136,7 +136,7 @@ export function Recording({
                 () => 'bg-status-success'
               )
               .otherwise(() => undefined)}
-          ></ProgressBar>
+          />
           <Typography>
             {match([hasCalibration, hasRecording])
               .returnType<ReactNode>()
@@ -160,7 +160,7 @@ export function Recording({
           className="absolute w-[100px] h-[100px] top-0 bottom-0 left-0 right-0 m-auto fill-background-20"
           hidden={!paused}
         >
-          <PlayCircleIcon width={100}></PlayCircleIcon>
+          <PlayCircleIcon width={100} />
         </div>
 
         <video
@@ -173,7 +173,7 @@ export function Recording({
           playsInline
           controls={false}
           poster="/images/autobone-poster.webp"
-        ></video>
+        />
       </button>
     </div>
   );

gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx

@@ -93,7 +93,7 @@ export function StartRecording({
               className="absolute w-[100px] h-[100px] top-0 bottom-0 left-0 right-0 m-auto fill-background-20"
               hidden={!paused}
             >
-              <PlayCircleIcon width={100}></PlayCircleIcon>
+              <PlayCircleIcon width={100} />
             </div>
 
             <video
@@ -106,7 +106,7 @@ export function StartRecording({
               playsInline
               controls={false}
               poster="/images/autobone-poster.webp"
-            ></video>
+            />
           </button>
         </div>
 

gui/src/components/onboarding/pages/body-proportions/autobone-steps/TooSmolModal.tsx

@@ -48,7 +48,7 @@ export function TooSmolModal({
         <div className="flex flex-col flex-grow items-center gap-3">
           <Localized
             id="onboarding-automatic_proportions-smol_warning"
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
             vars={{
               height: mFormat.format((hmdHeight ?? 0) - (floorHeight ?? 0)),
               minHeight: mFormat.format(MIN_HEIGHT),

gui/src/components/onboarding/pages/mounting/AutomaticMounting.tsx

@@ -41,7 +41,7 @@ export function AutomaticMountingPage() {
             <StepperSlider
               variant={state.alonePage ? 'alone' : 'onboarding'}
               steps={steps}
-            ></StepperSlider>
+            />
           </div>
         </div>
       </div>

gui/src/components/onboarding/pages/mounting/ManualMounting.tsx

@@ -92,7 +92,7 @@ export function ManualMountingPage() {
         isOpen={selectedRole !== BodyPart.NONE}
         onClose={() => setSelectRole(BodyPart.NONE)}
         onDirectionSelected={onDirectionSelected}
-      ></MountingSelectionMenu>
+      />
       <div className="flex flex-col gap-5 h-full items-center w-full xs:justify-center relative overflow-y-auto">
         <div className="flex xs:flex-row mobile:flex-col h-full px-8 xs:w-full xs:justify-center mobile:px-4 items-center">
           <div className="flex flex-col w-full xs:max-w-sm gap-3">
@@ -125,7 +125,7 @@ export function ManualMountingPage() {
               onlyAssigned={true}
               assignMode={AssignMode.All}
               onRoleSelected={setSelectRole}
-            ></BodyAssignment>
+            />
           </div>
         </div>
       </div>

gui/src/components/onboarding/pages/mounting/MountingChoose.tsx

@@ -90,7 +90,7 @@ export function MountingChoose() {
                         'absolute w-[100px] -right-2 -top-10',
                         animated && 'animate-[bounce_1s_1]'
                       )}
-                    ></img>
+                    />
                     <Typography variant="main-title" bold>
                       {l10n.getString(
                         'onboarding-choose_mounting-manual_mounting'
@@ -134,7 +134,7 @@ export function MountingChoose() {
         accept={skipSetup}
         onClose={() => setShowWarning(false)}
         isOpen={showWarning}
-      ></SkipSetupWarningModal>
+      />
     </>
   );
 }

gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx

@@ -23,171 +23,131 @@ export const mapPart: Record<
     currentLocales: string[];
   }) => JSX.Element
 > = {
-  [BodyPart.UPPER_CHEST]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.CHEST]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.HEAD]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.HIP]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.LEFT_HIP]: ({ width }) => <FootIcon width={width}></FootIcon>, // Unused
-  [BodyPart.RIGHT_HIP]: ({ width }) => <FootIcon width={width}></FootIcon>, // Unused
+  [BodyPart.UPPER_CHEST]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.CHEST]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.HEAD]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.HIP]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.LEFT_HIP]: ({ width }) => <FootIcon width={width} />, // Unused
+  [BodyPart.RIGHT_HIP]: ({ width }) => <FootIcon width={width} />, // Unused
   [BodyPart.LEFT_FOOT]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width}></FootIcon>
+      <FootIcon width={width} />
     ),
-  [BodyPart.LEFT_HAND]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.LEFT_LOWER_ARM]: ({ width }) => <FootIcon width={width}></FootIcon>,
+  [BodyPart.LEFT_HAND]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.LEFT_LOWER_ARM]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.LEFT_LOWER_LEG]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width}></FootIcon>
+      <FootIcon width={width} />
     ),
-  [BodyPart.LEFT_SHOULDER]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.LEFT_UPPER_ARM]: ({ width }) => <FootIcon width={width}></FootIcon>,
+  [BodyPart.LEFT_SHOULDER]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.LEFT_UPPER_ARM]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.LEFT_UPPER_LEG]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width}></FootIcon>
+      <FootIcon width={width} />
     ),
-  [BodyPart.NECK]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.NONE]: ({ width }) => <FootIcon width={width}></FootIcon>,
+  [BodyPart.NECK]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.NONE]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.RIGHT_FOOT]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width} flipped></FootIcon>
+      <FootIcon width={width} flipped />
     ),
-  [BodyPart.RIGHT_HAND]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.RIGHT_LOWER_ARM]: ({ width }) => (
-    <FootIcon width={width}></FootIcon>
-  ),
+  [BodyPart.RIGHT_HAND]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.RIGHT_LOWER_ARM]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.RIGHT_LOWER_LEG]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width} flipped></FootIcon>
+      <FootIcon width={width} flipped />
     ),
-  [BodyPart.RIGHT_SHOULDER]: ({ width }) => <FootIcon width={width}></FootIcon>,
-  [BodyPart.RIGHT_UPPER_ARM]: ({ width }) => (
-    <FootIcon width={width}></FootIcon>
-  ),
+  [BodyPart.RIGHT_SHOULDER]: ({ width }) => <FootIcon width={width} />,
+  [BodyPart.RIGHT_UPPER_ARM]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.RIGHT_UPPER_LEG]: ({ width, currentLocales }) =>
     currentLocales.includes('en-x-owo') ? (
       <PawIcon
         width={width ? width * 0.75 : undefined}
         transform="translate(40, -50)"
-      ></PawIcon>
+      />
     ) : (
-      <FootIcon width={width} flipped></FootIcon>
+      <FootIcon width={width} flipped />
     ),
-  [BodyPart.WAIST]: ({ width }) => <FootIcon width={width}></FootIcon>,
+  [BodyPart.WAIST]: ({ width }) => <FootIcon width={width} />,
   [BodyPart.LEFT_THUMB_METACARPAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_THUMB_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_THUMB_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_INDEX_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_THUMB_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_THUMB_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_INDEX_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_INDEX_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_INDEX_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_MIDDLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_INDEX_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_MIDDLE_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_MIDDLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_MIDDLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_RING_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_MIDDLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_RING_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_RING_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_RING_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_LITTLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_RING_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_LITTLE_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.LEFT_LITTLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.LEFT_LITTLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.LEFT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_THUMB_METACARPAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_THUMB_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_THUMB_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_INDEX_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_THUMB_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_THUMB_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_INDEX_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_INDEX_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_INDEX_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_INDEX_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_MIDDLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_MIDDLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_MIDDLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_RING_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_MIDDLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.RIGHT_RING_PROXIMAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_RING_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_RING_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_RING_DISTAL]: ({ width }) => <FingersIcon width={width} />,
   [BodyPart.RIGHT_LITTLE_PROXIMAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_LITTLE_INTERMEDIATE]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
-  ),
-  [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => (
-    <FingersIcon width={width}></FingersIcon>
+    <FingersIcon width={width} />
   ),
+  [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
 };
 
 export function MountingBodyPartIcon({
@@ -235,7 +195,7 @@ function PieSliceOfFeet({
         )}
         transform="translate(125 125)"
         id={id}
-      ></path>
+      />
       <text dy="-5" strokeWidth="1">
         <textPath xlinkHref={`#${id}`} startOffset="50%" textAnchor="middle">
           {!noText ? l10n.getString(id) : ''}
@@ -250,7 +210,7 @@ function PieSliceOfFeet({
             : 'fill-none'
         )}
       >
-        <SlimeUpIcon width={trackerWidth}></SlimeUpIcon>
+        <SlimeUpIcon width={trackerWidth} />
       </g>
     </g>
   );
@@ -301,7 +261,7 @@ export function MountingSelectionMenu({
                 currRotation={currRotation}
                 id="tracker-rotation-left"
                 trackerTransform="translate(75, 0) scale(-1, 1)"
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0-89-44A99 99 0 0 1-44-89Z"
                 direction={rotationToQuatMap.FRONT_LEFT}
@@ -311,7 +271,7 @@ export function MountingSelectionMenu({
                 noText={true}
                 trackerTransform="translate(-2, 175) rotate(-135)"
                 trackerWidth={7}
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0-44-89A99 99 0 0 1 44-89Z"
                 direction={rotationToQuatMap.FRONT}
@@ -319,7 +279,7 @@ export function MountingSelectionMenu({
                 currRotation={currRotation}
                 id="tracker-rotation-front"
                 trackerTransform="translate(0, 75) rotate(-90)"
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0 44-89A99 99 0 0 1 89-44Z"
                 direction={rotationToQuatMap.FRONT_RIGHT}
@@ -329,7 +289,7 @@ export function MountingSelectionMenu({
                 noText={true}
                 trackerTransform="translate(73, 0) rotate(-45)"
                 trackerWidth={7}
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0 89-44A99 99 0 0 1 89 44Z"
                 direction={rotationToQuatMap.RIGHT}
@@ -337,7 +297,7 @@ export function MountingSelectionMenu({
                 currRotation={currRotation}
                 id="tracker-rotation-right"
                 trackerTransform="translate(175,0)"
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0 89 44A99 99 0 0 1 44 89Z"
                 direction={rotationToQuatMap.BACK_RIGHT}
@@ -347,7 +307,7 @@ export function MountingSelectionMenu({
                 noText={true}
                 trackerTransform="translate(252, 75) rotate(45)"
                 trackerWidth={7}
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0 44 89A99 99 0 0 1-44 89Z"
                 direction={rotationToQuatMap.BACK}
@@ -355,7 +315,7 @@ export function MountingSelectionMenu({
                 currRotation={currRotation}
                 id="tracker-rotation-back"
                 trackerTransform="translate(250, 175) rotate(90)"
-              ></PieSliceOfFeet>
+              />
               <PieSliceOfFeet
                 d="M0 0-44 89A99 99 0 0 1-89 44Z"
                 direction={rotationToQuatMap.BACK_LEFT}
@@ -365,7 +325,7 @@ export function MountingSelectionMenu({
                 noText={true}
                 trackerTransform="translate(177, 250) rotate(135)"
                 trackerWidth={7}
-              ></PieSliceOfFeet>
+              />
             </g>
           </svg>
         </div>

gui/src/components/onboarding/pages/mounting/mounting-steps/MountingReset.tsx

@@ -61,7 +61,7 @@ export function MountingResetStep({
             size="small"
             type={ResetType.Mounting}
             onReseted={nextStep}
-          ></ResetButton>
+          />
         </div>
       </div>
       {!isMobile && (

gui/src/components/onboarding/pages/mounting/mounting-steps/Preparation.tsx

@@ -26,19 +26,19 @@ export function PreparationStep({
           </Typography>
           <div>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-0">
-              <Typography></Typography>
+              <Typography />
             </Localized>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-1">
-              <Typography></Typography>
+              <Typography />
             </Localized>
             <Localized id="onboarding-automatic_mounting-preparation-v2-step-2">
-              <Typography></Typography>
+              <Typography />
             </Localized>
           </div>
         </div>
         <div className="grid grid-cols-3 py-4 gap-2">
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success" />
             <img
               src="/images/reset/FullResetPose.webp"
               className="h-full object-contain"
@@ -46,7 +46,7 @@ export function PreparationStep({
             />
           </div>
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+            <CheckIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-success" />
             <img
               src="/images/reset/FullResetPoseSide.webp"
               className="h-full object-contain"
@@ -54,7 +54,7 @@ export function PreparationStep({
             />
           </div>
           <div className="flex flex-col bg-background-70 rounded-md relative max-h-64">
-            <CrossIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-critical"></CrossIcon>
+            <CrossIcon className="md:w-14 sm:w-8 w-6 h-auto absolute top-2 right-2 fill-status-critical" />
             <img
               src="/images/reset/FullResetPoseWrong.webp"
               className="h-full object-contain"
@@ -73,7 +73,7 @@ export function PreparationStep({
             size="small"
             type={ResetType.Full}
             onReseted={nextStep}
-          ></ResetButton>
+          />
         </div>
       </div>
     </div>

gui/src/components/onboarding/pages/stay-aligned/StayAlignedSetup.tsx

@@ -189,7 +189,7 @@ export function StayAlignedSetup() {
                 component: DoneStep,
               },
             ]}
-          ></VerticalStepper>
+          />
         </div>
       </div>
       <div className="bg-background-70 rounded-md xs:max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg w-full mobile:h-[30%]">
@@ -222,7 +222,7 @@ export function StayAlignedSetup() {
               },
             });
           }}
-        ></SkeletonVisualizerWidget>
+        />
       </div>
     </div>
   );

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/Done.tsx

@@ -8,22 +8,22 @@ export function DoneStep({ goTo }: VerticalStepComponentProps) {
     <div className="flex flex-col items-center w-full justify-center gap-5 py-2">
       <div className="flex gap-1 flex-col justify-center items-center pt-10">
         <Localized id="onboarding-stay_aligned-done-description">
-          <Typography variant="main-title"></Typography>
+          <Typography variant="main-title" />
         </Localized>
         <Localized id="onboarding-stay_aligned-done-description-2">
-          <Typography></Typography>
+          <Typography />
         </Localized>
       </div>
       <div className="flex gap-3 justify-between">
         <Localized id="onboarding-stay_aligned-restart">
-          <Button variant={'secondary'} onClick={() => goTo('start')}></Button>
+          <Button variant={'secondary'} onClick={() => goTo('start')} />
         </Localized>
         <Localized id="onboarding-stay_aligned-done">
           <Button
             variant="primary"
             to="/settings/trackers"
             state={{ scrollTo: 'stayaligned' }}
-          ></Button>
+          />
         </Localized>
       </div>
     </div>

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/PreparationStep.tsx

@@ -16,13 +16,13 @@ export function PreparationStep({
     <div className="flex flex-col flex-grow justify-between py-2 gap-2">
       <div className="flex flex-col gap-1">
         <Localized id="onboarding-automatic_mounting-preparation-v2-step-0">
-          <Typography></Typography>
+          <Typography />
         </Localized>
         <Localized id="onboarding-automatic_mounting-preparation-v2-step-1">
-          <Typography></Typography>
+          <Typography />
         </Localized>
         <Localized id="onboarding-automatic_mounting-preparation-v2-step-2">
-          <Typography></Typography>
+          <Typography />
         </Localized>
       </div>
       <Localized id="onboarding-stay_aligned-preparation-tip">
@@ -30,18 +30,18 @@ export function PreparationStep({
       </Localized>
       <div className="grid grid-cols-3 py-4 gap-2">
         <div className="flex flex-col bg-background-60 rounded-md relative">
-          <CheckIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+          <CheckIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-success" />
           <img src="/images/reset/FullResetPose.webp" alt="Reset position" />
         </div>
         <div className="flex flex-col bg-background-60 rounded-md relative">
-          <CheckIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-success"></CheckIcon>
+          <CheckIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-success" />
           <img
             src="/images/reset/FullResetPoseSide.webp"
             alt="Reset position side"
           />
         </div>
         <div className="flex flex-col bg-background-60 rounded-md relative">
-          <CrossIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-critical"></CrossIcon>
+          <CrossIcon className="md:w-20 sm:w-10 w-6 h-auto absolute top-2 right-2 fill-status-critical" />
           <img
             src="/images/reset/FullResetPoseWrong.webp"
             alt="Reset position wrong"
@@ -50,14 +50,10 @@ export function PreparationStep({
       </div>
       <div className="flex gap-3 justify-between">
         <Localized id="onboarding-stay_aligned-previous_step">
-          <Button variant={'secondary'} onClick={prevStep}></Button>
+          <Button variant={'secondary'} onClick={prevStep} />
         </Localized>
 
-        <ResetButton
-          size="small"
-          type={ResetType.Full}
-          onReseted={nextStep}
-        ></ResetButton>
+        <ResetButton size="small" type={ResetType.Full} onReseted={nextStep} />
       </div>
     </div>
   );

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/PutTrackersOnStep.tsx

@@ -19,7 +19,7 @@ export function PutTrackersOnStep({ nextStep }: VerticalStepComponentProps) {
         <div className="flex flex-grow flex-col gap-4">
           <div>
             <Localized id="onboarding-stay_aligned-put_trackers_on-description">
-              <Typography></Typography>
+              <Typography />
             </Localized>
           </div>
           <div className="flex">
@@ -51,7 +51,7 @@ export function PutTrackersOnStep({ nextStep }: VerticalStepComponentProps) {
                 variant="primary"
                 onClick={nextStep}
                 disabled={!canContinue}
-              ></Button>
+              />
             </Localized>
           </div>
         </div>

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/VerifyMounting.tsx

@@ -25,7 +25,7 @@ export function VerifyMountingStep({
       </div>
       <div className="flex gap-3 justify-between">
         <Localized id="onboarding-stay_aligned-previous_step">
-          <Button variant="secondary" onClick={prevStep}></Button>
+          <Button variant="secondary" onClick={prevStep} />
         </Localized>
 
         <div className="flex gap-2">
@@ -34,10 +34,10 @@ export function VerifyMountingStep({
               variant={'secondary'}
               to="/onboarding/mounting/choose"
               state={{ alonePage: true }}
-            ></Button>
+            />
           </Localized>
           <Localized id="onboarding-stay_aligned-next_step">
-            <Button variant="primary" onClick={nextStep}></Button>
+            <Button variant="primary" onClick={nextStep} />
           </Localized>
         </div>
       </div>

gui/src/components/onboarding/pages/trackers-assign/TrackerAssignOptions.tsx

@@ -99,16 +99,13 @@ export function TrackerAssignOptions({
           ([mode, trackersCount]) => ({
             component: (
               <div className="flex flex-row gap-2 py-1 text-left">
-                <ItemContent
-                  mode={mode}
-                  trackersCount={trackersCount}
-                ></ItemContent>
+                <ItemContent mode={mode} trackersCount={trackersCount} />
               </div>
             ),
             value: mode,
           })
         )}
-      ></Dropdown>
+      />
     );
 
   return Object.entries(ASSIGN_MODE_OPTIONS).map(([mode, trackersCount]) => (
@@ -123,7 +120,7 @@ export function TrackerAssignOptions({
       className="hidden"
     >
       <div className="flex flex-row md:gap-4 gap-2">
-        <ItemContent mode={mode} trackersCount={trackersCount}></ItemContent>
+        <ItemContent mode={mode} trackersCount={trackersCount} />
       </div>
     </Radio>
   ));

gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx

@@ -268,7 +268,7 @@ export function TrackersAssignPage() {
         isOpen={selectedRole !== BodyPart.NONE}
         onClose={() => setSelectRole(BodyPart.NONE)}
         onTrackerSelected={onTrackerSelected}
-      ></TrackerSelectionMenu>
+      />
       <NeckWarningModal
         isOpen={shouldShowChokerWarn}
         overlayClassName={classNames(
@@ -276,7 +276,7 @@ export function TrackersAssignPage() {
         )}
         onClose={() => closeChokerWarning(true)}
         accept={() => closeChokerWarning(false)}
-      ></NeckWarningModal>
+      />
       <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
         <div className="flex flex-col w-full overflow-y-auto px-4 xs:items-center">
           <div className="flex mobile:flex-col md:gap-8 mobile:gap-4 mobile:pb-4">
@@ -314,7 +314,7 @@ export function TrackersAssignPage() {
                   )}
                   name="mirrorView"
                   variant="toggle"
-                ></CheckBox>
+                />
               </div>
               <div className="flex flex-row">
                 {!state.alonePage && (
@@ -349,7 +349,7 @@ export function TrackersAssignPage() {
                 assignMode={config?.assignMode ?? defaultConfig.assignMode}
                 mirror={mirrorView}
                 onRoleSelected={tryOpenChokerWarning}
-              ></BodyAssignment>
+              />
             </div>
           </div>
         </div>

gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx

@@ -70,7 +70,7 @@ export function TrackerSelectionMenu({
                           bodyPart ===
                           (fd.tracker.info?.bodyPart || BodyPart.NONE)
                         }
-                      ></TrackerCard>
+                      />
                     ))}
                   </div>
                 </>
@@ -90,7 +90,7 @@ export function TrackerSelectionMenu({
                     outlined={
                       bodyPart === (fd.tracker.info?.bodyPart || BodyPart.NONE)
                     }
-                  ></TrackerCard>
+                  />
                 ))}
               </div>
             </div>

gui/src/components/settings/HandsWarningModal.tsx

@@ -38,7 +38,7 @@ export function HandsWarningModal({
         <div className="flex w-full flex-col flex-grow items-center gap-3">
           <Localized
             id="settings-general-steamvr-trackers-hands-warning"
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
           >
             <WarningBox>
               <b>Warning:</b> Please don't use hands if you have controllers!

gui/src/components/settings/SettingsLayout.tsx

@@ -97,7 +97,7 @@ export function SettingSelectorMobile() {
         // There is always an option selected placholder is not used
         placeholder=""
         name="link"
-      ></Dropdown>
+      />
     </div>
   );
 }
@@ -108,19 +108,19 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
     <>
       <div className="settings-layout h-full">
         <div style={{ gridArea: 't' }}>
-          <TopBar></TopBar>
+          <TopBar />
         </div>
         <div style={{ gridArea: 'n' }}>
-          <Navbar></Navbar>
+          <Navbar />
         </div>
         <div style={{ gridArea: 's' }} className="my-2 mobile:hidden">
-          <SettingsSidebar></SettingsSidebar>
+          <SettingsSidebar />
         </div>
         <div
           style={{ gridArea: 'c' }}
           className="xs:pl-2 xs:pb-2 xs:mt-2 mobile:mt-7 overflow-y-auto"
         >
-          {isMobile && <SettingSelectorMobile></SettingSelectorMobile>}
+          {isMobile && <SettingSelectorMobile />}
           {children}
         </div>
       </div>

gui/src/components/settings/SettingsResetModal.tsx

@@ -42,7 +42,7 @@ export function SettingsResetModal({
         <div className="flex flex-col flex-grow items-center gap-3">
           <Localized
             id="settings-utils-advanced-reset_warning"
-            elems={{ b: <b></b> }}
+            elems={{ b: <b /> }}
             vars={{ type: variant }}
           >
             <WarningBox>