Start PausedProjectState layout

studio/components/interfaces/Home/ProjectList/ProjectCard.tsx

@@ -19,16 +19,23 @@ const ProjectCard: FC<Props> = ({
   onSelectDelete,
   rewriteHref,
 }) => {
+  console.log({ rewriteHref })
   const { name, ref: projectRef } = project
   const desc = `${project.cloud_provider} | ${project.region}`
 
   return (
     <li className="col-span-1">
       <CardButton
-        linkHref={rewriteHref ? rewriteHref : paused ? '' : `/project/${projectRef}`}
+        linkHref={rewriteHref ? rewriteHref : `/project/${projectRef}`}
         title={
-          <div className="flex flex-row gap-1 w-full justify-between w-full">
-            <span className="truncate flex-shrink">{name}</span>
+          <div className="flex w-full w-full flex-row justify-between gap-1">
+            <span className="flex-shrink truncate">{name}</span>
+          </div>
+        }
+        description={''}
+        footer={
+          <div className="flex items-end justify-between">
+            <span className="text-scale-900 text-sm lowercase">{desc}</span>
             {paused && (
               <div className="grow text-right">
                 <Badge color="scale">
@@ -39,15 +46,9 @@ const ProjectCard: FC<Props> = ({
                 </Badge>
               </div>
             )}
-          </div>
-        }
-        description={''}
-        footer={
-          <div className="lowercase flex justify-between items-end">
-            <span className="text-sm text-scale-900">{desc}</span>
-            {paused && (
-              <div className="flex items-center gap-2">
-                <div className="flex items-center gap-2">
+
+            {/*<div className="flex items-center gap-2">
+                 <div className="flex items-center gap-2">
                   <Button
                     size="tiny"
                     type="primary"
@@ -63,8 +64,7 @@ const ProjectCard: FC<Props> = ({
                     Delete
                   </Button>
                 </div>
-              </div>
-            )}
+              </div>*/}
           </div>
         }
       ></CardButton>

studio/components/layouts/ProjectLayout/ProjectPausedState.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Badge, IconLoader, IconMonitor, IconServer } from '@supabase/ui'
+
+import { Project } from 'types'
+
+// interface Props {
+//   project: Project
+// }
+
+//const ProjectPausedState: FC<Props> = ({ project }) => {
+const ProjectPausedState = () => {
+  return (
+    <>
+      <div className="mx-auto my-16 w-full max-w-7xl space-y-16">
+        <div className="mx-6 space-y-16">
+          <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-6">
+            <h1 className="text-3xl">PROJECT NAME</h1>
+            <div>
+              <Badge color="brand">
+                <div className="flex items-center gap-2">
+                  <IconLoader className="animate-spin" size={12} />
+                  <span>Connecting to project</span>
+                </div>
+              </Badge>
+            </div>
+          </div>
+          <div className="bg-scale-300 border-scale-400 flex h-[500px] items-center justify-center rounded border p-8">
+            <div className="w-[420px] space-y-4">
+              <div className="mx-auto flex max-w-[300px] items-center justify-center space-x-4 lg:space-x-8">
+                <IconMonitor className="text-scale-1100" size={50} strokeWidth={1.5} />
+                <IconServer className="text-scale-1100" size={50} strokeWidth={1.5} />
+              </div>
+
+              <div className="space-y-1">
+                <p className="text-center">Connecting to PROJECT NAME</p>
+              </div>
+
+              <div className="flex flex-col items-center"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default observer(ProjectPausedState)

studio/components/ui/CardButton.tsx

@@ -27,7 +27,7 @@ const CardButton: FC<Props> = ({
   imgAlt,
   onClick,
   icon,
-  containerHeightClassName="h-32"
+  containerHeightClassName = 'h-32',
 }) => {
   const LinkContainer = ({ children }: { children: React.ReactNode }) => (
     <Link href={linkHref}>
@@ -48,7 +48,7 @@ const CardButton: FC<Props> = ({
     'border border-panel-border-light dark:border-panel-border-dark',
     'rounded-md py-4 px-6 flex flex-row',
     'transition ease-in-out duration-150',
-    containerHeightClassName
+    containerHeightClassName,
   ]
 
   if (isLink) {
@@ -62,7 +62,7 @@ const CardButton: FC<Props> = ({
   }
 
   const ImageContainer = ({ children }: { children: React.ReactNode }) => {
-    return <div className="flex flex-col mr-4">{children}</div>
+    return <div className="mr-4 flex flex-col">{children}</div>
   }
 
   const contents = (
@@ -81,9 +81,9 @@ const CardButton: FC<Props> = ({
         </ImageContainer>
       )}
       {icon && <ImageContainer>{icon}</ImageContainer>}
-      <div className="flex flex-col space-y-2 w-full h-full">
+      <div className="flex h-full w-full flex-col space-y-2">
         <h5 className="text-scale-1200">{title}</h5>
-        <div className="flex flex-col flex-1 w-full">
+        <div className="flex w-full flex-1 flex-col">
           <p className="text-scale-1100 text-sm">{description}</p>
           <div className="w-full">{children && children}</div>
         </div>
@@ -92,14 +92,14 @@ const CardButton: FC<Props> = ({
       {isLink && (
         <div
           className="
+          text-scale-900
+          group-hover:text-scale-1200
           absolute
           right-4
-          top-3
-          text-scale-900
-          transition-all 
-          duration-200 
+          top-4
+          transition-all
+          duration-200
           group-hover:right-3
-          group-hover:text-scale-1200
         "
         >
           <IconChevronRight />

studio/pages/project/[ref]/index.tsx

@@ -7,11 +7,14 @@ import { IS_PLATFORM } from 'lib/constants'
 import { ProjectLayoutWithAuth } from 'components/layouts'
 import ProjectUsageSection from 'components/interfaces/Home/ProjectUsageSection'
 import { NextPageWithLayout } from 'types'
+import { toJS } from 'mobx'
+import ProjectPausedState from 'components/layouts/ProjectLayout/ProjectPausedState'
 
 const Home: NextPageWithLayout = () => {
   const { ui } = useStore()
 
   const project = ui.selectedProject
+  console.log(toJS(project))
   const projectName =
     project?.ref !== 'default' && project?.name !== undefined
       ? project?.name
@@ -22,7 +25,10 @@ const Home: NextPageWithLayout = () => {
       <div className="mx-6 flex items-center space-x-6">
         <h1 className="text-3xl">{projectName}</h1>
       </div>
-      {IS_PLATFORM && <ProjectUsageSection />}
+
+      {project && project?.status == 'INACTIVE' && <h2>hello everyone</h2>}
+
+      {/* {IS_PLATFORM && project?.status !== 'INACTIVE' && <ProjectUsageSection />} */}
       <div className="space-y-8">
         <div className="mx-6">
           <Typography.Title level={4}>Client libraries</Typography.Title>