1715-improve infopage form and display styling (#1716)

* fix react router imports

* better dark mode handeling

* make form a little nicer

---------

Co-authored-by: Snorre Sæther <[email protected]>

Author: 2 people

frontend/.storybook/preview.jsx

@@ -2,7 +2,7 @@ import '~/global.scss';
 
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { THEME } from '~/constants';
 import { AuthContextProvider } from '~/context/AuthContext';
 import { GlobalContextProvider } from '~/context/GlobalContextProvider';

frontend/src/App.tsx

@@ -1,16 +1,16 @@
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { ToastContainer } from 'react-toastify';
 import { useGoatCounter, useIsDarkTheme } from '~/hooks';
 
 import 'react-toastify/dist/ReactToastify.min.css';
 
 // Neccessary import for translations.
-import { CommandMenu, UserFeedback, useScrollToTop } from './Components';
-import './i18n/i18n';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { makeZodI18nMap } from 'zod-i18n-map';
+import { CommandMenu, UserFeedback, useScrollToTop } from './Components';
+import './i18n/i18n';
 
 export function App() {
   const goatCounterCode = import.meta.env.VITE_GOATCOUNTER_CODE;

frontend/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
 import type { ReactNode } from 'react';
-import { type UIMatch, useMatches } from 'react-router-dom';
+import { type UIMatch, useMatches } from 'react-router';
 import { Link } from '~/Components';
 import { ROUTES } from '~/routes';
 import styles from './Breadcrumb.module.scss';

frontend/src/Components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { default as classnames } from 'classnames';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import type { ButtonType, Children } from '~/types';
 import styles from './Button.module.scss';
 import type { ButtonDisplay, ButtonTheme } from './types';

frontend/src/Components/DynamicOrgOutlet/DynamicOrgOutlet.tsx

@@ -1,4 +1,4 @@
-import { useRouteLoaderData } from 'react-router-dom';
+import { useRouteLoaderData } from 'react-router';
 import type { RecruitmentLoader } from '~/router/loaders';
 import { OrgNameType } from '~/types';
 import { IsNumber } from '~/utils';

frontend/src/Components/IsfitOutlet/IsfitNavbar/IsfitNavbar.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { ROUTES } from '~/routes';
 import { IsfitLogo } from '../../Logo/components';
 import styles from './IsfitNavbar.module.scss';

frontend/src/Components/IsfitOutlet/IsfitOutlet.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { IsfitNavbar } from './IsfitNavbar/IsfitNavbar';
 import styles from './IsfitOutlet.module.scss';
 

frontend/src/Components/Navbar/Navbar.tsx

@@ -3,7 +3,7 @@ import { default as classNames } from 'classnames';
 import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { Button, Link, ThemeSwitch } from '~/Components';
 import { getActiveRecruitments, logout, stopImpersonatingUser } from '~/api';
 import { logoWhite } from '~/assets';

frontend/src/Components/Navbar/components/NavbarItem/NavbarItem.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useGlobalContext } from '~/context/GlobalContextProvider';
 import { useClickOutside, useDesktop } from '~/hooks';
 import type { Children, SetState } from '~/types';

frontend/src/Components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import { useAuthContext } from '~/context/AuthContext';
 import { ROUTES } from '~/routes';
 import { hasPermissions } from '~/utils';