diff --git a/src/route-widgets/AuthenticateRoute/NavigationButton.tsx b/src/route-widgets/AuthenticateRoute/NavigationButton.tsx index e85af43..ec68f5a 100644 --- a/src/route-widgets/AuthenticateRoute/NavigationButton.tsx +++ b/src/route-widgets/AuthenticateRoute/NavigationButton.tsx @@ -1,6 +1,7 @@ import {ReactElement} from "react" import {BiStats} from "react-icons/bi" -import {MdMail, MdSettings} from "react-icons/md" +import {MdSettings} from "react-icons/md" +import {FaMask} from "react-icons/fa" import {Link as RouterLink, useLocation} from "react-router-dom" import {Button} from "@mui/material" @@ -20,7 +21,7 @@ export interface NavigationButtonProps { const SECTION_ICON_MAP: Record = { [NavigationSection.Overview]: , - [NavigationSection.Aliases]: , + [NavigationSection.Aliases]: , [NavigationSection.Reports]: , [NavigationSection.Settings]: , } diff --git a/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx b/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx index 2b439cd..3c2f0f6 100644 --- a/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx +++ b/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx @@ -7,6 +7,7 @@ import React, {ReactElement, useContext} from "react" import {useMutation} from "@tanstack/react-query" import { Checkbox, + Collapse, FormControlLabel, FormGroup, FormHelperText, @@ -15,6 +16,8 @@ import { MenuItem, TextField, Typography, + useMediaQuery, + useTheme, } from "@mui/material" import {LoadingButton} from "@mui/lab" @@ -113,6 +116,8 @@ export default function AliasesPreferencesForm(): ReactElement { } }, }) + const theme = useTheme() + const isLarge = useMediaQuery(theme.breakpoints.up("md")) return ( <> @@ -133,12 +138,12 @@ export default function AliasesPreferencesForm(): ReactElement {
- + - + - + - - - - - - - ), - }} - name="imageProxyFormat" - id="imageProxyFormat" - label="Image File Type" - value={formik.values.imageProxyFormat} - onChange={formik.handleChange} - disabled={formik.isSubmitting} - error={ - formik.touched.imageProxyFormat && - Boolean( - formik.errors.imageProxyFormat, - ) + + - {Object.entries( - ImageProxyFormatType, - ).map(([key, value]) => ( - - { - IMAGE_PROXY_FORMAT_TYPE_NAME_MAP[ - value - ] as string - } - - ))} - - - {formik.touched.imageProxyFormat && - formik.errors.imageProxyFormat} - - - - - - - {Object.entries(ProxyUserAgentType).map( - ([key, value]) => ( - - { - IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP[ - value - ] as string + + + + + + ), + }} + name="imageProxyFormat" + id="imageProxyFormat" + label="Image File Type" + value={ + formik.values + .imageProxyFormat } - - ), - )} - - - {(formik.touched.imageProxyUserAgent && - formik.errors - .imageProxyUserAgent) || - "An User Agent is a identifier each browser and email client sends when retrieving files, such as images. You can specify here what user agent you would like to be used by the proxy. User Agents are kept up-to-date."} - - + onChange={ + formik.handleChange + } + disabled={ + formik.isSubmitting + } + error={ + formik.touched + .imageProxyFormat && + Boolean( + formik.errors + .imageProxyFormat, + ) + } + helperText={ + formik.touched + .imageProxyFormat && + formik.errors + .imageProxyFormat + } + > + {Object.entries( + ImageProxyFormatType, + ).map(([key, value]) => ( + + { + IMAGE_PROXY_FORMAT_TYPE_NAME_MAP[ + value + ] as string + } + + ))} + + + {formik.touched + .imageProxyFormat && + formik.errors + .imageProxyFormat} + + + + + + + {Object.entries( + ProxyUserAgentType, + ).map(([key, value]) => ( + + { + IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP[ + value + ] as string + } + + ))} + + + {(formik.touched + .imageProxyUserAgent && + formik.errors + .imageProxyUserAgent) || + "An User Agent is a identifier each browser and email client sends when retrieving files, such as images. You can specify here what user agent you would like to be used by the proxy. User Agents are kept up-to-date."} + + + + + - + - +