Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-25 10:30:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve UI

Browse Source
This commit is contained in:
Myzel394 2023-02-26 11:56:58 +01:00
parent 7ec6b81b5e
commit 47eee0db4a
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
1 changed files with 235 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/routes/SettingsAliasPreferencesRoute.tsx
View File

@ -17,7 +17,6 @@ import {
InputAdornment, InputAdornment,
MenuItem, MenuItem,
TextField, TextField,
Typography,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material" } from "@mui/material"
@ -31,7 +30,7 @@ import {
IMAGE_PROXY_FORMAT_TYPE_NAME_MAP, IMAGE_PROXY_FORMAT_TYPE_NAME_MAP,
PROXY_USER_AGENT_TYPE_NAME_MAP, PROXY_USER_AGENT_TYPE_NAME_MAP,
} from "~/constants/enum-mappings" } from "~/constants/enum-mappings"
import {AuthContext} from "~/components" import {AuthContext, SimplePageBuilder} from "~/components"
interface Form { interface Form {
removeTrackers: boolean removeTrackers: boolean
@ -121,19 +120,11 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
const isLarge = useMediaQuery(theme.breakpoints.up("md")) const isLarge = useMediaQuery(theme.breakpoints.up("md"))
return ( return (
<SimplePageBuilder.Page
title={t("routes.SettingsRoute.forms.aliasPreferences.title")}
description={t("routes.SettingsRoute.forms.aliasPreferences.description")}
>
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<Grid container spacing={4} flexDirection="column" alignItems="center">
<Grid item>
<Typography variant="h6" component="h3">
{t("routes.SettingsRoute.forms.aliasPreferences.title")}
</Typography>
</Grid>
<Grid item>
<Typography variant="body1" component="p">
{t("routes.SettingsRoute.forms.aliasPreferences.description")}
</Typography>
</Grid>
<Grid item>
<Grid <Grid
display="flex" display="flex"
flexDirection="row" flexDirection="row"
@ -266,13 +257,13 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
formik.errors.imageProxyFormat formik.errors.imageProxyFormat
} }
> >
{Object.entries( {Object.entries(IMAGE_PROXY_FORMAT_TYPE_NAME_MAP).map(
IMAGE_PROXY_FORMAT_TYPE_NAME_MAP, ([value, translationString]) => (
).map(([value, translationString]) => (
<MenuItem key={value} value={value}> <MenuItem key={value} value={value}>
{t(translationString)} {t(translationString)}
</MenuItem> </MenuItem>
))} ),
)}
</TextField> </TextField>
<FormHelperText <FormHelperText
error={Boolean( error={Boolean(
@ -304,8 +295,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
Boolean(formik.errors.proxyUserAgent) Boolean(formik.errors.proxyUserAgent)
} }
helperText={ helperText={
formik.touched.proxyUserAgent && formik.touched.proxyUserAgent && formik.errors.proxyUserAgent
formik.errors.proxyUserAgent
} }
> >
{Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map( {Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map(
@ -318,12 +308,10 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
</TextField> </TextField>
<FormHelperText <FormHelperText
error={Boolean( error={Boolean(
formik.touched.proxyUserAgent && formik.touched.proxyUserAgent && formik.errors.proxyUserAgent,
formik.errors.proxyUserAgent,
)} )}
> >
{(formik.touched.proxyUserAgent && {(formik.touched.proxyUserAgent && formik.errors.proxyUserAgent) ||
formik.errors.proxyUserAgent) ||
t("relations.alias.settings.proxyUserAgent.helperText")} t("relations.alias.settings.proxyUserAgent.helperText")}
</FormHelperText> </FormHelperText>
</FormGroup> </FormGroup>
@ -352,9 +340,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
> >
{(formik.touched.expandUrlShorteners && {(formik.touched.expandUrlShorteners &&
formik.errors.expandUrlShorteners) || formik.errors.expandUrlShorteners) ||
t( t("relations.alias.settings.expandUrlShorteners.helperText")}
"relations.alias.settings.expandUrlShorteners.helperText",
)}
</FormHelperText> </FormHelperText>
<Alert <Alert
sx={{width: "fit-content", alignSelf: "end", marginTop: 1}} sx={{width: "fit-content", alignSelf: "end", marginTop: 1}}
@ -365,8 +351,6 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
</FormGroup> </FormGroup>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
<Grid item>
<LoadingButton <LoadingButton
loading={formik.isSubmitting} loading={formik.isSubmitting}
variant="contained" variant="contained"
@ -375,8 +359,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
> >
{t("routes.SettingsRoute.forms.aliasPreferences.saveAction")} {t("routes.SettingsRoute.forms.aliasPreferences.saveAction")}
</LoadingButton> </LoadingButton>
</Grid>
</Grid>
</form> </form>
</SimplePageBuilder.Page>
) )
} }