Merge pull request #4356 from supabase/chore/small-ui-fixes

Chore/small UI fixes

studio/components/interfaces/Authentication/Users/UserDropdown.tsx

@@ -106,6 +106,7 @@ const UserDropdown: FC<{ user: any }> = ({ user }) => {
         } else {
           ui.setNotification({ category: 'success', message: `Successfully deleted ${user.email}` })
           PageState.users = PageState.users.filter((x: any) => x.id != user.id)
+          PageState.totalUsers -= 1
         }
         setLoading(false)
       },

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

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Loading } from '@supabase/ui'
+import { IconAlertCircle, Loading, Typography } from '@supabase/ui'
 
 import { PageContext } from 'pages/project/[ref]/auth/users'
 import Table from 'components/to-be-cleaned/Table'
@@ -26,13 +26,29 @@ const UsersList = ({}) => {
         }
         body={
           <>
-            {PageState.users.length == 0 && (
+            {PageState.usersLoading && (
               <Table.tr>
                 {/* @ts-ignore */}
                 <Table.td
                   colSpan={7}
-                  className="h-28 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
-                ></Table.td>
+                  className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
+                >
+                  <Typography.Text type="secondary">Retrieving users</Typography.Text>
+                </Table.td>
+              </Table.tr>
+            )}
+            {!PageState.usersLoading && PageState.users.length == 0 && (
+              <Table.tr>
+                {/* @ts-ignore */}
+                <Table.td
+                  colSpan={7}
+                  className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
+                >
+                  <div className="flex items-center space-x-3 opacity-75">
+                    <IconAlertCircle size={16} strokeWidth={2} />
+                    <Typography.Text type="secondary">No users in your project yet</Typography.Text>
+                  </div>
+                </Table.td>
               </Table.tr>
             )}
             {PageState.users.length > 0 &&

studio/components/interfaces/Database/Backups/BackupsList.tsx

@@ -49,10 +49,16 @@ const BackupsList: FC<Props> = ({}) => {
       </div> */}
 
       {tierId === STRIPE_PRODUCT_IDS.FREE && (
-        <div className="block w-full bg-white bg-opacity-5 p-3 px-6 border border-white border-opacity-20 rounded">
+        <div
+          className={[
+            'block w-full p-3 px-6 border rounded border-opacity-20',
+            'bg-gray-100 border-gray-600',
+            'dark:bg-gray-600 dark:border-gray-500',
+          ].join(' ')}
+        >
           <div className="flex space-x-3">
             <div className="mt-1">
-              <IconClock className="text-white" size="large" />
+              <IconClock size="large" />
             </div>
             <div className="flex justify-between w-full items-center">
               <div>

studio/components/interfaces/Database/Extensions/Extensions.tsx

@@ -37,7 +37,7 @@ const Extensions: FC<Props> = ({}) => {
 
       <div className="w-full my-8 space-y-12">
         {enabledExtensions.length > 0 && (
-          <div>
+          <div className="space-y-4">
             <Typography.Title level={4}>Enabled</Typography.Title>
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3 mb-4">
               {enabledExtensions.map((extension) => (
@@ -48,7 +48,7 @@ const Extensions: FC<Props> = ({}) => {
         )}
 
         {disabledExtensions.length > 0 && (
-          <div>
+          <div className="space-y-4">
             <Typography.Title level={4}>Extensions</Typography.Title>
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3 mb-4">
               {disabledExtensions.map((extension) => (