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'}