garden: move log out to its own pane

fixes tloncorp/tlon-apps#1141
tloncorp · Jan 11, 2023 · e4a03d7 · e4a03d7
1 parent 1661fb6
commit e4a03d7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 40 deletions.
diff --git a/ui/src/preferences/SecurityPrefs.tsx b/ui/src/preferences/SecurityPrefs.tsx
@@ -9,44 +9,33 @@ export const SecurityPrefs = () => {
   const { push } = useHistory();
 
   return (
-    <Dialog
-      open
-      onOpenChange={(open) => !open && push('/leap/system-preferences')}
-    >
-      <DialogContent containerClass="w-1/3" showClose={false}>
-        <h3 className="h4 mb-6 flex items-center">Log Out</h3>
-        <div className="flex flex-1 flex-col justify-center space-y-6">
-          <div className="flex flex-col space-y-3">
-            <p className="leading-5">
-              Logging out of Landscape will additionally log you out of any
-              applications installed on your urbit.
-            </p>
-            <p className="leading-5">
-              You&apos;ll need to log into your urbit again in order to access
-              its apps.
-            </p>
-          </div>
-          <Checkbox
-            defaultChecked={false}
-            checked={allSessions}
-            onCheckedChange={() => setAllSessions((prev) => !prev)}
-          >
-            Log out of all connected sessions.
-          </Checkbox>
-          <div className="flex justify-end space-x-2">
-            <Button
-              variant="secondary"
-              onClick={() => push('/leap/system-preferences')}
-            >
-              Cancel
-            </Button>
-            <form method="post" action="/~/logout">
-              {allSessions && <input type="hidden" name="all" />}
-              <Button>Logout</Button>
-            </form>
-          </div>
+    <div className="inner-section space-y-8">
+      <h2 className="h4">Log Out</h2>
+      <div className="flex flex-1 flex-col justify-center space-y-6">
+        <div className="flex flex-col space-y-3">
+          <p className="leading-5">
+            Logging out of Landscape will additionally log you out of any
+            applications installed on your urbit.
+          </p>
+          <p className="leading-5">
+            You&apos;ll need to log into your urbit again in order to access its
+            apps.
+          </p>
         </div>
-      </DialogContent>
-    </Dialog>
+        <Checkbox
+          defaultChecked={false}
+          checked={allSessions}
+          onCheckedChange={() => setAllSessions((prev) => !prev)}
+        >
+          Log out of all connected sessions
+        </Checkbox>
+        <div className="flex justify-end space-x-2">
+          <form method="post" action="/~/logout">
+            {allSessions && <input type="hidden" name="all" />}
+            <Button>Log Out</Button>
+          </form>
+        </div>
+      </div>
+    </div>
   );
 };
diff --git a/ui/src/preferences/SystemPreferences.tsx b/ui/src/preferences/SystemPreferences.tsx
@@ -107,7 +107,7 @@ export const SystemPreferences = (
     >
       <div className="system-preferences-grid bg-gray-50">
         <Route exact={isMobile} path={match.url}>
-          <aside className="system-preferences-aside min-h-fit max-h-[calc(100vh-6.25rem)] w-full min-w-60 flex flex-col border-r-2 border-gray-50 bg-white py-4 font-semibold text-black sm:w-auto sm:py-8 sm:text-gray-600">
+          <aside className="system-preferences-aside min-h-fit flex max-h-[calc(100vh-6.25rem)] w-full min-w-60 flex-col border-r-2 border-gray-50 bg-white py-4 font-semibold text-black sm:w-auto sm:py-8 sm:text-gray-600">
             <nav className="flex flex-col px-2 sm:px-6">
               <SearchSystemPreferences subUrl={subUrl} />
               <span className="pt-1 pl-2 pb-3 text-sm font-semibold text-gray-400">
@@ -236,6 +236,7 @@ export const SystemPreferences = (
                 component={AttentionAndPrivacy}
               />
               <Route path={[`${match.url}/storage`]} component={StoragePrefs} />
+              <Route path={`${match.url}/security`} component={SecurityPrefs} />
               <Route
                 path={[`${match.url}/system-updates`, match.url]}
                 component={AboutSystem}
@@ -249,7 +250,6 @@ export const SystemPreferences = (
             </Link>
           </section>
         </Route>
-        <Route path={`${match.url}/security`} component={SecurityPrefs} />
       </div>
     </ErrorBoundary>
   );