diff --git a/web/sdk/admin/views/admins/admins.module.css b/web/sdk/admin/views/admins/admins.module.css
index 36fa9c44b..ede03b8ea 100644
--- a/web/sdk/admin/views/admins/admins.module.css
+++ b/web/sdk/admin/views/admins/admins.module.css
@@ -10,3 +10,7 @@
background-color: var(--rs-color-background-base-primary);
border-bottom: 1px solid var(--rs-color-border-base-primary);
}
+
+.first-column {
+ padding-left: var(--rs-space-7);
+}
diff --git a/web/sdk/admin/views/admins/columns.tsx b/web/sdk/admin/views/admins/columns.tsx
index eb82a618a..cf51e61a4 100644
--- a/web/sdk/admin/views/admins/columns.tsx
+++ b/web/sdk/admin/views/admins/columns.tsx
@@ -1,6 +1,7 @@
import { Button, type DataTableColumnDef } from "@raystack/apsara-v1";
import type { ServiceUser, User } from "@raystack/proton/frontier";
import { TerminologyEntity } from "../../hooks/useTerminology";
+import styles from "./admins.module.css";
export const getColumns: (options?: {
onNavigateToOrg?: (orgId: string) => void;
@@ -15,6 +16,10 @@ export const getColumns: (options?: {
{
header: "Title",
accessorKey: "title",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterVariant: "text",
cell: (info) => info.getValue() || "-",
},
diff --git a/web/sdk/admin/views/invoices/columns.tsx b/web/sdk/admin/views/invoices/columns.tsx
index e7b409e45..bacfe2737 100644
--- a/web/sdk/admin/views/invoices/columns.tsx
+++ b/web/sdk/admin/views/invoices/columns.tsx
@@ -7,6 +7,7 @@ import {
timestampToDate,
} from "../../utils/connect-timestamp";
import { TerminologyEntity } from "../../hooks/useTerminology";
+import styles from "./invoices.module.css";
interface GetColumnsOptions {
t: {
@@ -22,6 +23,10 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
{
accessorKey: "createdAt",
header: "Billed on",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterType: "date",
enableColumnFilter: true,
cell: ({ getValue }) => {
@@ -68,7 +73,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
cell: ({ row, getValue }) => {
const link = getValue() as string;
return link ? (
-
+
Link
) : (
diff --git a/web/sdk/admin/views/invoices/invoices.module.css b/web/sdk/admin/views/invoices/invoices.module.css
index f2bc00e9a..ab889194c 100644
--- a/web/sdk/admin/views/invoices/invoices.module.css
+++ b/web/sdk/admin/views/invoices/invoices.module.css
@@ -31,8 +31,7 @@
z-index: 2;
}
-.table th:first-child,
-.table td:first-child {
+.first-column {
padding-left: var(--rs-space-7);
max-width: 200px;
}
diff --git a/web/sdk/admin/views/organizations/details/members/members.module.css b/web/sdk/admin/views/organizations/details/members/members.module.css
index 785814875..b74e1e389 100644
--- a/web/sdk/admin/views/organizations/details/members/members.module.css
+++ b/web/sdk/admin/views/organizations/details/members/members.module.css
@@ -32,5 +32,5 @@
}
.table-action-column {
- width: 32px;
+ width: var(--rs-space-12);
}
diff --git a/web/sdk/admin/views/organizations/details/projects/projects.module.css b/web/sdk/admin/views/organizations/details/projects/projects.module.css
index 8ea3bb652..98114a4f8 100644
--- a/web/sdk/admin/views/organizations/details/projects/projects.module.css
+++ b/web/sdk/admin/views/organizations/details/projects/projects.module.css
@@ -32,8 +32,7 @@
}
.table-action-column {
- width: 32px;
- padding: 0;
+ width: var(--rs-space-12);
}
.flex1 {
diff --git a/web/sdk/admin/views/plans/columns.tsx b/web/sdk/admin/views/plans/columns.tsx
index c32b040e6..b37606d57 100644
--- a/web/sdk/admin/views/plans/columns.tsx
+++ b/web/sdk/admin/views/plans/columns.tsx
@@ -1,6 +1,7 @@
import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
import type { Plan } from "@raystack/proton/frontier";
import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
+import styles from "./plans.module.css";
export const getColumns: (options?: {
onSelectPlan?: (planId: string) => void;
@@ -12,6 +13,10 @@ export const getColumns: (options?: {
{
header: "ID",
accessorKey: "id",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterVariant: "text",
cell: ({ getValue }) => {
const id = getValue() as string;
@@ -19,6 +24,7 @@ export const getColumns: (options?: {
onSelectPlan?.(id)}
+ data-test-id="frontier-admin-plan-link"
>
{id}
diff --git a/web/sdk/admin/views/plans/plans.module.css b/web/sdk/admin/views/plans/plans.module.css
index 74118f7a8..4e21774ec 100644
--- a/web/sdk/admin/views/plans/plans.module.css
+++ b/web/sdk/admin/views/plans/plans.module.css
@@ -14,6 +14,10 @@
border-bottom: 1px solid var(--rs-color-border-base-primary);
}
+.first-column {
+ padding-left: var(--rs-space-7);
+}
+
.sheetContent {
width: 400px;
padding: 0;
diff --git a/web/sdk/admin/views/preferences/columns.tsx b/web/sdk/admin/views/preferences/columns.tsx
index f195fb0cb..c824d7921 100644
--- a/web/sdk/admin/views/preferences/columns.tsx
+++ b/web/sdk/admin/views/preferences/columns.tsx
@@ -19,6 +19,10 @@ export const getColumns: (
{
header: "Title",
accessorKey: "title",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterVariant: "text",
cell: (info) => info.getValue(),
footer: (props) => props.column.id,
diff --git a/web/sdk/admin/views/preferences/preferences.module.css b/web/sdk/admin/views/preferences/preferences.module.css
index f16ad65e9..851f2c671 100644
--- a/web/sdk/admin/views/preferences/preferences.module.css
+++ b/web/sdk/admin/views/preferences/preferences.module.css
@@ -2,6 +2,10 @@
width: 100%;
}
+.first-column {
+ padding-left: var(--rs-space-7);
+}
+
.valueColumn {
max-width: 500px;
text-wrap: wrap;
diff --git a/web/sdk/admin/views/products/columns.tsx b/web/sdk/admin/views/products/columns.tsx
index 2e221235e..ad38fb8d6 100644
--- a/web/sdk/admin/views/products/columns.tsx
+++ b/web/sdk/admin/views/products/columns.tsx
@@ -1,6 +1,7 @@
import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara-v1";
import type { Product } from "@raystack/proton/frontier";
import { timestampToDate, TimeStamp } from "../../utils/connect-timestamp";
+import styles from "./products.module.css";
export const getColumns = (
onNavigateToPrices?: (productId: string) => void
@@ -9,6 +10,10 @@ export const getColumns = (
{
accessorKey: "id",
header: "",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
cell: (info) => {
return (
info.getValue(),
filterVariant: "text",
},
diff --git a/web/sdk/admin/views/products/prices/prices.module.css b/web/sdk/admin/views/products/prices/prices.module.css
new file mode 100644
index 000000000..e6642f020
--- /dev/null
+++ b/web/sdk/admin/views/products/prices/prices.module.css
@@ -0,0 +1,3 @@
+.first-column {
+ padding-left: var(--rs-space-7);
+}
diff --git a/web/sdk/admin/views/products/products.module.css b/web/sdk/admin/views/products/products.module.css
index cb60fab01..18ad72207 100644
--- a/web/sdk/admin/views/products/products.module.css
+++ b/web/sdk/admin/views/products/products.module.css
@@ -15,6 +15,11 @@
border-bottom: 1px solid var(--rs-color-border-base-primary);
}
+.first-column {
+ width: var(--rs-space-13);
+ padding-left: var(--rs-space-5);
+}
+
.sheetContent {
width: 400px;
padding: 0;
diff --git a/web/sdk/admin/views/roles/columns.tsx b/web/sdk/admin/views/roles/columns.tsx
index 5b546ef67..9cbf9047b 100644
--- a/web/sdk/admin/views/roles/columns.tsx
+++ b/web/sdk/admin/views/roles/columns.tsx
@@ -6,6 +6,10 @@ export const getColumns: () => DataTableColumnDef[] = () => {
{
accessorKey: "id",
header: "ID",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterVariant: "text",
cell: ({ getValue }) => getValue(),
},
diff --git a/web/sdk/admin/views/roles/roles.module.css b/web/sdk/admin/views/roles/roles.module.css
index be858b914..7058a4418 100644
--- a/web/sdk/admin/views/roles/roles.module.css
+++ b/web/sdk/admin/views/roles/roles.module.css
@@ -15,6 +15,10 @@
border-bottom: 1px solid var(--rs-color-border-base-primary);
}
+.first-column {
+ padding-left: var(--rs-space-7);
+}
+
.permissionsColumn {
max-width: 500px;
text-wrap: wrap;
diff --git a/web/sdk/admin/views/users/details/layout/side-panel.module.css b/web/sdk/admin/views/users/details/layout/side-panel.module.css
index 0b761446b..99f486c8b 100644
--- a/web/sdk/admin/views/users/details/layout/side-panel.module.css
+++ b/web/sdk/admin/views/users/details/layout/side-panel.module.css
@@ -1,6 +1,6 @@
.side-panel {
transform: all 0.3s ease-in-out;
- padding-bottom: 80px;
+ padding-bottom: var(--rs-space-15);
}
.side-panel-label {
diff --git a/web/sdk/admin/views/webhooks/webhooks/columns.tsx b/web/sdk/admin/views/webhooks/webhooks/columns.tsx
index da3e2e0b3..8e62552a7 100644
--- a/web/sdk/admin/views/webhooks/webhooks/columns.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/columns.tsx
@@ -30,6 +30,10 @@ export const getColumns: (
{
header: "Description",
accessorKey: "description",
+ classNames: {
+ cell: styles["first-column"],
+ header: styles["first-column"],
+ },
filterVariant: "text",
cell: (info) => info.getValue() || "-",
},
diff --git a/web/sdk/admin/views/webhooks/webhooks/webhooks.module.css b/web/sdk/admin/views/webhooks/webhooks/webhooks.module.css
index 9be22eb89..1f1a4f6b2 100644
--- a/web/sdk/admin/views/webhooks/webhooks/webhooks.module.css
+++ b/web/sdk/admin/views/webhooks/webhooks/webhooks.module.css
@@ -1,6 +1,7 @@
.tableRoot {
width: 100%;
}
+
.tableWrapper {
width: 100%;
}
@@ -9,6 +10,10 @@
table-layout: fixed;
}
+.first-column {
+ padding-left: var(--rs-space-7);
+}
+
.actionColumn {
width: 80px;
}
@@ -29,6 +34,6 @@
}
.deleteMenuItem {
- padding: 12px;
+ padding: var(--rs-space-4);
color: var(--rs-color-foreground-danger-primary);
-}
+}
\ No newline at end of file