From d8e7ecbfe5b5967dccfd53fda4ce56dee0aafdfc Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 1 Mar 2024 18:47:36 +0800
Subject: [PATCH] Chore/move dialog to patterns (#21688)

* update exampleps

* move text confirm modal
---
 apps/storybook/stories/Header.jsx                    |  4 ++--
 apps/storybook/stories/Page.jsx                      | 12 ++++++------
 apps/storybook/stories/page.css                      |  2 +-
 .../interfaces/BranchManagement/BranchManagement.tsx |  2 +-
 .../interfaces/Database/Functions/DeleteFunction.tsx |  2 +-
 .../interfaces/Database/Hooks/DeleteHookModal.tsx    |  2 +-
 .../interfaces/Database/Triggers/DeleteTrigger.tsx   |  2 +-
 .../DeleteProjectPanel/DeleteProjectButton.tsx       |  2 +-
 .../to-be-cleaned/Storage/DeleteBucketModal.tsx      |  2 +-
 .../ui-patterns/Dialogs}/TextConfirmModal.tsx        |  0
 10 files changed, 15 insertions(+), 15 deletions(-)
 rename {apps/studio/components/ui/Modals => packages/ui-patterns/Dialogs}/TextConfirmModal.tsx (100%)

diff --git a/apps/storybook/stories/Header.jsx b/apps/storybook/stories/Header.jsx
index bf37be496d0..2062b86b4ca 100644
--- a/apps/storybook/stories/Header.jsx
+++ b/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" />
diff --git a/apps/storybook/stories/Page.jsx b/apps/storybook/stories/Page.jsx
index 339f08a6a1b..fea5f639d64 100644
--- a/apps/storybook/stories/Page.jsx
+++ b/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">
diff --git a/apps/storybook/stories/page.css b/apps/storybook/stories/page.css
index 098dad11850..d40ccd61790 100644
--- a/apps/storybook/stories/page.css
+++ b/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 {
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index 9d274820d10..9e265a77b2c 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/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'
diff --git a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
index 3114608245d..2da5bec798f 100644
--- a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
+++ b/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 {
diff --git a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
index 83ce67e1054..115884584e4 100644
--- a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
+++ b/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'
 
diff --git a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
index f8c9484da5f..60b60d3ec45 100644
--- a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
+++ b/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 {
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
index 6cc9f6373da..03a1b68cc14 100644
--- a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
+++ b/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'
diff --git a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx b/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
index 82b710362c8..4bf0b55ae7e 100644
--- a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
+++ b/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'
diff --git a/apps/studio/components/ui/Modals/TextConfirmModal.tsx b/packages/ui-patterns/Dialogs/TextConfirmModal.tsx
similarity index 100%
rename from apps/studio/components/ui/Modals/TextConfirmModal.tsx
rename to packages/ui-patterns/Dialogs/TextConfirmModal.tsx