chore(prevent): Repo token table polish (#97538)

This PR fixes some repo token table styling so it looks a little more
responsive. Will add a video on slack thread

Also uses some of the new sentry components rather than what I had prior

Closes
https://linear.app/getsentry/issue/CCMRG-1336/token-gen-page-polish

<!--

  Sentry employees and contractors can delete or ignore the following.

-->

### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

Author: ajay-sentry

static/app/views/codecov/tokens/repoTokenTable/repoTokenTable.tsx

@@ -1,4 +1,7 @@
-import GridEditable, {type GridColumnHeader} from 'sentry/components/tables/gridEditable';
+import GridEditable, {
+  COL_WIDTH_UNDEFINED,
+  type GridColumnHeader,
+} from 'sentry/components/tables/gridEditable';
 import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {renderTableBody} from 'sentry/views/codecov/tokens/repoTokenTable/tableBody';
@@ -9,7 +12,7 @@ type RepoTokenTableResponse = {
   token: string;
 };
 
-export type Row = Pick<RepoTokenTableResponse, 'name' | 'token'>;
+export type Row = RepoTokenTableResponse;
 export type Column = GridColumnHeader<'name' | 'token' | 'regenerateToken'>;
 
 type ValidField = (typeof SORTABLE_FIELDS)[number];
@@ -23,8 +26,8 @@ export type ValidSort = Sort & {
 };
 
 const COLUMNS_ORDER: Column[] = [
-  {key: 'name', name: t('Repository Name'), width: 400},
-  {key: 'token', name: t('Token'), width: 350},
+  {key: 'name', name: t('Repository Name'), width: COL_WIDTH_UNDEFINED},
+  {key: 'token', name: t('Token'), width: COL_WIDTH_UNDEFINED},
   {key: 'regenerateToken', name: '', width: 100},
 ];
 

static/app/views/codecov/tokens/tokens.tsx

@@ -4,10 +4,10 @@ import styled from '@emotion/styled';
 import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
 import {IntegratedOrgSelector} from 'sentry/components/codecov/integratedOrgSelector/integratedOrgSelector';
 import {integratedOrgIdToName} from 'sentry/components/codecov/integratedOrgSelector/utils';
-import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
+import {Flex} from 'sentry/components/core/layout/flex';
+import {Text} from 'sentry/components/core/text';
 import Pagination from 'sentry/components/pagination';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
+import {t, tct} from 'sentry/locale';
 import type {Integration} from 'sentry/types/integrations';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeSorts} from 'sentry/utils/queryString';
@@ -72,36 +72,30 @@ export default function TokensPage() {
   );
 
   return (
-    <LayoutGap>
-      <PageFilterBar condensed>
-        <IntegratedOrgSelector />
-      </PageFilterBar>
+    <Flex direction="column" gap="xl" maxWidth="1000px">
+      <IntegratedOrgSelector />
       <HeaderValue>{t('Repository tokens')}</HeaderValue>
-      <p>
-        {t('View the list of tokens created for your repositories in')}{' '}
-        <strong>{integratedOrgIdToName(integratedOrgId, integrations)}</strong>.{' '}
-        {t("Use them for uploading reports to all Sentry Prevent's features.")}
-      </p>
+      <Text>
+        {tct(
+          `View the list of tokens created for your repositories in [org]. Use them for uploading reports to all Sentry Prevent's features.`,
+          {
+            org: <Text bold>{integratedOrgIdToName(integratedOrgId, integrations)}</Text>,
+          }
+        )}
+      </Text>
       <RepoTokenTable response={response} sort={sorts[0]} />
       {/* We don't need to use the pageLinks prop because Codecov handles pagination using our own cursor implementation. But we need to
           put a dummy value here because otherwise the component wouldn't render. */}
       <StyledPagination pageLinks="showComponent" onCursor={handleCursor} />
-    </LayoutGap>
+    </Flex>
   );
 }
 
-const LayoutGap = styled('div')`
-  display: grid;
-  gap: ${space(1)};
-  max-width: 1000px;
-`;
-
 const HeaderValue = styled('div')`
-  margin-top: ${space(4)};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize['2xl']};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;
 
 const StyledPagination = styled(Pagination)`
-  margin-top: 0px;
+  margin: 0px;
 `;