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