Nicer cert type create select

frontend/src/components/LocalePicker.tsx

@@ -47,7 +47,6 @@ function LocalePicker({ onChange, className }: LocalPickerProps) {
 							<MenuItem
 								icon={<Flag countryCode={getFlagCodeForLocale(item[0])} />}
 								onClick={() => changeTo(item[0])}
-								// rel={item[1]}
 								key={`locale-${item[0]}`}>
 								<span>{intl.formatMessage({ id: `locale-${item[1]}` })}</span>
 							</MenuItem>

frontend/src/components/Navigation/NavigationMenu.tsx

@@ -173,7 +173,6 @@ const DesktopNavigation: FC = () => {
 			navItems.findIndex((item) => {
 				// Find the nav item whose location / sub items location is the beginning of the currently active path
 				if (item.to) {
-					// console.debug(item.to, path);
 					if (item.to === "/") {
 						return path === item.to;
 					}

frontend/src/components/PrettyMenuButton.tsx

@@ -0,0 +1,23 @@
+import { Button, MenuButton, MenuButtonProps } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+
+function PrettyMenuButton(props: MenuButtonProps) {
+	return (
+		<MenuButton
+			size="sm"
+			as={Button}
+			fontFamily="heading"
+			bgGradient="linear(to-r, red.400,pink.400)"
+			color="white"
+			rightIcon={<FiChevronDown />}
+			_hover={{
+				bgGradient: "linear(to-r, red.400,pink.400)",
+				boxShadow: "xl",
+			}}
+			{...props}>
+			{props.children}
+		</MenuButton>
+	);
+}
+
+export { PrettyMenuButton };

frontend/src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./Monospace";
 export * from "./Navigation";
 export * from "./Permissions";
 export * from "./PrettyButton";
+export * from "./PrettyMenuButton";
 export * from "./SiteWrapper";
 export * from "./SpinnerPage";
 export * from "./Table";

frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx

@@ -1,8 +1,5 @@
-import { useState } from "react";
-
 import {
 	Button,
-	ButtonGroup,
 	FormControl,
 	FormErrorMessage,
 	FormLabel,
@@ -24,23 +21,25 @@ import { useSetCertificate } from "hooks";
 import { intl } from "locale";
 import { validateString } from "modules/Validations";
 
+import CustomForm from "./CustomForm";
+import DNSForm from "./DNSForm";
 import HTTPForm from "./HTTPForm";
 
 interface CertificateCreateModalProps {
 	isOpen: boolean;
 	onClose: () => void;
+	certType: string;
 }
 function CertificateCreateModal({
 	isOpen,
 	onClose,
+	certType,
 }: CertificateCreateModalProps) {
-	const [certType, setCertType] = useState("");
 	const toast = useToast();
 	const { mutate: setCertificate } = useSetCertificate();
 
 	const onModalClose = () => {
 		onClose();
-		setCertType("");
 	};
 
 	const onSubmit = async (
@@ -98,32 +97,6 @@ function CertificateCreateModal({
 							</ModalHeader>
 							<ModalCloseButton />
 							<ModalBody>
-								{certType === "" ? (
-									<FormControl>
-										<FormLabel htmlFor="type">
-											Select the Certificate Validation method
-										</FormLabel>
-										<ButtonGroup style={{ width: "100%" }}>
-											<Button
-												onClick={() => setCertType("http")}
-												style={{ width: "33%" }}>
-												{intl.formatMessage({ id: "type.http" })}
-											</Button>
-											<Button
-												onClick={() => setCertType("dns")}
-												style={{ width: "34%" }}>
-												{intl.formatMessage({ id: "type.dns" })}
-											</Button>
-											<Button
-												onClick={() => setCertType("custom")}
-												style={{ width: "33%" }}>
-												{intl.formatMessage({ id: "type.custom" })}
-											</Button>
-										</ButtonGroup>
-									</FormControl>
-								) : null}
-
-								{certType !== "" ? (
 								<Stack spacing={4}>
 									<Field name="name" validate={validateString(1, 100)}>
 										{({ field, form }: any) => (
@@ -142,16 +115,15 @@ function CertificateCreateModal({
 														id: "name",
 													})}
 												/>
-													<FormErrorMessage>
+												<FormErrorMessage>{form.errors.name}</FormErrorMessage>
-														{form.errors.name}
-													</FormErrorMessage>
 											</FormControl>
 										)}
 									</Field>
 								</Stack>
-								) : null}
 
 								{certType === "http" ? <HTTPForm /> : null}
+								{certType === "dns" ? <DNSForm /> : null}
+								{certType === "custom" ? <CustomForm /> : null}
 							</ModalBody>
 							<ModalFooter>
 								{certType !== "" ? (

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -1,12 +1,7 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import {
+import { EmptyList, SpinnerPage, tableEventReducer } from "components";
-	EmptyList,
-	PrettyButton,
-	SpinnerPage,
-	tableEventReducer,
-} from "components";
 import { useCertificates } from "hooks";
 import { intl } from "locale";
 
@@ -23,11 +18,7 @@ const initialState = {
 	],
 	filters: [],
 };
-
+function TableWrapper() {
-interface TableWrapperProps {
-	onCreateClick?: () => void;
-}
-function TableWrapper({ onCreateClick }: TableWrapperProps) {
 	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
 		tableEventReducer,
 		initialState,
@@ -68,11 +59,6 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
 			<EmptyList
 				title={intl.formatMessage({ id: "create-certificate-title" })}
 				summary={intl.formatMessage({ id: "create-hint" })}
-				createButton={
-					<PrettyButton mt={5} onClick={onCreateClick}>
-						{intl.formatMessage({ id: "lets-go" })}
-					</PrettyButton>
-				}
 			/>
 		);
 	}

frontend/src/pages/Certificates/index.tsx

@@ -1,14 +1,22 @@
 import { useState } from "react";
 
-import { Heading, HStack } from "@chakra-ui/react";
+import {
-import { HelpDrawer, PrettyButton } from "components";
+	Heading,
+	HStack,
+	Menu,
+	MenuList,
+	MenuItem,
+	MenuDivider,
+} from "@chakra-ui/react";
+import { HelpDrawer, PrettyMenuButton } from "components";
 import { intl } from "locale";
 import { CertificateCreateModal } from "modals";
+import { FiGlobe, FiServer, FiUpload } from "react-icons/fi";
 
 import TableWrapper from "./TableWrapper";
 
 function Certificates() {
-	const [createShown, setCreateShown] = useState(false);
+	const [createShown, setCreateShown] = useState("");
 
 	return (
 		<>
@@ -18,15 +26,36 @@ function Certificates() {
 				</Heading>
 				<HStack>
 					<HelpDrawer section="Certificates" />
-					<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
+					<Menu>
+						<PrettyMenuButton>
 							{intl.formatMessage({ id: "certificate.create" })}
-					</PrettyButton>
+						</PrettyMenuButton>
+						<MenuList>
+							<MenuItem
+								icon={<FiGlobe />}
+								onClick={() => setCreateShown("http")}>
+								{intl.formatMessage({ id: "type.http" })}
+							</MenuItem>
+							<MenuItem
+								icon={<FiServer />}
+								onClick={() => setCreateShown("dns")}>
+								{intl.formatMessage({ id: "type.dns" })}
+							</MenuItem>
+							<MenuDivider />
+							<MenuItem
+								icon={<FiUpload />}
+								onClick={() => setCreateShown("custom")}>
+								{intl.formatMessage({ id: "type.custom" })}
+							</MenuItem>
+						</MenuList>
+					</Menu>
 				</HStack>
 			</HStack>
-			<TableWrapper onCreateClick={() => setCreateShown(true)} />
+			<TableWrapper />
 			<CertificateCreateModal
-				isOpen={createShown}
+				isOpen={createShown !== ""}
-				onClose={() => setCreateShown(false)}
+				certType={createShown}
+				onClose={() => setCreateShown("")}
 			/>
 		</>
 	);