Improve UI [WIP]

KalinNaidoo · Mar 10, 2023 · 1b5faba · 1b5faba
1 parent 183ebfb
commit 1b5faba
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 4,309 deletions.
diff --git a/components/Editor/Logs/DeployButton.tsx b/components/Editor/Logs/DeployButton.tsx
@@ -0,0 +1,35 @@
+import { deployment_state } from '@prisma/client'
+import Button from 'components/Button'
+import Spinner from 'components/Spinner'
+import { capitalize } from 'utils/capitalize'
+
+export interface Props {
+  deploy: () => void
+  deployStatus?: deployment_state | null
+}
+
+function isInProgress(deployStaus?: deployment_state | null) {
+  switch (deployStaus) {
+    case null:
+    case deployment_state.generating:
+    case deployment_state.deploying:
+      return true
+    default:
+      return false
+  }
+}
+
+function DeployButton({ deploy, deployStatus }: Props) {
+  const inProgress = isInProgress()
+
+  return (
+    <Button
+      text={deployStatus ? capitalize(deployStatus) : 'Deploy'}
+      onClick={deploy}
+      variant={Button.variant.Full}
+      icon={inProgress ? <Spinner /> : null}
+    />
+  )
+}
+
+export default DeployButton
diff --git a/components/Editor/Logs.tsx → components/Editor/Logs/index.tsx b/components/Editor/Logs.tsx → components/Editor/Logs/index.tsx
@@ -1,23 +1,26 @@
 import { useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import hljs from 'highlight.js'
+import { deployment_state } from '@prisma/client'
 
-import { Log } from '.'
-import { Fragment } from 'react'
-import Button from 'components/Button'
+import { Log } from 'db/types'
 import Sidebar from 'components/Sidebar'
 import Text from 'components/Text'
 
+import DeployButton from './DeployButton'
+
 export interface Props {
   logs?: Log[]
   deploy: () => void
   deployedURL: string
+  deployStatus?: deployment_state | null
 }
 
 function Logs({
   logs,
   deploy,
   deployedURL,
+  deployStatus,
 }: Props) {
 
   useEffect(function highlightCode() {
@@ -31,21 +34,36 @@ function Logs({
         flex-col
         min-h-0
         flex
-        p-4
-        space-y-4
         "
     >
-      <div className="
+      <div
+        className="
         flex
+        px-4
+        py-2
         items-center
         justify-start
-        space-x-2
-      ">
-        <Button
-          text="Deploy"
-          onClick={deploy}
-          variant={Button.variant.Full}
-        />
+        border-b
+      "
+      >
+        <div
+          className="
+            flex
+            flex-1
+            items-center
+            justify-between
+          "
+        >
+          <Text
+            text="Deployment"
+            className="font-medium"
+            size={Text.size.S2}
+          />
+          <DeployButton
+            deploy={deploy}
+            deployStatus={deployStatus}
+          />
+        </div>
         <a
           href={deployedURL}
           className="
@@ -58,26 +76,25 @@ function Logs({
           />
         </a>
       </div>
-      <div className="
+      <div
+        className="
       max-w-full
       flex
       flex-col
       flex-1
-      overflow-y-auto
+      py-2
+      px-4
+      overflow-auto
       text-xs
-      leading-4
+      tracking-wide
+      font-sans
       break-words
       space-y-2
       ">
         {logs?.map((l, i) =>
-          <Fragment key={i}>
-            <ReactMarkdown className="
-              whitespace-pre-wrap
-              max-w-full
-            ">
-              {l}
-            </ReactMarkdown>
-          </Fragment>
+          <ReactMarkdown key={i}>
+            {l}
+          </ReactMarkdown>
         )}
       </div>
     </Sidebar>

diff --git a/components/Editor/Routes.tsx b/components/Editor/Routes.tsx
@@ -1,10 +1,11 @@
+import clsx from 'clsx'
+import { Plus } from 'lucide-react'
 
 import { Route } from 'state/store'
 import Button from 'components/Button'
 import Sidebar from 'components/Sidebar'
 import Text from 'components/Text'
 import DeleteButton from 'components/DeleteButton'
-import clsx from 'clsx'
 
 export interface Props {
   routes: Route[]
@@ -28,25 +29,37 @@ function Routes({
         flex-col
         min-h-0
         flex
-        p-4
-        space-y-4
         "
     >
-      <div>
+      <div className="
+        flex
+        justify-between
+        py-2
+        px-4
+        border-b
+      ">
+        <Text
+          text="Routes"
+          className="font-medium"
+          size={Text.size.S2}
+        />
         <Button
-          text="New route"
+          text="New"
           onClick={addRoute}
-          variant={Button.variant.Full}
+          variant={Button.variant.Outline}
+          icon={<Plus size="16px" />}
         />
       </div>
       <div className="
       flex
       flex-col
       overflow-y-auto
       leading-4
+      px-4
+      py-2
       break-words
       whitespace-normal
-      space-y-2
+      space-y-0.5
       ">
         {routes.map(r =>
           <div

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -8,6 +8,7 @@ import { useStateStore } from 'state/StoreProvider'
 import Select from 'components/Select'
 import Text from 'components/Text'
 import { useLatestDeployment } from 'hooks/useLatestDeployment'
+import { Log } from 'db/types'
 
 import BlockEditor from './BlockEditor'
 import ConnectionLine from './ConnectionLine'
@@ -20,8 +21,6 @@ const apiHost = process.env.NODE_ENV === 'development' ?
   'http://0.0.0.0:5000' :
   'https://ai-api-service-7d2cl2hooq-uc.a.run.app'
 
-export type Log = string
-
 export interface Props {
   project: projects
 }
@@ -191,6 +190,7 @@ function Editor({ project }: Props) {
               }} />
             </div>
             <Logs
+              deployStatus={deployment?.state}
               logs={logs}
               deploy={deploy}
               deployedURL={deployedURL}

diff --git a/db/types.ts b/db/types.ts
@@ -0,0 +1 @@
+export type Log = string
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "@supabase/auth-helpers-nextjs": "^0.5.5",
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/supabase-js": "^2.10.0",
-    "@types/randomcolor": "^0.5.7",
     "clsx": "^1.2.1",
     "express": "^4.18.2",
     "highlight.js": "^11.7.0",
@@ -45,6 +44,7 @@
   },
   "devDependencies": {
     "@types/node": "^18.14.6",
+    "@types/randomcolor": "^0.5.7",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.13",
@@ -60,7 +60,6 @@
     "prisma": "^4.11.0",
     "supabase": "^1.41.6",
     "tailwindcss": "^3.2.7",
-    "typescript": "^4.9.5",
-    "vercel": "^28.16.12"
+    "typescript": "^4.9.5"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,13 +6,12 @@ import { useState } from 'react'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { Toaster } from 'sonner'
+import { projects } from '@prisma/client'
 
-import 'highlight.js/styles/github-dark.css'
 import 'styles/global.css'
 
 import Header from 'components/Header'
 import { Database } from 'db/supabase'
-import { projects } from '@prisma/client'
 
 const inter = Inter({
   subsets: ['latin'],

diff --git a/styles/global.css b/styles/global.css
@@ -1,3 +1,5 @@
+@import 'highlight.js/styles/a11y-dark.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -35,6 +37,11 @@
     scrollbar-width: none;
     resize: none;
   }
+
+  code {
+    @apply rounded;
+    color-scheme: dark;
+  }
 }
 
 .no-scroller::-webkit-scrollbar {

diff --git a/utils/capitalize.ts b/utils/capitalize.ts
@@ -0,0 +1,3 @@
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}