From e3f195870f64f473f517a2483c76cd7d3cbc69a5 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Fri, 26 Feb 2021 17:32:54 -0500
Subject: [PATCH] settings: format for mobile

Fixes urbit/landscape#496
---
 .../src/views/apps/settings/components/lib/BackButton.tsx    | 2 +-
 .../src/views/apps/settings/components/lib/CalmPref.tsx      | 1 +
 .../src/views/apps/settings/components/lib/DisplayForm.tsx   | 2 ++
 .../src/views/apps/settings/components/lib/LeapSettings.tsx  | 1 +
 .../views/apps/settings/components/lib/NotificationPref.tsx  | 1 +
 .../src/views/apps/settings/components/lib/S3Form.tsx        | 1 +
 .../src/views/apps/settings/components/lib/Security.tsx      | 2 ++
 pkg/interface/src/views/apps/settings/settings.tsx           | 5 +++--
 8 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
index 0ba81209c3..570618c641 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
@@ -5,7 +5,7 @@ import { Text } from '@tlon/indigo-react';
 export function BackButton(props: {}) {
   return (
     <Link to="/~settings">
-      <Text fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
+      <Text display={["block", "none"]} fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
     </Link>
   );
 }
diff --git a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx b/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
index 7d4352f784..968f4643e1 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
@@ -75,6 +75,7 @@ export function CalmPrefs(props: {
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
         <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
+          <BackButton/>
           <Col gapY="1">
             <Text color="black" fontSize={2} fontWeight="medium">
               CalmEngine
diff --git a/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx b/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
index 8f53909410..5751ced7db 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
@@ -13,6 +13,7 @@ import { S3State, BackgroundConfig } from "~/types";
 import { BackgroundPicker, BgType } from "./BackgroundPicker";
 import useSettingsState, { SettingsState, selectSettingsState } from "~/logic/state/settings";
 import {AsyncButton} from "~/views/components/AsyncButton";
+import { BackButton } from "./BackButton";
 
 const formSchema = Yup.object().shape({
   bgType: Yup.string()
@@ -87,6 +88,7 @@ export default function DisplayForm(props: DisplayFormProps) {
       {(props) => (
         <Form>
           <Col p="5" pt="4" gapY="5">
+            <BackButton/>
             <Col gapY="2">
               <Text color="black" fontSize={2} fontWeight="medium">
                 Display Preferences
diff --git a/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx b/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
index 7dac9b621b..3621943d34 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
@@ -75,6 +75,7 @@ export function LeapSettings(props: { api: GlobalApi; }) {
 
   return (
     <Col p="5" pt="4" gapY="5">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Leap
diff --git a/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx b/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
index e1d4cfe5cd..e61c433034 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
@@ -52,6 +52,7 @@ export function NotificationPreferences(props: {
 
   return (
     <Col p="5" pt="4" gapY="5">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Notification Preferences
diff --git a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
index 1e5d7bbf64..4254beb011 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
@@ -64,6 +64,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
         >
           <Form>
             <Col maxWidth="600px" gapY="5">
+              <BackButton/>
               <Col gapY="1">
                 <Text color="black" fontSize={2} fontWeight="medium">
                   S3 Storage Setup
diff --git a/pkg/interface/src/views/apps/settings/components/lib/Security.tsx b/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
index a20d684590..7c9bc6293b 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
@@ -8,6 +8,7 @@ import {
 } from "@tlon/indigo-react";
 
 import GlobalApi from "~/logic/api/global";
+import { BackButton } from "./BackButton";
 
 interface SecuritySettingsProps {
   api: GlobalApi;
@@ -17,6 +18,7 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
   const [allSessions, setAllSessions] = useState(false);
   return (
     <Col gapY="5" p="5" pt="4">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize={2} fontWeight="medium">
           Security Preferences
diff --git a/pkg/interface/src/views/apps/settings/settings.tsx b/pkg/interface/src/views/apps/settings/settings.tsx
index 9b9fef668b..10bed0ff94 100644
--- a/pkg/interface/src/views/apps/settings/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/settings.tsx
@@ -76,9 +76,10 @@ export default function SettingsScreen(props: any) {
             height="100%"
             borderRight="1"
             borderRightColor="washedGray"
-            display={["none", "flex"]}
+            display={hash === "" ? "flex" : ["none", "flex"]}
             minWidth="250px"
-            maxWidth="350px"
+            width="100%"
+            maxWidth={["100vw", "350px"]}
           >
             <Text
               display="block"