feat: Move settings navigation to profile dropdown (#521)

* feat: Move settings navigation to profile dropdown * Reoriented the settings page to have the exit button on the right side with a small label. --------- Co-authored-by: Daniel R Farrell <[email protected]>
onlook-dev · Oct 14, 2024 · 2653718 · 2653718
1 parent bf7c8cc
commit 2653718
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/app/src/routes/projects/SettingsTab/index.tsx b/app/src/routes/projects/SettingsTab/index.tsx
@@ -5,14 +5,16 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { CheckCircledIcon, ChevronDownIcon } from '@radix-ui/react-icons';
+import { Cross1Icon, CheckCircledIcon, ChevronDownIcon, ResetIcon } from '@radix-ui/react-icons';
 import { useEffect, useState } from 'react';
 import { getRandomSettingsMessage } from '../helpers';
 import { MainChannels } from '/common/constants';
 import { IDE, IdeType } from '/common/ide';
 import { UserSettings } from '/common/models/settings';
+import { observer } from 'mobx-react-lite';
+import { ProjectTabs } from '..';
 
-export default function SettingsTab() {
+const SettingsTab = observer(({ setCurrentTab }: { setCurrentTab: (tab: ProjectTabs) => void }) => {
  const [isAnalyticsEnabled, setIsAnalyticsEnabled] = useState(false);
  const [ide, setIde] = useState<IDE>(IDE.VS_CODE);
  const [shouldWarnDelete, setShouldWarnDelete] = useState(true);
@@ -45,11 +47,29 @@ export default function SettingsTab() {
  window.api.invoke(MainChannels.OPEN_EXTERNAL_WINDOW, url);
  }
 
+ function handleBackButtonClick() {
+ setCurrentTab(ProjectTabs.PROJECTS);
+ }
+
  return (
- <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-foreground-onlook text-regular">{getRandomSettingsMessage()}</p>
+ <div className="w-[800px] mt-28 flex flex-col gap-16 md:flex-col px-12">
+ <div className="flex-row flex justify-between">
+ <div className="h-[fit-content] flex flex-col gap-5 ">
+ <h1 className="leading-none text-title1">{'Settings'}</h1>
+ <p className="text-foreground-onlook text-regular">
+ {getRandomSettingsMessage()}
+ </p>
+ </div>
+ <div className="h-fit w-fit flex group">
+ <Button
+ variant="secondary"
+ className="w-fit h-fit flex flex-col gap-1 text-foreground-secondary hover:text-foreground-active"
+ onClick={handleBackButtonClick}
+ >
+ <Cross1Icon className="w-4 h-4 cursor-pointer" />
+ <p className="text-microPlus">Close</p>
+ </Button>
+ </div>
  </div>
  <div className="w-full h-full flex flex-col gap-12">
  <div className="flex flex-col gap-8">
@@ -181,4 +201,6 @@ export default function SettingsTab() {
  </div>
  </div>
  );
-}
+});
+
+export default SettingsTab;
diff --git a/app/src/routes/projects/TopBar/index.tsx b/app/src/routes/projects/TopBar/index.tsx
@@ -9,22 +9,17 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 import { CreateMethod } from '@/routes/projects/helpers';
-import { DownloadIcon, FilePlusIcon, PlusIcon, ExitIcon } from '@radix-ui/react-icons';
+import { DownloadIcon, FilePlusIcon, PlusIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
 import { ProjectTabs } from '..';
-import ModeToggle from '../TopBar/ModeToggle';
 
 export const TopBar = observer(
  ({
- currentTab,
  setCurrentTab,
- createMethod,
  setCreateMethod,
  }: {
- currentTab: ProjectTabs;
  setCurrentTab: (tab: ProjectTabs) => void;
- createMethod: CreateMethod | null;
  setCreateMethod: (method: CreateMethod | null) => void;
  }) => {
  const authManager = useAuthManager();
@@ -44,14 +39,15 @@ export const TopBar = observer(
  authManager.signOut();
  }
 
+ function openSettings() {
+ setCurrentTab(ProjectTabs.SETTINGS);
+ }
+
  return (
  <div className="flex flex-row h-12 px-12 items-center">
  <div className="flex-1 flex items-center justify-start mt-3">
  <img className="w-24" src={wordLogo} alt="Onlook logo" />
  </div>
- {!createMethod && (
- <ModeToggle currentTab={currentTab} setCurrentTab={setCurrentTab} />
- )}
  <div className="flex-1 flex justify-end space-x-2 mt-4 items-center">
  <DropdownMenu>
  <DropdownMenuTrigger asChild>
@@ -104,6 +100,10 @@ export const TopBar = observer(
  </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
+ <DropdownMenuItem onSelect={openSettings}>
+ <GearIcon className="w-4 h-4 mr-2" />
+ Settings
+ </DropdownMenuItem>
  <DropdownMenuItem onSelect={signOut}>
  <ExitIcon className="w-4 h-4 mr-2" />
  Sign out

diff --git a/app/src/routes/projects/index.tsx b/app/src/routes/projects/index.tsx
@@ -24,12 +24,7 @@ export default function Projects() {
 
  return (
  <div className="w-full h-[calc(100vh-2.5rem)]">
- <TopBar
- createMethod={createMethod}
- setCreateMethod={setCreateMethod}
- currentTab={currentTab}
- setCurrentTab={setCurrentTabTracked}
- />
+ <TopBar setCreateMethod={setCreateMethod} setCurrentTab={setCurrentTabTracked} />
  <div className="flex h-[calc(100vh-5.5rem)] justify-center">
  {createMethod ? (
  <CreateProject createMethod={createMethod} setCreateMethod={setCreateMethod} />
@@ -38,7 +33,9 @@ export default function Projects() {
  {currentTab === ProjectTabs.PROJECTS && (
  <ProjectsTab setCreateMethod={setCreateMethod} />
  )}
- {currentTab === ProjectTabs.SETTINGS && <SettingsTab />}
+ {currentTab === ProjectTabs.SETTINGS && (
+ <SettingsTab setCurrentTab={setCurrentTab} />
+ )}
  </>
  )}
  </div>