fix(console): adjust styles on table (#476)

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -2,7 +2,7 @@
 
 .container {
   display: inline-block;
-  padding: _.unit(3);
+  padding: _.unit(2) _.unit(3);
   border-radius: _.unit(2);
   background: var(--color-inverse-on-surface);
   color: var(--color-on-secondary-container);

packages/console/src/components/ImagePlaceholder/index.tsx

@@ -10,12 +10,16 @@ type Props = {
   borderRadius?: number;
 };
 
-const ImagePlaceholder = ({ size = 50, borderRadius = 8 }: Props) => {
+const ImagePlaceholder = ({ size = 40, borderRadius = 8 }: Props) => {
   const { t } = useTranslation();
 
   return (
     <div className={styles.container} style={{ width: size, height: size, borderRadius }}>
-      <img alt={t('general.placeholder')} src={defaultPlaceholder} />
+      <img
+        alt={t('general.placeholder')}
+        src={defaultPlaceholder}
+        style={{ width: size, height: size }}
+      />
     </div>
   );
 };

packages/console/src/components/ItemPreview/index.module.scss

@@ -23,4 +23,15 @@
     font: var(--font-body-small);
     color: var(--color-outline);
   }
+
+  &.compact {
+    .content {
+      display: flex;
+      align-items: baseline;
+
+      .title {
+        margin-right: _.unit(1);
+      }
+    }
+  }
 }

packages/console/src/components/ItemPreview/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import { Link, To } from 'react-router-dom';
 
@@ -8,13 +9,14 @@ type Props = {
   subtitle?: string;
   icon?: ReactNode;
   to?: To;
+  size?: 'default' | 'compact';
 };
 
-const ItemPreview = ({ title, subtitle, icon, to }: Props) => {
+const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => {
   return (
-    <div className={styles.item}>
+    <div className={classNames(styles.item, styles[size])}>
       {icon && <div className={styles.icon}>{icon}</div>}
-      <div>
+      <div className={styles.content}>
         {to && (
           <Link
             className={styles.title}

packages/console/src/components/Table/ItemPreviewLoading.module.scss

@@ -3,12 +3,12 @@
 td > div.loading {
   display: flex;
   background: none;
-  height: 50px;
+  height: 40px;
   border-radius: unset;
 
   .avatar {
-    width: 50px;
+    width: 40px;
-    height: 50px;
+    height: 40px;
     border-radius: _.unit(2);
     margin-right: _.unit(4);
     background: var(--color-neutral-95);
@@ -20,14 +20,15 @@ td > div.loading {
     .title {
       background: var(--color-neutral-95);
       border-radius: _.unit(2);
-      height: 16px;
+      height: 14px;
-      margin: _.unit(2) 0;
+      margin: _.unit(1) 0;
     }
 
     .subTitle {
       background: var(--color-neutral-95);
       border-radius: _.unit(2);
       height: 12px;
+      margin-top: _.unit(2);
     }
   }
 }

packages/console/src/pages/ApiResources/index.module.scss

@@ -1,5 +1,9 @@
 @use '@/scss/underscore' as _;
 
+.card {
+  @include _.flex-column;
+}
+
 .headline {
   display: flex;
   justify-content: space-between;
@@ -7,18 +11,7 @@
 
 .table {
   margin-top: _.unit(4);
-
+  flex: 1;
-  tbody {
-    max-height: calc(100vh - _.unit(64));
-
-    tr.clickable {
-      cursor: pointer;
-
-      &:hover {
-        background: var(--color-table-row-selected);
-      }
-    }
-  }
 }
 
 .apiResourceName {

packages/console/src/pages/ApiResources/index.tsx

@@ -1,5 +1,6 @@
 import { Resource } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials/lib/utilities/conditional.js';
+import classNames from 'classnames';
 import React, { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,7 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
+import * as tableStyles from '@/scss/table.module.scss';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -32,7 +34,7 @@ const ApiResources = () => {
   const navigate = useNavigate();
 
   return (
-    <Card>
+    <Card className={styles.card}>
       <div className={styles.headline}>
         <CardTitle title="api_resources.title" subtitle="api_resources.subtitle" />
         <Button
@@ -62,55 +64,57 @@ const ApiResources = () => {
           />
         </Modal>
       </div>
-      <table className={styles.table}>
+      <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <colgroup>
+        <table>
-          <col className={styles.apiResourceName} />
+          <colgroup>
-          <col />
+            <col className={styles.apiResourceName} />
-        </colgroup>
+            <col />
-        <thead>
+          </colgroup>
-          <tr>
+          <thead>
-            <th>{t('api_resources.api_name')}</th>
+            <tr>
-            <th>{t('api_resources.api_identifier')}</th>
+              <th>{t('api_resources.api_name')}</th>
-          </tr>
+              <th>{t('api_resources.api_identifier')}</th>
-        </thead>
-        <tbody>
-          {error && (
-            <TableError
-              columns={2}
-              content={error.body.message}
-              onRetry={async () => mutate(undefined, true)}
-            />
-          )}
-          {isLoading && <TableLoading columns={2} />}
-          {data?.length === 0 && (
-            <TableEmpty columns={2}>
-              <Button
-                title="admin_console.api_resources.create"
-                type="outline"
-                onClick={() => {
-                  setIsCreateFormOpen(true);
-                }}
-              />
-            </TableEmpty>
-          )}
-          {data?.map(({ id, name, indicator }) => (
-            <tr
-              key={id}
-              className={styles.clickable}
-              onClick={() => {
-                navigate(buildDetailsLink(id));
-              }}
-            >
-              <td>
-                <ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} />
-              </td>
-              <td>
-                <CopyToClipboard value={indicator} />
-              </td>
             </tr>
-          ))}
+          </thead>
-        </tbody>
+          <tbody>
-      </table>
+            {error && (
+              <TableError
+                columns={2}
+                content={error.body.message}
+                onRetry={async () => mutate(undefined, true)}
+              />
+            )}
+            {isLoading && <TableLoading columns={2} />}
+            {data?.length === 0 && (
+              <TableEmpty columns={2}>
+                <Button
+                  title="admin_console.api_resources.create"
+                  type="outline"
+                  onClick={() => {
+                    setIsCreateFormOpen(true);
+                  }}
+                />
+              </TableEmpty>
+            )}
+            {data?.map(({ id, name, indicator }) => (
+              <tr
+                key={id}
+                className={tableStyles.clickable}
+                onClick={() => {
+                  navigate(buildDetailsLink(id));
+                }}
+              >
+                <td>
+                  <ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} />
+                </td>
+                <td>
+                  <CopyToClipboard value={indicator} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </Card>
   );
 };

packages/console/src/pages/Applications/index.module.scss

@@ -1,5 +1,9 @@
 @use '@/scss/underscore' as _;
 
+.card {
+  @include _.flex-column;
+}
+
 .headline {
   display: flex;
   justify-content: space-between;
@@ -7,18 +11,7 @@
 
 .table {
   margin-top: _.unit(4);
-
+  flex: 1;
-  tbody {
-    max-height: calc(100vh - _.unit(64));
-
-    tr.clickable {
-      cursor: pointer;
-
-      &:hover {
-        background: var(--color-table-row-selected);
-      }
-    }
-  }
 }
 
 .applicationName {

packages/console/src/pages/Applications/index.tsx

@@ -1,5 +1,6 @@
 import { Application } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials/lib/utilities/conditional.js';
+import classNames from 'classnames';
 import React, { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,7 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
+import * as tableStyles from '@/scss/table.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 
 import CreateForm from './components/CreateForm';
@@ -31,7 +33,7 @@ const Applications = () => {
   const navigate = useNavigate();
 
   return (
-    <Card>
+    <Card className={styles.card}>
       <div className={styles.headline}>
         <CardTitle title="applications.title" subtitle="applications.subtitle" />
         <Button
@@ -60,60 +62,62 @@ const Applications = () => {
           />
         </Modal>
       </div>
-      <table className={styles.table}>
+      <div className={classNames(styles.table, tableStyles.scrollable)}>
-        <colgroup>
+        <table>
-          <col className={styles.applicationName} />
+          <colgroup>
-          <col />
+            <col className={styles.applicationName} />
-        </colgroup>
+            <col />
-        <thead>
+          </colgroup>
-          <tr>
+          <thead>
-            <th>{t('applications.application_name')}</th>
+            <tr>
-            <th>{t('applications.client_id')}</th>
+              <th>{t('applications.application_name')}</th>
-          </tr>
+              <th>{t('applications.client_id')}</th>
-        </thead>
-        <tbody>
-          {error && (
-            <TableError
-              columns={2}
-              content={error.body.message}
-              onRetry={async () => mutate(undefined, true)}
-            />
-          )}
-          {isLoading && <TableLoading columns={2} />}
-          {data?.length === 0 && (
-            <TableEmpty columns={2}>
-              <Button
-                title="admin_console.applications.create"
-                type="outline"
-                onClick={() => {
-                  setIsCreateFormOpen(true);
-                }}
-              />
-            </TableEmpty>
-          )}
-          {data?.map(({ id, name, type }) => (
-            <tr
-              key={id}
-              className={styles.clickable}
-              onClick={() => {
-                navigate(`/applications/${id}`);
-              }}
-            >
-              <td>
-                <ItemPreview
-                  title={name}
-                  subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
-                  icon={<ImagePlaceholder />}
-                  to={`/applications/${id}`}
-                />
-              </td>
-              <td>
-                <CopyToClipboard value={id} />
-              </td>
             </tr>
-          ))}
+          </thead>
-        </tbody>
+          <tbody>
-      </table>
+            {error && (
+              <TableError
+                columns={2}
+                content={error.body.message}
+                onRetry={async () => mutate(undefined, true)}
+              />
+            )}
+            {isLoading && <TableLoading columns={2} />}
+            {data?.length === 0 && (
+              <TableEmpty columns={2}>
+                <Button
+                  title="admin_console.applications.create"
+                  type="outline"
+                  onClick={() => {
+                    setIsCreateFormOpen(true);
+                  }}
+                />
+              </TableEmpty>
+            )}
+            {data?.map(({ id, name, type }) => (
+              <tr
+                key={id}
+                className={tableStyles.clickable}
+                onClick={() => {
+                  navigate(`/applications/${id}`);
+                }}
+              >
+                <td>
+                  <ItemPreview
+                    title={name}
+                    subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
+                    icon={<ImagePlaceholder />}
+                    to={`/applications/${id}`}
+                  />
+                </td>
+                <td>
+                  <CopyToClipboard value={id} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </Card>
   );
 };

packages/console/src/pages/Connectors/index.module.scss

@@ -1,5 +1,9 @@
 @use '@/scss/underscore' as _;
 
+.card {
+  @include _.flex-column;
+}
+
 .headline {
   display: flex;
   justify-content: space-between;
@@ -11,18 +15,7 @@
 
 .table {
   margin-top: _.unit(4);
-
+  flex: 1;
-  tbody {
-    max-height: calc(100vh - _.unit(74));
-
-    tr.clickable {
-      cursor: pointer;
-
-      &:hover {
-        background: var(--color-table-row-selected);
-      }
-    }
-  }
 }
 
 .connectorName {

packages/console/src/pages/Connectors/index.tsx

@@ -1,4 +1,5 @@
 import { ConnectorDTO, ConnectorType } from '@logto/schemas';
+import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -12,6 +13,7 @@ import TableEmpty from '@/components/Table/TableEmpty';
 import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
+import * as tableStyles from '@/scss/table.module.scss';
 
 import ConnectorRow from './components/ConnectorRow';
 import SetupModal from './components/SetupModal';
@@ -49,7 +51,7 @@ const Connectors = () => {
 
   return (
     <>
-      <Card>
+      <Card className={styles.card}>
         <div className={styles.headline}>
           <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
           {isSocial && (
@@ -66,54 +68,60 @@ const Connectors = () => {
           <TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink>
           <TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
         </TabNav>
-        <table className={styles.table}>
+        <div className={classNames(styles.table, tableStyles.scrollable)}>
-          <colgroup>
+          <table>
-            <col className={styles.connectorName} />
+            <colgroup>
-            <col />
+              <col className={styles.connectorName} />
-            <col />
+              <col />
-          </colgroup>
+              <col />
-          <thead>
+            </colgroup>
-            <tr>
+            <thead>
-              <th>{t('connectors.connector_name')}</th>
+              <tr>
-              <th>{t('connectors.connector_type')}</th>
+                <th>{t('connectors.connector_name')}</th>
-              <th>{t('connectors.connector_status')}</th>
+                <th>{t('connectors.connector_type')}</th>
-            </tr>
+                <th>{t('connectors.connector_status')}</th>
-          </thead>
+              </tr>
-          <tbody>
+            </thead>
-            {error && (
+            <tbody>
-              <TableError
+              {error && (
-                columns={3}
+                <TableError
-                content={error.body.message}
+                  columns={3}
-                onRetry={async () => mutate(undefined, true)}
+                  content={error.body.message}
-              />
+                  onRetry={async () => mutate(undefined, true)}
-            )}
+                />
-            {isLoading && <TableLoading columns={3} />}
+              )}
-            {socialConnectors?.length === 0 && (
+              {isLoading && <TableLoading columns={3} />}
-              <TableEmpty
+              {socialConnectors?.length === 0 && (
-                columns={3}
+                <TableEmpty
-                title={t('connectors.type.social')}
+                  columns={3}
-                content={t('connectors.social_connector_eg')}
+                  title={t('connectors.type.social')}
-              >
+                  content={t('connectors.social_connector_eg')}
-                <Button title="admin_console.connectors.create" type="outline" />
+                >
-              </TableEmpty>
+                  <Button title="admin_console.connectors.create" type="outline" />
-            )}
+                </TableEmpty>
-            {!isLoading && !isSocial && (
+              )}
-              <ConnectorRow
+              {!isLoading && !isSocial && (
-                connector={emailConnector}
+                <ConnectorRow
-                type={ConnectorType.Email}
+                  connector={emailConnector}
-                onClickSetup={() => {
+                  type={ConnectorType.Email}
-                  setCreateType(ConnectorType.Email);
+                  onClickSetup={() => {
-                }}
+                    setCreateType(ConnectorType.Email);
-              />
+                  }}
-            )}
+                />
-            {!isLoading && !isSocial && (
+              )}
-              <ConnectorRow connector={smsConnector} type={ConnectorType.SMS} />
+              {!isLoading && !isSocial && (
-            )}
+                <ConnectorRow connector={smsConnector} type={ConnectorType.SMS} />
-            {socialConnectors?.map((connector) => (
+              )}
-              <ConnectorRow key={connector.id} connector={connector} type={ConnectorType.Social} />
+              {socialConnectors?.map((connector) => (
-            ))}
+                <ConnectorRow
-          </tbody>
+                  key={connector.id}
-        </table>
+                  connector={connector}
+                  type={ConnectorType.Social}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
       </Card>
       {data && (
         <SetupModal

packages/console/src/pages/Users/index.module.scss

@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .card {
-  display: flex;
+  @include _.flex-column;
-  flex-direction: column;
-  height: 100%;
 }
 
 .headline {
@@ -17,14 +15,6 @@
 
 .table {
   flex: 1;
-
-  tr.clickable {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--color-table-row-selected);
-    }
-  }
 }
 
 .pagination {

packages/console/src/pages/Users/index.tsx

@@ -107,7 +107,7 @@ const Users = () => {
             {users?.map(({ id, name, username }) => (
               <tr
                 key={id}
-                className={styles.clickable}
+                className={tableStyles.clickable}
                 onClick={() => {
                   navigate(`/users/${id}`);
                 }}
@@ -116,8 +116,9 @@ const Users = () => {
                   <ItemPreview
                     title={name ?? '-'}
                     subtitle={username ?? '-'}
-                    icon={<ImagePlaceholder />}
+                    icon={<ImagePlaceholder size={24} />}
                     to={`/users/${id}`}
+                    size="compact"
                   />
                 </td>
                 <td>Application</td>

packages/console/src/scss/_colors.scss

@@ -83,6 +83,7 @@
   --color-code-comment: #66bb6a;
   --color-surface-3: #e3dff5;
   --color-surface-5: #dfd9f5;
+  --shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
   --shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
 }
 

packages/console/src/scss/_underscore.scss

@@ -7,8 +7,8 @@
 @mixin flex-column {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  height: 100%;
 }
 
 @mixin text-ellipsis {

packages/console/src/scss/normalized.scss

@@ -30,30 +30,27 @@ table {
     th {
       font: var(--font-subhead-2);
       color: var(--color-component-caption);
-      padding: _.unit(3) _.unit(4);
+      padding: _.unit(2);
       border-bottom: 1px solid var(--color-neutral-90);
       text-align: left;
 
+      &:first-child,
+      &:last-child {
+        padding: _.unit(2) _.unit(8);
+      }
+    }
+  }
+
+  tbody {
+    td {
+      font: var(--font-body-medium);
+      border-bottom: 1px solid var(--color-neutral-90);
+      padding: _.unit(3) _.unit(2);
+
       &:first-child,
       &:last-child {
         padding: _.unit(3) _.unit(8);
       }
     }
   }
-
-  tbody {
-    td {
-      border-bottom: 1px solid var(--color-neutral-90);
-      padding: _.unit(5) _.unit(4);
-
-      &:first-child,
-      &:last-child {
-        padding: _.unit(5) _.unit(8);
-      }
-    }
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
 }

packages/console/src/scss/table.module.scss

@@ -1,13 +1,26 @@
 @use '@/scss/underscore' as _;
 
+.base {
+  box-shadow: var(--shadow-light-s1);
+}
+
+tr.clickable {
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-table-row-selected);
+  }
+}
+
 .scrollable {
-  margin-top: _.unit(4);
   overflow-y: auto;
   border: 1px solid var(--color-neutral-90);
   border-radius: _.unit(2);
+  box-shadow: var(--shadow-light-s1);
 
   table {
     border: none;
+    box-shadow: none;
 
     thead tr {
       position: sticky;