fix: IAM Design fixes

web/sdk/react/views-new/billing/billing-view.tsx

@@ -158,7 +158,6 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
 
   return (
     <ViewContainer>
-      <ViewHeader title="Billing" description={description} />
 
       {hasNoAccess ? (
         <EmptyState
@@ -169,6 +168,7 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
         />
       ) : (
         <>
+          <ViewHeader title="Billing" description={description} />
           <Flex direction="column" gap={7}>
             <PaymentIssue
               isLoading={isLoading}

web/sdk/react/views-new/pat/components/pat-created-dialog.tsx

@@ -56,7 +56,12 @@ export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) {
                   }
                   data-test-id="frontier-sdk-pat-token-input"
                 />
-                <Callout type="attention" icon={<ExclamationTriangleIcon />} width="100%">
+                <Callout
+                  type="attention"
+                  outline
+                  icon={<ExclamationTriangleIcon />}
+                  width="100%"
+                >
                   Warning: Make sure you copy the above token now. This token
                   will only be shown once. Store it securely.
                 </Callout>

web/sdk/react/views-new/pat/pat-view.tsx

@@ -154,10 +154,12 @@ export function PatsView({ onPATClick }: PatsViewProps = {}) {
 
   return (
     <ViewContainer>
-      <ViewHeader
-        title="Personal access token"
-        description={`Manage personal access tokens to securely access ${t.appName()} resources and APIs.`}
-      />
+      {!hasNoPats && (
+        <ViewHeader
+          title="Personal access token"
+          description={`Manage personal access tokens to securely access ${t.appName()} resources and APIs.`}
+        />
+      )}
 
       {isInitialLoading ? (
         <Flex direction="column" gap={7}>

web/sdk/react/views-new/plans/plans-view.tsx

@@ -149,7 +149,6 @@ export function PlansView() {
   if (plans.length === 0) {
     return (
       <ViewContainer>
-        <ViewHeader title="Plans" description="View and manage your subscription plan." />
         <EmptyState
           variant="empty2"
           icon={<ExclamationTriangleIcon />}

web/sdk/react/views-new/projects/projects-view.tsx

@@ -142,7 +142,6 @@ export function ProjectsView({
   if (hasNoProjects) {
     return (
       <ViewContainer>
-        <ViewHeader title={title} description={description ?? `Manage projects for this ${t.organization({ case: 'lower' })}`} />
         <EmptyState
           variant="empty2"
           classNames={{

web/sdk/react/views-new/security/security-view.module.css

@@ -3,6 +3,10 @@
   border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
+.section:last-child {
+  border-bottom: none;
+}
+
 .sectionHeader {
   flex: 1;
 }

web/sdk/react/views-new/service-accounts/service-accounts-view.tsx

@@ -140,22 +140,11 @@ export function ServiceAccountsView({
 
   return (
     <ViewContainer>
-      <ViewHeader
-        title="Service accounts"
-        description={`Create and manage service accounts for secure, automated access to ${t.appName()}.`}
-      />
 
       {hasNoAccess ? (
         <EmptyState
           variant="empty2"
-          icon={
-            <Image
-              src={exclamationTriangleIcon as unknown as string}
-              alt=""
-              width={40}
-              height={40}
-            />
-          }
+          icon={<ExclamationTriangleIcon />}
           heading="Restricted Access"
           subHeading="Admin access required, please reach out to your admin incase you want to generate a key."
         />
@@ -185,66 +174,72 @@ export function ServiceAccountsView({
           }
         />
       ) : (
-        <DataTable
-          data={serviceUsers}
-          columns={columns}
-          isLoading={isLoading}
-          defaultSort={{ name: 'createdAt', order: 'desc' }}
-          mode="client"
-          onRowClick={row => onServiceAccountClick?.(row.id)}
-        >
-          <Flex direction="column" gap={7}>
-            <Flex justify="between" gap={3}>
-              <Flex gap={3} align="center">
+        <>
+          <ViewHeader
+            title="Service accounts"
+            description={`Create and manage service accounts for secure, automated access to ${t.appName()}.`}
+          />
+          <DataTable
+            data={serviceUsers}
+            columns={columns}
+            isLoading={isLoading}
+            defaultSort={{ name: 'createdAt', order: 'desc' }}
+            mode="client"
+            onRowClick={row => onServiceAccountClick?.(row.id)}
+          >
+            <Flex direction="column" gap={7}>
+              <Flex justify="between" gap={3}>
+                <Flex gap={3} align="center">
+                  {isLoading ? (
+                    <Skeleton height="34px" width="360px" />
+                  ) : (
+                    <DataTable.Search
+                      placeholder="Search by name."
+                      size="large"
+                      width={360}
+                    />
+                  )}
+                </Flex>
                 {isLoading ? (
-                  <Skeleton height="34px" width="360px" />
+                  <Skeleton height="34px" width="160px" />
                 ) : (
-                  <DataTable.Search
-                    placeholder="Search by name."
-                    size="large"
-                    width={360}
-                  />
+                  <Tooltip>
+                    <Tooltip.Trigger
+                      disabled={canUpdateWorkspace}
+                      render={<span />}
+                    >
+                      <Button
+                        variant="solid"
+                        color="accent"
+                        onClick={() => addDialogHandle.open(null)}
+                        disabled={!canUpdateWorkspace}
+                        data-test-id="frontier-sdk-add-service-account-btn"
+                      >
+                        Add service account
+                      </Button>
+                    </Tooltip.Trigger>
+                    {!canUpdateWorkspace && (
+                      <Tooltip.Content>{AuthTooltipMessage}</Tooltip.Content>
+                    )}
+                  </Tooltip>
                 )}
               </Flex>
-              {isLoading ? (
-                <Skeleton height="34px" width="160px" />
-              ) : (
-                <Tooltip>
-                  <Tooltip.Trigger
-                    disabled={canUpdateWorkspace}
-                    render={<span />}
-                  >
-                    <Button
-                      variant="solid"
-                      color="accent"
-                      onClick={() => addDialogHandle.open(null)}
-                      disabled={!canUpdateWorkspace}
-                      data-test-id="frontier-sdk-add-service-account-btn"
-                    >
-                      Add service account
-                    </Button>
-                  </Tooltip.Trigger>
-                  {!canUpdateWorkspace && (
-                    <Tooltip.Content>{AuthTooltipMessage}</Tooltip.Content>
-                  )}
-                </Tooltip>
-              )}
+              <DataTable.Content
+                emptyState={
+                  <EmptyState
+                    icon={<ExclamationTriangleIcon />}
+                    heading="No service accounts found"
+                    subHeading="Try adjusting your search"
+                  />
+                }
+                classNames={{
+                  root: styles.tableRoot,
+                  table: styles.table
+                }}
+              />
             </Flex>
-            <DataTable.Content
-              emptyState={
-                <EmptyState
-                  icon={<ExclamationTriangleIcon />}
-                  heading="No service accounts found"
-                  subHeading="Try adjusting your search"
-                />
-              }
-              classNames={{
-                root: styles.tableRoot,
-                table: styles.table
-              }}
-            />
-          </Flex>
-        </DataTable>
+          </DataTable>
+        </>
       )}
 
       <Menu handle={serviceAccountMenuHandle} modal={false}>

web/sdk/react/views-new/teams/teams-view.tsx

@@ -138,13 +138,6 @@ export function TeamsView({
   if (hasNoTeams) {
     return (
       <ViewContainer>
-        <ViewHeader
-          title={title}
-          description={
-            description ??
-            `Manage teams in this ${t.organization({ case: 'lower' })}`
-          }
-        />
         <EmptyState
           variant="empty2"
           classNames={{