feat: tooltip foundation (#2950)

* feat: add foundation for tooltips

* fix: add lang

* refactor: remove React import where no longer necessary

src/components/Layout/LanguagePicker/index.tsx

@@ -1,5 +1,5 @@
 import { TranslateIcon } from '@heroicons/react/solid';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { AvailableLocale } from '../../../context/LanguageContext';
 import { availableLanguages } from '../../../context/LanguageContext';

src/components/Layout/Notifications/index.tsx

@@ -1,5 +1,4 @@
 import { BellIcon } from '@heroicons/react/outline';
-import React from 'react';
 
 const Notifications = () => {
   return (

src/components/Layout/SearchInput/index.tsx

@@ -1,6 +1,6 @@
 import { XCircleIcon } from '@heroicons/react/outline';
 import { SearchIcon } from '@heroicons/react/solid';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSearchInput from '../../../hooks/useSearchInput';
 

src/components/Layout/Sidebar/index.tsx

@@ -8,8 +8,7 @@ import {
 } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type { ReactNode } from 'react';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { Permission, useUser } from '../../../hooks/useUser';
@@ -31,7 +30,7 @@ interface SidebarProps {
 
 interface SidebarLinkProps {
   href: string;
-  svgIcon: ReactNode;
+  svgIcon: React.ReactNode;
   messagesKey: keyof typeof messages;
   activeRegExp: RegExp;
   as?: string;

src/components/Layout/UserDropdown/index.tsx

@@ -2,7 +2,7 @@ import { LogoutIcon } from '@heroicons/react/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useUser } from '../../../hooks/useUser';

src/components/Layout/VersionStatus/index.tsx

@@ -5,7 +5,7 @@ import {
   ServerIcon,
 } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { StatusResponse } from '../../../../server/interfaces/api/settingsInterfaces';

src/components/Layout/index.tsx

@@ -1,7 +1,8 @@
 import { MenuAlt2Icon } from '@heroicons/react/outline';
 import { ArrowLeftIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import type { AvailableLocale } from '../../context/LanguageContext';
 import useLocale from '../../hooks/useLocale';
 import useSettings from '../../hooks/useSettings';