Fixed share page. Updated data tables to be responsive.

src/app/(main)/settings/teams/TeamsTable.js

@@ -3,16 +3,17 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
-import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
 export function TeamsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="owner" label={formatMessage(labels.owner)}>
         {row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

src/app/(main)/settings/users/UsersTable.js

@@ -1,4 +1,4 @@
-import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
@@ -9,22 +9,19 @@ import UserDeleteButton from './UserDeleteButton';
 export function UsersTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { dateLocale } = useLocale();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
-      <GridColumn
-        name="username"
-        label={formatMessage(labels.username)}
-        width={'minmax(200px, 2fr)'}
-      />
-      <GridColumn name="role" label={formatMessage(labels.role)}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
+      <GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
         {row =>
           formatMessage(
             labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
           )
         }
       </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)}>
+      <GridColumn name="created" label={formatMessage(labels.created)} width={'100px'}>
         {row =>
           formatDistance(new Date(row.createdAt), new Date(), {
             addSuffix: true,

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -6,7 +6,6 @@ import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import useCache from 'store/cache';
-import { useBreakpoint } from 'react-basics';
 
 export interface WebsitesDataTableProps {
   allowEdit?: boolean;
@@ -25,7 +24,7 @@ function useWebsites({ includeTeams, onlyTeams }) {
 
   return useFilterQuery(
     ['websites', { includeTeams, onlyTeams, modified }],
-    params => {
+    (params: any) => {
       return get(`/users/${user?.id}/websites`, {
         includeTeams,
         onlyTeams,
@@ -46,7 +45,6 @@ export function WebsitesDataTable({
   children,
 }: WebsitesDataTableProps) {
   const queryResult = useWebsites({ includeTeams, onlyTeams });
-  const breakpoint = useBreakpoint();
 
   return (
     <DataTable queryResult={queryResult}>
@@ -57,7 +55,6 @@ export function WebsitesDataTable({
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}
-          cardMode={['xs', 'sm', 'md'].includes(breakpoint)}
         >
           {children}
         </WebsitesTable>

src/app/(main)/settings/websites/WebsitesTable.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
@@ -9,14 +9,14 @@ export function WebsitesTable({
   showActions,
   allowEdit,
   allowView,
-  cardMode,
   children,
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data} cardMode={cardMode}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       {showTeam && (

src/app/share/[...id]/Footer.js

@@ -1,3 +1,4 @@
+'use client';
 import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
 import styles from './Footer.module.css';
 

src/app/share/[...id]/Footer.module.css

@@ -1,10 +1,10 @@
 .footer {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: flex-end;
   font-size: var(--font-size-sm);
-  line-height: 30px;
-  margin: 40px 0;
+  height: 100px;
 }
 
 .footer a {

src/app/share/[...id]/Header.js

@@ -1,3 +1,4 @@
+'use client';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';

src/app/share/[...id]/Header.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 100px;
 }
@@ -38,10 +39,3 @@
     min-width: 100%;
   }
 }
-
-@media only screen and (max-width: 768px) {
-  .buttons,
-  .links {
-    display: none;
-  }
-}

src/app/share/[...id]/Share.js

@@ -1,13 +1,25 @@
 'use client';
-import WebsiteDetails from '../../(main)/websites/[id]/WebsiteDetails';
+import WebsiteDetails from 'app/(main)/websites/[id]/WebsiteDetails';
 import useShareToken from 'components/hooks/useShareToken';
+import styles from './Share.module.css';
+import Page from 'components/layout/Page';
+import Header from './Header';
+import Footer from './Footer';
 
-export default function ({ shareId }) {
-  const shareToken = useShareToken(shareId);
+export default function Share({ shareId }) {
+  const { shareToken, isLoading } = useShareToken(shareId);
 
-  if (!shareToken) {
+  if (isLoading || !shareToken) {
     return null;
   }
 
-  return <WebsiteDetails websiteId={shareToken.websiteId} />;
+  return (
+    <div className={styles.container}>
+      <Page>
+        <Header />
+        <WebsiteDetails websiteId={shareToken.websiteId} />
+        <Footer />
+      </Page>
+    </div>
+  );
 }

src/app/share/[...id]/Share.module.css

@@ -0,0 +1,4 @@
+.container {
+  flex: 1;
+  min-height: calc(100vh - 200px);
+}

src/app/share/[...id]/page.tsx

@@ -1,5 +1,5 @@
 import Share from './Share';
 
 export default function ({ params: { id } }) {
-  return <Share shareId={id} />;
+  return <Share shareId={id[0]} />;
 }