From fef47b96eed323850fa7963ffc4e86f05e824f24 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Fri, 10 Feb 2023 23:37:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20static=20CSS=20class?=
=?UTF-8?q?=20names=20(#699)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Dashboard/Tiles/Apps/AppTile.tsx | 3 ++-
src/components/Dashboard/Tiles/HomarrCardWrapper.tsx | 2 +-
src/components/Dashboard/Wrappers/Category/Category.tsx | 4 ++--
src/components/layout/Layout.tsx | 1 +
src/components/layout/Logo.tsx | 2 ++
src/components/layout/header/Header.tsx | 8 ++++----
src/components/layout/header/Search.tsx | 5 +++--
7 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
index b11604187..1c9edd328 100644
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -33,9 +33,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
justify="space-around"
align="center"
style={{ height: '100%', width: '100%' }}
+ className="dashboard-tile-app"
>
-
+ <Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
{app.name}
diff --git a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
index 8958667fc..1a4211fdf 100644
--- a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
+++ b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
@@ -18,7 +18,7 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
return (
{
const { refs, apps, widgets } = useGridstack('category', category.id);
const isEditMode = useEditModeStore((x) => x.enabled);
const { config } = useConfigContext();
- const { classes: cardClasses } = useCardStyles(true);
+ const { classes: cardClasses, cx } = useCardStyles(true);
const categoryList = config?.categories.map((x) => x.name) ?? [];
const [toggledCategories, setToggledCategories] = useLocalStorage({
@@ -28,7 +28,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
return (
diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx
index a943f5866..b7d7536bd 100644
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -17,12 +17,14 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
width={size === 'md' ? 50 : 12}
src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'}
alt="Homarr Logo"
+ className="dashboard-header-logo-image"
/>
{withoutText ? null : (
{config?.settings.customization.pageTitle || 'Homarr'}
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 8955edf78..52c47bc17 100644
--- a/src/components/layout/header/Header.tsx
+++ b/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 (
-
+
-
+
-
+
diff --git a/src/components/layout/header/Search.tsx b/src/components/layout/header/Search.tsx
index 00d9bd38d..a4a1dc70a 100644
--- a/src/components/layout/header/Search.tsx
+++ b/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"