Chore/move dialog to patterns (#21688)

* update exampleps

* move text confirm modal

apps/storybook/stories/Header.jsx

@@ -24,12 +24,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
             />
           </g>
         </svg>
-        <h1>Acme</h1>
+        <h1 className="text-foreground">Acme</h1>
       </div>
       <div>
         {user ? (
           <>
-            <span className="welcome">
+            <span className="welcome text-foreground-light">
               Welcome, <b>{user.name}</b>!
             </span>
             <Button size="small" onClick={onLogout} label="Log out" />

apps/storybook/stories/Page.jsx

@@ -15,20 +15,20 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
       <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
+        <h2 className='text-foreground"'>Pages in Storybook</h2>
+        <p className="text-foreground">
           We recommend building UIs with a{' '}
           <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
-        <p>
+        <p className="text-foreground-light">
           Render pages with mock data. This makes it easy to build and review page states without
           needing to navigate to them in your app. Here are some handy patterns for managing page
           data in Storybook:
         </p>
-        <ul>
+        <ul className="text-foreground-light">
           <li>
             Use a higher-level connected component. Storybook helps you compose such data from the
             "args" of child component stories
@@ -38,7 +38,7 @@ export const Page = () => {
             using Storybook.
           </li>
         </ul>
-        <p>
+        <p className="text-foreground-light">
           Get a guided tutorial on component-driven development at{' '}
           <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
             Storybook tutorials
@@ -49,7 +49,7 @@ export const Page = () => {
           </a>
           .
         </p>
-        <div className="tip-wrapper">
+        <div className="tip-wrapper text-foreground-muted">
           <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
           <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fillRule="evenodd">

apps/storybook/stories/page.css

@@ -5,7 +5,7 @@
   padding: 48px 20px;
   margin: 0 auto;
   max-width: 600px;
-  color: #333;
+  /* color: #333; */
 }
 
 .storybook-page h2 {

apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -19,7 +19,7 @@ import {
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation'
 import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'

apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx

@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation'
 
 interface DeleteFunctionProps {

apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx

@@ -1,7 +1,7 @@
 import { PostgresTrigger } from '@supabase/postgres-meta'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 import { useStore } from 'hooks'
 

apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx

@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 
 interface DeleteTriggerProps {

apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx

@@ -6,7 +6,7 @@ import { Button, Input } from 'ui'
 
 import { CANCELLATION_REASONS } from 'components/interfaces/Billing/Billing.constants'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useSendDowngradeFeedbackMutation } from 'data/feedback/exit-survey-send'
 import { useProjectDeleteMutation } from 'data/projects/project-delete-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'

apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
 import { useBucketDeleteMutation } from 'data/storage/bucket-delete-mutation'