settings: removes superfluous flex container, pads back button on mobile

fixes urbit/landscape#541

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

@@ -4,8 +4,16 @@ import { Text } from '@tlon/indigo-react';
 
 export function BackButton(props: {}) {
   return (
-    <Link to="/~settings">
-      <Text display={["block", "none"]} fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
+    <Link to='/~settings'>
+      <Text
+        display={['block', 'none']}
+        fontSize='2'
+        fontWeight='medium'
+        p={4}
+        pb={0}
+      >
+        {'<- Back to System Preferences'}
+      </Text>
     </Link>
   );
 }

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

@@ -11,12 +11,12 @@ import {
   Anchor
 } from '@tlon/indigo-react';
 
-import GlobalApi from "~/logic/api/global";
-import { BucketList } from "./BucketList";
+import GlobalApi from '~/logic/api/global';
+import { BucketList } from './BucketList';
 import { S3State } from '~/types/s3-update';
 import useS3State from '~/logic/state/storage';
 import { BackButton } from './BackButton';
-import {StorageState} from '~/types';
+import { StorageState } from '~/types';
 import useStorageState from '~/logic/state/storage';
 
 interface FormSchema {
@@ -33,7 +33,7 @@ interface S3FormProps {
 
 export default function S3Form(props: S3FormProps): ReactElement {
   const { api } = props;
-  const s3 = useStorageState(state => state.s3);
+  const s3 = useStorageState((state) => state.s3);
 
   const onSubmit = useCallback(
     (values: FormSchema) => {
@@ -54,7 +54,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
 
   return (
     <>
-      <Col p="5" pt="4" borderBottom="1" borderBottomColor="washedGray">
+      <BackButton />
+      <Col p='5' pt='4' borderBottom='1' borderBottomColor='washedGray'>
         <Formik
           initialValues={
             {
@@ -68,42 +69,42 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
-            <BackButton/>
-            <Col maxWidth="600px" gapY="5">
-              <Col gapY="1" mt="0">
-                <Text color="black" fontSize={2} fontWeight="medium">
+            <Col maxWidth='600px' gapY='5'>
+              <Col gapY='1' mt='0'>
+                <Text color='black' fontSize={2} fontWeight='medium'>
                   S3 Storage Setup
                 </Text>
                 <Text gray>
                   Store credentials for your S3 object storage buckets on your
                   Urbit ship, and upload media freely to various modules.
                   <Anchor
-                    target="_blank"
+                    target='_blank'
                     style={{ textDecoration: 'none' }}
-                    borderBottom="1"
-                    ml="1"
-                    href="https://urbit.org/using/operations/using-your-ship/#bucket-setup">
+                    borderBottom='1'
+                    ml='1'
+                    href='https://urbit.org/using/operations/using-your-ship/#bucket-setup'
+                  >
                     Learn more
                   </Anchor>
                 </Text>
               </Col>
-              <Input label="Endpoint" id="s3endpoint" />
-              <Input label="Access Key ID" id="s3accessKeyId" />
+              <Input label='Endpoint' id='s3endpoint' />
+              <Input label='Access Key ID' id='s3accessKeyId' />
               <Input
-                type="password"
-                label="Secret Access Key"
-                id="s3secretAccessKey"
+                type='password'
+                label='Secret Access Key'
+                id='s3secretAccessKey'
               />
-              <Button style={{ cursor: "pointer" }} type="submit">
+              <Button style={{ cursor: 'pointer' }} type='submit'>
                 Submit
               </Button>
             </Col>
           </Form>
         </Formik>
       </Col>
-      <Col maxWidth="600px" p="5" gapY="4">
-        <Col gapY="1">
-          <Text color="black" mb={4} fontSize={2} fontWeight="medium">
+      <Col maxWidth='600px' p='5' gapY='4'>
+        <Col gapY='1'>
+          <Text color='black' mb={4} fontSize={2} fontWeight='medium'>
             S3 Buckets
           </Text>
           <Text gray>

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

@@ -77,50 +77,49 @@ export default function SettingsScreen(props: any) {
         <title>Landscape - Settings</title>
       </Helmet>
       <Skeleton>
-        <Row height='100%' overflow='auto'>
-          <Col
-            height='100%'
-            borderRight='1'
-            borderRightColor='washedGray'
-            display={hash === '' ? 'flex' : ['none', 'flex']}
-            width='100%'
-          >
-            <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
-              System Preferences
-            </Text>
-            <Col gapY='1'>
-              <SidebarItem
-                icon='Inbox'
-                text='Notifications'
-                hash='notifications'
-              />
-              <SidebarItem icon='Image' text='Display' hash='display' />
-              <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
-              <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
-              <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
-              <SidebarItem
-                icon='Locked'
-                text='Devices + Security'
-                hash='security'
-              />
-            </Col>
+        <Col
+          height='100%'
+          borderRight='1'
+          borderRightColor='washedGray'
+          display={hash === '' ? 'flex' : ['none', 'flex']}
+          width='100%'
+          overflowY='auto'
+        >
+          <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
+            System Preferences
+          </Text>
+          <Col gapY='1'>
+            <SidebarItem
+              icon='Inbox'
+              text='Notifications'
+              hash='notifications'
+            />
+            <SidebarItem icon='Image' text='Display' hash='display' />
+            <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
+            <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
+            <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
+            <SidebarItem
+              icon='Locked'
+              text='Devices + Security'
+              hash='security'
+            />
           </Col>
-          <Col flexGrow={1} overflowY='auto'>
-            <SettingsItem>
-              {hash === 'notifications' && (
-                <NotificationPreferences
-                  {...props}
-                  graphConfig={props.notificationsGraphConfig}
-                />
-              )}
-              {hash === 'display' && <DisplayForm api={props.api} />}
-              {hash === 's3' && <S3Form api={props.api} />}
-              {hash === 'leap' && <LeapSettings api={props.api} />}
-              {hash === 'calm' && <CalmPrefs api={props.api} />}
-              {hash === 'security' && <SecuritySettings api={props.api} />}
-            </SettingsItem>
-          </Col>
-        </Row>
+        </Col>
+        <Col flexGrow={1} overflowY='auto'>
+          <SettingsItem>
+            {hash === 'notifications' && (
+              <NotificationPreferences
+                {...props}
+                graphConfig={props.notificationsGraphConfig}
+              />
+            )}
+            {hash === 'display' && <DisplayForm api={props.api} />}
+            {hash === 's3' && <S3Form api={props.api} />}
+            {hash === 'leap' && <LeapSettings api={props.api} />}
+            {hash === 'calm' && <CalmPrefs api={props.api} />}
+            {hash === 'security' && <SecuritySettings api={props.api} />}
+          </SettingsItem>
+        </Col>
       </Skeleton>
     </>
   );