feat: improve consistency and design (#1867)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/ui/src/components/integration-avatar.tsx

@@ -1,4 +1,4 @@
-import type { MantineSize } from "@mantine/core";
+import type { MantineRadius, MantineSize } from "@mantine/core";
 import { Avatar } from "@mantine/core";
 
 import type { IntegrationKind } from "@homarr/definitions";
@@ -7,13 +7,14 @@ import { getIconUrl } from "@homarr/definitions";
 interface IntegrationAvatarProps {
   size: MantineSize;
   kind: IntegrationKind | null;
+  radius?: MantineRadius;
 }
 
-export const IntegrationAvatar = ({ kind, size }: IntegrationAvatarProps) => {
+export const IntegrationAvatar = ({ kind, size, radius }: IntegrationAvatarProps) => {
   const url = kind ? getIconUrl(kind) : null;
   if (!url) {
     return null;
   }
 
-  return <Avatar size={size} src={url} />;
+  return <Avatar size={size} src={url} radius={radius} styles={{ image: { objectFit: "contain" } }} />;
 };

packages/ui/src/components/search-input.tsx

@@ -10,9 +10,10 @@ import { IconSearch } from "@tabler/icons-react";
 interface SearchInputProps {
   defaultValue?: string;
   placeholder: string;
+  flexExpand?: boolean;
 }
 
-export const SearchInput = ({ placeholder, defaultValue }: SearchInputProps) => {
+export const SearchInput = ({ placeholder, defaultValue, flexExpand = false }: SearchInputProps) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { replace } = useRouter();
   const pathName = usePathname();
@@ -40,6 +41,7 @@ export const SearchInput = ({ placeholder, defaultValue }: SearchInputProps) =>
       defaultValue={defaultValue}
       onChange={handleSearch}
       placeholder={placeholder}
+      style={{ flex: flexExpand ? "1" : undefined }}
     />
   );
 };