feat: tooltip foundation (#2950)

* feat: add foundation for tooltips

* fix: add lang

* refactor: remove React import where no longer necessary

src/components/UserProfile/ProfileHeader/index.tsx

@@ -1,6 +1,6 @@
 import { CogIcon, UserIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import type { User } from '../../../hooks/useUser';
 import { Permission, useUser } from '../../../hooks/useUser';

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -2,7 +2,8 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -1,6 +1,6 @@
 import { CloudIcon, MailIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';

src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/UserPermissions/index.tsx

@@ -2,7 +2,7 @@ import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/UserProfile/UserSettings/index.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { UserSettingsNotificationsResponse } from '../../../../server/interfaces/api/userSettingsInterfaces';

src/components/UserProfile/index.tsx

@@ -1,7 +1,7 @@
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type {