deprecated: tokens and new token banner (supabase#31006)

* new token banner

* tokens banner

Author: Hallidayo

apps/studio/components/interfaces/Account/NewTokenBanner.tsx

@@ -1,28 +1,35 @@
 import { NewAccessToken } from 'data/access-tokens/access-tokens-create-mutation'
-import { Alert, Input } from 'ui'
+import { Input } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 interface NewTokenBannerProps {
   token: NewAccessToken
 }
 
 const NewTokenBanner = ({ token }: NewTokenBannerProps) => {
   return (
-    <Alert withIcon variant="success" title="Successfully generated a new token!">
-      <div className="w-full space-y-2">
-        <p className="text-sm">
-          Do copy this access token and store it in a secure place - you will not be able to see it
-          again.
-        </p>
-        <Input
-          copy
-          readOnly
-          size="small"
-          className="max-w-xl input-mono"
-          value={token.token}
-          onChange={() => {}}
-        />
-      </div>
-    </Alert>
+    <Admonition
+      type="default"
+      title="Successfully generated a new token!"
+      description={
+        <>
+          <div className="w-full space-y-2">
+            <p className="text-sm">
+              Do copy this access token and store it in a secure place - you will not be able to see
+              it again.
+            </p>
+            <Input
+              copy
+              readOnly
+              size="small"
+              className="max-w-xl input-mono"
+              value={token.token}
+              onChange={() => {}}
+            />
+          </div>
+        </>
+      }
+    />
   )
 }
 

apps/studio/pages/account/tokens.tsx

@@ -10,8 +10,9 @@ import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { NewAccessToken } from 'data/access-tokens/access-tokens-create-mutation'
 import type { NextPageWithLayout } from 'types'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
 import { ExternalLink } from 'lucide-react'
+import { Admonition } from 'ui-patterns'
 
 const UserAccessTokens: NextPageWithLayout = () => {
   const [newToken, setNewToken] = useState<NewAccessToken | undefined>()
@@ -50,11 +51,10 @@ const UserAccessTokens: NextPageWithLayout = () => {
         </div>
       </div>
       <div className="flex items-center justify-between">
-        <Alert
-          withIcon
-          className="mb-6 w-full"
-          variant="warning"
+        <Admonition
+          type="warning"
           title="Personal access tokens can be used to control your whole account and use features added in the future. Be careful when sharing them!"
+          className="mb-6 w-full"
         />
       </div>
       <div className="space-y-4">