Reworked settings screens.

src/components/common/DataGrid.tsx

@@ -46,9 +46,9 @@ export function DataGrid({
   };
 
   return (
-    <>
+    <Column gap="4">
       {allowSearch && (hasData || search) && (
-        <Row width="280px" alignItems="center" marginBottom="6">
+        <Row width="280px" alignItems="center">
           <SearchField
             value={search}
             onSearch={handleSearch}
@@ -71,6 +71,6 @@ export function DataGrid({
           </Row>
         )}
       </LoadingPanel>
-    </>
+    </Column>
   );
 }

src/components/common/LinkButton.tsx

@@ -5,6 +5,7 @@ import { useLocale } from '@/components/hooks';
 
 export interface LinkButtonProps {
   href: string;
+  target?: string;
   scroll?: boolean;
   variant?: any;
   children?: ReactNode;
@@ -12,8 +13,9 @@ export interface LinkButtonProps {
 
 export function LinkButton({
   href,
-  variant = 'quiet',
+  variant,
   scroll = true,
+  target,
   children,
   ...props
 }: LinkButtonProps) {
@@ -21,7 +23,7 @@ export function LinkButton({
 
   return (
     <Button {...props} variant={variant} asChild>
-      <Link href={href} dir={dir} scroll={scroll}>
+      <Link href={href} dir={dir} scroll={scroll} target={target}>
         {children}
       </Link>
     </Button>

src/components/common/Page.module.css

@@ -1,10 +0,0 @@
-.page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  max-width: 1320px;
-  margin: 0 auto;
-  padding: 0 20px;
-}

src/components/common/PageHeader.module.css

@@ -1,48 +0,0 @@
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  align-content: center;
-  align-self: stretch;
-  flex-wrap: wrap;
-  height: 100px;
-}
-
-.header a {
-  color: var(--base600);
-}
-
-.header a:hover {
-  color: var(--base900);
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  font-size: 24px;
-  font-weight: 700;
-  gap: 20px;
-  height: 60px;
-  flex: 1;
-}
-
-.breadcrumb {
-  padding-top: 20px;
-}
-
-.icon {
-  color: var(--base700);
-  margin-inline-end: 1rem;
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-@media only screen and (max-width: 992px) {
-  .header {
-    margin-bottom: 10px;
-  }
-}

src/components/common/PageHeader.tsx

@@ -15,10 +15,10 @@ export function PageHeader({
   children?: ReactNode;
 }) {
   return (
-    <Row justifyContent="space-between" alignItems="center" marginY="6">
+    <Row justifyContent="space-between" alignItems="center" paddingY="6" border="bottom">
       <Row gap="3">
-        {icon && <Icon size="lg">{icon}</Icon>}
-        {title && <Heading size="2">{title}</Heading>}
+        {icon && <Icon>{icon}</Icon>}
+        {title && <Heading size="4">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}
       </Row>
       <Row justifyContent="flex-end">{children}</Row>

src/components/common/Pager.module.css

@@ -1,32 +0,0 @@
-.pager {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  align-items: center;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.text {
-  font-size: var(--font-size-md);
-  margin: 0 16px;
-  justify-content: center;
-}
-
-.count {
-  color: var(--base600);
-  font-weight: 700;
-}
-
-@media only screen and (max-width: 992px) {
-  .pager {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .nav {
-    justify-content: flex-end;
-  }
-}

src/components/common/SectionHeader.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Heading, Icon, Row, Text } from '@umami/react-zen';
+
+export function SectionHeader({
+  title,
+  description,
+  icon,
+  children,
+}: {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  allowEdit?: boolean;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <Row justifyContent="space-between" alignItems="center" height="60px">
+      <Row gap="3" alignItems="center">
+        {icon && <Icon>{icon}</Icon>}
+        {title && <Heading size="3">{title}</Heading>}
+        {description && <Text color="muted">{description}</Text>}
+      </Row>
+      <Row justifyContent="flex-end">{children}</Row>
+    </Row>
+  );
+}

src/components/common/SideBar.tsx

@@ -1,20 +0,0 @@
-import { Text, List, ListItem } from '@umami/react-zen';
-
-export interface MenuNavProps {
-  items: any[];
-  selectedKey?: string;
-}
-
-export function SideBar({ items, selectedKey }: MenuNavProps) {
-  return (
-    <List>
-      {items.map(({ key, label, url }) => {
-        return (
-          <ListItem key={key} href={url}>
-            <Text weight={key === selectedKey ? 'bold' : 'regular'}>{label}</Text>
-          </ListItem>
-        );
-      })}
-    </List>
-  );
-}

src/components/common/SideMenu.tsx

@@ -0,0 +1,20 @@
+import { Text, List, ListItem } from '@umami/react-zen';
+
+export interface MenuNavProps {
+  items: { id: string; label: string; url: string }[];
+  selectedKey?: string;
+}
+
+export function SideMenu({ items, selectedKey }: MenuNavProps) {
+  return (
+    <List>
+      {items.map(({ id, label, url }) => {
+        return (
+          <ListItem key={id} id={id} href={url}>
+            <Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}