separting styles to its own files

Lichtblick-Suite · Dec 13, 2024 · 9d2ae92 · 9d2ae92
1 parent 834a0a2
commit 9d2ae92
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 72 deletions.
diff --git a/packages/suite-base/src/components/ExtensionsSettings/Index.style.ts b/packages/suite-base/src/components/ExtensionsSettings/Index.style.ts
@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+import { makeStyles } from "tss-react/mui";
+
+export const useStyles = makeStyles()((theme) => ({
+  listItemButton: {
+    "&:hover": { color: theme.palette.primary.main },
+  },
+}));
diff --git a/packages/suite-base/src/components/ExtensionsSettings/index.tsx b/packages/suite-base/src/components/ExtensionsSettings/index.tsx
@@ -18,7 +18,6 @@ import {
 import * as _ from "lodash-es";
 import { useEffect, useMemo, useState } from "react";
 import { useAsyncFn } from "react-use";
-import { makeStyles } from "tss-react/mui";
 import { useDebounce } from "use-debounce";
 
 import Log from "@lichtblick/log";
@@ -32,13 +31,9 @@ import {
   useExtensionMarketplace,
 } from "@lichtblick/suite-base/context/ExtensionMarketplaceContext";
 
-const log = Log.getLogger(__filename);
+import { useStyles } from "./Index.style";
 
-const useStyles = makeStyles()((theme) => ({
-  listItemButton: {
-    "&:hover": { color: theme.palette.primary.main },
-  },
-}));
+const log = Log.getLogger(__filename);
 
 function displayNameForNamespace(namespace: string): string {
   switch (namespace) {

diff --git a/packages/suite-base/src/components/SearchBar.style.ts b/packages/suite-base/src/components/SearchBar.style.ts
@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+import { makeStyles } from "tss-react/mui";
+
+export const useStyles = makeStyles()((theme) => ({
+  filterStartAdornment: {
+    display: "flex",
+  },
+  filterBar: {
+    top: 0,
+    zIndex: theme.zIndex.appBar,
+    padding: theme.spacing(0.5),
+    position: "sticky",
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
diff --git a/packages/suite-base/src/components/SearchBar.tsx b/packages/suite-base/src/components/SearchBar.tsx
@@ -6,20 +6,8 @@ import SearchIcon from "@mui/icons-material/Search";
 import { IconButton, TextField, InputAdornment } from "@mui/material";
 import { TextFieldProps } from "@mui/material/TextField";
 import { PropsWithChildren } from "react";
-import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles()((theme) => ({
-  filterStartAdornment: {
-    display: "flex",
-  },
-  filterBar: {
-    top: 0,
-    zIndex: theme.zIndex.appBar,
-    padding: theme.spacing(0.5),
-    position: "sticky",
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
+import { useStyles } from "@lichtblick/suite-base/components/SearchBar.style";
 
 function SearchBar(
   props: PropsWithChildren<
@@ -46,35 +34,33 @@ function SearchBar(
   const { classes } = useStyles();
 
   return (
-    <>
-      <header className={classes.filterBar}>
-        <TextField
-          id={id}
-          variant={variant}
-          disabled={disabled}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          fullWidth
-          InputProps={{
-            ...rest.InputProps,
-            startAdornment: (
-              <InputAdornment className={classes.filterStartAdornment} position="start">
-                {startAdornment}
-              </InputAdornment>
-            ),
-            endAdornment: showClearIcon && (
-              <InputAdornment position="end">
-                <IconButton size="small" title="Clear" onClick={onClear} edge="end">
-                  <ClearIcon fontSize="small" />
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-          {...rest}
-        />
-      </header>
-    </>
+    <header className={classes.filterBar}>
+      <TextField
+        id={id}
+        variant={variant}
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        fullWidth
+        InputProps={{
+          ...rest.InputProps,
+          startAdornment: (
+            <InputAdornment className={classes.filterStartAdornment} position="start">
+              {startAdornment}
+            </InputAdornment>
+          ),
+          endAdornment: showClearIcon && (
+            <InputAdornment position="end">
+              <IconButton size="small" title="Clear" onClick={onClear} edge="end">
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        {...rest}
+      />
+    </header>
   );
 }
 

diff --git a/packages/suite-base/src/components/TopicList/TopicList.style.ts b/packages/suite-base/src/components/TopicList/TopicList.style.ts
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+import { makeStyles } from "tss-react/mui";
+
+export const useStyles = makeStyles()((theme) => ({
+  root: {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    containerType: "inline-size",
+  },
+  filterBar: {
+    top: 0,
+    zIndex: theme.zIndex.appBar,
+    padding: theme.spacing(0.5),
+    position: "sticky",
+    backgroundColor: theme.palette.background.paper,
+  },
+  skeletonText: {
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+  },
+}));
diff --git a/packages/suite-base/src/components/TopicList/TopicList.tsx b/packages/suite-base/src/components/TopicList/TopicList.tsx
@@ -12,7 +12,6 @@ import { useTranslation } from "react-i18next";
 import { useLatest } from "react-use";
 import { AutoSizer } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
-import { makeStyles } from "tss-react/mui";
 import { useDebounce } from "use-debounce";
 
 import { filterMap } from "@lichtblick/den/collection";
@@ -31,34 +30,13 @@ import { PlayerPresence } from "@lichtblick/suite-base/players/types";
 import { MessagePathSelectionProvider } from "@lichtblick/suite-base/services/messagePathDragging/MessagePathSelectionProvider";
 
 import { MessagePathRow } from "./MessagePathRow";
+import { useStyles } from "./TopicList.style";
 import { TopicRow } from "./TopicRow";
 import { useMultiSelection } from "./useMultiSelection";
 import { TopicListItem, useTopicListSearch } from "./useTopicListSearch";
 
 const selectPlayerPresence = ({ playerState }: MessagePipelineContext) => playerState.presence;
 
-const useStyles = makeStyles()((theme) => ({
-  root: {
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    containerType: "inline-size",
-  },
-  filterBar: {
-    top: 0,
-    zIndex: theme.zIndex.appBar,
-    padding: theme.spacing(0.5),
-    position: "sticky",
-    backgroundColor: theme.palette.background.paper,
-  },
-  skeletonText: {
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
-  },
-}));
-
 function getDraggedMessagePath(treeItem: TopicListItem): DraggedMessagePath {
   switch (treeItem.type) {
     case "topic":