settings: switch to multipage layout

pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx

@@ -66,7 +66,7 @@ export function CalmPrefs(props: {
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
-        <Col borderBottom="1" borderBottomColor="washedGray" p="5" gapY="5">
+        <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
           <Col gapY="1">
             <Text color="black" fontSize={2} fontWeight="medium">
               CalmEngine

pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx

@@ -48,7 +48,7 @@ export default function DisplayForm(props: DisplayFormProps) {
 
   let bgColor, bgUrl;
   if (backgroundType === "url") {
-    bgUrl = background; 
+    bgUrl = background;
   }
   if (backgroundType === "color") {
     bgColor = background;
@@ -70,11 +70,11 @@ export default function DisplayForm(props: DisplayFormProps) {
         promises.push(api.settings.putEntry('display', 'backgroundType', values.bgType));
 
         promises.push(
-          api.settings.putEntry('display', 'background', 
+          api.settings.putEntry('display', 'background',
             values.bgType === "color"
             ? `#${uxToHex(values.bgColor || "0x0")}`
             : values.bgType === "url"
-            ? values.bgUrl || "" 
+            ? values.bgUrl || ""
             : false
           ));
 
@@ -86,7 +86,7 @@ export default function DisplayForm(props: DisplayFormProps) {
     >
       {(props) => (
         <Form>
-          <Col p="5" gapY="5">
+          <Col p="5" pt="4" gapY="5">
             <Col gapY="2">
               <Text color="black" fontSize={2} fontWeight="medium">
                 Display Preferences

pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx

@@ -74,19 +74,19 @@ export function LeapSettings(props: { api: GlobalApi; }) {
   };
 
   return (
-    <Col p="5" gapY="5">
-      <Col gapY="2">
+    <Col p="5" pt="4" gapY="5">
+      <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Leap
         </Text>
-        <Text fontSize="0" gray>
+        <Text gray>
           Customize Leap ordering, omit modules or results
         </Text>
       </Col>
       <FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
         <Form>
           <Col gapY="4">
-            <Text fontWeight="medium" fontSize="0">
+            <Text fontWeight="medium">
               Customize default Leap sections
             </Text>
             <ShuffleFields name="categories">

pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx

@@ -51,7 +51,7 @@ export function NotificationPreferences(props: {
   }, [api]);
 
   return (
-    <Col p="5" gapY="5">
+    <Col p="5" pt="4" gapY="5">
       <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Notification Preferences

pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx

@@ -48,7 +48,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
   );
   return (
     <>
-      <Col p="5" borderBottom="1" borderBottomColor="washedGray">
+      <Col p="5" pt="4" borderBottom="1" borderBottomColor="washedGray">
         <Formik
           initialValues={
             {
@@ -62,7 +62,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
-            <Col mt="5" maxWidth="600px" gapY="5">
+            <Col maxWidth="600px" gapY="5">
               <Col gapY="1">
                 <Text color="black" fontSize={2} fontWeight="medium">
                   S3 Storage Setup

pkg/interface/src/views/apps/settings/components/lib/Security.tsx

@@ -16,8 +16,8 @@ interface SecuritySettingsProps {
 export default function SecuritySettings({ api }: SecuritySettingsProps) {
   const [allSessions, setAllSessions] = useState(false);
   return (
-    <Col gapY="5" p="5">
-      <Col>
+    <Col gapY="5" p="5" pt="4">
+      <Col gapY="1">
         <Text fontSize={2} fontWeight="medium">
           Security Preferences
         </Text>
@@ -26,10 +26,10 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
         </Text>
       </Col>
       <Col gapY="1">
-        <Text color="black" fontSize={0}>
+        <Text color="black">
           Log out of this session
         </Text>
-        <Text mb="3" fontSize={0} gray>
+        <Text mb="3" gray>
           {allSessions
             ? "You will be logged out of all browsers that have currently logged into your Urbit."
             : "You will be logged out of your Urbit on this browser."}
@@ -39,7 +39,7 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
           selected={allSessions}
           onChange={() => setAllSessions((s) => !s)}
         >
-          <Text fontSize="0">Log out of all sessions</Text>
+          <Text>Log out of all sessions</Text>
         </StatelessCheckboxField>
         <form method="post" action="/~/logout">
           {allSessions && <input type="hidden" name="all" />}

pkg/interface/src/views/apps/settings/settings.tsx

@@ -50,11 +50,11 @@ function SidebarItem(props: { hash: string } & Omit<BaseProps, ProvSideProps>) {
   );
 }
 
-function SettingsItem(props: { hash: string; children: ReactNode }) {
-  const { hash, children } = props;
+function SettingsItem(props: { children: ReactNode }) {
+  const { children } = props;
 
   return (
-    <Box borderBottom="1" borderBottomColor="washedGray" id={hash}>
+    <Box borderBottom="1" borderBottomColor="washedGray">
       {children}
     </Box>
   );
@@ -62,7 +62,8 @@ function SettingsItem(props: { hash: string; children: ReactNode }) {
 
 export default function SettingsScreen(props: any) {
 
-  useHashLink();
+  const location = useLocation();
+  const hash = location.hash.slice(1)
 
   return (
     <>
@@ -106,26 +107,28 @@ export default function SettingsScreen(props: any) {
             </Col>
           </Col>
           <Col flexGrow={1} overflowY="auto">
-            <SettingsItem hash="notifications">
-              <NotificationPreferences
-                {...props}
-                graphConfig={props.notificationsGraphConfig}
-              />
-            </SettingsItem>
-            <SettingsItem hash="display">
-              <DisplayForm s3={props.s3} api={props.api} />
-            </SettingsItem>
-            <SettingsItem hash="s3">
-              <S3Form s3={props.s3} api={props.api} />
-            </SettingsItem>
-            <SettingsItem hash="leap">
-              <LeapSettings api={props.api} />
-            </SettingsItem>
-            <SettingsItem hash="calm">
-              <CalmPrefs api={props.api} />
-            </SettingsItem>
-            <SettingsItem hash="security">
-              <SecuritySettings api={props.api} />
+            <SettingsItem>
+              {hash === "notifications" && (
+                <NotificationPreferences
+                  {...props}
+                  graphConfig={props.notificationsGraphConfig}
+                />
+              )}
+              {hash === "display" && (
+                <DisplayForm s3={props.s3} api={props.api} />
+              )}
+              {hash === "s3" && (
+                <S3Form s3={props.s3} api={props.api} />
+              )}
+              {hash === "leap" && (
+                <LeapSettings api={props.api} />
+              )}
+              {hash === "calm" && (
+                <CalmPrefs api={props.api} />
+              )}
+              {hash === "security" && (
+                <SecuritySettings api={props.api} />
+              )}
             </SettingsItem>
           </Col>
         </Row>