ui: Improve pgp settings page

public/locales/en-US/settings-email-pgp.json

@@ -16,6 +16,6 @@
     "description": "We found a public key for your email! Would you like to use it? The key has been created on {{createdAt}} and is of type {{type}}. This is the fingerprint:",
     "continueActionLabel": "Use Key"
   },
-  "alreadyConfigured": "PGP encryption is activated. You are using a public key with this fingerprint:",
+  "alreadyConfigured": "PGP encryption is activated. You are using a public key with this fingerprint: ",
   "remove": "Disable PGP encryption"
 }

src/route-widgets/SettingsEmailPGPRoute/AlreadyConfigured.tsx

@@ -1,15 +1,18 @@
-import {Alert, CircularProgress, Grid} from "@mui/material"
-import {ReactElement, useContext} from "react"
-import {useTranslation} from "react-i18next"
-import {LoadingButton} from "@mui/lab"
-import {SimpleDetailResponse, User} from "~/server-types"
-import {UpdatePreferencesData, updatePreferences} from "~/apis"
-import {useMutation} from "@tanstack/react-query"
 import {AxiosError} from "axios"
-import {useErrorSuccessSnacks} from "~/hooks"
-import {AuthContext} from "~/components"
 import {useAsync} from "react-use"
 import {readKey} from "openpgp"
+import {FaLockOpen} from "react-icons/fa"
+import {ReactElement, useContext} from "react"
+import {useTranslation} from "react-i18next"
+
+import {Alert, CircularProgress, Grid} from "@mui/material"
+import {LoadingButton} from "@mui/lab"
+import {useMutation} from "@tanstack/react-query"
+
+import {SimpleDetailResponse, User} from "~/server-types"
+import {UpdatePreferencesData, updatePreferences} from "~/apis"
+import {useErrorSuccessSnacks} from "~/hooks"
+import {AuthContext} from "~/components"
 
 export default function AlreadyConfigured(): ReactElement {
 	const {t} = useTranslation(["settings-email-pgp", "common"])
@@ -51,13 +54,14 @@ export default function AlreadyConfigured(): ReactElement {
 			<Grid item>
 				<Alert severity="success" variant="standard">
 					{t("alreadyConfigured")}
+					{isLoadingFingerprint ? <CircularProgress /> : <code>{fingerprint}</code>}
 				</Alert>
-				{isLoadingFingerprint ? <CircularProgress /> : <code>{fingerprint}</code>}
 			</Grid>
 			<Grid item>
 				<LoadingButton
 					variant="contained"
 					loading={isLoading}
+					startIcon={<FaLockOpen />}
 					onClick={() =>
 						mutateAsync({
 							emailGpgPublicKey: null,

src/route-widgets/SettingsEmailPGPRoute/SetupPGPEncryptionForm.tsx

@@ -96,7 +96,7 @@ export default function SetupPGPEncryptionForm(): ReactElement {
 								fullWidth
 								multiline
 								minRows={5}
-								maxRows={20}
+								maxRows={15}
 								label={t("form.fields.publicKey.label")}
 								name="publicKey"
 								value={formik.values.publicKey}