♻️ Add static CSS class names (#699)

src/components/layout/header/Header.tsx

@@ -13,7 +13,7 @@ export const HeaderHeight = 64;
 
 export function Header(props: any) {
   const { classes } = useStyles();
-  const { classes: cardClasses } = useCardStyles(false);
+  const { classes: cardClasses, cx } = useCardStyles(false);
   const { attributes } = usePackageAttributesStore();
 
   const { isLoading, error, data } = useQuery({
@@ -27,12 +27,12 @@ export function Header(props: any) {
     data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
 
   return (
-    <MantineHeader height="auto" className={cardClasses.card}>
+    <MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}>
       <Group p="xs" noWrap grow>
-        <Box className={classes.hide}>
+        <Box className={cx(classes.hide, 'dashboard-header-logo-root')}>
           <Logo />
         </Box>
-        <Group position="right" style={{ maxWidth: 'none' }} noWrap>
+        <Group className="dashboard-header-group-right" position="right" style={{ maxWidth: 'none' }} noWrap>
           <Search />
           <ToggleEditModeAction />
           <DockerMenuButton />

src/components/layout/header/Search.tsx

@@ -57,7 +57,7 @@ export function Search() {
   const { config } = useConfigContext();
   const [searchQuery, setSearchQuery] = useState('');
   const [debounced] = useDebouncedValue(searchQuery, 250);
-  const { classes: cardClasses } = useCardStyles(true);
+  const { classes: cardClasses, cx } = useCardStyles(true);
 
   const isOverseerrEnabled = config?.apps.some(
     (x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
@@ -216,7 +216,8 @@ export function Search() {
               }
             }}
             classNames={{
-              input: cardClasses.card,
+              input: cx(cardClasses.card, 'dashboard-header-search-input'),
+              root: 'dashboard-header-search-root',
             }}
             radius="lg"
             size="md"