From 6f979669b5cfa34852ead0a8949d8c1cfdcf9bde Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Thu, 20 Oct 2022 22:11:21 +0200
Subject: [PATCH] fixed AliasesPreferencesForm.tsx

---
 .../AuthenticateRoute/NavigationButton.tsx    |   5 +-
 .../SettingsRoute/AliasesPreferencesForm.tsx  | 263 ++++++++++--------
 src/routes/AuthenticatedRoute.tsx             |  10 +-
 3 files changed, 162 insertions(+), 116 deletions(-)

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, ReactElement> = {
 	[NavigationSection.Overview]: <BiStats />,
-	[NavigationSection.Aliases]: <MdMail />,
+	[NavigationSection.Aliases]: <FaMask />,
 	[NavigationSection.Reports]: <Icon path={mdiTextBoxMultiple} size={0.8} />,
 	[NavigationSection.Settings]: <MdSettings />,
 }
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 {
 					<form onSubmit={formik.handleSubmit}>
 						<Grid
 							display="flex"
-							flexDirection="column"
+							flexDirection="row"
 							container
 							spacing={4}
 							alignItems="flex-end"
 						>
-							<Grid item>
+							<Grid item md={6}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -168,7 +173,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 									</FormHelperText>
 								</FormGroup>
 							</Grid>
-							<Grid item>
+							<Grid item md={6}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -199,7 +204,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 									</FormHelperText>
 								</FormGroup>
 							</Grid>
-							<Grid item>
+							<Grid item xs={12}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -228,115 +233,155 @@ export default function AliasesPreferencesForm(): ReactElement {
 											"Proxies images in your emails through this KleckRelay instance. This adds an extra layer of privacy. Images are loaded immediately after we receive the email. They then will be stored for some time (cache time). During that time, the image will be served from us. This means the original server has no idea you have opened the mail. After the cache time, the image is loaded from the original server, but it gets proxied by us. This means the original server will not be able to access neither your IP address nor your user agent."}
 									</FormHelperText>
 								</FormGroup>
-							</Grid>
-							<Grid item>
-								<FormGroup>
-									<TextField
-										fullWidth
-										select
-										InputProps={{
-											startAdornment: (
-												<InputAdornment position="start">
-													<MdImage />
-												</InputAdornment>
-											),
-										}}
-										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,
-											)
+								<Collapse in={formik.values.proxyImages}>
+									<Grid
+										display="flex"
+										flexDirection={
+											isLarge ? "row" : "column"
 										}
-										helperText={
-											formik.touched.imageProxyFormat &&
-											formik.errors.imageProxyFormat
+										container
+										marginY={2}
+										spacing={4}
+										alignItems={
+											isLarge ? "flex-start" : "flex-end"
 										}
 									>
-										{Object.entries(
-											ImageProxyFormatType,
-										).map(([key, value]) => (
-											<MenuItem key={key} value={value}>
-												{
-													IMAGE_PROXY_FORMAT_TYPE_NAME_MAP[
-														value
-													] as string
-												}
-											</MenuItem>
-										))}
-									</TextField>
-									<FormHelperText
-										error={Boolean(
-											formik.touched.imageProxyFormat &&
-												formik.errors.imageProxyFormat,
-										)}
-									>
-										{formik.touched.imageProxyFormat &&
-											formik.errors.imageProxyFormat}
-									</FormHelperText>
-								</FormGroup>
-							</Grid>
-							<Grid item>
-								<FormGroup>
-									<TextField
-										fullWidth
-										select
-										name="imageProxyUserAgent"
-										id="imageProxyUserAgent"
-										label="Image Proxy User Agent"
-										value={
-											formik.values.imageProxyUserAgent
-										}
-										onChange={formik.handleChange}
-										disabled={formik.isSubmitting}
-										error={
-											formik.touched
-												.imageProxyUserAgent &&
-											Boolean(
-												formik.errors
-													.imageProxyUserAgent,
-											)
-										}
-										helperText={
-											formik.touched
-												.imageProxyUserAgent &&
-											formik.errors.imageProxyUserAgent
-										}
-									>
-										{Object.entries(ProxyUserAgentType).map(
-											([key, value]) => (
-												<MenuItem
-													key={key}
-													value={value}
-												>
-													{
-														IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP[
-															value
-														] as string
+										<Grid item md={6}>
+											<FormGroup>
+												<TextField
+													fullWidth
+													select
+													InputProps={{
+														startAdornment: (
+															<InputAdornment position="start">
+																<MdImage />
+															</InputAdornment>
+														),
+													}}
+													name="imageProxyFormat"
+													id="imageProxyFormat"
+													label="Image File Type"
+													value={
+														formik.values
+															.imageProxyFormat
 													}
-												</MenuItem>
-											),
-										)}
-									</TextField>
-									<FormHelperText
-										error={Boolean(
-											formik.touched
-												.imageProxyUserAgent &&
-												formik.errors
-													.imageProxyUserAgent,
-										)}
-									>
-										{(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."}
-									</FormHelperText>
-								</FormGroup>
+													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]) => (
+														<MenuItem
+															key={key}
+															value={value}
+														>
+															{
+																IMAGE_PROXY_FORMAT_TYPE_NAME_MAP[
+																	value
+																] as string
+															}
+														</MenuItem>
+													))}
+												</TextField>
+												<FormHelperText
+													error={Boolean(
+														formik.touched
+															.imageProxyFormat &&
+															formik.errors
+																.imageProxyFormat,
+													)}
+												>
+													{formik.touched
+														.imageProxyFormat &&
+														formik.errors
+															.imageProxyFormat}
+												</FormHelperText>
+											</FormGroup>
+										</Grid>
+										<Grid item md={6}>
+											<FormGroup>
+												<TextField
+													fullWidth
+													select
+													name="imageProxyUserAgent"
+													id="imageProxyUserAgent"
+													label="Image Proxy User Agent"
+													value={
+														formik.values
+															.imageProxyUserAgent
+													}
+													onChange={
+														formik.handleChange
+													}
+													disabled={
+														formik.isSubmitting
+													}
+													error={
+														formik.touched
+															.imageProxyUserAgent &&
+														Boolean(
+															formik.errors
+																.imageProxyUserAgent,
+														)
+													}
+													helperText={
+														formik.touched
+															.imageProxyUserAgent &&
+														formik.errors
+															.imageProxyUserAgent
+													}
+												>
+													{Object.entries(
+														ProxyUserAgentType,
+													).map(([key, value]) => (
+														<MenuItem
+															key={key}
+															value={value}
+														>
+															{
+																IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP[
+																	value
+																] as string
+															}
+														</MenuItem>
+													))}
+												</TextField>
+												<FormHelperText
+													error={Boolean(
+														formik.touched
+															.imageProxyUserAgent &&
+															formik.errors
+																.imageProxyUserAgent,
+													)}
+												>
+													{(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."}
+												</FormHelperText>
+											</FormGroup>
+										</Grid>
+									</Grid>
+								</Collapse>
 							</Grid>
 							<Grid item>
 								<LoadingButton
diff --git a/src/routes/AuthenticatedRoute.tsx b/src/routes/AuthenticatedRoute.tsx
index 9f45280..aa9ce11 100644
--- a/src/routes/AuthenticatedRoute.tsx
+++ b/src/routes/AuthenticatedRoute.tsx
@@ -42,10 +42,10 @@ export default function AuthenticatedRoute(): ReactElement {
 				>
 					<Grid
 						container
-						justifyContent="center"
-						alignItems="flex-start"
+						justifyContent="space-between"
+						alignItems="center"
 					>
-						<Grid item xs={12} sm={4}>
+						<Grid item xs={12} sm={4} lg={2}>
 							<Box
 								bgcolor={theme.palette.background.paper}
 								component="nav"
@@ -61,11 +61,11 @@ export default function AuthenticatedRoute(): ReactElement {
 								</List>
 							</Box>
 						</Grid>
-						<Grid item xs={12} sm={8}>
+						<Grid item xs={12} sm={8} lg={10}>
 							<Paper>
 								<Box
 									padding={4}
-									maxHeight="80vh"
+									maxHeight="60vh"
 									overflow="scroll"
 								>
 									<Outlet />