urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 18:31:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

settings: switch to multipage layout

Browse Source
This commit is contained in:
Matilde Park 2021-02-26 13:07:09 -05:00
parent 639372e58f
commit 9841e92325
7 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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

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

@ -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">

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

@ -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

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

@ -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

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

@ -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" />}

51
pkg/interface/src/views/apps/settings/settings.tsx
View File

@ -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>