fix(typos): add github action to prevent typos + fix typos (#9598)

* feat(ci): fix typos * [create-pull-request] automated change * Update index.tsx * Update README.fr.md * Create .misspell-fixer.ignore * Update constant.dart * [create-pull-request] automated change * Update database.tsx * [create-pull-request] automated change * [create-pull-request] automated change Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2022-10-28 03:32:02 +01:00
parent 1e0afa72e7
commit 80d0624262
83 changed files with 172 additions and 152 deletions
--- a/.github/workflows/fix-typos.yml
+++ b/.github/workflows/fix-typos.yml
@@ -0,0 +1,19 @@
+name: Automatically fix typos
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: master
+      - uses: sobolevn/misspell-fixer-action@master
+      - uses: peter-evans/create-pull-request@v2.4.4
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
--- a/.misspell-fixer.ignore
+++ b/.misspell-fixer.ignore
@@ -0,0 +1 @@
+^./i18n
--- a/apps/reference/docs/guides/database/tables.mdx
+++ b/apps/reference/docs/guides/database/tables.mdx
@@ -160,7 +160,7 @@ In the example above, we have:
 1. created a column called `id`
 1. assigned the data type `bigint`
 1. instructed the database that this should be `generated always as identity`, which means that Postgres will automatically assign a unique number to this column.
-1. Becuase it's unique, we can also use it as our `primary key`.
+1. Because it's unique, we can also use it as our `primary key`.

 We could also use `generated by default as identity`, which would allow us to insert our own unique values.

--- a/apps/reference/docs/guides/integrations/polyscale.mdx
+++ b/apps/reference/docs/guides/integrations/polyscale.mdx
@@ -48,7 +48,7 @@ Your cache is now created. PolyScale automatically checks to see that your datab

 ## Step 2: Connect to your PolyScale Cache

-Using your PolyScale cache is simple -- instead of connecting to your Supabase database directly, you'll replace your orignal connection string with the PolyScale connection string in your application.
+Using your PolyScale cache is simple -- instead of connecting to your Supabase database directly, you'll replace your original connection string with the PolyScale connection string in your application.

 For example, if your original connection string was: `postgres://postgres:zqSPGHFAbPLvVCKw@db.rogpiubvixysbakciwqz.supabase.co:5432`

--- a/apps/reference/docs/guides/with-flutter.mdx
+++ b/apps/reference/docs/guides/with-flutter.mdx
@@ -249,7 +249,7 @@ class _LoginPageState extends State<LoginPage> {
    } on AuthException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error occured');
+      context.showErrorSnackBar(message: 'Unexpected error occurred');
    }

    setState(() {
@@ -346,7 +346,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected exception occured');
+      context.showErrorSnackBar(message: 'Unexpected exception occurred');
    }

    setState(() {
@@ -376,7 +376,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpeted error occured');
+      context.showErrorSnackBar(message: 'Unexpeted error occurred');
    }
    setState(() {
      _loading = false;
@@ -389,7 +389,7 @@ class _AccountPageState extends State<AccountPage> {
    } on AuthException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error occured');
+      context.showErrorSnackBar(message: 'Unexpected error occurred');
    }
    if (mounted) {
      Navigator.of(context).pushReplacementNamed('/');
@@ -619,7 +619,7 @@ class _AvatarState extends State<Avatar> {
      }
    } catch (error) {
      if (mounted) {
-        context.showErrorSnackBar(message: 'Unexpected error occured');
+        context.showErrorSnackBar(message: 'Unexpected error occurred');
      }
    }

@@ -670,7 +670,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected exception occured');
+      context.showErrorSnackBar(message: 'Unexpected exception occurred');
    }

    setState(() {
@@ -700,7 +700,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpeted error occured');
+      context.showErrorSnackBar(message: 'Unexpeted error occurred');
    }
    setState(() {
      _loading = false;
@@ -713,7 +713,7 @@ class _AccountPageState extends State<AccountPage> {
    } on AuthException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error occured');
+      context.showErrorSnackBar(message: 'Unexpected error occurred');
    }
    if (mounted) {
      Navigator.of(context).pushReplacementNamed('/');
@@ -734,7 +734,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error has occured');
+      context.showErrorSnackBar(message: 'Unexpected error has occurred');
    }
    if (!mounted) {
      return;
--- a/apps/reference/generator/legacy.ts
+++ b/apps/reference/generator/legacy.ts
@@ -54,7 +54,7 @@ export default async function gen(inputFileName: string, outputDir: string) {

      const description =
        pageSpec.description ||
-        tsDocCommentToMdComment(getDescriptionFromDefintion(tsDefinition))
+        tsDocCommentToMdComment(getDescriptionFromDefinition(tsDefinition))

      // Create page
      const content = Page({
@@ -107,7 +107,7 @@ function generateParameters(tsDefinition: any) {
  return methodListGroup(parameters)
 }

-function getDescriptionFromDefintion(tsDefinition) {
+function getDescriptionFromDefinition(tsDefinition) {
  if (!tsDefinition) return null
  if (
    ['Method', 'Constructor', 'Constructor signature'].includes(
--- a/apps/www/_blog/2021-03-31-supabase-cli.mdx
+++ b/apps/www/_blog/2021-03-31-supabase-cli.mdx
@@ -153,7 +153,7 @@ docker run supabase/pgadmin-schema-diff \
  > diff_demo.sql

 Starting schema diff...
-Comparision started......0%
+Comparison started......0%
 Comparing Event Triggers...2%
 Comparing Extensions...4%
 Comparing Languages...8%
--- a/apps/www/_blog/2022-08-16-supabase-js-v2.mdx
+++ b/apps/www/_blog/2022-08-16-supabase-js-v2.mdx
@@ -186,7 +186,7 @@ const supabase = createClient(apiURL, apiKey, {
 })
 ```

-This is clearer for developers - if you're only using some parts of Supabase, you only recieve the hints for those parts.
+This is clearer for developers - if you're only using some parts of Supabase, you only receive the hints for those parts.

 <details>

--- a/apps/www/_blog/2022-08-19-pg-jsonschema-a-postgres-extension-for-json-validation.mdx
+++ b/apps/www/_blog/2022-08-19-pg-jsonschema-a-postgres-extension-for-json-validation.mdx
@@ -32,7 +32,7 @@ If our application receives data via a webhook:
  },
  "payload": {
    {
-      "sucess": true,
+      "success": true,
      "content": {
        "account_id": "d928b484-16bd-4f10-a827-3eb959b4cc14",
        "event": "SUBSCRIBED",
--- a/apps/www/_blog/2022-08-24-building-a-realtime-trello-board-with-supabase-and-angular.mdx
+++ b/apps/www/_blog/2022-08-24-building-a-realtime-trello-board-with-supabase-and-angular.mdx
@@ -1307,7 +1307,7 @@ To continue, bring up the **src/app/services/data.service.ts** and add this addi

 Now that we can easily get all the updates to our relevant tables in realtime, we just need to handle them accordingly.

-This is just a matter of finding out which **event** occured (INSERT, UPDATE, DELETE) and then applying the changes to our local data to add, change or remove data.
+This is just a matter of finding out which **event** occurred (INSERT, UPDATE, DELETE) and then applying the changes to our local data to add, change or remove data.

 Go ahead by finally implementing our function in the **src/app/components/inside/board/board.component.ts** that we left open until now:

--- a/apps/www/pages/blog.tsx
+++ b/apps/www/pages/blog.tsx
@@ -39,7 +39,7 @@ function Blog(props: any) {
  const router = useRouter()

  useEffect(() => {
-    // contruct an array of blog posts
+    // construct an array of blog posts
    // not inluding the first blog post
    const shiftedBlogs = [...props.blogs]
    shiftedBlogs.shift()
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -156,7 +156,7 @@ h6 { */

 /* Database page */

-.dashboard-tabs div[role='seperator'] {
+.dashboard-tabs div[role='separator'] {
  @apply border border-gray-50 dark:border-gray-700;
 }

--- a/examples/user-management/flutter-user-management/lib/components/avatar.dart
+++ b/examples/user-management/flutter-user-management/lib/components/avatar.dart
@@ -80,7 +80,7 @@ class _AvatarState extends State<Avatar> {
      }
    } catch (error) {
      if (mounted) {
-        context.showErrorSnackBar(message: 'Unexpected error occured');
+        context.showErrorSnackBar(message: 'Unexpected error occurred');
      }
    }

--- a/examples/user-management/flutter-user-management/lib/pages/account_page.dart
+++ b/examples/user-management/flutter-user-management/lib/pages/account_page.dart
@@ -35,7 +35,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected exception occured');
+      context.showErrorSnackBar(message: 'Unexpected exception occurred');
    }

    setState(() {
@@ -65,7 +65,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpeted error occured');
+      context.showErrorSnackBar(message: 'Unexpeted error occurred');
    }
    setState(() {
      _loading = false;
@@ -78,7 +78,7 @@ class _AccountPageState extends State<AccountPage> {
    } on AuthException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error occured');
+      context.showErrorSnackBar(message: 'Unexpected error occurred');
    }
    if (mounted) {
      Navigator.of(context).pushReplacementNamed('/');
@@ -99,7 +99,7 @@ class _AccountPageState extends State<AccountPage> {
    } on PostgrestException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error has occured');
+      context.showErrorSnackBar(message: 'Unexpected error has occurred');
    }
    if (!mounted) {
      return;
--- a/examples/user-management/flutter-user-management/lib/pages/login_page.dart
+++ b/examples/user-management/flutter-user-management/lib/pages/login_page.dart
@@ -36,7 +36,7 @@ class _LoginPageState extends State<LoginPage> {
    } on AuthException catch (error) {
      context.showErrorSnackBar(message: error.message);
    } catch (error) {
-      context.showErrorSnackBar(message: 'Unexpected error occured');
+      context.showErrorSnackBar(message: 'Unexpected error occurred');
    }

    setState(() {
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
@@ -11,14 +11,14 @@ interface Props {

 const Breadcrumb = ({ className, style, children, spacing = 'small' }: Props) => {
  let classes = [BreadcrumbStyle['sbui-breadcrumb--container']]
-  let seperatorClasses = [BreadcrumbStyle['sbui-breadcrumb--separator']]
+  let separatorClasses = [BreadcrumbStyle['sbui-breadcrumb--separator']]

  if (className) {
    classes.push(className)
  }

  if (spacing) {
-    seperatorClasses.push(`sbui-breadcrumb--separator-${spacing}`)
+    separatorClasses.push(`sbui-breadcrumb--separator-${spacing}`)
  }

  return (
@@ -27,7 +27,7 @@ const Breadcrumb = ({ className, style, children, spacing = 'small' }: Props) =>
        <li className={BreadcrumbStyle['sbui-breadcrumb--item-container']}>
          {child}
          {idx + 1 < children!.length && (
-            <IconChevronRight size={12} className={seperatorClasses.join(' ')} aria-hidden="true" />
+            <IconChevronRight size={12} className={separatorClasses.join(' ')} aria-hidden="true" />
          )}
        </li>
      ))}
--- a/packages/ui/src/components/Divider/Divider.tsx
+++ b/packages/ui/src/components/Divider/Divider.tsx
@@ -37,7 +37,7 @@ export default function Divider({
  return (
    <div
      // className={classes.join(' ')}
-      role="seperator"
+      role="separator"
      style={style}
    >
      {children && (
--- a/packages/ui/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/ui/src/components/Dropdown/Dropdown.stories.tsx
@@ -68,7 +68,7 @@ export const DefaultFull = (args: any) => {
              </Typography.Text>
            </div>
          </Dropdown.Misc>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown.Label>Group label</Dropdown.Label>,
          <Dropdown.Item onClick={() => console.log('clicked')}>
            Account
@@ -76,17 +76,17 @@ export const DefaultFull = (args: any) => {
          <Dropdown.Item>
            Settings <Dropdown.RightSlot>⌘+T</Dropdown.RightSlot>
          </Dropdown.Item>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown.Checkbox checked={checked} onChange={setChecked}>
            Show subtitles
          </Dropdown.Checkbox>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown.RadioGroup value={value} onChange={setValue}>
            <Dropdown.Radio value={'red'}>Red</Dropdown.Radio>
            <Dropdown.Radio value={'blue'}>Blue</Dropdown.Radio>
            <Dropdown.Radio value={'green'}>Green</Dropdown.Radio>
          </Dropdown.RadioGroup>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown
            isNested
            overlay={[
@@ -95,7 +95,7 @@ export const DefaultFull = (args: any) => {
                <Dropdown.Radio value={'blue'}>Blue</Dropdown.Radio>
                <Dropdown.Radio value={'green'}>Green</Dropdown.Radio>
              </Dropdown.RadioGroup>,
-              <Dropdown.Seperator />,
+              <Dropdown.Separator />,
              <Dropdown.Label>Group label</Dropdown.Label>,
              <Dropdown.Item onClick={() => console.log('clicked')}>
                Account
@@ -112,7 +112,7 @@ export const DefaultFull = (args: any) => {
              </Dropdown.RightSlot>
            </Dropdown.TriggerItem>
          </Dropdown>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown.Item icon={<IconLogIn size="tiny" />}>
            Log out
          </Dropdown.Item>,
@@ -142,7 +142,7 @@ export const Default = (args: any) => (
            </Typography.Text>
          </div>
        </Dropdown.Misc>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Label>Group label</Dropdown.Label>,
        <Dropdown.Item onClick={() => console.log('clicked')}>
          Account
@@ -150,7 +150,7 @@ export const Default = (args: any) => (
        <Dropdown.Item>
          Settings <Dropdown.RightSlot>⌘+T</Dropdown.RightSlot>
        </Dropdown.Item>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Item icon={<IconLogIn size="tiny" />}>Log out</Dropdown.Item>,
      ]}
    >
@@ -172,7 +172,7 @@ export const doNotcloseOverlay = (args: any) => (
          <Typography.Text>Signed in as </Typography.Text>
          <Typography.Text strong>tom@example.com </Typography.Text>
        </Dropdown.Misc>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Item>Account</Dropdown.Item>,
        <Dropdown.Item>Settings</Dropdown.Item>,
        <Dropdown.Item>
@@ -207,10 +207,10 @@ export const withCustomStyles = (args: any) => (
          <Typography.Text>Signed in as </Typography.Text>
          <Typography.Text strong>tom@example.com </Typography.Text>
        </Dropdown.Item>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Item>Account</Dropdown.Item>,
        <Dropdown.Item>Settings</Dropdown.Item>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Item>
          <Button type="default" icon={<IconLogOut />}>
            Log out
@@ -243,7 +243,7 @@ export const SearchList = (args: any) => (
          <Typography.Text>Signed in as </Typography.Text>
          <Typography.Text strong>tom@example.com </Typography.Text>
        </Dropdown.Item>,
-        <Dropdown.Seperator />,
+        <Dropdown.Separator />,
        <Dropdown.Item icon={<IconLogIn />}>
          <Typography.Text>Log out</Typography.Text>
        </Dropdown.Item>,
@@ -270,7 +270,7 @@ export const Checkbox = (args: any) => {
            Account
          </Dropdown.Item>,
          <Dropdown.Item>Settings</Dropdown.Item>,
-          <Dropdown.Seperator />,
+          <Dropdown.Separator />,
          <Dropdown.Checkbox checked={checked} onChange={setChecked}>
            Show subtitles
          </Dropdown.Checkbox>,
--- a/packages/ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/components/Dropdown/Dropdown.tsx
@@ -126,10 +126,10 @@ interface CheckboxProps {
  ItemIndicator?: React.ReactNode
 }

-export function Seperator() {
+export function Separator() {
  let __styles = styleHandler('dropdown')

-  return <RadixDropdown.Separator className={__styles.seperator} />
+  return <RadixDropdown.Separator className={__styles.separator} />
 }

 export function Checkbox({
@@ -220,7 +220,7 @@ Dropdown.Checkbox = Checkbox
 Dropdown.Radio = Radio
 Dropdown.RadioGroup = RadioGroup
 Dropdown.Label = Label
-Dropdown.Seperator = Seperator
+Dropdown.Separator = Separator
 Dropdown.RightSlot = RightSlot
 Dropdown.TriggerItem = TriggerItem
 export default Dropdown
--- a/packages/ui/src/components/Modal/Modal.stories.tsx
+++ b/packages/ui/src/components/Modal/Modal.stories.tsx
@@ -588,7 +588,7 @@ customFooterOneButton.args = {
  icon: <IconCheck background="brand" size="xxxlarge" />,
  onCancel: action('onCancel'),
  onConfirm: action('onConfirm'),
-  title: 'Payment succesful',
+  title: 'Payment successful',
  description:
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.',
  layout: 'vertical',
--- a/packages/ui/src/components/Modal/Modal.tsx
+++ b/packages/ui/src/components/Modal/Modal.tsx
@@ -186,12 +186,12 @@ function Content({ children }: { children: React.ReactNode }) {
  return <div className={__styles.content}>{children}</div>
 }

-export function Seperator() {
+export function Separator() {
  const __styles = styleHandler('modal')

-  return <div className={__styles.seperator}></div>
+  return <div className={__styles.separator}></div>
 }

 Modal.Content = Content
-Modal.Seperator = Seperator
+Modal.Separator = Separator
 export default Modal
--- a/packages/ui/src/components/Popover/Popover.stories.tsx
+++ b/packages/ui/src/components/Popover/Popover.stories.tsx
@@ -41,7 +41,7 @@ export const Default = (args: any) => (
              descriptionText="Set the width of something"
              layout="horizontal"
            />
-            <Popover.Seperator />
+            <Popover.Separator />
            <Input
              className="px-3"
              size="tiny"
@@ -50,7 +50,7 @@ export const Default = (args: any) => (
              descriptionText="Set the width of something"
              layout="horizontal"
            />
-            <Popover.Seperator />
+            <Popover.Separator />
            <Input
              className="px-3"
              size="tiny"
--- a/packages/ui/src/components/Popover/Popover.tsx
+++ b/packages/ui/src/components/Popover/Popover.tsx
@@ -101,12 +101,12 @@ function Close() {
  )
 }

-function Seperator() {
+function Separator() {
  const __styles = styleHandler('popover')

-  return <div className={__styles.seperator}></div>
+  return <div className={__styles.separator}></div>
 }

-Popover.Seperator = Seperator
+Popover.Separator = Separator
 Popover.Close = Close
 export default Popover
--- a/packages/ui/src/components/SidePanel/SidePanel.tsx
+++ b/packages/ui/src/components/SidePanel/SidePanel.tsx
@@ -115,10 +115,10 @@ const SidePanel = ({
  )
 }

-export function Seperator() {
+export function Separator() {
  let __styles = styleHandler('sidepanel')

-  return <div className={__styles.seperator}></div>
+  return <div className={__styles.separator}></div>
 }

 export function Content({ children }: { children: React.ReactNode }) {
@@ -128,5 +128,5 @@ export function Content({ children }: { children: React.ReactNode }) {
 }

 SidePanel.Content = Content
-SidePanel.Seperator = Seperator
+SidePanel.Separator = Separator
 export default SidePanel
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -982,7 +982,7 @@ export default {
        data-closed:animate-panel-slide-right-in
      `,
    },
-    seperator: `
+    separator: `
      w-full
      h-px
      my-2
@@ -1216,7 +1216,7 @@ export default {
      px-4 flex items-center space-x-2 py-1.5
      text-xs
    `,
-    seperator: `
+    separator: `
      w-full
      h-px
      my-2
@@ -1297,7 +1297,7 @@ export default {
      transition
      text-scale-900 hover:text-scale-1100
    `,
-    seperator: `
+    separator: `
      w-full
      h-px
      my-2
@@ -1453,7 +1453,7 @@ export default {
      overflow-y-auto
      data-open:animate-overlay-show data-closed:animate-overlay-hide  
    `,
-    seperator: `
+    separator: `
      w-full
      h-px
      my-2
--- a/studio/components/grid/components/common/ForeignTableModal/index.tsx
+++ b/studio/components/grid/components/common/ForeignTableModal/index.tsx
@@ -146,7 +146,7 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
            onChange={onFilterChange}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <div className="foreign-table-modal__content-container">
            <div
--- a/studio/components/grid/components/header/filter/FilterPopover.tsx
+++ b/studio/components/grid/components/header/filter/FilterPopover.tsx
@@ -65,7 +65,7 @@ const Filter: FC = () => {
          </div>
        )}
      </div>
-      <Popover.Seperator />
+      <Popover.Separator />
      <div className="px-3">
        <Button icon={<IconPlus />} type="text" onClick={onAddFilter}>
          Add filter
--- a/studio/components/grid/components/header/sort/SortPopover.tsx
+++ b/studio/components/grid/components/header/sort/SortPopover.tsx
@@ -70,7 +70,7 @@ const Sort: FC = () => {
        </div>
      )}

-      <Popover.Seperator />
+      <Popover.Separator />
      <div className="px-3">
        {columns && columns.length > 0 ? (
          <DropdownControl
--- a/studio/components/interfaces/Account/NewAccessTokenButton.tsx
+++ b/studio/components/interfaces/Account/NewAccessTokenButton.tsx
@@ -77,7 +77,7 @@ const NewAccessTokenButton = observer(() => {
                  className="w-full"
                />
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <Button htmlType="submit" loading={isSubmitting} size="small" block danger>
                  Generate Token
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
@@ -45,7 +45,7 @@ const PolicyEditor: FC<Props> = ({
            onUpdatePolicyName={(name) => onUpdatePolicyFormFields({ name })}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        {isNewPolicy && (
          <>
            <Modal.Content>
@@ -54,7 +54,7 @@ const PolicyEditor: FC<Props> = ({
                onSelectOperation={(command) => onUpdatePolicyFormFields({ command })}
              />
            </Modal.Content>
-            <Modal.Seperator />
+            <Modal.Separator />
          </>
        )}
        <Modal.Content>
@@ -64,7 +64,7 @@ const PolicyEditor: FC<Props> = ({
            onUpdateSelectedRoles={(roles) => onUpdatePolicyFormFields({ roles })}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <PolicyDefinition
            operation={operation}
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
@@ -55,7 +55,7 @@ const PolicyRow: FC<Props> = ({
                >
                  Edit
                </Dropdown.Item>
-                <Dropdown.Seperator />
+                <Dropdown.Separator />
                <Dropdown.Item
                  icon={<IconTrash size={14} />}
                  onClick={() => onSelectDeletePolicy(policy)}
--- a/studio/components/interfaces/Auth/Users/UserDropdown.tsx
+++ b/studio/components/interfaces/Auth/Users/UserDropdown.tsx
@@ -140,7 +140,7 @@ const UserDropdown: FC<Props> = ({ user, canRemoveUser }) => {
              Send OTP
            </Dropdown.Item>
          ) : null}
-          <Dropdown.Seperator />
+          <Dropdown.Separator />
          <Tooltip.Root delayDuration={0}>
            <Tooltip.Trigger className="w-full">
              <Dropdown.Item
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
@@ -61,7 +61,7 @@ const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel }) => {
          <PaymentElement />
        </div>
      </Modal.Content>
-      <Modal.Seperator />
+      <Modal.Separator />
      <Modal.Content>
        <div className="flex items-center space-x-2 pt-2">
          <Button block htmlType="submit" type="primary" loading={isSaving}>
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -275,7 +275,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
          <Modal.Content>
            <p className="text-sm text-scale-1200">Would you like to update your project now?</p>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex items-center gap-2">
              <Button block type="default" onClick={() => setShowConfirmModal(false)}>
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -291,7 +291,7 @@ const PaymentSummaryPanel: FC<Props> = ({
          <Modal.Content>
            <p className="text-sm text-scale-1200">Would you like to update your project now?</p>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex items-center gap-2">
              <Button block type="default" onClick={() => setShowConfirmModal(false)}>
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -346,7 +346,7 @@ const ProUpgrade: FC<Props> = ({
              </div>
            </div>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex items-center gap-2">
              <Button block type="primary" onClick={() => setShowSpendCapHelperModal(false)}>
--- a/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
@@ -347,7 +347,7 @@ const PITRSelection = ({}) => {
          <Modal.Content>
            <p>Point in time recovery review</p>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="py-2 space-y-1">
              <p className="text-sm text-scale-1100"> Your database will be restored to</p>
@@ -355,7 +355,7 @@ const PITRSelection = ({}) => {
              <p className="text-lg">{selectedTimezone?.text}</p>
            </div>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <Alert withIcon variant="warning" title="Warning: This action cannot be undone">
              <div className="space-y-3">
@@ -366,7 +366,7 @@ const PITRSelection = ({}) => {
              </div>
            </Alert>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <p className="text-sm">
              Restores may take from a few minutes up to several hours depending on the size of your
--- a/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -151,7 +151,7 @@ const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
                    >
                      Create a new schema "{extension.name}"
                    </Listbox.Option>
-                    <Modal.Seperator />
+                    <Modal.Separator />
                    {/* @ts-ignore */}
                    {schemas.map((schema: PostgresSchema) => {
                      return (
@@ -176,7 +176,7 @@ const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
                </Modal.Content>
              )}

-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <div className="flex items-center justify-end space-x-2">
                  <Button type="default" disabled={isSubmitting} onClick={() => onCancel()}>
--- a/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
+++ b/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
@@ -18,7 +18,7 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
  const [loading, setLoading] = useState(false)
  const [showConfirmEnableModal, setShowConfirmEnableModal] = useState(false)

-  const canUpdateExtentions = checkPermissions(
+  const canUpdateExtensions = checkPermissions(
    PermissionAction.TENANT_SQL_ADMIN_WRITE,
    'extensions'
  )
@@ -84,7 +84,7 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
            <Toggle
              size="tiny"
              checked={isOn}
-              disabled={!canUpdateExtentions}
+              disabled={!canUpdateExtensions}
              onChange={() => (isOn ? disableExtension() : enableExtension())}
            />
          )}
--- a/studio/components/interfaces/Database/Extensions/Extensions.tsx
+++ b/studio/components/interfaces/Database/Extensions/Extensions.tsx
@@ -33,7 +33,7 @@ const Extensions: FC<Props> = ({}) => {
    (ext: any) => !isNull(ext.installed_version)
  )

-  const canUpdateExtentions = checkPermissions(
+  const canUpdateExtensions = checkPermissions(
    PermissionAction.TENANT_SQL_ADMIN_WRITE,
    'extensions'
  )
@@ -49,7 +49,7 @@ const Extensions: FC<Props> = ({}) => {
            onChange={(e) => setFilterString(e.target.value)}
            icon={<IconSearch size="tiny" />}
          />
-          {!canUpdateExtentions && (
+          {!canUpdateExtensions && (
            <div className="w-[500px]">
              <InformationBox
                icon={<IconAlertCircle className="text-scale-1100" strokeWidth={2} />}
--- a/studio/components/interfaces/Database/Functions/CreateFunction.tsx
+++ b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
@@ -372,11 +372,11 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
                    <SelectSchema />
                  </div>
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <InputMultiArguments readonly={true} />
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <InputDefinition />
                </SidePanel.Content>
@@ -386,22 +386,22 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
                <SidePanel.Content>
                  <InputName />
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <div className="space-y-4">
                    <SelectSchema />
                    <SelectReturnType />
                  </div>
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <InputMultiArguments />
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <InputDefinition />
                </SidePanel.Content>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <Panel>
                    <div className={`space-y-8 rounded bg-bg-alt-light py-4 dark:bg-bg-alt-dark`}>
@@ -425,11 +425,11 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
                        <SelectBehavior />
                      </div>
                    </SidePanel.Content>
-                    <SidePanel.Seperator />
+                    <SidePanel.Separator />
                    <SidePanel.Content>
                      <InputMultiConfigParams />
                    </SidePanel.Content>
-                    <SidePanel.Seperator />
+                    <SidePanel.Separator />
                    <SidePanel.Content>
                      <RadioSecurity />
                    </SidePanel.Content>
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
@@ -15,18 +15,18 @@ const ServiceConfigForm: FC = observer(({}) => {
    <>
      {_localState.formState.hookService.value === 'http_request' ? (
        <>
-          <SidePanel.Seperator />
+          <SidePanel.Separator />
          <div className="space-y-10">
            <div className="space-y-6 px-6">
              <h5>HTTP Request</h5>
              <SelectServiceMethod />
              <InputServiceUrl />
            </div>
-            <SidePanel.Seperator />
+            <SidePanel.Separator />
            <div className="px-6">
              <InputMultiServiceHeaders />
            </div>
-            <SidePanel.Seperator />
+            <SidePanel.Separator />
            <div className="px-6">
              <InputMultiServiceParams />
            </div>
--- a/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
@@ -412,7 +412,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =

              {_localState.formState.serviceHeaders.value.length > 0 && (
                <>
-                  <SidePanel.Seperator />
+                  <SidePanel.Separator />
                  <div className="space-y-2 px-6">
                    <div className="flex items-center space-x-2">
                      <h5 className="text-base text-scale-1200">HTTP Headers</h5>
@@ -451,7 +451,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =

              {_localState.formState.serviceParams.value.length > 0 && (
                <>
-                  <SidePanel.Seperator />
+                  <SidePanel.Separator />
                  <div className="space-y-2 px-6">
                    <div className="flex items-center space-x-2">
                      <h5 className="text-base text-scale-1200">HTTP Parameters</h5>
@@ -489,13 +489,13 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
              <div className="px-6">
                <InputName />
              </div>
-              <SidePanel.Seperator />
+              <SidePanel.Separator />
              <div className="space-y-6 px-6">
                <h5 className="text-base text-scale-1200">Conditions to fire hook</h5>
                <TableSelection />
                <CheckboxEvents />
              </div>
-              <SidePanel.Seperator />
+              <SidePanel.Separator />
              <div className="space-y-6 px-6">
                <h5 className="text-base text-scale-1200">Type of hook</h5>
                <RadioGroupHookService />
--- a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
+++ b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -350,7 +350,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
                    <div className="px-6">
                      <InputName />
                    </div>
-                    <SidePanel.Seperator />
+                    <SidePanel.Separator />
                    <div className="space-y-12 px-6">
                      <h5>Conditions to fire trigger</h5>
                      <ListboxTable />
@@ -358,7 +358,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
                      <ListboxActivation />
                      <SelectOrientation />
                    </div>
-                    <SidePanel.Seperator />
+                    <SidePanel.Separator />
                    <FunctionForm />
                  </>
                )}
--- a/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
@@ -94,7 +94,7 @@ const DeleteOrganizationButton = observer(() => {
                  organization and remove all of its projects.
                </p>
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <Input
                  id="orgName"
@@ -109,7 +109,7 @@ const DeleteOrganizationButton = observer(() => {
                  className="w-full"
                />
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <Button
                  block
--- a/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -180,7 +180,7 @@ const InviteMemberButton: FC<Props> = ({ user, members = [], roles = [], rolesAd
                    </div>
                  </div>
                </Modal.Content>
-                <Modal.Seperator />
+                <Modal.Separator />
                <Modal.Content>
                  <div className="pt-2 pb-3">
                    <Button
--- a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -197,7 +197,7 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
                    <p className="block opacity-50">Transfer ownership of "{orgName}"</p>
                  </div>
                </Dropdown.Item>
-                <Dropdown.Seperator />
+                <Dropdown.Separator />
              </>
            )}
            {isPendingInviteAcceptance ? (
@@ -212,7 +212,7 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
                )}
                {canResendInvite && isExpired && (
                  <>
-                    <Dropdown.Seperator />
+                    <Dropdown.Separator />
                    <Dropdown.Item onClick={() => handleResendInvite(member)}>
                      <div className="flex flex-col">
                        <p>Resend invitation</p>
--- a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -266,7 +266,7 @@ const MembersView = () => {
              By changing the role of this member their permissions will change.
            </p>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex gap-3">
              <Button
--- a/studio/components/interfaces/Settings/API/JWTSettings.tsx
+++ b/studio/components/interfaces/Settings/API/JWTSettings.tsx
@@ -199,7 +199,7 @@ const JWTSettings: FC<Props> = ({}) => {
                                  >
                                    Generate a random secret
                                  </Dropdown.Item>
-                                  <Dropdown.Seperator />
+                                  <Dropdown.Separator />
                                  <Dropdown.Item
                                    onClick={() => setIsCreatingKey(true)}
                                    icon={<IconPenTool size={16} />}
--- a/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -202,7 +202,7 @@ const LogTable = ({

    return (
      <div className="flex w-1/2 justify-center px-5">
-        <Alert variant="danger" title="Sorry! An error occured when fetching data." withIcon>
+        <Alert variant="danger" title="Sorry! An error occurred when fetching data." withIcon>
          <Renderer {...childProps} />
        </Alert>
      </div>
--- a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
@@ -55,7 +55,7 @@ export const ErrorRenderers = () => (
      <Alert
        key={i}
        variant="danger"
-        title="Sorry! An error occured when fetching data."
+        title="Sorry! An error occurred when fetching data."
        withIcon
        className="w-1/2"
      >
--- a/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
@@ -61,7 +61,7 @@ const LogsFilterPopover: React.FC<Props> = ({
                      size="medium"
                      defaultChecked={(filters?.[options.key] as Filters)?.[x.key] as boolean}
                    />
-                    {i !== options.options.length - 1 && <Popover.Seperator />}
+                    {i !== options.options.length - 1 && <Popover.Separator />}
                  </React.Fragment>
                ))}
              </div>
--- a/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -51,7 +51,7 @@ const UpgradePrompt: React.FC<Props> = ({ show, setShowUpgradePrompt }) => {
            </div>
          </div>
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <div className="flex justify-between">
            <Button type="default" onClick={() => setShowUpgradePrompt(false)}>
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -190,7 +190,7 @@ const ColumnEditor: FC<Props> = ({
        </div>
      </SidePanel.Content>

-      <SidePanel.Seperator />
+      <SidePanel.Separator />

      <SidePanel.Content>
        <div className="space-y-10 py-6">
@@ -202,7 +202,7 @@ const ColumnEditor: FC<Props> = ({
          />
        </div>
      </SidePanel.Content>
-      <SidePanel.Seperator />
+      <SidePanel.Separator />
      <SidePanel.Content>
        <div className="space-y-10 py-6">
          <ColumnType
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
@@ -90,7 +90,7 @@ const InputWithSuggestions: FC<Props> = ({
              overlay={
                <>
                  <Dropdown.Label>{suggestionsHeader || 'Suggestions'}</Dropdown.Label>
-                  <Dropdown.Seperator />
+                  <Dropdown.Separator />
                  {filteredSuggestions.map((suggestion: Suggestion) => (
                    <Dropdown.Item
                      key={suggestion.name}
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
@@ -184,7 +184,7 @@ const RowEditor: FC<Props> = ({
            </SidePanel.Content>
            {optionalFields.length > 0 && (
              <>
-                <SidePanel.Seperator />
+                <SidePanel.Separator />
                <SidePanel.Content>
                  <div className="space-y-10 py-6">
                    <div>
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -157,7 +157,7 @@ const Column: FC<Props> = ({
                        className="p-4"
                        onChange={() => onUpdateColumn({ isNullable: !column.isNullable })}
                      />
-                      <Popover.Seperator />
+                      <Popover.Separator />
                    </>
                  )}

@@ -170,7 +170,7 @@ const Column: FC<Props> = ({
                        className="p-4"
                        onChange={() => onUpdateColumn({ isUnique: !column.isUnique })}
                      />
-                      <Popover.Seperator />
+                      <Popover.Separator />
                    </>
                  )}
                  {column.format.includes('int') && (
@@ -186,7 +186,7 @@ const Column: FC<Props> = ({
                          onUpdateColumn({ isIdentity, isArray })
                        }}
                      />
-                      <Popover.Seperator />
+                      <Popover.Separator />
                    </>
                  )}

--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -197,7 +197,7 @@ const TableEditor: FC<Props> = ({
            />
          </div>
        </SidePanel.Content>
-        <SidePanel.Seperator />
+        <SidePanel.Separator />
        <SidePanel.Content>
          <div className="space-y-10 py-6">
            <Checkbox
@@ -231,7 +231,7 @@ const TableEditor: FC<Props> = ({
            />
          </div>
        </SidePanel.Content>
-        <SidePanel.Seperator />
+        <SidePanel.Separator />
        <SidePanel.Content>
          <div className="space-y-10 py-6">
            {!isDuplicating && (
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -99,7 +99,7 @@ const FeedbackWidget: FC<Props> = ({ onClose }) => {
        value={feedback}
        onChange={onFeedbackChange}
      />
-      <Popover.Seperator />
+      <Popover.Separator />
      <div className="w-80 space-y-3 px-3 py-2 pb-4">
        <div className="flex justify-between space-x-2">
          <Button type="default" onClick={onClose} className="hover:border-gray-500">
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -57,7 +57,7 @@ const HelpPopover: FC<Props> = () => {
              prioritised.
            </p>
          </div>
-          <Popover.Seperator />
+          <Popover.Separator />
          <div className="mb-4 space-y-2">
            <div className="mb-4 px-5">
              <h5 className={'mb-2'}>Reach out to the community</h5>
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -102,7 +102,7 @@ const NotificationsPopover: FC<Props> = () => {
      await app.projects.fetchDetail(projectToApplyMigration.ref, (project) => meta.setProjectDetails(project))
      ui.setNotification({
        category: 'success',
-        message: `Succesfully applied migration for project "${projectToApplyMigration.name}"`,
+        message: `Successfully applied migration for project "${projectToApplyMigration.name}"`,
      })
    } else {
      ui.setNotification({
@@ -124,7 +124,7 @@ const NotificationsPopover: FC<Props> = () => {
      await app.projects.fetchDetail(projectToRollbackMigration.ref, (project) => meta.setProjectDetails(project))
      ui.setNotification({
        category: 'success',
-        message: `Succesfully rolled back migration for project "${projectToRollbackMigration.name}"`,
+        message: `Successfully rolled back migration for project "${projectToRollbackMigration.name}"`,
      })
    } else {
      ui.setNotification({
@@ -146,7 +146,7 @@ const NotificationsPopover: FC<Props> = () => {
      await app.projects.fetchDetail(projectToFinalizeMigration.ref, (project) => meta.setProjectDetails(project))
      ui.setNotification({
        category: 'success',
-        message: `Succesfully finalized migration for project "${projectToFinalizeMigration.name}"`,
+        message: `Successfully finalized migration for project "${projectToFinalizeMigration.name}"`,
      })
    } else {
      ui.setNotification({
@@ -204,7 +204,7 @@ const NotificationsPopover: FC<Props> = () => {
                          setTargetNotification(notification)
                        }}
                      />
-                      {i !== notifications.length - 1 && <Popover.Seperator />}
+                      {i !== notifications.length - 1 && <Popover.Separator />}
                    </Fragment>
                  ))}
                </>
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
@@ -25,7 +25,7 @@ const OrgDropdown = () => {
                {x.name}
              </Dropdown.Item>
            ))}
-          <Dropdown.Seperator />
+          <Dropdown.Separator />
          <Dropdown.Item icon={<IconPlus size="tiny" />} onClick={() => router.push(`/new`)}>
            New organization
          </Dropdown.Item>
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
@@ -52,7 +52,7 @@ const ProjectDropdown = () => {
                </a>
              </Link>
            ))}
-          <Popover.Seperator />
+          <Popover.Separator />
          <Link href={`/new/${selectedOrganizationSlug}`}>
            <a className="block">
              <Dropdown.Item icon={<IconPlus size="tiny" />}>New project</Dropdown.Item>
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -82,7 +82,7 @@ const NavigationBar: FC<Props> = ({}) => {
                      Account Preferences
                    </Dropdown.Item>
                  </Link>
-                  <Dropdown.Seperator />
+                  <Dropdown.Separator />
                </>
              )}
              <Dropdown.Label>Theme</Dropdown.Label>
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -135,7 +135,7 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
              </p>
            </div>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex items-center gap-2">
              <Button
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -73,7 +73,7 @@ const DropdownMenu = observer(({ tabInfo }: { tabInfo: QueryTab }) => {
        <Dropdown.Item onClick={renameQuery} icon={<IconEdit2 size="tiny" />}>
          Rename query
        </Dropdown.Item>
-        <Dropdown.Seperator />
+        <Dropdown.Separator />
        <Dropdown.Item onClick={() => setDeleteModalOpen(true)} icon={<IconTrash size="tiny" />}>
          Remove query
        </Dropdown.Item>
--- a/studio/components/layouts/StorageLayout/StorageMenu.tsx
+++ b/studio/components/layouts/StorageLayout/StorageMenu.tsx
@@ -153,7 +153,7 @@ const BucketRow = ({
              >
                {bucket.public ? 'Make private' : 'Make public'}
              </Dropdown.Item>,
-              <Dropdown.Seperator key="bucket-separator" />,
+              <Dropdown.Separator key="bucket-separator" />,
              <Dropdown.Item
                icon={<IconTrash size="tiny" />}
                key="delete-bucket"
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -267,7 +267,7 @@ const TableEditorMenu: FC<Props> = ({
                          >
                            Duplicate Table
                          </Dropdown.Item>,
-                          <Dropdown.Seperator key="separator" />,
+                          <Dropdown.Separator key="separator" />,
                          <Dropdown.Item
                            key="delete-table"
                            icon={<IconTrash size="tiny" />}
--- a/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
+++ b/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
@@ -29,7 +29,7 @@ const OrganizationDropdown = ({ organizations }) => {
                {x.name}
              </Dropdown.Item>
            ))}
-          <Dropdown.Seperator />
+          <Dropdown.Separator />
          <Dropdown.Item icon={<IconPlus size="tiny" />} onClick={() => router.push(`/new`)}>
            New organization
          </Dropdown.Item>
--- a/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js
@@ -73,7 +73,7 @@ const RenameQuery = observer(({ tabId, onComplete, visible, onCancel }) => {
            <Modal.Content>
              <Input label="Description" id="desc" placeholder="Describe query" />
            </Modal.Content>
-            <Modal.Seperator />
+            <Modal.Separator />
            <Modal.Content>
              <div className="flex items-center justify-end gap-2">
                <Button htmlType="reset" type="default" onClick={onCancel}>
--- a/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx
+++ b/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx
@@ -87,7 +87,7 @@ const CreateBucketModal: FC<Props> = ({
            />
          </div>
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <div className="space-y-4">
            <Toggle
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
@@ -321,7 +321,7 @@ const FileExplorerRow = ({
              overlay={[
                rowOptions.map((option) => {
                  if (option.name === 'Separator') {
-                    return <Dropdown.Seperator key="row-separator" />
+                    return <Dropdown.Separator key="row-separator" />
                  } else {
                    return (
                      <Dropdown.Item
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js
@@ -85,7 +85,7 @@ const StoragePolicies = () => {

  /*
    Functions that involve the CRUD for policies
-    For each API call within the Promise.all, return true if an error occured, else return false
+    For each API call within the Promise.all, return true if an error occurred, else return false
  */
  const onCreatePolicies = async (payloads) => {
    return await Promise.all(
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js
@@ -33,7 +33,7 @@ const PolicyRow = ({
              >
                Edit
              </Dropdown.Item>
-              <Dropdown.Seperator />
+              <Dropdown.Separator />
              <Dropdown.Item
                icon={<IconTrash size={14} />}
                type="outline"
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js
@@ -117,14 +117,14 @@ const StoragePoliciesEditor = ({
            onUpdatePolicyName={onUpdatePolicyName}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <PolicyAllowedOperations
            allowedOperations={policyFormFields.allowedOperations}
            onToggleOperation={onToggleOperation}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <PolicyRoles
            roles={roles}
@@ -132,7 +132,7 @@ const StoragePoliciesEditor = ({
            onUpdateSelectedRoles={onUpdatePolicyRoles}
          />
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <PolicyDefinition
            definition={definition}
--- a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -80,7 +80,7 @@ const StorageConfig = ({ config, projectRef }: any) => {
          fileSizeLimit: updatedValue.value,
          unformattedFileSizeLimit: res.fileSizeLimit,
        }
-        ui.setNotification({ category: 'success', message: 'Sucessfully updated settings' })
+        ui.setNotification({ category: 'success', message: 'Successfully updated settings' })
      }
    }
  }
--- a/studio/components/ui/DatePicker/DatePicker.tsx
+++ b/studio/components/ui/DatePicker/DatePicker.tsx
@@ -211,7 +211,7 @@ function _DatePicker({
            from: startDate?.toISOString() || null,
            to: endDate?.toISOString() || null,
          })}
-          <Popover.Seperator />
+          <Popover.Separator />
          <div className="flex items-center justify-end gap-2 py-2 px-3 pb-4">
            <Button type="default" onClick={() => handleClear()}>
              Clear
--- a/studio/components/ui/Dialogs/ConfirmDialog.js
+++ b/studio/components/ui/Dialogs/ConfirmDialog.js
@@ -53,7 +53,7 @@ const ConfirmModal = ({
              <Modal.Content>
                <p className="text-sm text-scale-1100">{description}</p>
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <div className="flex items-center gap-2">
                  <Button htmlType="button" type="default" onClick={onSelectCancel} block>
--- a/studio/components/ui/Modals/TextConfirmModal.tsx
+++ b/studio/components/ui/Modals/TextConfirmModal.tsx
@@ -60,7 +60,7 @@ const TextConfirmModal: FC<Props> = ({
              <Modal.Content>
                <p className="mb-2 block text-sm">{text}</p>
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <Input
                  id="confirmValue"
@@ -72,7 +72,7 @@ const TextConfirmModal: FC<Props> = ({
                  placeholder={confirmPlaceholder}
                />
              </Modal.Content>
-              <Modal.Seperator />
+              <Modal.Separator />
              <Modal.Content>
                <Button
                  block
--- a/studio/lib/common/fetch/base.ts
+++ b/studio/lib/common/fetch/base.ts
@@ -3,7 +3,7 @@ import { isUndefined } from 'lodash'
 import { SupaResponse } from 'types/base'

 export function handleError<T>(e: any, requestId: string): SupaResponse<T> {
-  const message = e?.message ? `An error has occured: ${e.message}` : 'An error has occured'
+  const message = e?.message ? `An error has occurred: ${e.message}` : 'An error has occurred'
  const error = { code: 500, message, requestId }
  return { error } as unknown as SupaResponse<T>
 }
@@ -77,7 +77,7 @@ export async function handleResponseError<T = unknown>(
  } else if (resJson.error && resJson.error.message) {
    return { error: { code: response.status, ...resJson.error } } as unknown as SupaResponse<T>
  } else {
-    const message = resTxt ?? `An error has occured: ${response.status}`
+    const message = resTxt ?? `An error has occurred: ${response.status}`
    const error = { code: response.status, message, requestId }
    return { error } as unknown as SupaResponse<T>
  }
--- a/studio/pages/project/[ref]/settings/billing/update/index.tsx
+++ b/studio/pages/project/[ref]/settings/billing/update/index.tsx
@@ -163,7 +163,7 @@ const BillingUpdate: NextPageWithLayout = () => {
              </p>
            </div>
          </Modal.Content>
-          <Modal.Seperator />
+          <Modal.Separator />
          <Modal.Content>
            <div className="flex items-center gap-2">
              <Button
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -289,7 +289,7 @@ const ResetDbPassword: FC<any> = () => {
            />
          </div>
        </Modal.Content>
-        <Modal.Seperator />
+        <Modal.Separator />
        <Modal.Content>
          <div className="flex space-x-2 pb-2">
            <Button type="default" onClick={() => setShowResetDbPass(false)}>
--- a/studio/tests/pages/projects/LogsPreviewer.test.js
+++ b/studio/tests/pages/projects/LogsPreviewer.test.js
@@ -299,7 +299,7 @@ test('bug: load older btn does not error out when previous page is empty', async
  // clicking load older multiple times should not give error
  await waitFor(() => {
    expect(screen.queryByText(/Sorry/)).toBeNull()
-    expect(screen.queryByText(/An error occured/)).toBeNull()
+    expect(screen.queryByText(/An error occurred/)).toBeNull()
    expect(screen.queryByText(/undefined/)).toBeNull()
  })
 })