Fjerner less styling fra Container og SystemetLaster

src/frontend/index.less

@@ -1,7 +1,5 @@
-@import "./komponenter/app.less";
 @import "./komponenter/Fagsak/Personlinje/Behandlingsmeny/behandlingsmeny.less";
 
 // Felles
 @import "./komponenter/Felleskomponenter/Hendelsesoversikt/Totrinnskontroll/totrinnskontroll.less";
-@import "./komponenter/Felleskomponenter/SystemetLaster/systemet-laster.less";
 @import "./komponenter/Felleskomponenter/PersonInformasjon/personinformasjon.less";

src/frontend/komponenter/Container.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import classNames from 'classnames';
 import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
+import styled from 'styled-components';
 
 import BarnehagebarnTabComp from './Barnehagebarn/BarnehagebarnTabComp';
 import FagsakContainer from './Fagsak/FagsakContainer';
@@ -19,6 +19,19 @@ import { FagsakProvider } from '../context/fagsak/FagsakContext';
 import { Oppgaver } from '../context/OppgaverContext';
 import { TidslinjeProvider } from '../context/TidslinjeContext';
 
+const Main = styled.main<{ $systemetLaster: boolean }>`
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    ${props => {
+        if (props.$systemetLaster)
+            return `
+                filter: blur(12px);
+                -webkit-filter: blur(12px);
+        `;
+    }};
+`;
+
 const Container: React.FC = () => {
     const { autentisert, systemetLaster, innloggetSaksbehandler, appInfoModal, erTogglesHentet } =
         useApp();
@@ -32,7 +45,7 @@ const Container: React.FC = () => {
                         {systemetLaster() && <SystemetLaster />}
                         <Toasts />
 
-                        <main className={classNames('container', systemetLaster() && 'blur')}>
+                        <Main $systemetLaster={systemetLaster()}>
                             <HeaderMedSøk
                                 brukerNavn={innloggetSaksbehandler?.displayName}
                                 brukerEnhet={innloggetSaksbehandler?.enhet}
@@ -69,7 +82,7 @@ const Container: React.FC = () => {
                                     </Routes>
                                 </BehandlingProvider>
                             </FagsakProvider>
-                        </main>
+                        </Main>
                     </>
                 )
             ) : (

src/frontend/komponenter/Felleskomponenter/SystemetLaster/SystemetLaster.tsx

@@ -1,19 +1,26 @@
 import * as React from 'react';
 
-import { Heading, Loader } from '@navikt/ds-react';
+import styled from 'styled-components';
+
+import { Heading, Loader, VStack } from '@navikt/ds-react';
+import { AZIndexTooltip } from '@navikt/ds-tokens/dist/tokens';
+
+const PosisjonertVStack = styled(VStack)`
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    top: 20%;
+    z-index: ${AZIndexTooltip};
+`;
 
 const SystemetLaster = () => {
     return (
-        <div className={'systemet-laster'}>
-            <div className={'systemet-laster__content'}>
-                <Heading
-                    size={'medium'}
-                    className={'systemet-laster__content--tekst'}
-                    children={'Systemet laster'}
-                />
-                <Loader size="large" transparent={true} title="Systemet laster data" />
-            </div>
-        </div>
+        <PosisjonertVStack gap="2">
+            <Heading size={'medium'} children={'Systemet laster'} />
+            <Loader size="large" transparent={true} title="Systemet laster data" />
+        </PosisjonertVStack>
     );
 };