Panels redesign.

src/components/common/Avatar.tsx

@@ -17,5 +17,5 @@ export function Avatar({ seed, size = 128, ...props }: { seed: string; size?: nu
     }).toDataUri();
   }, []);
 
-  return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
+  return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%', width: size }} />;
 }

src/components/common/DataGrid.tsx

@@ -3,7 +3,6 @@ import { Loading, SearchField, Row, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Pager } from '@/components/common/Pager';
-import { Panel } from '@/components/layout/Panel';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PagedQueryResult } from '@/lib/types';
 
@@ -60,14 +59,12 @@ export function DataGrid({
         </Row>
       )}
       <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
-        <Panel>
-          <Column>
-            {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-            {isLoading && <Loading position="page" />}
-            {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
-            {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
-          </Column>
-        </Panel>
+        <Column>
+          {hasData ? (typeof children === 'function' ? children(result) : children) : null}
+          {isLoading && <Loading position="page" />}
+          {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
+          {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
+        </Column>
         {allowPaging && hasData && (
           <Row marginTop="6">
             <Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />

src/components/common/LinkButton.module.css

@@ -36,7 +36,7 @@
 
 .button.primary {
   color: var(--light50);
-  background: var(--primary400);
+  background: var(--primary-color);
 }
 
 .button.primary:hover {

src/components/common/TypeIcon.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Row } from '@umami/react-zen';
 
 export function TypeIcon({
   type,
@@ -10,7 +11,7 @@ export function TypeIcon({
   children?: ReactNode;
 }) {
   return (
-    <>
+    <Row gap="3" alignItems="center">
       <img
         src={`${process.env.basePath || ''}/images/${type}/${value
           ?.replaceAll(' ', '-')
@@ -23,6 +24,6 @@ export function TypeIcon({
         height={type === 'country' ? undefined : 16}
       />
       {children}
-    </>
+    </Row>
   );
 }