src: use prop unpacking pattern

This makes the code a bit shorter by not having to use `props.` all of
the time. Also make everything VoidFunctionComponent while we are
touching this.

src/settings/SettingsButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2022 The Pybricks Authors
 
 import React from 'react';
 import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
@@ -8,8 +8,18 @@ import settingsIcon from './settings.svg';
 
 type SettingsButtonProps = Pick<ActionButtonProps, 'id' | 'onAction'>;
 
-const SettingsButton: React.FunctionComponent<SettingsButtonProps> = (props) => {
-    return <ActionButton tooltip={TooltipId.Settings} icon={settingsIcon} {...props} />;
+const SettingsButton: React.VoidFunctionComponent<SettingsButtonProps> = ({
+    id,
+    onAction,
+}) => {
+    return (
+        <ActionButton
+            id={id}
+            tooltip={TooltipId.Settings}
+            icon={settingsIcon}
+            onAction={onAction}
+        />
+    );
 };
 
 export default SettingsButton;

src/settings/SettingsDrawer.tsx

@@ -45,7 +45,10 @@ type SettingsProps = {
     onClose(): void;
 };
 
-const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
+const SettingsDrawer: React.VoidFunctionComponent<SettingsProps> = ({
+    isOpen,
+    onClose,
+}) => {
     const [isAboutDialogOpen, setIsAboutDialogOpen] = useState(false);
 
     const showDocs = useSelector((s) => s.settings.showDocs);
@@ -89,11 +92,11 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
 
     return (
         <Drawer
-            isOpen={props.isOpen}
+            isOpen={isOpen}
             icon="cog"
             size={DrawerSize.SMALL}
             title={i18n.translate(SettingsStringId.Title)}
-            onClose={props.onClose}
+            onClose={onClose}
         >
             <div className={Classes.DRAWER_BODY}>
                 <div className={Classes.DIALOG_BODY}>