Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx (TypeScript)

Code before:
      <div className="md:w-2/3">
        <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
          <Checkbox
            label="SELECT"
            onChange={() => onToggleOperation('SELECT')}
            checked={allowedOperations.includes('SELECT')}
          />
          <Checkbox
            label="INSERT"
            onChange={() => onToggleOperation('INSERT')}
            checked={allowedOperations.includes('INSERT')}
          />
          <Checkbox
            label="UPDATE"
            onChange={() => onToggleOperation('UPDATE')}
            checked={allowedOperations.includes('UPDATE')}
          />
          <Checkbox
            label="DELETE"
            onChange={() => onToggleOperation('DELETE')}
            checked={allowedOperations.includes('DELETE')}
          />
        </div>
        {hasUpdateOrDelete && (
          <p className="text-sm text-foreground-lighter mt-3">
            SELECT has been auto selected as UPDATE and DELETE require it
          </p>
        )}
        <div className="flex w-5/6 flex-wrap">
          {Object.keys(STORAGE_CLIENT_LIBRARY_MAPPINGS).map((method) => (
            <div key={method} className="mr-2 mt-2 font-mono">
              <Badge variant={allowedClientLibraryMethods.includes(method) ? 'brand' : 'default'}>
                {method}
              </Badge>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () => {} }) => (
  <div className="flex w-full items-center justify-end gap-x-2 border-t px-6 py-3 border-default">
    <Button type="default" onClick={onViewTemplates}>
      View templates
    </Button>
    <Button type="primary" onClick={onReviewPolicy}>
      Review
    </Button>
  </div>

Review comment (suggestion):
Hi @7ttp 💚
May you pls, wrap the `SELECT`, `UPDATE` and `DELETE` in a code syntax style? Just like I'm doing in this comment.

I believe you can do it by adding `<code>` around these titles.

Code after:
      <div className="md:w-2/3">
        <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
          <Checkbox
            label="SELECT"
            onChange={() => onToggleOperation('SELECT')}
            checked={allowedOperations.includes('SELECT')}
          />
          <Checkbox
            label="INSERT"
            onChange={() => onToggleOperation('INSERT')}
            checked={allowedOperations.includes('INSERT')}
          />
          <Checkbox
            label="UPDATE"
            onChange={() => onToggleOperation('UPDATE')}
            checked={allowedOperations.includes('UPDATE')}
          />
          <Checkbox
            label="DELETE"
            onChange={() => onToggleOperation('DELETE')}
            checked={allowedOperations.includes('DELETE')}
          />
        </div>
        {hasUpdateOrDelete && (
          <p className="text-sm text-foreground-light mt-3 prose [&>code]:text-xs">
            <code>SELECT</code> has been auto selected as <code>UPDATE</code> and{' '}
            <code>DELETE</code> require it
          </p>
        )}
        <div className="flex w-5/6 flex-wrap">
          {Object.keys(STORAGE_CLIENT_LIBRARY_MAPPINGS).map((method) => (
            <div key={method} className="mr-2 mt-2 font-mono">
              <Badge variant={allowedClientLibraryMethods.includes(method) ? 'brand' : 'default'}>
                {method}
              </Badge>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () => {} }) => (
  <div className="flex w-full items-center justify-end gap-x-2 border-t px-6 py-3 border-default">
    <Button type="default" onClick={onViewTemplates}>
      View templates
    </Button>
    <Button type="primary" onClick={onReviewPolicy}>
      Review
    </Button>