one

app/components/CenteredContent.tsx

@@ -6,13 +6,13 @@ type Props = {
   withStickyHeader?: boolean;
 };
 
-const Container = styled.div<{ withStickyHeader?: boolean }>`
+const Container = styled.div<Props>`
   width: 100%;
   max-width: 100vw;
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: any) =>
+    padding: ${(props: Props) =>
       props.withStickyHeader ? "4px 60px 60px" : "60px"};
   `};
 `;

app/components/ContextMenu/MenuItem.tsx

@@ -7,7 +7,7 @@ import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
-  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;

app/components/ContextMenu/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths } from "@shared/styles";
 import useMenuContext from "~/hooks/useMenuContext";
@@ -160,8 +160,10 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${depths.menu};
 
-  // overrides make mobile-first coding style challenging
-  // so we explicitly define mobile breakpoint here
+  /*
+   * overrides make mobile-first coding style challenging
+   * so we explicitly define mobile breakpoint here
+   */
   ${breakpoint("mobile", "tablet")`
     position: fixed !important;
     transform: none !important;
@@ -172,10 +174,13 @@ export const Position = styled.div`
   `};
 `;
 
-export const Background = styled.div<{
+type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
-}>`
+  theme: DefaultTheme;
+};
+
+export const Background = styled.div<BackgroundProps>`
   animation: ${mobileContextMenu} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
@@ -195,11 +200,12 @@ export const Background = styled.div<{
   }
 
   ${breakpoint("tablet")`
-    animation: ${(props: any) =>
+    animation: ${(props: BackgroundProps) =>
       props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
+    transform-origin: ${(props: BackgroundProps) =>
+      props.rightAnchor ? "75%" : "25%"} 0;
     max-width: 276px;
-    background: ${(props: any) => props.theme.menuBackground};
-    box-shadow: ${(props: any) => props.theme.menuShadow};
+    background: ${(props: BackgroundProps) => props.theme.menuBackground};
+    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
   `};
 `;

app/components/LanguagePrompt.tsx

@@ -10,7 +10,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { detectLanguage } from "~/utils/language";
 
-function Icon(props: any) {
+function Icon({ className }: { className?: string }) {
   return (
     <svg
       width="32"
@@ -18,7 +18,7 @@ function Icon(props: any) {
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      className={className}
     >
       <path
         fill-rule="evenodd"

app/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
@@ -74,11 +74,14 @@ const Container = styled(Flex)`
   min-height: 100%;
 `;
 
-const Content = styled(Flex)<{
+type ContentProps = {
   $isResizing?: boolean;
   $sidebarCollapsed?: boolean;
   $hasSidebar?: boolean;
-}>`
+  theme: DefaultTheme;
+};
+
+const Content = styled(Flex)<ContentProps>`
   margin: 0;
   transition: ${(props) =>
     props.$isResizing ? "none" : `margin-left 100ms ease-out`};
@@ -92,7 +95,7 @@ const Content = styled(Flex)<{
   `}
 
   ${breakpoint("tablet")`
-    ${(props: any) =>
+    ${(props: ContentProps) =>
       props.$hasSidebar &&
       props.$sidebarCollapsed &&
       `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}

app/components/Modal.tsx

@@ -4,7 +4,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -143,7 +143,12 @@ const Backdrop = styled(Flex)<{ $isCentered?: boolean }>`
   }
 `;
 
-const Fullscreen = styled.div<{ $nested: boolean }>`
+type FullscreenProps = {
+  $nested: boolean;
+  theme: DefaultTheme;
+};
+
+const Fullscreen = styled.div<FullscreenProps>`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
@@ -160,7 +165,7 @@ const Fullscreen = styled.div<{ $nested: boolean }>`
   outline: none;
 
   ${breakpoint("tablet")`
-  ${(props: any) =>
+  ${(props: FullscreenProps) =>
     props.$nested &&
     `
       box-shadow: 0 -2px 10px ${props.theme.shadow};

app/components/Sidebar/Sidebar.tsx

@@ -229,12 +229,14 @@ const Backdrop = styled.a`
   background: ${(props) => props.theme.backdrop};
 `;
 
-const Container = styled(Flex)<{
+type ContainerProps = {
   $mobileSidebarVisible: boolean;
   $isAnimating: boolean;
   $isSmallerThanMinimum: boolean;
   $collapsed: boolean;
-}>`
+};
+
+const Container = styled(Flex)<ContainerProps>`
   position: fixed;
   top: 0;
   bottom: 0;
@@ -242,7 +244,7 @@ const Container = styled(Flex)<{
   background: ${(props) => props.theme.sidebarBackground};
   transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
     ${(props) => props.theme.backgroundTransition}
-      ${(props: any) =>
+      ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
@@ -263,13 +265,13 @@ const Container = styled(Flex)<{
   ${breakpoint("tablet")`
     margin: 0;
     min-width: 0;
-    transform: translateX(${(props: any) =>
+    transform: translateX(${(props: ContainerProps) =>
       props.$collapsed ? "calc(-100% + 16px)" : 0});
 
     &:hover,
     &:focus-within {
       transform: none;
-      box-shadow: ${(props: any) =>
+      box-shadow: ${(props: ContainerProps) =>
         props.$collapsed
           ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
           : props.$isSmallerThanMinimum
@@ -286,7 +288,7 @@ const Container = styled(Flex)<{
     }
 
     &:not(:hover):not(:focus-within) > div {
-      opacity: ${(props: any) => (props.$collapsed ? "0" : "1")};
+      opacity: ${(props: ContainerProps) => (props.$collapsed ? "0" : "1")};
       transition: opacity 100ms ease-in-out;
     }
   `};

app/components/Sidebar/components/SidebarLink.tsx

@@ -16,7 +16,7 @@ export type DragObject = NavigationNode & {
 type Props = Omit<NavLinkProps, "to"> & {
   to?: string | Record<string, any>;
   href?: string | Record<string, any>;
-  innerRef?: (arg0: HTMLElement | null | undefined) => void;
+  innerRef?: (ref: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;

app/menus/CollectionMenu.tsx

@@ -14,7 +14,7 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import Collection from "~/models/Collection";
@@ -37,7 +37,7 @@ type Props = {
   collection: Collection;
   placement?: Placement;
   modal?: boolean;
-  label?: (arg0: any) => React.ReactNode;
+  label?: (props: MenuButtonHTMLProps) => React.ReactNode;
   onOpen?: () => void;
   onClose?: () => void;
 };

app/menus/DocumentMenu.tsx

@@ -21,7 +21,7 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -64,7 +64,7 @@ type Props = {
   modal?: boolean;
   showToggleEmbeds?: boolean;
   showPin?: boolean;
-  label?: (arg0: any) => React.ReactNode;
+  label?: (props: MenuButtonHTMLProps) => React.ReactNode;
   onOpen?: () => void;
   onClose?: () => void;
 };

app/menus/NewChildDocumentMenu.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import Document from "~/models/Document";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
@@ -9,7 +9,7 @@ import useStores from "~/hooks/useStores";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
-  label?: (arg0: any) => React.ReactNode;
+  label?: (props: MenuButtonHTMLProps) => React.ReactNode;
   document: Document;
 };
 

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -13,7 +13,7 @@ import FileOperationMenu from "~/menus/FileOperationMenu";
 
 type Props = {
   fileOperation: FileOperation;
-  handleDelete?: (arg0: FileOperation) => Promise<void>;
+  handleDelete?: (fileOperation: FileOperation) => Promise<void>;
 };
 
 const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {

app/stores/BaseStore.ts

@@ -29,7 +29,7 @@ export const DEFAULT_PAGINATION_LIMIT = 25;
 
 export const PAGINATION_SYMBOL = Symbol.for("pagination");
 
-export default class BaseStore<T extends BaseModel> {
+export default abstract class BaseStore<T extends BaseModel> {
   @observable
   data: Map<string, T> = new Map();
 

app/utils/language.ts

@@ -1,3 +1,5 @@
+import { i18n } from "i18next";
+
 export function detectLanguage() {
   const [ln, r] = navigator.language.split("-");
   const region = (r || ln).toUpperCase();
@@ -6,7 +8,7 @@ export function detectLanguage() {
 
 export function changeLanguage(
   toLanguageString: string | null | undefined,
-  i18n: any
+  i18n: i18n
 ) {
   if (toLanguageString && i18n.language !== toLanguageString) {
     // Languages are stored in en_US format in the database, however the

server/logging/logger.ts

@@ -19,7 +19,7 @@ type LogCategory =
 type Extra = Record<string, any>;
 
 class Logger {
-  output: any;
+  output: winston.Logger;
 
   constructor() {
     this.output = winston.createLogger();