Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-16 18:26:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Add static CSS class names (#699)

Browse Source
This commit is contained in:
Manuel
2023-02-10 23:37:08 +01:00
committed by GitHub
parent fab018a10e
commit fef47b96ee
7 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/layout/Layout.tsx
View File

@@ -19,6 +19,7 @@ export default function Layout({ children }: any) {
minHeight: 'calc(100vh - var(--mantine-header-height))',
},
}}
className="dashboard-app-shell"
>
<Head />
<Background />

2
src/components/layout/Logo.tsx
View File

@@ -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 : (
<Text
size={size === 'md' ? 22 : 10}
weight="bold"
variant="gradient"
className="dashboard-header-logo-text"
gradient={primaryGradient}
>
{config?.settings.customization.pageTitle || 'Homarr'}

8
src/components/layout/header/Header.tsx
View File

@@ -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 />

5
src/components/layout/header/Search.tsx
View File

@@ -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"