Merge pull request #99 from ctk-hq/fix/layout-improvements

fix: layout fixes

services/frontend/src/components/Project/index.tsx

@@ -640,7 +640,7 @@ export default function Project(props: IProjectProps) {
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
-            minHeight: "calc(100vh - 120px)"
+            minHeight: "calc(60vh - 120px)"
           }}
         >
           <h3 className="text-2xl font-medium text-gray-900">

services/frontend/src/components/Projects/index.tsx

@@ -113,7 +113,7 @@ const Projects = () => {
                           flexDirection: "column",
                           justifyContent: "center",
                           alignItems: "center",
-                          minHeight: "calc(100vh - 120px)"
+                          minHeight: "calc(60vh - 120px)"
                         }}
                       >
                         <h3 className="mt-2 text-sm font-medium text-gray-900">
@@ -122,7 +122,11 @@ const Projects = () => {
                         <p className="mt-1 text-sm text-gray-500">
                           Get started by creating a new project.
                         </p>
-                        <div className="mt-6">
+                        <div className="flex flex-col md:flex-row mt-6 items-center space-y-2 md:space-y-0 space-x-2">
+                          <button onClick={onImportClick} className="btn-util">
+                            <span>Import</span>
+                          </button>
+
                           <Link to="/projects/new" className="btn-util">
                             <span className="flex space-x-1 items-center">
                               <PlusIcon

services/frontend/src/components/global/SideBar.tsx

@@ -44,7 +44,7 @@ export default function SideBar(props: ISideBarProps) {
           </div>
 
           <div className="md:mt-5 flex-1 flex flex-col items-center sm:flex-row md:flex-col justify-end">
-            <nav className="flex md:flex-1 md:flex-col items-center md:space-y-1">
+            <nav className="flex md:flex-1 flex-col sm:flex-row md:flex-col items-center md:space-y-1">
               {navigation.map((item) => {
                 if (item.visible) {
                   return (

services/frontend/src/hooks/useProject.ts

@@ -106,7 +106,8 @@ export const useProject = (uuid: string | undefined) => {
       return (await axios(requestConfig)).data;
     },
     {
-      staleTime: Infinity
+      staleTime: Infinity,
+      retry: 1
     }
   );
 };