Broad refactor to deprecate use of Typography

studio/components/grid/components/common/DropdownControl.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
-import { Dropdown, Typography } from '@supabase/ui'
+import { FC } from 'react'
+import { Dropdown } from '@supabase/ui'
 
-type DropdownControlProps = {
+interface DropdownControlProps {
   options: {
     value: string | number
     label: string
@@ -15,7 +15,7 @@ type DropdownControlProps = {
   isNested?: boolean
 }
 
-export const DropdownControl: React.FC<DropdownControlProps> = (p) => {
+export const DropdownControl: FC<DropdownControlProps> = (p) => {
   const { className, children, side, align, isNested } = p
   return (
     <Dropdown
@@ -30,12 +30,10 @@ export const DropdownControl: React.FC<DropdownControlProps> = (p) => {
   )
 }
 
-const DropdownItems: React.FC<DropdownControlProps> = ({ options, onSelect }) => {
+const DropdownItems: FC<DropdownControlProps> = ({ options, onSelect }) => {
   return (
     <div className="dropdown-control" style={{ maxHeight: '30vh' }}>
-      {options.length == 0 && (
-        <Typography.Text className="dropdown-control__empty-text">No more items</Typography.Text>
-      )}
+      {options.length == 0 && <p className="dropdown-control__empty-text">No more items</p>}
       {options.map((x) => {
         return (
           <Dropdown.Item key={x.value} onClick={() => onSelect(x.value)}>

studio/components/grid/components/common/ForeignTableModal/RowItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Menu, Typography } from '@supabase/ui'
+import { Menu } from '@supabase/ui'
 import { Dictionary } from '../../../types'
 
 interface RowItemProps {
@@ -23,20 +23,16 @@ export const RowItem: React.FC<RowItemProps> = ({ item, onSelect, columnNames })
 
             return (
               <div className="foreign-table-modal__row-item__inner__key-item" key={`item-${j}`}>
-                <Typography.Text
-                  small
-                  type="secondary"
-                  className="foreign-table-modal__row-item__inner__key-item__key"
-                >
+                <p className="text-sm text-scale-1000 foreign-table-modal__row-item__inner__key-item__key">
                   {key}
-                </Typography.Text>
-                <Typography.Text small strong>
+                </p>
+                <p className="text-sm font-bold">
                   {item[key]
                     ? typeof item[key] === 'object'
                       ? JSON.stringify(item[key])
                       : item[key]
                     : '[null]'}
-                </Typography.Text>
+                </p>
               </div>
             )
           })}

studio/components/interfaces/Account/AccessTokenList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Typography, Button, Modal, IconTrash } from '@supabase/ui'
+import { Button, Modal, IconTrash } from '@supabase/ui'
 import { useStore } from 'hooks'
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
@@ -43,9 +43,9 @@ const AccessTokenList = observer(() => {
             tokens && tokens.length == 0 ? (
               <Table.tr>
                 <Table.td colSpan={5} className="p-3 py-12 text-center">
-                  <Typography.Text type="secondary">
-                    {isLoading ? 'Checking for tokens' : "You don't have any token"}
-                  </Typography.Text>
+                  <p className="text-scale-1000">
+                    {isLoading ? 'Checking for tokens' : 'You do not have any tokens created yet'}
+                  </p>
                 </Table.td>
               </Table.tr>
             ) : (
@@ -58,7 +58,7 @@ const AccessTokenList = observer(() => {
                       </Table.td>
                       <Table.td>{x.name}</Table.td>
                       <Table.td>
-                        <Typography.Text>{new Date(x.created_at).toLocaleString()}</Typography.Text>
+                        <p>{new Date(x.created_at).toLocaleString()}</p>
                       </Table.td>
                       <Table.td>
                         <Button

studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { IconChevronLeft } from '@supabase/ui'
-import { POLICY_MODAL_VIEWS } from 'components/interfaces/Authentication/Policies'
+import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies'
 
 interface Props {
   view: string

studio/components/interfaces/Auth/Users/UsersList.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconAlertCircle, Loading, Typography } from '@supabase/ui'
+import { IconAlertCircle, Loading } from '@supabase/ui'
 
 import { PageContext } from 'pages/project/[ref]/auth/users'
 import Table from 'components/to-be-cleaned/Table'
@@ -36,7 +36,7 @@ const UsersList = ({}) => {
                   colSpan={7}
                   className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
                 >
-                  <Typography.Text type="secondary">Retrieving users</Typography.Text>
+                  <p className="text-scale-1000">Retrieving users</p>
                 </Table.td>
               </Table.tr>
             )}
@@ -49,11 +49,11 @@ const UsersList = ({}) => {
                 >
                   <div className="flex items-center space-x-3 opacity-75">
                     <IconAlertCircle size={16} strokeWidth={2} />
-                    <Typography.Text type="secondary">
+                    <p className="text-scale-1000">
                       {PageState.filterKeywords
                         ? `No users matched the search query "${PageState.filterKeywords}"`
                         : 'No users in your project yet'}
-                    </Typography.Text>
+                    </p>
                   </div>
                 </Table.td>
               </Table.tr>

studio/components/interfaces/Auth/index.tsx

@@ -2,4 +2,6 @@ import AuthProvidersForm from './AuthProvidersForm/AuthProvidersForm'
 import EmailTemplates from './EmailTemplates/EmailTemplates'
 import SmtpForm from './SmtpForm/SmtpForm'
 
-export { AuthProvidersForm, EmailTemplates, SmtpForm }
+import Users from './Users'
+
+export { Users, AuthProvidersForm, EmailTemplates, SmtpForm }

studio/components/interfaces/Authentication/Templates.tsx

@@ -1,229 +0,0 @@
-import semver from 'semver'
-import { FC } from 'react'
-import { toJS } from 'mobx'
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-import { Typography } from '@supabase/ui'
-import { AutoField, LongTextField } from 'uniforms-bootstrap4'
-
-import { API_URL, IS_PLATFORM } from 'lib/constants'
-import { useProjectAuthConfig, useStore, checkPermissions } from 'hooks'
-import { pluckJsonSchemaFields } from 'lib/helpers'
-import { patch } from 'lib/common/fetch'
-import { authConfig } from 'stores/jsonSchema'
-import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-
-const Templates: FC<any> = ({ project }) => {
-  const router = useRouter()
-  const { ui } = useStore()
-  const magicLinkEnable = IS_PLATFORM
-    ? semver.gte(
-        // @ts-ignore
-        semver.coerce(project?.kpsVersion ?? 'kps-v0.0.1'),
-        semver.coerce('kps-v2.5.3')
-      )
-    : true
-
-  const canUpdateTemplates = checkPermissions(PermissionAction.UPDATE, 'custom_config_gotrue')
-
-  const { config, error, mutateAuthConfig } = useProjectAuthConfig(project.ref)
-  if (error) {
-    return (
-      <Typography.Text type="danger">
-        <p>Error connecting to API</p>
-        <p>{`${error}`}</p>
-      </Typography.Text>
-    )
-  }
-
-  let model: any = { ...config }
-
-  const onFormSubmit = async (model: any) => {
-    const response = await patch(`${API_URL}/auth/${router.query.ref}/config`, model)
-    if (response.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Update config failed: ${response.error.message}`,
-      })
-    } else {
-      mutateAuthConfig(response)
-      ui.setNotification({
-        category: 'success',
-        message: 'Settings saved!',
-      })
-    }
-  }
-
-  return (
-    <div className="">
-      <div className="my-8 mt-0">
-        <SchemaFormPanel
-          title="SMS Message"
-          schema={pluckJsonSchemaFields(authConfig, ['SMS_TEMPLATE'])}
-          model={{
-            SMS_TEMPLATE: model.SMS_TEMPLATE,
-          }}
-          onSubmit={(model: any) => onFormSubmit(model)}
-        >
-          <AutoField
-            showInlineError
-            name="SMS_TEMPLATE"
-            readOnly={!IS_PLATFORM}
-            inputClassName="font-mono"
-            errorMessage="Please enter an sms body."
-          />
-        </SchemaFormPanel>
-      </div>
-      <div className="my-8">
-        <SchemaFormPanel
-          title="Confirm Signup"
-          schema={pluckJsonSchemaFields(authConfig, [
-            'MAILER_SUBJECTS_CONFIRMATION',
-            'MAILER_TEMPLATES_CONFIRMATION_CONTENT',
-          ])}
-          model={{
-            MAILER_SUBJECTS_CONFIRMATION: model.MAILER_SUBJECTS_CONFIRMATION,
-            MAILER_TEMPLATES_CONFIRMATION_CONTENT: model.MAILER_TEMPLATES_CONFIRMATION_CONTENT,
-          }}
-          onSubmit={(model: any) => onFormSubmit(model)}
-        >
-          <AutoField
-            showInlineError
-            name="MAILER_SUBJECTS_CONFIRMATION"
-            readOnly={!IS_PLATFORM}
-            errorMessage="Please enter a subject."
-          />
-          <LongTextField
-            showInlineError
-            name="MAILER_TEMPLATES_CONFIRMATION_CONTENT"
-            rows={6}
-            readOnly={!IS_PLATFORM}
-            inputClassName="font-mono"
-            errorMessage="Please enter an email body."
-          />
-        </SchemaFormPanel>
-      </div>
-      <div className="my-8">
-        <SchemaFormPanel
-          title="Reset password"
-          schema={pluckJsonSchemaFields(authConfig, [
-            'MAILER_SUBJECTS_RECOVERY',
-            'MAILER_TEMPLATES_RECOVERY_CONTENT',
-          ])}
-          model={{
-            MAILER_SUBJECTS_RECOVERY: model.MAILER_SUBJECTS_RECOVERY,
-            MAILER_TEMPLATES_RECOVERY_CONTENT: model.MAILER_TEMPLATES_RECOVERY_CONTENT,
-          }}
-          onSubmit={(model: any) => onFormSubmit(model)}
-        >
-          <AutoField
-            showInlineError
-            name="MAILER_SUBJECTS_RECOVERY"
-            readOnly={!IS_PLATFORM}
-            errorMessage="Please enter a subject."
-          />
-          <LongTextField
-            showInlineError
-            name="MAILER_TEMPLATES_RECOVERY_CONTENT"
-            rows={6}
-            readOnly={!IS_PLATFORM}
-            inputClassName="font-mono"
-            errorMessage="Please enter an email body."
-          />
-        </SchemaFormPanel>
-      </div>
-      {magicLinkEnable && (
-        <div className="my-8">
-          <SchemaFormPanel
-            title="Magic Link"
-            schema={pluckJsonSchemaFields(authConfig, [
-              'MAILER_SUBJECTS_MAGIC_LINK',
-              'MAILER_TEMPLATES_MAGIC_LINK_CONTENT',
-            ])}
-            model={{
-              MAILER_SUBJECTS_MAGIC_LINK: model.MAILER_SUBJECTS_MAGIC_LINK,
-              MAILER_TEMPLATES_MAGIC_LINK_CONTENT: model.MAILER_TEMPLATES_MAGIC_LINK_CONTENT,
-            }}
-            onSubmit={(model: any) => onFormSubmit(model)}
-          >
-            <AutoField
-              showInlineError
-              name="MAILER_SUBJECTS_MAGIC_LINK"
-              readOnly={!IS_PLATFORM}
-              errorMessage="Please enter a subject."
-            />
-            <LongTextField
-              showInlineError
-              name="MAILER_TEMPLATES_MAGIC_LINK_CONTENT"
-              rows={6}
-              readOnly={!IS_PLATFORM}
-              inputClassName="font-mono"
-              errorMessage="Please enter an email body."
-            />
-          </SchemaFormPanel>
-        </div>
-      )}
-      <div className="my-8">
-        <SchemaFormPanel
-          title="Change email address"
-          schema={pluckJsonSchemaFields(authConfig, [
-            'MAILER_SUBJECTS_EMAIL_CHANGE',
-            'MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT',
-          ])}
-          model={{
-            MAILER_SUBJECTS_EMAIL_CHANGE: model.MAILER_SUBJECTS_EMAIL_CHANGE,
-            MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: model.MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT,
-          }}
-          onSubmit={(model: any) => onFormSubmit(model)}
-        >
-          <AutoField
-            showInlineError
-            name="MAILER_SUBJECTS_EMAIL_CHANGE"
-            readOnly={!IS_PLATFORM}
-            errorMessage="Please enter a subject."
-          />
-          <LongTextField
-            showInlineError
-            name="MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT"
-            rows={6}
-            readOnly={!IS_PLATFORM}
-            inputClassName="font-mono"
-            errorMessage="Please enter an email body."
-          />
-        </SchemaFormPanel>
-      </div>
-      <div className="my-8">
-        <SchemaFormPanel
-          title="Invite user"
-          schema={pluckJsonSchemaFields(authConfig, [
-            'MAILER_SUBJECTS_INVITE',
-            'MAILER_TEMPLATES_INVITE_CONTENT',
-          ])}
-          model={{
-            MAILER_SUBJECTS_INVITE: model.MAILER_SUBJECTS_INVITE,
-            MAILER_TEMPLATES_INVITE_CONTENT: model.MAILER_TEMPLATES_INVITE_CONTENT,
-          }}
-          onSubmit={(model: any) => onFormSubmit(model)}
-        >
-          <AutoField
-            showInlineError
-            name="MAILER_SUBJECTS_INVITE"
-            readOnly={!IS_PLATFORM}
-            errorMessage="Please enter a subject."
-          />
-          <LongTextField
-            showInlineError
-            name="MAILER_TEMPLATES_INVITE_CONTENT"
-            rows={6}
-            readOnly={!IS_PLATFORM}
-            inputClassName="font-mono"
-            errorMessage="Please enter an email body."
-          />
-        </SchemaFormPanel>
-      </div>
-    </div>
-  )
-}
-
-export default observer(Templates)

studio/components/interfaces/Authentication/index.ts

@@ -1,4 +0,0 @@
-import Users from './Users'
-import Templates from './Templates'
-
-export { Users, Templates }

studio/components/interfaces/Billing/Invoices.tsx

@@ -2,7 +2,6 @@ import { FC, useState, useEffect } from 'react'
 import {
   Button,
   Loading,
-  Typography,
   IconFileText,
   IconDownload,
   IconChevronLeft,
@@ -99,9 +98,9 @@ const Invoices: FC<Props> = ({ projectRef }) => {
             invoices.length === 0 ? (
               <Table.tr>
                 <Table.td colSpan={5} className="p-3 py-12 text-center">
-                  <Typography.Text type="secondary">
+                  <p className="text-scale-1000">
                     {loading ? 'Checking for invoices' : 'No invoices for this project yet'}
-                  </Typography.Text>
+                  </p>
                 </Table.td>
               </Table.tr>
             ) : (
@@ -113,19 +112,17 @@ const Invoices: FC<Props> = ({ projectRef }) => {
                         <IconFileText size="xxl" />
                       </Table.td>
                       <Table.td>
-                        <Typography.Text>
-                          {new Date(x.period_end * 1000).toLocaleString()}
-                        </Typography.Text>
+                        <p>{new Date(x.period_end * 1000).toLocaleString()}</p>
                       </Table.td>
                       <Table.td>
-                        <Typography.Text>
+                        <p>
                           {x.subtotal >= 0
                             ? `$${x.subtotal / 100}`
                             : `-$${Math.abs(x.subtotal / 100)}`}
-                        </Typography.Text>
+                        </p>
                       </Table.td>
                       <Table.td>
-                        <Typography.Text>{x.number}</Typography.Text>
+                        <p>{x.number}</p>
                       </Table.td>
                       <Table.td className="align-right">
                         <div className="flex items-center space-x-2 justify-end">

studio/components/interfaces/Billing/PAYGUsage/PAYGUsage.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
 import dayjs from 'dayjs'
-import { Typography } from '@supabase/ui'
 
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import { ChargeableProduct, PaygStats, ProductFeature } from './PAYGUsage.types'
@@ -39,16 +38,12 @@ const PAYGUsage: FC<Props> = ({ paygStats, dateRange }) => {
                     <div className="flex h-8 w-8 items-center justify-center rounded bg-white">
                       <img width={'16'} src={product.iconUrl} />
                     </div>
-                    <Typography.Title level={5} className="mb-0 font-medium">
-                      {product.title}
-                    </Typography.Title>
+                    <h5 className="mb-0 font-medium">{product.title}</h5>
                   </div>
                   {product.title !== 'Authentication' && (
                     <div className="flex items-center space-x-1">
-                      <Typography.Text className="opacity-50">$</Typography.Text>
-                      <Typography.Title className="m-0 font-medium" level={4}>
-                        {productCost.toFixed(3)}
-                      </Typography.Title>
+                      <p className="text-scale-1000">$</p>
+                      <h4 className="text-lg m-0 font-medium">{productCost.toFixed(3)}</h4>
                     </div>
                   )}
                 </div>

studio/components/interfaces/Database/Functions/CreateFunction.tsx

@@ -6,9 +6,7 @@ import {
   Input,
   Select,
   SidePanel,
-  Typography,
   IconTrash,
-  Divider,
   Radio,
   IconPlus,
   Toggle,

studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Typography, Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from '@supabase/ui'
 
 import { CreateHookContext } from '../'
 import InputServiceHeader from './InputServiceHeader'
@@ -19,7 +19,7 @@ const InputMultiServiceHeaders: FC = observer(({}) => {
   return (
     <div>
       <div className="flex items-center justify-between">
-        <Typography.Text>HTTP Headers</Typography.Text>
+        <h5>HTTP Headers</h5>
       </div>
       <div className="space-y-2 pt-4">
         {_localState.formState.serviceHeaders.value.map(

studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Typography, Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from '@supabase/ui'
 
 import { CreateHookContext } from '../'
 import InputServiceParam from './InputServiceParam'
@@ -19,7 +19,7 @@ const InputMultiServiceParams: FC = observer(({}) => {
   return (
     <div>
       <div className="flex items-center justify-between">
-        <Typography.Text>HTTP Params</Typography.Text>
+        <h5>HTTP Params</h5>
       </div>
       <div className="space-y-2 pt-4">
         {_localState.formState.serviceParams.value.map(

studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Typography, SidePanel } from '@supabase/ui'
+import { SidePanel } from '@supabase/ui'
 
 import { CreateHookContext } from '../'
 import SelectServiceMethod from './SelectServiceMethod'
@@ -18,10 +18,9 @@ const ServiceConfigForm: FC = observer(({}) => {
           <SidePanel.Seperator />
           <div className="space-y-10">
             <div className="space-y-6 px-6">
-              <Typography.Title level={5}>HTTP Request</Typography.Title>
+              <h5>HTTP Request</h5>
               <SelectServiceMethod />
               <InputServiceUrl />
-              {/* <InputServiceTimeout /> */}
             </div>
             <SidePanel.Seperator />
             <div className="px-6">

studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import SVG from 'react-inlinesvg'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input, Typography, Listbox } from '@supabase/ui'
+import { Input, Listbox } from '@supabase/ui'
 
 import { CreateHookContext } from './'
 import { useStore } from 'hooks'
@@ -21,18 +21,16 @@ const TableSelection: FC = observer(({}) => {
         placeholder="No tables created, please create one first"
         // @ts-ignore
         descriptionText={
-          <div className="space-x-1">
-            <Typography.Text type="secondary">
+          <p className="text-scale-1000">
+            <span className="text-scale-1000">
               This is the table the trigger will watch for changes. There's currently no tables
-              created - please create one
-            </Typography.Text>
+              created - please create one{' '}
+            </span>
             <Link href={`/project/${projectRef}/editor`}>
-              <a>
-                <Typography.Link>here</Typography.Link>
-              </a>
+              <a className="text-brand-900">here</a>
             </Link>
-            <Typography.Text type="secondary">first.</Typography.Text>
-          </div>
+            <span className="text-scale-1000"> first.</span>
+          </p>
         }
       />
     )

studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx

@@ -1,6 +1,5 @@
 import { FC, useState, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Typography } from '@supabase/ui'
 import { useStore } from 'hooks'
 import { pluckObjectFields } from 'lib/helpers'
 import Loading from 'components/ui/Loading'
@@ -37,7 +36,7 @@ const ConnectionPooling: FC<Props> = () => {
   if (poolingConfiguration.error) {
     return (
       <div className="p-4">
-        <Typography.Text type="secondary">Error loading pooling configuration</Typography.Text>
+        <p className="text-scale-1000">Error loading pooling configuration</p>
       </div>
     )
   }
@@ -49,15 +48,13 @@ const ConnectionPooling: FC<Props> = () => {
     return (
       <Panel
         title={
-          <Typography.Title key="panel-title" level={5} className="mb-0">
+          <h5 key="panel-title" className="mb-0">
             Connection Pooling is not available for this project
-          </Typography.Title>
+          </h5>
         }
       >
         <Panel.Content>
-          <Typography.Text type="secondary">
-            Please start a new project to enable this feature.
-          </Typography.Text>
+          <p className="text-scale-1000">Please start a new project to enable this feature.</p>
         </Panel.Content>
       </Panel>
     )

studio/components/interfaces/Database/Roles/RolesList.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Typography, IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from '@supabase/ui'
 
 import { useStore } from 'hooks'
 import SparkBar from 'components/ui/SparkBar'
@@ -26,16 +26,16 @@ const RolesList: FC<Props> = ({ onSelectRole = () => {} }) => {
         body={roles.map((x, i) => (
           <Table.tr key={x.id} onClick={() => onSelectRole(x)}>
             <Table.td style={{ width: '25%' }}>
-              <Typography.Text>{x.name}</Typography.Text>
+              <p>{x.name}</p>
             </Table.td>
             <Table.td style={{ width: '25%' }}>
-              <Typography.Text>{x.id}</Typography.Text>
+              <p>{x.id}</p>
             </Table.td>
             <Table.td className="w-full">
               <div className="flex items-center space-x-3">
-                <Typography.Text>
+                <p>
                   {x.active_connections}/{x.connection_limit} connections
-                </Typography.Text>
+                </p>
                 <SparkBar
                   max={x.connection_limit}
                   value={x.active_connections}
@@ -44,9 +44,7 @@ const RolesList: FC<Props> = ({ onSelectRole = () => {} }) => {
               </div>
             </Table.td>
             <Table.td style={{ maxWidth: '64px' }} className="w-min">
-              <Typography.Text type="secondary">
-                <IconChevronRight size="tiny" />
-              </Typography.Text>
+              <IconChevronRight className="text-scale-1100" size="small" />
             </Table.td>
           </Table.tr>
         ))}

studio/components/interfaces/Database/Roles/RolesSettings.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Typography, IconChevronLeft } from '@supabase/ui'
+import { Button, IconChevronLeft } from '@supabase/ui'
 import Divider from 'components/ui/Divider'
 
 import Panel from 'components/ui/Panel'

studio/components/interfaces/Database/Triggers/CreateTrigger.tsx

@@ -7,7 +7,6 @@ import {
   SidePanel,
   Checkbox,
   Listbox,
-  Typography,
   IconPlayCircle,
   IconPauseCircle,
   IconTerminal,
@@ -353,7 +352,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
                     </div>
                     <SidePanel.Seperator />
                     <div className="px-6 space-y-12">
-                      <Typography.Title level={5}>Conditions to fire trigger</Typography.Title>
+                      <h5>Conditions to fire trigger</h5>
                       <ListboxTable />
                       <CheckboxEvents />
                       <ListboxActivation />
@@ -556,10 +555,8 @@ const ListboxTable: FC = observer(({}) => {
             )}
           >
             <div className="flex flex-row items-center space-x-1">
-              <Typography.Text>{x.name}</Typography.Text>
-              <Typography.Text type="secondary" className="text-scale-900" small>
-                {x.schema}
-              </Typography.Text>
+              <p>{x.name}</p>
+              <p className="text-scale-1000 text-sm">{x.schema}</p>
             </div>
           </Listbox.Option>
         )
@@ -676,7 +673,7 @@ const FunctionForm: FC = observer(({}) => {
   return (
     <div className="space-y-4">
       <div className="px-6 space-y-6">
-        <Typography.Title level={5}>Function to trigger</Typography.Title>
+        <h5>Function to trigger</h5>
       </div>
       <div className="px-6">
         {isEmpty(_localState!.formState.functionName.value) ? (
@@ -741,9 +738,7 @@ const FunctionWithArguments: FC = observer(({}) => {
             <IconTerminal size="small" strokeWidth={2} width={14} />
           </div>
           <div className="flex items-center gap-2">
-            <Typography.Text type="secondary">
-              {_localState!.formState.functionName.value}
-            </Typography.Text>
+            <p className="text-scale-1000">{_localState!.formState.functionName.value}</p>
             <div>
               <Badge>{_localState!.formState.functionSchema.value}</Badge>
             </div>

studio/components/to-be-cleaned/Storage/Storage.types.ts

@@ -1,4 +1,4 @@
-import { PolicyFormField } from 'components/interfaces/Authentication/Policies/Policies.types'
+import { PolicyFormField } from 'components/interfaces/Auth/Policies/Policies.types'
 
 export interface StoragePolicyFormField extends PolicyFormField {
   allowedOperations: string[]

studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js

@@ -11,7 +11,7 @@ import StoragePoliciesEditPolicyModal from './StoragePoliciesEditPolicyModal'
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 
-import { PolicyEditorModal } from 'components/interfaces/Authentication/Policies'
+import { PolicyEditorModal } from 'components/interfaces/Auth/Policies'
 
 const StoragePolicies = () => {
   const { ui, meta } = useStore()

studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.js

@@ -14,7 +14,7 @@ import {
   PolicySelection,
   PolicyTemplates,
   POLICY_MODAL_VIEWS,
-} from 'components/interfaces/Authentication/Policies'
+} from 'components/interfaces/Auth/Policies'
 import StoragePoliciesEditor from './StoragePoliciesEditor'
 import StoragePoliciesReview from './StoragePoliciesReview'
 

studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js

@@ -4,7 +4,7 @@ import { get } from 'lodash'
 import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from '../Storage.constants'
 import { deriveAllowedClientLibraryMethods } from '../Storage.utils'
 import SqlEditor from 'components/ui/SqlEditor'
-import { PolicyName, PolicyRoles } from 'components/interfaces/Authentication/Policies/PolicyEditor'
+import { PolicyName, PolicyRoles } from 'components/interfaces/Auth/Policies/PolicyEditor'
 
 const PolicyDefinition = ({ definition = '', onUpdatePolicyDefinition = () => {} }) => {
   return (

studio/pages/project/[ref]/auth/policies.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { checkPermissions, useStore } from 'hooks'
 import { AuthLayout } from 'components/layouts'
 import { NextPageWithLayout } from 'types'
-import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Authentication/Policies'
+import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies'
 import { PostgresRole } from '@supabase/postgres-meta'
 import { PostgresTable, PostgresPolicy } from '@supabase/postgres-meta'
 

studio/pages/project/[ref]/auth/users.tsx

@@ -6,7 +6,7 @@ import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { checkPermissions, useStore } from 'hooks'
 import { AuthLayout } from 'components/layouts'
-import { Users } from 'components/interfaces/Authentication'
+import { Users } from 'components/interfaces/Auth'
 import { NextPageWithLayout } from 'types'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import NoPermission from 'components/ui/NoPermission'