added more InformationBox apis

studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx

@@ -87,6 +87,7 @@ const ColumnForeignKeyInformation: FC<{
 }> = ({ columnName, foreignKey, onSelectEditRelation, onSelectRemoveRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -125,6 +126,7 @@ const ColumnForeignKeyAdded: FC<{
 }> = ({ columnName, foreignKey, onSelectEditRelation, onSelectRemoveRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -165,6 +167,7 @@ const ColumnForeignKeyRemoved: FC<{
 }> = ({ columnName, originalForeignKey, onSelectEditRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -210,6 +213,7 @@ const ColumnForeignKeyUpdated: FC<{
 }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">

studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx

@@ -126,6 +126,7 @@ const ForeignKeySelector: FC<Props> = ({
     >
       <div className="space-y-6">
         <InformationBox
+          block
           icon={<IconHelpCircle size="large" strokeWidth={1.5} />}
           title="What are foreign keys?"
           description={

studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx

@@ -178,6 +178,7 @@ const ColumnManagement: FC<Props> = ({
 
         {primaryKeyColumns.length > 1 && (
           <InformationBox
+            block
             icon={<IconKey className="text-white" size="large" />}
             title="Composite primary key selected"
             description="The columns that you've selected will grouped as a primary key, and will serve

studio/components/ui/InformationBox.tsx

@@ -9,6 +9,9 @@ interface Props {
   urlLabel?: string
   defaultVisibility?: boolean
   hideCollapse?: boolean
+  className?: string
+  block?: boolean
+  size?: 'tiny' | 'small' | 'normal' | 'large'
 }
 
 const InformationBox: FC<Props> = ({
@@ -19,10 +22,19 @@ const InformationBox: FC<Props> = ({
   urlLabel = 'Read more',
   defaultVisibility = false,
   hideCollapse = false,
+  className = '',
+  block = false,
+  size = 'normal',
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(defaultVisibility)
+
+  const padding = { tiny: 'py-1', small: 'py-2', normal: 'py-3', large: 'py-4' }[size]
   return (
-    <div className="block w-full bg-gray-100 dark:bg-gray-600 py-3 border border-gray-600 dark:border-gray-500 border-opacity-20 rounded">
+    <div
+      className={`${
+        block ? 'block w-full' : ''
+      } bg-gray-100 dark:bg-gray-600 ${padding} border border-gray-600 dark:border-gray-500 border-opacity-20 rounded ${className}`}
+    >
       <div className="flex flex-col">
         <div className="flex items-center justify-between px-3">
           <div className="flex space-x-3 w-full lg:items-center">

studio/pages/new/[slug].tsx

@@ -335,6 +335,7 @@ const NotOrganizationOwnerWarning = () => {
   return (
     <div className="mt-4">
       <InformationBox
+        block
         icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
         defaultVisibility={true}
         hideCollapse
@@ -342,8 +343,8 @@ const NotOrganizationOwnerWarning = () => {
         description={
           <div className="space-y-3">
             <p className="text-sm leading-normal">
-              Only the organization owner can create new projects. Contact your organization owner to
-              create a new project for this organization.
+              Only the organization owner can create new projects. Contact your organization owner
+              to create a new project for this organization.
             </p>
           </div>
         }
@@ -356,6 +357,7 @@ const FreeProjectLimitWarning = () => {
   return (
     <div className="mt-4">
       <InformationBox
+        block
         icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
         defaultVisibility={true}
         hideCollapse
@@ -411,6 +413,7 @@ const EmptyPaymentMethodWarning = observer(
     return (
       <div className="mt-4">
         <InformationBox
+          block
           icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
           defaultVisibility={true}
           hideCollapse