diff --git a/.eslintrc b/.eslintrc
index e9539865dd..137d893825 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -136,6 +136,9 @@
         "no-unused-vars": "off",
         "import/no-default-export": "warn",
         "no-underscore-dangle": "warn",
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error"
       }
     },
     {
diff --git a/client/common/Button.stories.jsx b/client/common/Button.stories.jsx
index d11634ae28..0a0150a5b6 100644
--- a/client/common/Button.stories.jsx
+++ b/client/common/Button.stories.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './Button';
+import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
@@ -15,13 +15,13 @@ export default {
 };
 
 export const AllFeatures = (args) => (
-  <Button disabled={args.disabled} type="submit" label={args.label}>
+  <Button disabled={args.disabled} type={ButtonTypes.SUBMIT} label={args.label}>
     {args.children}
   </Button>
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">
+  <Button type={ButtonTypes.SUBMIT} label="submit">
     This is a submit button
   </Button>
 );
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
+  <Button iconAfter={<DropdownArrowIcon />} display={ButtonDisplays.INLINE}>
     File name
   </Button>
 );
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
   <Button
     aria-label="Add to collection"
     iconBefore={<PlusIcon />}
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
   />
 );
diff --git a/client/common/Button.test.tsx b/client/common/Button.test.tsx
new file mode 100644
index 0000000000..b49e40c78f
--- /dev/null
+++ b/client/common/Button.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../test-utils';
+import { Button } from './Button';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('Button', () => {
+  // Tag
+  it('renders as an anchor when href is provided', () => {
+    render(<Button href="https://example.com">Link</Button>);
+    const anchor = screen.getByRole('link');
+    expect(anchor.tagName.toLowerCase()).toBe('a');
+    expect(anchor).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('renders as a React Router <Link> when `to` is provided', () => {
+    render(<Button to="/dashboard">Go</Button>);
+    const link = screen.getByRole('link');
+    expect(link.tagName.toLowerCase()).toBe('a'); // Link renders as <a>
+    expect(link).toHaveAttribute('href', '/dashboard');
+  });
+
+  it('renders as a <button> with a type of "button" by default', () => {
+    render(<Button>Click Me</Button>);
+    const el = screen.getByRole('button');
+    expect(el.tagName.toLowerCase()).toBe('button');
+    expect(el).toHaveAttribute('type', 'button');
+  });
+
+  // Children & Icons
+  it('renders children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('renders an iconBefore and button text', () => {
+    render(
+      <Button iconBefore={<MockIcon aria-label="iconbefore" />}>
+        This has a before icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconbefore')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has a before icon'
+    );
+  });
+
+  it('renders with iconAfter', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />}>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  it('renders only the icon if iconOnly', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />} iconOnly>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).not.toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  // HTML attributes
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByText('Click'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('uses aria-label when provided', () => {
+    render(<Button aria-label="Upload" iconOnly />);
+    expect(screen.getByLabelText('Upload')).toBeInTheDocument();
+  });
+});
diff --git a/client/common/Button.jsx b/client/common/Button.tsx
similarity index 60%
rename from client/common/Button.jsx
rename to client/common/Button.tsx
index 516536fb2b..d52abf3140 100644
--- a/client/common/Button.jsx
+++ b/client/common/Button.tsx
@@ -1,28 +1,112 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-
 import { remSize, prop } from '../theme';
 
-const kinds = {
-  primary: 'primary',
-  secondary: 'secondary'
-};
+/**
+ * Enum for the visual style of a Button.
+ *
+ * These values transpile to lowercase strings (`'primary' | 'secondary'`)
+ * that map directly to keys in the `Button` object in `theme.js` for styling.
+ */
+export enum ButtonKinds {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
+}
+/**
+ * Enum for the display type of a Button.
+ *
+ * These values transpile to lowercase strings (`'block' | 'inline'`)
+ * and map to display styles in the `Button` object in `theme.js`.
+ */
+export enum ButtonDisplays {
+  BLOCK = 'block',
+  INLINE = 'inline'
+}
+/**
+ * Enum for the native HTML button type.
+ *
+ * These values transpile to lowercase strings (`'button' | 'submit'`)
+ * and correspond to the `type` attribute on a native <button>.
+ * They can also be used in `theme.js` if needed for button-specific styles.
+ */
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit'
+}
 
-const displays = {
-  block: 'block',
-  inline: 'inline'
-};
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * The visible part of the button, telling the user what
+   * the action is
+   */
+  children?: React.ReactNode;
+  /**
+      If the button can be activated or not
+    */
+  disabled?: boolean;
+  /**
+   * The display type of the button—inline or block
+   */
+  display?: ButtonDisplays;
+  /**
+   * SVG icon to place after child content
+   */
+  iconAfter?: React.ReactNode;
+  /**
+   * SVG icon to place before child content
+   */
+  iconBefore?: React.ReactNode;
+  /**
+   * If the button content is only an SVG icon
+   */
+  iconOnly?: boolean;
+  /**
+   * The kind of button - determines how it appears visually
+   */
+  kind?: ButtonKinds;
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string;
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string;
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string;
+  /**
+   * If using a native button, specifies on an onClick action
+   */
+  onClick?: () => void;
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonTypes;
+  /**
+   * Controls whether the underlying SVG is focusable.
+   * Only relevant for IconButton (or buttons that render an SVG as content).
+   * In SVGs, the `focusable` attribute must be a string (`"true"` or `"false"`),
+   * but React will automatically convert a boolean prop to the correct string value.
+   */
+  focusable?: boolean;
+}
+
+interface StyledButtonProps extends ButtonProps {
+  kind: ButtonKinds;
+  display: ButtonDisplays;
+}
 
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
 // general global styles
-const StyledButton = styled.button`
+const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
-      display === displays.inline ? 'inline-flex' : 'flex'};
+      display === ButtonDisplays.INLINE ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -109,35 +193,37 @@ const StyledInlineButton = styled.button`
 `;
 
 /**
- * A Button performs an primary action
+ * Renders a component with a button appearance, but which is:
+ *  - External anchor link if passed a `href`
+ *  - Internal React Router link if passed a `to`
+ *  - Default: Native Button
  */
-const Button = ({
-  children,
-  display,
+export const Button = ({
+  children = null,
+  display = ButtonDisplays.BLOCK,
   href,
-  kind,
-  iconBefore,
-  iconAfter,
-  iconOnly,
+  kind = ButtonKinds.PRIMARY,
+  iconBefore = null,
+  iconAfter = null,
+  iconOnly = false,
   'aria-label': ariaLabel,
   to,
-  type,
+  type = ButtonTypes.BUTTON,
   ...props
-}) => {
+}: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
   const content = (
     <>
       {iconBefore}
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && !iconOnly && <span>{children}</span>}
       {iconAfter}
     </>
   );
-  let StyledComponent = StyledButton;
-
-  if (iconOnly) {
-    StyledComponent = StyledInlineButton;
-  }
+  const StyledComponent: React.ElementType = iconOnly
+    ? StyledInlineButton
+    : StyledButton;
 
+  // Anchor Link
   if (href) {
     return (
       <StyledComponent
@@ -153,6 +239,7 @@ const Button = ({
     );
   }
 
+  // Internal React Router Link
   if (to) {
     return (
       <StyledComponent
@@ -168,6 +255,7 @@ const Button = ({
     );
   }
 
+  // Native Button
   return (
     <StyledComponent
       kind={kind}
@@ -180,70 +268,3 @@ const Button = ({
     </StyledComponent>
   );
 };
-
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  display: displays.block,
-  iconAfter: null,
-  iconBefore: null,
-  iconOnly: false,
-  kind: kinds.primary,
-  href: null,
-  'aria-label': null,
-  to: null,
-  type: 'button'
-};
-
-Button.kinds = kinds;
-Button.displays = displays;
-
-Button.propTypes = {
-  /**
-   * The visible part of the button, telling the user what
-   * the action is
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  /**
-    If the button can be activated or not
-  */
-  disabled: PropTypes.bool,
-  /**
-   * The display type of the button—inline or block
-   */
-  display: PropTypes.oneOf(Object.values(displays)),
-  /**
-   * SVG icon to place after child content
-   */
-  iconAfter: PropTypes.element,
-  /**
-   * SVG icon to place before child content
-   */
-  iconBefore: PropTypes.element,
-  /**
-   * If the button content is only an SVG icon
-   */
-  iconOnly: PropTypes.bool,
-  /**
-   * The kind of button - determines how it appears visually
-   */
-  kind: PropTypes.oneOf(Object.values(kinds)),
-  /**
-   * Specifying an href will use an <a> to link to the URL
-   */
-  href: PropTypes.string,
-  /**
-   * An ARIA Label used for accessibility
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Specifying a to URL will use a react-router Link
-   */
-  to: PropTypes.string,
-  /**
-   * If using a button, then type is defines the type of button
-   */
-  type: PropTypes.oneOf(['button', 'submit'])
-};
-
-export default Button;
diff --git a/client/common/ButtonOrLink.test.jsx b/client/common/ButtonOrLink.test.tsx
similarity index 96%
rename from client/common/ButtonOrLink.test.jsx
rename to client/common/ButtonOrLink.test.tsx
index 7b1a6326a4..c2dfb37d10 100644
--- a/client/common/ButtonOrLink.test.jsx
+++ b/client/common/ButtonOrLink.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, history } from '../test-utils';
-import ButtonOrLink from './ButtonOrLink';
+import { ButtonOrLink } from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
   const clickHandler = jest.fn();
diff --git a/client/common/ButtonOrLink.jsx b/client/common/ButtonOrLink.tsx
similarity index 52%
rename from client/common/ButtonOrLink.jsx
rename to client/common/ButtonOrLink.tsx
index f759aa8ffb..6ae5e2187c 100644
--- a/client/common/ButtonOrLink.jsx
+++ b/client/common/ButtonOrLink.tsx
@@ -1,14 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 
 /**
- * Helper for switching between <button>, <a>, and <Link>
+ * Accepts all the props of an HTML <a> or <button> tag.
  */
+export interface ButtonOrLinkProps {
+  /**
+   * Can be internal or external ('http'- or 'https'-).
+   */
+  href?: string;
+  isDisabled?: boolean;
+  /**
+   * Content of the button/link.
+   * Can be either a string or a complex element.
+   */
+  children: React.ReactNode;
+  onClick?: (
+    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+}
+
+export type Ref = HTMLAnchorElement | HTMLButtonElement;
 
-const ButtonOrLink = React.forwardRef(
-  ({ href, children, isDisabled, onClick, ...props }, ref) => {
-    const handleClick = (e) => {
+/**
+ * Helper for switching between `<button>`, `<a>`, and `<Link>`
+ * If providing an `href`, will render as a link instead of a button.
+ *   - Internal links will use react-router.
+ *   - External links should start with 'http' or 'https' and will open in a new window.
+ */
+export const ButtonOrLink = React.forwardRef(
+  (
+    {
+      href,
+      children,
+      isDisabled = false,
+      onClick,
+      ...props
+    }: ButtonOrLinkProps,
+    ref: React.Ref<Ref>
+  ) => {
+    const handleClick = (
+      e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    ) => {
       if (isDisabled) {
         e.preventDefault();
         e.stopPropagation();
@@ -23,7 +56,7 @@ const ButtonOrLink = React.forwardRef(
       if (href.startsWith('http')) {
         return (
           <a
-            ref={ref}
+            ref={ref as React.Ref<HTMLAnchorElement>}
             href={href}
             target="_blank"
             rel="noopener noreferrer"
@@ -37,7 +70,7 @@ const ButtonOrLink = React.forwardRef(
       }
       return (
         <Link
-          ref={ref}
+          ref={ref as React.Ref<HTMLAnchorElement>}
           to={href}
           aria-disabled={isDisabled}
           {...props}
@@ -49,7 +82,7 @@ const ButtonOrLink = React.forwardRef(
     }
     return (
       <button
-        ref={ref}
+        ref={ref as React.Ref<HTMLButtonElement>}
         aria-disabled={isDisabled}
         {...props}
         onClick={handleClick}
@@ -59,31 +92,3 @@ const ButtonOrLink = React.forwardRef(
     );
   }
 );
-
-/**
- * Accepts all the props of an HTML <a> or <button> tag.
- */
-ButtonOrLink.propTypes = {
-  /**
-   * If providing an href, will render as a link instead of a button.
-   * Can be internal or external.
-   * Internal links will use react-router.
-   * External links should start with 'http' or 'https' and will open in a new window.
-   */
-  href: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  /**
-   * Content of the button/link.
-   * Can be either a string or a complex element.
-   */
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func
-};
-
-ButtonOrLink.defaultProps = {
-  href: null,
-  isDisabled: false,
-  onClick: null
-};
-
-export default ButtonOrLink;
diff --git a/client/common/IconButton.jsx b/client/common/IconButton.jsx
deleted file mode 100644
index 8cf732f91d..0000000000
--- a/client/common/IconButton.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Button from './Button';
-import { remSize } from '../theme';
-
-const ButtonWrapper = styled(Button)`
-  width: ${remSize(48)};
-  > svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-const IconButton = (props) => {
-  const { icon, ...otherProps } = props;
-  const Icon = icon;
-
-  return (
-    <ButtonWrapper
-      iconBefore={icon && <Icon />}
-      iconOnly
-      display={Button.displays.inline}
-      focusable="false"
-      {...otherProps}
-    />
-  );
-};
-
-IconButton.propTypes = {
-  icon: PropTypes.func
-};
-
-IconButton.defaultProps = {
-  icon: null
-};
-
-export default IconButton;
diff --git a/client/common/IconButton.test.tsx b/client/common/IconButton.test.tsx
new file mode 100644
index 0000000000..5ddaf854ba
--- /dev/null
+++ b/client/common/IconButton.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import { IconButton } from './IconButton';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('IconButton', () => {
+  test('renders with an icon', () => {
+    render(<IconButton icon={MockIcon} aria-label="test button" />);
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'test button' })
+    ).toBeInTheDocument();
+  });
+
+  test('renders without an icon', () => {
+    render(<IconButton />);
+    expect(screen.queryByTestId('mock-icon')).not.toBeInTheDocument();
+  });
+
+  test('passes other props to the button', () => {
+    render(<IconButton icon={MockIcon} id="my-button" />);
+    expect(screen.getByRole('button')).toHaveAttribute('id', 'my-button');
+  });
+});
diff --git a/client/common/IconButton.tsx b/client/common/IconButton.tsx
new file mode 100644
index 0000000000..22c7620606
--- /dev/null
+++ b/client/common/IconButton.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonProps, ButtonDisplays } from './Button';
+import { remSize } from '../theme';
+
+const ButtonWrapper = styled(Button)`
+  width: ${remSize(48)};
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export interface IconButtonProps
+  extends Omit<ButtonProps, 'iconBefore' | 'display' | 'focusable'> {
+  icon?: ComponentType<{ 'aria-label'?: string }>;
+  href?: string;
+  to?: string;
+  onClick?: () => void;
+}
+
+export const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+  <ButtonWrapper
+    iconBefore={Icon ? <Icon /> : undefined}
+    iconOnly
+    display={ButtonDisplays.INLINE}
+    focusable={false}
+    {...otherProps}
+  />
+);
diff --git a/client/common/RouterTab.test.tsx b/client/common/RouterTab.test.tsx
new file mode 100644
index 0000000000..b9652b6a37
--- /dev/null
+++ b/client/common/RouterTab.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
+import { RouterTab } from './RouterTab';
+
+const mockPath = '/projects';
+const mockLinkText = 'Projects';
+
+describe('RouterTab', () => {
+  function mountComponent() {
+    return render(<RouterTab to={mockPath}>{mockLinkText}</RouterTab>);
+  }
+
+  it('renders a react-router NavLink with correct text and path', async () => {
+    mountComponent();
+
+    const linkElement = screen.getByText(mockLinkText);
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.getAttribute('href')).toBe(mockPath);
+
+    fireEvent.click(linkElement);
+    await waitFor(() => expect(history.location.pathname).toEqual('/projects'));
+  });
+
+  it('includes the dashboard-header class names', () => {
+    const { container } = mountComponent();
+
+    const listItem = container.querySelector('li');
+    const link = container.querySelector('a');
+
+    expect(listItem).toHaveClass('dashboard-header__tab');
+    expect(link).toHaveClass('dashboard-header__tab__title');
+  });
+});
diff --git a/client/common/RouterTab.jsx b/client/common/RouterTab.tsx
similarity index 64%
rename from client/common/RouterTab.jsx
rename to client/common/RouterTab.tsx
index d08c839855..aa4f9aee92 100644
--- a/client/common/RouterTab.jsx
+++ b/client/common/RouterTab.tsx
@@ -1,11 +1,15 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 
+export interface RouterTabProps {
+  children: ReactNode;
+  to: string;
+}
+
 /**
  * Wraps the react-router `NavLink` with dashboard-header__tab styling.
  */
-const Tab = ({ children, to }) => (
+export const RouterTab = ({ children, to }: RouterTabProps) => (
   <li className="dashboard-header__tab">
     <NavLink
       className="dashboard-header__tab__title"
@@ -16,10 +20,3 @@ const Tab = ({ children, to }) => (
     </NavLink>
   </li>
 );
-
-Tab.propTypes = {
-  children: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired
-};
-
-export default Tab;
diff --git a/client/common/useKeyDownHandlers.test.tsx b/client/common/useKeyDownHandlers.test.tsx
new file mode 100644
index 0000000000..3b3f023c10
--- /dev/null
+++ b/client/common/useKeyDownHandlers.test.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '../test-utils';
+import { useKeyDownHandlers } from './useKeyDownHandlers';
+import { isMac } from '../utils/device';
+
+jest.mock('../utils/device');
+
+function fireKeyboardEvent(key: string, options: Partial<KeyboardEvent> = {}) {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    code: `Key${key.toUpperCase()}`,
+    bubbles: true,
+    cancelable: true,
+    ...options
+  });
+  document.dispatchEvent(event);
+}
+
+// Component for testing the hook
+const HookConsumer = ({
+  handlers
+}: {
+  handlers: Record<string, jest.Mock>;
+}) => {
+  useKeyDownHandlers(handlers);
+  return null;
+};
+
+describe('useKeyDownHandlers', () => {
+  let handlers: Record<string, jest.Mock>;
+
+  beforeEach(() => {
+    handlers = {
+      f: jest.fn(),
+      'ctrl-f': jest.fn(),
+      'ctrl-shift-f': jest.fn(),
+      'ctrl-alt-n': jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls "ctrl-f" handler on Windows (isMac false)', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-f" handler on Mac (isMac true)', () => {
+    (isMac as jest.Mock).mockReturnValue(true);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { metaKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-shift-f" handler with both ctrl and shift keys', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true, shiftKey: true });
+
+    expect(handlers['ctrl-shift-f']).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-alt-n" handler with ctrl and alt', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('n', { ctrlKey: true, altKey: true, code: 'KeyN' });
+
+    expect(handlers['ctrl-alt-n']).toHaveBeenCalled();
+  });
+});
diff --git a/client/common/useKeyDownHandlers.js b/client/common/useKeyDownHandlers.ts
similarity index 65%
rename from client/common/useKeyDownHandlers.js
rename to client/common/useKeyDownHandlers.ts
index f47fbc7c8a..21c61cdfe9 100644
--- a/client/common/useKeyDownHandlers.js
+++ b/client/common/useKeyDownHandlers.ts
@@ -1,19 +1,19 @@
 import { mapKeys } from 'lodash';
-import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
 import { isMac } from '../utils/device';
 
+/** Function to call upon keydown */
+export type KeydownHandler = (e: KeyboardEvent) => void;
+/** An object mapping from keys like 'ctrl-s' or 'ctrl-shift-1' to handlers. */
+export type KeydownHandlerMap = Record<string, KeydownHandler>;
+
 /**
  * Attaches keydown handlers to the global document.
- *
  * Handles Mac/PC switching of Ctrl to Cmd.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} keyHandlers - an object
- * which maps from the key to its event handler.  The object keys are a combination
- * of the key and prefixes `ctrl-` `shift-` (ie. 'ctrl-f', 'ctrl-shift-f')
- * and the values are the function to call when that specific key is pressed.
+ * @param keyHandlers - an object which maps from the key to its event handler. The object keys are a combination of the key and prefixes `ctrl-` `shift-`
+ * (ie. 'ctrl-f', 'ctrl-shift-f') and the values are the function to call when that specific key is pressed.
  */
-export default function useKeyDownHandlers(keyHandlers) {
+export function useKeyDownHandlers(keyHandlers: KeydownHandlerMap) {
   /**
    * Instead of memoizing the handlers, use a ref and call the current
    * handler at the time of the event.
@@ -53,20 +53,3 @@ export default function useKeyDownHandlers(keyHandlers) {
     return () => document.removeEventListener('keydown', handleEvent);
   }, [handleEvent]);
 }
-
-/**
- * Component version can be used in class components where hooks can't be used.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} handlers
- */
-export const DocumentKeyDown = ({ handlers }) => {
-  useKeyDownHandlers(handlers);
-  return null;
-};
-DocumentKeyDown.propTypes = {
-  handlers: PropTypes.objectOf(PropTypes.func)
-};
-
-DocumentKeyDown.defaultProps = {
-  handlers: {}
-};
diff --git a/client/common/useModalClose.test.tsx b/client/common/useModalClose.test.tsx
new file mode 100644
index 0000000000..252f78b61e
--- /dev/null
+++ b/client/common/useModalClose.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, fireEvent } from '../test-utils';
+import { useModalClose } from './useModalClose';
+import { useKeyDownHandlers } from './useKeyDownHandlers';
+
+jest.mock('./useKeyDownHandlers');
+
+describe('useModalClose', () => {
+  let onClose: jest.Mock;
+
+  beforeEach(() => {
+    onClose = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  function TestModal({ handleClose }: { handleClose: () => void }) {
+    const ref = useModalClose(handleClose);
+    return (
+      <div>
+        <div data-testid="outside">Outside</div>
+        <div
+          data-testid="modal"
+          ref={ref as React.RefObject<HTMLDivElement>}
+          tabIndex={-1}
+          style={{ border: '1px solid black' }}
+        >
+          Modal content
+        </div>
+      </div>
+    );
+  }
+
+  function mountComponent() {
+    return render(<TestModal handleClose={onClose} />);
+  }
+
+  it('calls onClose when clicking outside the modal', () => {
+    const { getByTestId } = mountComponent();
+
+    fireEvent.click(getByTestId('outside'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('does not call onClose when clicking inside the modal', () => {
+    const { getByTestId } = mountComponent();
+
+    fireEvent.click(getByTestId('modal'));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('returns a ref that is focused on mount', () => {
+    const { getByTestId } = mountComponent();
+    const modal = getByTestId('modal');
+
+    expect(document.activeElement).toBe(modal);
+  });
+
+  it('calls useKeyDownHandlers with escape handler', () => {
+    mountComponent();
+
+    expect(useKeyDownHandlers).toHaveBeenCalledWith({ escape: onClose });
+  });
+});
diff --git a/client/common/useModalClose.js b/client/common/useModalClose.ts
similarity index 54%
rename from client/common/useModalClose.js
rename to client/common/useModalClose.ts
index 2bab24b5de..de106a2c0f 100644
--- a/client/common/useModalClose.js
+++ b/client/common/useModalClose.ts
@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react';
-import useKeyDownHandlers from './useKeyDownHandlers';
+import { useEffect, useRef, MutableRefObject } from 'react';
+import { useKeyDownHandlers } from './useKeyDownHandlers';
 
 /**
  * Common logic for Modal, Overlay, etc.
@@ -14,21 +14,24 @@ import useKeyDownHandlers from './useKeyDownHandlers';
  *
  * Returns a ref to attach to the outermost element of the modal.
  *
- * @param {() => void} onClose
- * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
- * @return {React.MutableRefObject<HTMLElement | null>}
+ * @param onClose - Function called when modal should close
+ * @param passedRef - Optional ref to the modal element. If not provided, one is created internally.
+ * @returns A ref to be attached to the modal DOM element
  */
-export default function useModalClose(onClose, passedRef) {
-  const createdRef = useRef(null);
-  const modalRef = passedRef || createdRef;
+export function useModalClose(
+  onClose: () => void,
+  passedRef?: MutableRefObject<HTMLElement | null>
+): MutableRefObject<HTMLElement | null> {
+  const createdRef = useRef<HTMLElement | null>(null);
+  const modalRef = passedRef ?? createdRef;
 
   useEffect(() => {
     modalRef.current?.focus();
 
-    function handleClick(e) {
+    function handleClick(e: MouseEvent) {
       // ignore clicks on the component itself
-      if (modalRef.current && !modalRef.current.contains(e.target)) {
-        onClose?.();
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
       }
     }
 
diff --git a/client/common/usePrevious.js b/client/common/usePrevious.js
deleted file mode 100644
index ed46581cb0..0000000000
--- a/client/common/usePrevious.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export default function usePrevious(value) {
-  const ref = useRef();
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}
diff --git a/client/common/usePrevious.test.tsx b/client/common/usePrevious.test.tsx
new file mode 100644
index 0000000000..35f6e6c001
--- /dev/null
+++ b/client/common/usePrevious.test.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import { usePrevious } from './usePrevious';
+
+function TestComponent({ value }: { value: number }) {
+  const prev = usePrevious(value);
+
+  return (
+    <div>
+      <div>current: {value}</div>
+      <div>previous: {prev ?? 'undefined'}</div>
+    </div>
+  );
+}
+
+describe('usePrevious', () => {
+  it('should return undefined on first render and previous value after update', () => {
+    const { rerender } = render(<TestComponent value={1} />);
+
+    // First render: previous should be undefined
+    expect(screen.getByText('current: 1')).toBeInTheDocument();
+    expect(screen.getByText('previous: undefined')).toBeInTheDocument();
+
+    // Update value
+    rerender(<TestComponent value={2} />);
+
+    // Second render: previous should be 1
+    expect(screen.getByText('current: 2')).toBeInTheDocument();
+    expect(screen.getByText('previous: 1')).toBeInTheDocument();
+
+    // Update value again
+    rerender(<TestComponent value={3} />);
+
+    expect(screen.getByText('current: 3')).toBeInTheDocument();
+    expect(screen.getByText('previous: 2')).toBeInTheDocument();
+  });
+});
diff --git a/client/common/usePrevious.ts b/client/common/usePrevious.ts
new file mode 100644
index 0000000000..34f18edff6
--- /dev/null
+++ b/client/common/usePrevious.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Used in Menubar to store the previous value.
+ * @param value - The current value to track.
+ * @returns The previous value before the current render, or undefined if none.
+ */
+export function usePrevious(value: unknown): unknown | undefined {
+  const ref = useRef<unknown>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
diff --git a/client/common/useSyncFormTranslations.js b/client/common/useSyncFormTranslations.js
deleted file mode 100644
index 411c942363..0000000000
--- a/client/common/useSyncFormTranslations.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-// Usage: useSyncFormTranslations(formRef, language)
-// This hook ensures that form values are preserved when the language changes.
-// Pass a ref to the form instance and the current language as arguments.
-const useSyncFormTranslations = (formRef, language) => {
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-
-    const { values } = form.getState();
-    form.reset();
-
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
-      }
-    });
-  }, [language]);
-};
-
-export default useSyncFormTranslations;
diff --git a/client/common/useSyncFormTranslations.test.tsx b/client/common/useSyncFormTranslations.test.tsx
new file mode 100644
index 0000000000..67c90d114f
--- /dev/null
+++ b/client/common/useSyncFormTranslations.test.tsx
@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { render } from '../test-utils';
+import { useSyncFormTranslations } from './useSyncFormTranslations';
+
+describe('useSyncFormTranslations', () => {
+  it('resets and re-applies non-empty form values on language change', () => {
+    const reset = jest.fn();
+    const change = jest.fn();
+    const getState = jest.fn().mockReturnValue({
+      values: {
+        name: 'Alice',
+        email: 'alice@example.com',
+        emptyField: ''
+      }
+    });
+
+    const formMock = { getState, reset, change };
+
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(formMock);
+      useSyncFormTranslations(formRef, language);
+
+      return null;
+    }
+
+    const { rerender } = render(<TestComponent language="en" />);
+    rerender(<TestComponent language="fr" />); // simulate language change
+
+    expect(reset).toHaveBeenCalled();
+
+    expect(change).toHaveBeenCalledWith('name', 'Alice');
+    expect(change).toHaveBeenCalledWith('email', 'alice@example.com');
+    expect(change).not.toHaveBeenCalledWith('emptyField', '');
+  });
+
+  it('does nothing if formRef.current is null', () => {
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(null);
+      useSyncFormTranslations(formRef, language);
+      return null;
+    }
+
+    render(<TestComponent language="en" />);
+    // No error = pass
+  });
+});
diff --git a/client/common/useSyncFormTranslations.ts b/client/common/useSyncFormTranslations.ts
new file mode 100644
index 0000000000..4a90362750
--- /dev/null
+++ b/client/common/useSyncFormTranslations.ts
@@ -0,0 +1,31 @@
+import { useEffect, MutableRefObject } from 'react';
+
+export interface FormLike {
+  getState(): { values: Record<string, unknown> };
+  reset(): void;
+  change(field: string, value: unknown): void;
+}
+
+/**
+ * This hook ensures that form values are preserved when the language changes.
+ * @param formRef
+ * @param language
+ */
+export const useSyncFormTranslations = (
+  formRef: MutableRefObject<FormLike>,
+  language: string
+) => {
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) return;
+
+    const { values } = form.getState();
+    form.reset();
+
+    Object.keys(values).forEach((field) => {
+      if (values[field]) {
+        form.change(field, values[field]);
+      }
+    });
+  }, [language]);
+};
diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index c04f961d75..57b52c59e0 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { remSize, prop } from '../theme';
-import IconButton from '../common/IconButton';
+import { IconButton } from '../common/IconButton';
 
 export const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};
diff --git a/client/components/Dropdown/DropdownMenu.jsx b/client/components/Dropdown/DropdownMenu.jsx
index ddaa1c338a..a760db01c2 100644
--- a/client/components/Dropdown/DropdownMenu.jsx
+++ b/client/components/Dropdown/DropdownMenu.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
-import useModalClose from '../../common/useModalClose';
+import { useModalClose } from '../../common/useModalClose';
 import DownArrowIcon from '../../images/down-filled-triangle.svg';
 import { DropdownWrapper } from '../Dropdown';
 
diff --git a/client/components/Dropdown/MenuItem.jsx b/client/components/Dropdown/MenuItem.jsx
index a7908e487d..79349c00cc 100644
--- a/client/components/Dropdown/MenuItem.jsx
+++ b/client/components/Dropdown/MenuItem.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ButtonOrLink from '../../common/ButtonOrLink';
+import { ButtonOrLink } from '../../common/ButtonOrLink';
 
 // TODO: combine with NavMenuItem
 
diff --git a/client/components/Menubar/Menubar.jsx b/client/components/Menubar/Menubar.jsx
index 8a358fceb6..3cceea48bb 100644
--- a/client/components/Menubar/Menubar.jsx
+++ b/client/components/Menubar/Menubar.jsx
@@ -6,9 +6,9 @@ import React, {
   useState,
   useEffect
 } from 'react';
-import useModalClose from '../../common/useModalClose';
+import { useModalClose } from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
-import usePrevious from '../../common/usePrevious';
+import { usePrevious } from '../../common/usePrevious';
 
 /**
  * Menubar manages a collection of menu items and their submenus. It provides keyboard navigation,
diff --git a/client/components/Menubar/MenubarItem.jsx b/client/components/Menubar/MenubarItem.jsx
index ab3b741e34..27e5b1f7c2 100644
--- a/client/components/Menubar/MenubarItem.jsx
+++ b/client/components/Menubar/MenubarItem.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useContext, useRef } from 'react';
 import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
-import ButtonOrLink from '../../common/ButtonOrLink';
+import { ButtonOrLink } from '../../common/ButtonOrLink';
 
 /**
  * MenubarItem wraps a button or link in an accessible list item that
diff --git a/client/components/SkipLink.test.tsx b/client/components/SkipLink.test.tsx
index 692a08a616..8cf2e40052 100644
--- a/client/components/SkipLink.test.tsx
+++ b/client/components/SkipLink.test.tsx
@@ -1,15 +1,7 @@
-import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '../test-utils';
 import { SkipLink } from './SkipLink';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key
-  })
-}));
-
 describe('SkipLink', () => {
   const defaultProps = {
     targetId: 'main-content',
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 2dedc82656..6ae400add7 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -4,7 +4,7 @@ import MediaQuery from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 
 import ExitIcon from '../../../images/exit.svg';
 
diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx
index 76bf2f03f2..4e4b7c784d 100644
--- a/client/modules/IDE/components/Editor/index.jsx
+++ b/client/modules/IDE/components/Editor/index.jsx
@@ -71,7 +71,7 @@ import EditorAccessibility from '../EditorAccessibility';
 import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 
 emmet(CodeMirror);
 
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index fb13dec9ef..9677e143c8 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -8,10 +8,10 @@ import classNames from 'classnames';
 import { ParentMenuContext } from '../../../../components/Menubar/contexts';
 import Menubar from '../../../../components/Menubar/Menubar';
 import { useMenuProps } from '../../../../components/Menubar/MenubarSubmenu';
-import ButtonOrLink from '../../../../common/ButtonOrLink';
+import { ButtonOrLink } from '../../../../common/ButtonOrLink';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 import {
   AccountIcon,
   AddIcon,
diff --git a/client/modules/IDE/components/IDEKeyHandlers.jsx b/client/modules/IDE/components/IDEKeyHandlers.jsx
index fc0219f27d..14e3cf2cba 100644
--- a/client/modules/IDE/components/IDEKeyHandlers.jsx
+++ b/client/modules/IDE/components/IDEKeyHandlers.jsx
@@ -13,7 +13,7 @@ import {
 } from '../actions/ide';
 import { setAllAccessibleOutput } from '../actions/preferences';
 import { cloneProject, saveProject } from '../actions/project';
-import useKeyDownHandlers from '../../../common/useKeyDownHandlers';
+import { useKeyDownHandlers } from '../../../common/useKeyDownHandlers';
 import {
   getAuthenticated,
   getIsUserOwner,
diff --git a/client/modules/IDE/components/Modal.jsx b/client/modules/IDE/components/Modal.jsx
index 831527b266..c3456373c0 100644
--- a/client/modules/IDE/components/Modal.jsx
+++ b/client/modules/IDE/components/Modal.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 import ExitIcon from '../../../images/exit.svg';
 
 // Common logic from NewFolderModal, NewFileModal, UploadFileModal
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 9620e321dc..dda19e343c 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { handleCreateFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function NewFileForm() {
   const fileNameInput = useRef(null);
@@ -57,7 +57,7 @@ function NewFileForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFileForm.AddFileSubmit')}
                 </Button>
               )}
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index b0935397ff..381520c47e 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { handleCreateFolder } from '../actions/files';
 
 function NewFolderForm() {
@@ -54,7 +54,7 @@ function NewFolderForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFolderForm.AddFolderSubmit')}
                 </Button>
               )}
diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx
index 0e629f789a..24f8920fe3 100644
--- a/client/modules/Legal/pages/Legal.jsx
+++ b/client/modules/Legal/pages/Legal.jsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import RouterTab from '../../../common/RouterTab';
+import { RouterTab } from '../../../common/RouterTab';
 import RootPage from '../../../components/RootPage';
 import { remSize } from '../../../theme';
 import Loader from '../../App/components/loader';
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index eff0ae2d7b..fda5945f87 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { createApiKey, removeApiKey } from '../actions';
@@ -78,7 +78,7 @@ const APIKeyForm = () => {
             disabled={keyLabel === ''}
             iconBefore={<PlusIcon />}
             label="Create new key"
-            type="submit"
+            type={ButtonTypes.SUBMIT}
           >
             {t('APIKeyForm.CreateTokenSubmit')}
           </Button>
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index c738e79db2..4ef40e4298 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
@@ -175,7 +175,7 @@ function AccountForm() {
               )}
             </Field>
           )}
-          <Button type="submit" disabled={submitting || invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={submitting || invalid}>
             {t('AccountForm.SaveAccountDetails')}
           </Button>
         </form>
diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx
index 02d3fb59f0..3b2ccdefed 100644
--- a/client/modules/User/components/CollectionCreate.jsx
+++ b/client/modules/User/components/CollectionCreate.jsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { generateCollectionName } from '../../../utils/generateRandomName';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { createCollection } from '../../IDE/actions/collections';
 
 const CollectionCreate = () => {
@@ -74,7 +74,7 @@ const CollectionCreate = () => {
               rows="6"
             />
           </p>
-          <Button type="submit" disabled={invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={invalid}>
             {t('CollectionCreate.SubmitCollectionCreate')}
           </Button>
         </form>
diff --git a/client/modules/User/components/CollectionMetadata.jsx b/client/modules/User/components/CollectionMetadata.jsx
index 88dc6d0312..dcb47e0929 100644
--- a/client/modules/User/components/CollectionMetadata.jsx
+++ b/client/modules/User/components/CollectionMetadata.jsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import Overlay from '../../App/components/Overlay';
 import { editCollection } from '../../IDE/actions/collections';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
diff --git a/client/modules/User/components/CollectionShareButton.jsx b/client/modules/User/components/CollectionShareButton.jsx
index c4fd06bcb6..a5d8705dcd 100644
--- a/client/modules/User/components/CollectionShareButton.jsx
+++ b/client/modules/User/components/CollectionShareButton.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import { DropdownArrowIcon } from '../../../common/icons';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
 const ShareURL = ({ value }) => {
diff --git a/client/modules/User/components/CookieConsent.jsx b/client/modules/User/components/CookieConsent.jsx
index 0817e10c70..9cfff74ac6 100644
--- a/client/modules/User/components/CookieConsent.jsx
+++ b/client/modules/User/components/CookieConsent.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
-import Button from '../../../common/Button';
+import { Button, ButtonKinds } from '../../../common/Button';
 
 const CookieConsentContainer = styled.div`
   position: fixed;
@@ -177,10 +177,7 @@ function CookieConsent({ hide }) {
                 />
               </CookieConsentCopy>
               <CookieConsentButtons>
-                <Button
-                  kind={Button.kinds.secondary}
-                  onClick={acceptAllCookies}
-                >
+                <Button kind={ButtonKinds.SECONDARY} onClick={acceptAllCookies}>
                   {t('Cookies.AllowAll')}
                 </Button>
                 <Button onClick={acceptEssentialCookies}>
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.jsx
index 6bfdb9bb22..7afbe5aec8 100644
--- a/client/modules/User/components/DashboardTabSwitcher.jsx
+++ b/client/modules/User/components/DashboardTabSwitcher.jsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { FilterIcon } from '../../../common/icons';
-import IconButton from '../../../common/IconButton';
-import RouterTab from '../../../common/RouterTab';
+import { IconButton } from '../../../common/IconButton';
+import { RouterTab } from '../../../common/RouterTab';
 import { Options } from '../../IDE/components/Header/MobileNav';
 import { toggleDirectionForField } from '../../IDE/actions/sorting';
 import useIsMobile from '../../IDE/hooks/useIsMobile';
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 6d5d6a1b2e..5bac902ecf 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
-import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 function LoginForm() {
   const { t, i18n } = useTranslation();
@@ -105,7 +105,7 @@ function LoginForm() {
                 {t('LoginForm.Errors.invalidCredentials')}
               </span>
             )}
-            <Button type="submit" disabled={submitting}>
+            <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
               {t('LoginForm.Submit')}
             </Button>
           </form>
diff --git a/client/modules/User/components/LoginForm.unit.test.jsx b/client/modules/User/components/LoginForm.unit.test.jsx
index 7ab207fb01..2f4262c16b 100644
--- a/client/modules/User/components/LoginForm.unit.test.jsx
+++ b/client/modules/User/components/LoginForm.unit.test.jsx
@@ -23,7 +23,9 @@ jest.mock('../actions', () => ({
   )
 }));
 
-jest.mock('../../../common/useSyncFormTranslations', () => jest.fn());
+jest.mock('../../../common/useSyncFormTranslations', () => ({
+  useSyncFormTranslations: jest.fn()
+}));
 
 const subject = () => {
   reduxRender(<LoginForm />, {
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index 95e96ec4a3..feca326c77 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { validateNewPassword } from '../../../utils/reduxFormUtils';
 import { updatePassword } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function NewPasswordForm(props) {
   const { resetPasswordToken } = props;
@@ -64,7 +64,10 @@ function NewPasswordForm(props) {
               </p>
             )}
           </Field>
-          <Button type="submit" disabled={submitting || invalid || pristine}>
+          <Button
+            type={ButtonTypes.SUBMIT}
+            disabled={submitting || invalid || pristine}
+          >
             {t('NewPasswordForm.SubmitSetNewPassword')}
           </Button>
         </form>
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index f44e7649bd..fe3752fdf4 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.jsx
@@ -4,7 +4,7 @@ import { Form, Field } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
 import { initiateResetPassword } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function ResetPasswordForm(props) {
   const { t } = useTranslation();
@@ -45,7 +45,7 @@ function ResetPasswordForm(props) {
             )}
           </Field>
           <Button
-            type="submit"
+            type={ButtonTypes.SUBMIT}
             disabled={
               submitting || invalid || pristine || resetPasswordInitiate
             }
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 26fb6fa97d..45d44da875 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -5,9 +5,9 @@ import { useDispatch } from 'react-redux';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { apiClient } from '../../../utils/apiClient';
-import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 const timeoutRef = { current: null };
 
@@ -204,7 +204,10 @@ function SignupForm() {
                 </div>
               )}
             </Field>
-            <Button type="submit" disabled={submitting || invalid || pristine}>
+            <Button
+              type={ButtonTypes.SUBMIT}
+              disabled={submitting || invalid || pristine}
+            >
               {t('SignupForm.SubmitSignup')}
             </Button>
           </form>
diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.jsx
index ac4a8b3b11..e48c660b67 100644
--- a/client/modules/User/components/SocialAuthButton.jsx
+++ b/client/modules/User/components/SocialAuthButton.jsx
@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 
 import { remSize } from '../../../theme';
 import { GithubIcon, GoogleIcon } from '../../../common/icons';
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import { unlinkService } from '../actions';
 import { persistState } from '../../IDE/actions/project';
 
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index fcde949cd7..611fef9f5a 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import Nav from '../../IDE/components/Header/Nav';
 import Overlay from '../../App/components/Overlay';
 import AssetList from '../../IDE/components/AssetList';
diff --git a/package-lock.json b/package-lock.json
index f968228de1..31ceb6c724 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -158,6 +158,8 @@
         "@types/node": "^16.18.126",
         "@types/react": "^16.14.0",
         "@types/react-dom": "^16.9.25",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/styled-components": "^5.1.34",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -14131,6 +14133,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -14368,6 +14377,29 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/react/node_modules/csstype": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
@@ -14434,6 +14466,25 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/styled-components/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
@@ -50505,6 +50556,12 @@
         "@types/unist": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -50746,6 +50803,27 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/redux-devtools-themes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/redux-devtools-themes/-/redux-devtools-themes-1.0.0.tgz",
@@ -50807,6 +50885,25 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "@types/styled-components": {
+      "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+          "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+          "dev": true
+        }
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
diff --git a/package.json b/package.json
index a6117f966d..431913dd97 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,8 @@
     "@types/node": "^16.18.126",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.25",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "babel-core": "^7.0.0-bridge.0",