From 6b63064320bb472bea529b43f0711255a6799bb7 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 1 Mar 2022 17:38:17 +0800
Subject: [PATCH] Fix styling issues for JWT rolling modal

---
 studio/pages/org/[slug]/settings.tsx        |   3 -
 studio/pages/project/[ref]/settings/api.tsx | 106 ++++++++++----------
 2 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/studio/pages/org/[slug]/settings.tsx b/studio/pages/org/[slug]/settings.tsx
index eaa953be40a..7161402b831 100644
--- a/studio/pages/org/[slug]/settings.tsx
+++ b/studio/pages/org/[slug]/settings.tsx
@@ -14,11 +14,9 @@ import {
   IconTrash,
   Alert,
   Input,
-  Divider,
   Dropdown,
   Modal,
   IconSearch,
-  IconUser,
   Form,
 } from '@supabase/ui'
 
@@ -31,7 +29,6 @@ import { BillingSettings, InvoicesSettings } from 'components/interfaces/Organiz
 import Table from 'components/to-be-cleaned/Table'
 import Panel from 'components/to-be-cleaned/Panel'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import ConfirmDialog from 'components/ui/Dialogs/ConfirmDialog'
 import InviteMemberModal from 'components/to-be-cleaned/ModalsDeprecated/InviteMemberModal'
 import TextConfirmModal from 'components/to-be-cleaned/ModalsDeprecated/TextConfirmModal'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
diff --git a/studio/pages/project/[ref]/settings/api.tsx b/studio/pages/project/[ref]/settings/api.tsx
index 0a4997f6404..8088129d45e 100644
--- a/studio/pages/project/[ref]/settings/api.tsx
+++ b/studio/pages/project/[ref]/settings/api.tsx
@@ -27,7 +27,6 @@ import {
   IconKey,
   Button,
   Dropdown,
-  Divider,
   IconPenTool,
   IconRefreshCw,
   IconChevronDown,
@@ -38,12 +37,15 @@ import { API_URL } from 'lib/constants'
 import { uuidv4 } from 'lib/helpers'
 import { patch, get } from 'lib/common/fetch'
 import { useStore, useJwtSecretUpdateStatus, withAuth } from 'hooks'
+
 import { SettingsLayout } from 'components/layouts'
+import Flag from 'components/ui/Flag/Flag'
+import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+
 import Panel from 'components/to-be-cleaned/Panel'
 import MultiSelectUI from 'components/to-be-cleaned/MultiSelect'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
 import { DisplayApiSettings } from 'components/to-be-cleaned/DisplayProjectSettings'
-import Flag from 'components/ui/Flag/Flag'
 
 const JWT_SECRET_UPDATE_ERROR_MESSAGES = {
   [JwtSecretUpdateError.APIServicesConfigurationUpdateFailed]:
@@ -226,7 +228,7 @@ const ServiceList: FC<any> = ({ projectRef }) => {
           <Panel
             title={
               <Typography.Title level={5} className="mb-0">
-                Config
+                Configuration
               </Typography.Title>
             }
           >
@@ -276,9 +278,9 @@ const ServiceList: FC<any> = ({ projectRef }) => {
                         {isUpdatingJwtSecret ? (
                           <div className="flex items-center space-x-2">
                             <IconLoader className="animate-spin" size={14} />
-                            <Typography.Text>
+                            <p className="text-sm">
                               Updating JWT secret: {jwtSecretUpdateProgressMessage}
-                            </Typography.Text>
+                            </p>
                           </div>
                         ) : (
                           <div className="w-full space-y-2">
@@ -347,62 +349,64 @@ const ServiceList: FC<any> = ({ projectRef }) => {
         </section>
         <section>{config && <PostgrestConfig config={config} projectRef={projectRef} />}</section>
       </article>
-      <Modal
+
+      <ConfirmModal
+        danger
         visible={isRegeneratingKey}
-        onCancel={() => setIsGeneratingKey(false)}
         title="Are you absolutely sure?"
-        icon={<IconAlertCircle background={'red'} />}
-        hideFooter
-        size="medium"
-        closable
-      >
-        <Typography.Text>
-          <p className="text-sm">
-            This action cannot be undone and the old JWT secret will be lost. All existing API keys
-            will be invalidated, and any open connections will be terminated.
-          </p>
-        </Typography.Text>
-        <Button
-          onClick={() => handleJwtSecretUpdate('ROLL', setIsGeneratingKey)}
-          size="small"
-          block
-          danger
-          loading={isSubmittingJwtSecretUpdateRequest}
-        >
-          Generate new secret
-        </Button>
-      </Modal>
+        description="This action cannot be undone and the old JWT secret will be lost. All existing API keys
+        will be invalidated, and any open connections will be terminated."
+        buttonLabel="Generate new secret"
+        buttonLoadingLabel="Generating"
+        onSelectCancel={() => setIsGeneratingKey(false)}
+        onSelectConfirm={() => handleJwtSecretUpdate('ROLL', setIsGeneratingKey)}
+      />
 
       <Modal
         closable
-        title="Create a custom JWT secret"
+        header="Create a custom JWT secret"
         visible={isCreatingKey}
         size="medium"
-        confirmText="Apply new JWT secret"
         variant="danger"
-        alignFooter="right"
         loading={isSubmittingJwtSecretUpdateRequest}
-        onCancel={() => setIsCreatingKey(false)}
-        onConfirm={() => handleJwtSecretUpdate(customToken, setIsCreatingKey)}
+        customFooter={
+          <div className="space-x-2">
+            <Button type="default" onClick={() => setIsCreatingKey(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="primary"
+              disabled={customToken.length < 32}
+              loading={isSubmittingJwtSecretUpdateRequest}
+              onClick={() => handleJwtSecretUpdate(customToken, setIsCreatingKey)}
+            >
+              Apply new JWT secret
+            </Button>
+          </div>
+        }
       >
-        <Typography.Text type="secondary">
-          Create a custom JWT secret. Make sure it is a strong combination of characters that cannot
-          be guessed easily.
-        </Typography.Text>
-        <Alert
-          withIcon
-          variant="warning"
-          title="All existing API keys will be invalidated, and any open connections will be terminated."
-        />
-        <Input
-          onChange={(e: any) => setCustomToken(e.target.value)}
-          value={customToken}
-          icon={<IconKey />}
-          type="password"
-          className="w-full text-left"
-          label="Custom JWT secret"
-          descriptionText="Must be at least 32 characters long"
-        />
+        <Modal.Content>
+          <div className="py-4 space-y-2">
+            <p className="text-sm text-scale-1100">
+              Create a custom JWT secret. Make sure it is a strong combination of characters that
+              cannot be guessed easily.
+            </p>
+            <Alert
+              withIcon
+              variant="warning"
+              title="All existing API keys will be invalidated, and any open connections will be terminated."
+            />
+            <Input
+              onChange={(e: any) => setCustomToken(e.target.value)}
+              value={customToken}
+              icon={<IconKey />}
+              type="password"
+              className="w-full text-left"
+              label="Custom JWT secret"
+              descriptionText="Must be at least 32 characters long"
+            />
+          </div>
+        </Modal.Content>
       </Modal>
     </>
   )