Improve styling of buttons in toolbar & refactor CSS

CHANGELOG.unreleased.md

@@ -25,6 +25,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Improved the default colors for skeleton trees. [#8228](https://github.com/scalableminds/webknossos/pull/8228)
 - Allowed to train an AI model using differently sized bounding boxes. We recommend all bounding boxes to have equal dimensions or to have dimensions which are multiples of the smallest bounding box. [#8222](https://github.com/scalableminds/webknossos/pull/8222)
 - Within the bounding box tool, the cursor updates immediately after pressing `ctrl`, indicating that a bounding box can be moved instead of resized. [#8253](https://github.com/scalableminds/webknossos/pull/8253)
+- Improved the styling of active tools and modes in the toolbar. [#8295](https://github.com/scalableminds/webknossos/pull/8295)
 
 ### Fixed
 - Fixed that listing datasets with the `api/datasets` route without compression failed due to missing permissions regarding public datasets. [#8249](https://github.com/scalableminds/webknossos/pull/8249)

frontend/javascripts/components/fast_tooltip.tsx

@@ -32,7 +32,7 @@ import { Tooltip as ReactTooltip } from "react-tooltip";
 const ROOT_TOOLTIP_IDS = {
   DEFAULT: "main-tooltip",
   DYNAMIC: "main-tooltip-dynamic",
-};
+} as const;
 
 export type FastTooltipPlacement =
   | "top"

frontend/javascripts/navbar.tsx

@@ -983,16 +983,17 @@ function Navbar({
           paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
         }}
       />
-
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          marginRight: 12,
-        }}
-      >
-        {trailingNavItems}
-      </div>
+      <ConfigProvider theme={{ ...getAntdTheme("dark") }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginRight: 12,
+          }}
+        >
+          {trailingNavItems}
+        </div>
+      </ConfigProvider>
     </Header>
   );
 }