Style improvements to the new project flow (#426)

onlook-dev · Sep 30, 2024 · e20fb39 · e20fb39
1 parent 994b484
commit e20fb39
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 40 deletions.
diff --git a/app/src/assets/dunes-create.png b/app/src/assets/dunes-create.png
diff --git a/app/src/components/ui/alert-dialog.tsx b/app/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,8 @@ const AlertDialogContent = React.forwardRef<
         <AlertDialogPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-black/60 backdrop-blur-xl p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl',
+                'before:absolute before:inset-[-0.5px] before:rounded-[12.5px] before:border-[0.5px] before:border-white/20 before:pointer-events-none',
                 className,
             )}
             {...props}

diff --git a/app/src/components/ui/card.tsx b/app/src/components/ui/card.tsx
@@ -6,9 +6,15 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
-            className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+            className={cn(
+                'rounded-xl backdrop-blur-xl bg-black/60 shadow-md text-card-foreground relative',
+                'before:absolute before:inset-[-0.5px] before:rounded-[12.5px] before:border-[0.5px] before:border-white/20 before:pointer-events-none',
+                className,
+            )}
             {...props}
-        />
+        >
+            {props.children}
+        </div>
     ),
 );
 Card.displayName = 'Card';

diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/Name.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/Name.tsx
@@ -52,7 +52,7 @@ export const LoadNameProject = ({
                 </div>
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={goBack} variant="ghost">
                         Back

diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx
@@ -75,7 +75,7 @@ export const LoadSelectFolder = ({
                     </div>
                 ) : (
                     <Button
-                        className="w-full h-20 text-regularPlus text-text border-[0.5px] bg-bg/50"
+                        className="w-full h-20 text-regularPlus text-text border-[0.5px] bg-bg/50 hover:bg-bg/60"
                         variant={'outline'}
                         onClick={pickProjectFolder}
                     >
@@ -84,7 +84,7 @@ export const LoadSelectFolder = ({
                 )}
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={prevStep} variant="ghost">
                         Back

diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/SetUrl.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/SetUrl.tsx
@@ -68,7 +68,7 @@ export const LoadSetUrl = ({
                 </div>
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={goBack} variant="ghost">
                         Back

diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx
@@ -214,7 +214,7 @@ export const LoadVerifyProject = ({
                 {renderMainContent()}
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={handleSelectDifferentFolder} variant="ghost">
                         Select a different folder

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Name.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Name.tsx
@@ -43,7 +43,7 @@ export const NewNameProject = ({
                 </div>
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={prevStep} variant="ghost">
                         Back

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Run.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Run.tsx
@@ -40,7 +40,7 @@ export const NewRunProject = ({
                 </CardDescription>
             </CardHeader>
             <CardContent className="min-h-24 flex items-center w-full">
-                <div className="border-[0.5px] bg-gray-100 w-full rounded-lg p-4 flex flex-row gap-2 items-center relative">
+                <div className="border-[0.5px] bg-gray-100 bg-bg/50 w-full rounded-lg p-4 flex flex-row gap-2 items-center relative">
                     <code className="text-sm overflow-scroll text-nowrap pr-20">{codeContent}</code>
                     <div className="absolute right-[50px] top-0 bottom-0 w-[130px] bg-gradient-to-r from-transparent to-gray-100 pointer-events-none" />
                     <div className="absolute right-[50px] top-0 bottom-0 w-[100px] bg-gradient-to-r from-transparent to-gray-100 pointer-events-none" />
@@ -72,7 +72,7 @@ export const NewRunProject = ({
                 </div>
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button
                         disabled={!hasCopied}

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
@@ -91,7 +91,7 @@ export const NewSelectFolder = ({
                     </div>
                 ) : (
                     <Button
-                        className="w-full h-20 text-regularPlus text-text bg-bg/50"
+                        className="w-full h-20 text-regularPlus text-text border-[0.5px] bg-bg/50 hover:bg-bg/60"
                         variant={'outline'}
                         onClick={pickProjectFolder}
                     >
@@ -100,7 +100,7 @@ export const NewSelectFolder = ({
                 )}
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={goBack} variant="ghost">
                         Rename folder

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx
@@ -130,7 +130,7 @@ export const NewSetupProject = ({
                 {renderMainContent()}
             </CardContent>
             <CardFooter className="text-sm">
-                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <p className="text-text">{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
                     <Button type="button" onClick={prevStep} variant="ghost">
                         {state === StepState.INSTALLING ? 'Cancel' : 'Back'}

diff --git a/app/src/routes/projects/ProjectsTab/Create/index.tsx b/app/src/routes/projects/ProjectsTab/Create/index.tsx
@@ -10,6 +10,7 @@ import { NewRunProject } from './New/Run';
 import { NewSelectFolder } from './New/SelectFolder';
 import { NewSetupProject } from './New/Setup';
 import { Project } from '/common/models/project';
+import backgroundImage from '@/assets/dunes-create.png';
 
 export interface StepProps {
     projectData: Partial<Project>;
@@ -94,40 +95,53 @@ const CreateProject = ({
             stepName: getStepName(createMethod, currentStep),
         });
 
+        let stepComponent;
+
         if (createMethod === CreateMethod.LOAD) {
             if (currentStep === 0) {
-                return <LoadSelectFolder props={props} />;
-            }
-            if (currentStep === 1) {
-                return <LoadVerifyProject props={props} />;
-            }
-            if (currentStep === 2) {
-                return <LoadSetUrl props={props} />;
+                stepComponent = <LoadSelectFolder props={props} />;
+            } else if (currentStep === 1) {
+                stepComponent = <LoadVerifyProject props={props} />;
+            } else if (currentStep === 2) {
+                stepComponent = <LoadSetUrl props={props} />;
             }
         } else if (createMethod === CreateMethod.NEW) {
             if (currentStep === 0) {
-                return <NewNameProject props={props} />;
-            }
-            if (currentStep === 1) {
-                return <NewSelectFolder props={props} />;
-            }
-            if (currentStep === 2) {
-                return <NewSetupProject props={props} />;
-            }
-            if (currentStep === 3) {
-                return <NewRunProject props={props} />;
+                stepComponent = <NewNameProject props={props} />;
+            } else if (currentStep === 1) {
+                stepComponent = <NewSelectFolder props={props} />;
+            } else if (currentStep === 2) {
+                stepComponent = <NewSetupProject props={props} />;
+            } else if (currentStep === 3) {
+                stepComponent = <NewRunProject props={props} />;
             }
         }
 
-        try {
-            finalizeProject();
-            return <p>{'Project created successfully.'}</p>;
-        } catch (e: any) {
-            return <p className="text-red">{e}</p>;
+        if (!stepComponent) {
+            try {
+                finalizeProject();
+                return <p>{'Project created successfully.'}</p>;
+            } catch (e: any) {
+                return <p className="text-red">{e}</p>;
+            }
         }
+
+        return (
+            <div
+                className="relative w-full h-full flex items-center justify-center"
+                style={{
+                    backgroundImage: `url(${backgroundImage})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }}
+            >
+                <div className="absolute inset-0 bg-black bg-opacity-50" />
+                <div className="relative z-10">{stepComponent}</div>
+            </div>
+        );
     };
 
-    return <div className="mt-72">{renderSteps()}</div>;
+    return <div className="fixed inset-0">{renderSteps()}</div>;
 };
 
 export default CreateProject;
diff --git a/app/src/routes/projects/SettingsTab/index.tsx b/app/src/routes/projects/SettingsTab/index.tsx
@@ -39,7 +39,7 @@ export default function SettingsTab() {
     }
 
     return (
-        <div className="w-[800px] mt-28 flex flex-row gap-16">
+        <div className="w-[800px] mt-28 flex flex-col gap-16 md:flex-row px-12">
             <div className="h-[fit-content] w-[240px] flex flex-col gap-5 ">
                 <h1 className="leading-none text-title1">{'Settings'}</h1>
                 <p className="text-text text-regular">{getRandomSettingsMessage()}</p>

diff --git a/app/src/routes/projects/TopBar/index.tsx b/app/src/routes/projects/TopBar/index.tsx
@@ -88,10 +88,10 @@ export const TopBar = observer(
                     </DropdownMenu>
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild disabled={!authManager.isAuthEnabled}>
-                            <Button className="w-8 h-8 p-0 bg-red-500 rounded-full focus:outline-none">
+                            <Button className="w-8 h-8 p-0 bg-bg rounded-full focus:outline-none group">
                                 {userImage && (
                                     <img
-                                        className="w-8 h-8 rounded-full object-cover"
+                                        className="w-8 h-8 rounded-full object-cover group-hover:ease-in-out group-hover:transition group-hover:duration-100 group-hover:ring-1 group-hover:ring-gray-400"
                                         src={userImage}
                                         alt="User avatar"
                                         referrerPolicy={'no-referrer'}