diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 3dd7925bf..05e6ca85b 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -39,5 +39,11 @@
},
"[jsonc]": {
"editor.defaultFormatter": "biomejs.biome"
- }
+ },
+ "tailwindCSS.experimental.classRegex": [
+ ":\\s*?[\"'`]([^\"'`]*).*?,",
+ "const\\s\\w*Classes\\s+=\\s+[\"'`]([^\"'`]*)",
+ "const\\s\\w*_CLASSES\\s+=\\s+[\"'`]([^\"'`]*)",
+ "@tw\\s\\*/\\s+[\"'`]([^\"'`]*)"
+ ]
}
diff --git a/frontend/index.css b/frontend/index.css
index 23ec1d539..cd2d0e08b 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -2,14 +2,22 @@
@import "@navikt/ds-css" layer(components);
@import "./fonts.css" layer(fonts);
+@layer components {
+ @theme {
+ --a-font-family: "Source Sans 3", Arial, sans-serif;
+ }
+}
+
:root {
- --a-font-family: 'Source Sans 3', Arial, sans-serif;
+ --a-font-family: "Source Sans 3", Arial, sans-serif;
+}
+
+@theme {
+ --font-display: "Source Sans 3", Arial, sans-serif;
}
html {
box-sizing: border-box;
- font-family: 'Source Sans 3', Arial, sans-serif;
- font-size: var(--a-spacing-4);
}
*,
@@ -17,24 +25,3 @@ html {
*::after {
box-sizing: inherit;
}
-
-html,
-body,
-#app {
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- overflow: hidden;
- font-size: var(--a-spacing-4);
-}
-
-#app {
- display: flex;
- flex-flow: column;
-}
-
-.smart-editor {
- outline: none;
- min-height: 100%;
-}
diff --git a/frontend/index.html b/frontend/index.html
index 2e98ec028..5e09d3384 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,6 @@
-
+
@@ -13,8 +14,8 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/src/components/access-rights/access-rights.tsx b/frontend/src/components/access-rights/access-rights.tsx
index a249eec62..bd5069228 100644
--- a/frontend/src/components/access-rights/access-rights.tsx
+++ b/frontend/src/components/access-rights/access-rights.tsx
@@ -9,7 +9,6 @@ import type { IYtelse } from '@app/types/kodeverk';
import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
import { Button, HStack, Heading, Loader } from '@navikt/ds-react';
import { useContext, useState } from 'react';
-import { styled } from 'styled-components';
import { Body } from './body';
import { Head } from './head';
@@ -68,8 +67,8 @@ const AccessRightsContent = ({ ytelser, saksbehandlere }: Props) => {
return (
<>
-
- setFocusedCell([-1, -1])}>
+
+
setFocusedCell([-1, -1])}>
{
focusedCell={focusedCell}
setFocusedCell={setFocusedCell}
/>
-
-
+
+
}>
Lagre
@@ -99,14 +98,3 @@ const TilgangsstyringHeading = () => (
Tilgangsstyring
);
-
-const StyledTable = styled.table`
- border-collapse: separate;
- border-spacing: 0;
- max-height: 100%;
-`;
-
-const TableWrapper = styled.div`
- flex-shrink: 1;
- overflow: auto;
-`;
diff --git a/frontend/src/components/access-rights/cell.tsx b/frontend/src/components/access-rights/cell.tsx
index 094b5ed95..f14fe2793 100644
--- a/frontend/src/components/access-rights/cell.tsx
+++ b/frontend/src/components/access-rights/cell.tsx
@@ -1,5 +1,3 @@
-import { styled } from 'styled-components';
-
interface Props {
isChecked: boolean;
onCheck: (checked: boolean) => void;
@@ -10,72 +8,63 @@ interface Props {
isCurrentRow: boolean;
}
-export const Cell = ({ isChecked, onCheck, children, onFocus, isFocused, isCurrentColumn, isCurrentRow }: Props) => (
-
- {
+ const backgroundClass = VARIANTS[getVariant(isFocused, isCurrentColumn, isCurrentRow, isChecked)];
+
+ return (
+ onCheck(target.checked)}
- />
-
-);
+ onClick={onFocus}
+ onKeyDown={({ key }) => {
+ if (key === 'Enter' || key === ' ') {
+ onFocus();
+ }
+ }}
+ onMouseEnter={onFocus}
+ >
+ onCheck(target.checked)}
+ />
+
+ );
+};
-interface StyledCellProps {
- $isChecked: boolean;
- $isFocused: boolean;
- $isCurrentColumn: boolean;
- $isCurrentRow: boolean;
+enum Variant {
+ FOCUSED_OR_CURRENT_CHECKED = 0,
+ FOCUSED_OR_CURRENT_UNCHECKED = 1,
+ CHECKED = 2,
+ NONE = 3,
}
-const getColor = (
- { $isChecked, $isFocused, $isCurrentColumn, $isCurrentRow }: StyledCellProps,
- defaultColor = 'var(--a-bg-default)',
-) => {
- if ($isFocused || $isCurrentColumn || $isCurrentRow) {
- if ($isChecked) {
- return 'var(--a-purple-200)';
- }
-
- return 'var(--a-blue-200)';
- }
-
- if ($isChecked) {
- return 'var(--a-green-200)';
- }
-
- return defaultColor;
+const VARIANTS: Record = {
+ [Variant.FOCUSED_OR_CURRENT_CHECKED]: 'bg-(--a-purple-200)',
+ [Variant.FOCUSED_OR_CURRENT_UNCHECKED]: 'bg-(--a-blue-200)',
+ [Variant.CHECKED]: 'bg-(--a-green-200)',
+ [Variant.NONE]: 'even:bg-(--a-bg-default) odd:bg-(--a-bg-subtle)',
};
-const StyledCell = styled.td`
- padding: 0;
- border-right: 1px solid var(--a-border-on-inverted);
- border-bottom: 1px solid var(--a-border-on-inverted);
+const getVariant = (
+ isFocused: boolean,
+ isCurrentColumn: boolean,
+ isCurrentRow: boolean,
+ isChecked: boolean,
+): Variant => {
+ if (isFocused || isCurrentColumn || isCurrentRow) {
+ if (isChecked) {
+ return Variant.FOCUSED_OR_CURRENT_CHECKED;
+ }
- &:nth-child(even) {
- background-color: ${getColor};
+ return Variant.FOCUSED_OR_CURRENT_UNCHECKED;
}
- &:nth-child(odd) {
- background-color: ${(props) => getColor(props, 'rgb(247, 247, 247)')};
+ if (isChecked) {
+ return Variant.CHECKED;
}
-`;
-const StyledCheckbox = styled.input`
- display: block;
- width: var(--a-spacing-8);
- height: var(--a-spacing-8);
- border: none;
- margin: 0;
- padding: 0;
- opacity: 0;
- cursor: pointer;
-`;
+ return Variant.NONE;
+};
diff --git a/frontend/src/components/access-rights/head.tsx b/frontend/src/components/access-rights/head.tsx
index 69d8c0d28..bccab56f1 100644
--- a/frontend/src/components/access-rights/head.tsx
+++ b/frontend/src/components/access-rights/head.tsx
@@ -1,6 +1,5 @@
import type { SaksbehandlerAccessRights } from '@app/redux-api/access-rights';
import { Label } from '@navikt/ds-react';
-import { styled } from 'styled-components';
interface Props {
saksbehandlere: SaksbehandlerAccessRights[];
@@ -8,124 +7,61 @@ interface Props {
setFocusedCell: (cell: [number, number]) => void;
}
+const SHADOW_STYLE: React.CSSProperties = {
+ boxShadow: 'var(--a-border-on-inverted) 0 1px 0 0, black 0px 5px 5px -5px',
+};
+
+const ANGLED_TH_CLASSES =
+ 'origin-bottom-left pl-2 text-left align-text-bottom whitespace-nowrap relative border-r-1 border-(--a-border-on-inverted)';
+const ANGLED_DIV_CLASSES = 'pr-3 overflow-hidden text-ellipsis absolute bottom-0 text-left origin-bottom-left';
+
+const NON_ANGLED_HEADER_HEIGHT = 32;
+const ANGLED_HEADER_WIDTH = 256;
+const ANGLED_HEADER_HEIGHT = Math.ceil(Math.sqrt(2 * NON_ANGLED_HEADER_HEIGHT ** 2) / 2);
+const CONTAINER_WIDTH = NON_ANGLED_HEADER_HEIGHT;
+const CONTAINER_HEIGHT = Math.sqrt(ANGLED_HEADER_WIDTH ** 2 / 2);
+
export const Head = ({ saksbehandlere, setFocusedCell, focusedCell: [focusedColumn] }: Props) => (
-
+
- Ytelse
- Ytelse
+ setFocusedCell([0, -1])}
- />
+ >
+
+ Alle saksbehandlere ({saksbehandlere.length})
+
+
{saksbehandlere.map(({ saksbehandlerName, saksbehandlerIdent, ytelseIdList }, i) => (
- setFocusedCell([i + 1, -1])}
- />
+ >
+
+ {saksbehandlerName} ({ytelseIdList.length}) ({saksbehandlerIdent})
+
+
))}
-
+
);
-
-interface AngledHeaderProps {
- text: string;
- grey: boolean;
- first?: boolean;
- focused: boolean;
- zIndex: number;
- onMouseEnter: () => void;
-}
-
-const AngledHeader = ({ text, grey, focused, zIndex, onMouseEnter, first = false }: AngledHeaderProps) => (
-
- {text}
-
-);
-
-const Thead = styled.thead`
- position: sticky;
- top: 0;
- z-index: 2;
- background-color: var(--a-bg-default);
-
- box-shadow:
- var(--a-border-on-inverted) 0 1px 0 0,
- black 0px 5px 5px -5px;
-`;
-
-const NON_ANGLED_HEADER_HEIGHT = 32;
-const ANGLED_HEADER_WIDTH = 256;
-const ANGLED_HEADER_HEIGHT = Math.ceil(Math.sqrt(2 * NON_ANGLED_HEADER_HEIGHT ** 2) / 2);
-const CONTAINER_WIDTH = NON_ANGLED_HEADER_HEIGHT;
-const CONTAINER_HEIGHT = Math.sqrt(ANGLED_HEADER_WIDTH ** 2 / 2);
-
-const StyledHeader = styled.th`
- padding-left: var(--a-spacing-2);
- vertical-align: bottom;
- text-align: left;
-`;
-
-const getBackgroundColor = (props: StyledAngledHeaderDivProps) => {
- if (props.$focused) {
- return 'var(--a-blue-200)';
- }
-
- if (props.$grey) {
- return 'var(--a-gray-200)';
- }
-
- return 'var(--a-bg-default)';
-};
-
-interface StyledAngledHeaderDivProps {
- $grey: boolean;
- $first: boolean;
- $focused: boolean;
- $zIndex?: number;
-}
-
-const StyledAngledHeader = styled(StyledHeader)`
- white-space: nowrap;
-
- transform-origin: bottom left;
- position: relative;
-
- transform: skew(-45deg);
- border-right: 1px solid var(--a-border-on-inverted);
- border-left: ${({ $first }) => ($first ? '1px solid var(--a-border-on-inverted)' : 'none')};
-
- height: ${CONTAINER_HEIGHT}px;
- background-color: ${getBackgroundColor};
-`;
-
-const AngledHeaderDiv = styled(Label)`
- padding-right: var(--a-spacing-3);
- width: ${ANGLED_HEADER_WIDTH}px;
- height: ${ANGLED_HEADER_HEIGHT}px;
-
- overflow: hidden;
- text-overflow: ellipsis;
-
- position: absolute;
- bottom: 0;
- left: ${CONTAINER_WIDTH}px;
-
- transform-origin: bottom left;
- transform: skew(45deg) rotate(-45deg);
-
- text-align: left;
-`;
diff --git a/frontend/src/components/access-rights/row.tsx b/frontend/src/components/access-rights/row.tsx
index 8f5217f51..f14e3aaea 100644
--- a/frontend/src/components/access-rights/row.tsx
+++ b/frontend/src/components/access-rights/row.tsx
@@ -1,7 +1,6 @@
import type { SaksbehandlerAccessRights } from '@app/redux-api/access-rights';
import { useLatestYtelser } from '@app/simple-api-state/use-kodeverk';
import type { IYtelse } from '@app/types/kodeverk';
-import { styled } from 'styled-components';
import { Cell } from './cell';
interface Props {
@@ -24,25 +23,26 @@ export const Row = ({
const numberOfSaksbehandlerePerYtelse = useNumberOfSaksbehandlerePerYtelse(ytelse.id, accessRights);
const ytelseTitle = `(${numberOfSaksbehandlerePerYtelse}/${accessRights.length}) ${ytelse.navn} `;
+ const isFocused = rowIndex === focusedRow;
return (
- setFocusedCell([-1, rowIndex])}
>
-
- {ytelseTitle}
-
-
+
+ {ytelseTitle}
+
+
ytelseIdList.includes(ytelse.id))}
onCheck={(checked) => onCheck(checked, ytelse.id, null)}
onFocus={() => setFocusedCell([0, rowIndex])}
isCurrentColumn={focusedColumn === 0 && (rowIndex < focusedRow || focusedRow === -1)}
- isCurrentRow={rowIndex === focusedRow}
- isFocused={focusedColumn === 0 && rowIndex === focusedRow}
+ isCurrentRow={isFocused}
+ isFocused={focusedColumn === 0 && isFocused}
>
{`Alle saksbehandlere / ${ytelse.navn}`}
|
@@ -53,8 +53,8 @@ export const Row = ({
onCheck={(checked) => onCheck(checked, ytelse.id, saksbehandlerIdent)}
onFocus={() => setFocusedCell([columnIndex + 1, rowIndex])}
isCurrentColumn={columnIndex + 1 === focusedColumn && (rowIndex < focusedRow || focusedRow === -1)}
- isCurrentRow={rowIndex === focusedRow && (columnIndex + 1 < focusedColumn || focusedColumn === -1)}
- isFocused={focusedColumn === columnIndex + 1 && rowIndex === focusedRow}
+ isCurrentRow={isFocused && (columnIndex + 1 < focusedColumn || focusedColumn === -1)}
+ isFocused={focusedColumn === columnIndex + 1 && isFocused}
>
{`${saksbehandlerName} / ${ytelse.navn}`}
@@ -63,48 +63,6 @@ export const Row = ({
);
};
-const StyledHeaderText = styled.span`
- display: flex;
- overflow: hidden;
- height: 100%;
- min-width: 100%;
- padding-left: var(--a-spacing-2);
- padding-right: var(--a-spacing-2);
- white-space: nowrap;
- align-items: center;
- justify-content: left;
-
- &:hover {
- overflow: visible;
- text-overflow: unset;
- background-color: var(--a-blue-200);
- box-shadow: var(--a-spacing-05) var(--a-spacing-05) 5px 0px var(--a-border-on-inverted);
- width: fit-content;
- }
-`;
-
-const StyledHeader = styled.th<{ $isHighlighted: boolean }>`
- height: var(--a-spacing-8);
- border-right: 1px solid var(--a-border-on-inverted);
- border-left: 1px solid var(--a-border-on-inverted);
- border-bottom: 1px solid var(--a-border-on-inverted);
- padding: 0;
- margin: 0;
- max-width: 256px;
- position: relative;
- z-index: 1;
- background-color: ${({ $isHighlighted }) => ($isHighlighted ? 'var(--a-blue-200)' : 'rgb(247, 247, 247)')};
-
- &:hover {
- overflow: visible;
- }
-`;
-
-const HeaderEllipsis = styled.span`
- overflow: hidden;
- text-overflow: ellipsis;
-`;
-
const useNumberOfSaksbehandlerePerYtelse = (ytelseId: string, accessRights: SaksbehandlerAccessRights[]): number => {
const { data: ytelser = [] } = useLatestYtelser();
diff --git a/frontend/src/components/admin/merkantil-task-list.tsx b/frontend/src/components/admin/merkantil-task-list.tsx
index ac5917340..d31f410f1 100644
--- a/frontend/src/components/admin/merkantil-task-list.tsx
+++ b/frontend/src/components/admin/merkantil-task-list.tsx
@@ -44,7 +44,9 @@ const TaskList = () => {
Noe gikk galt
- {JSON.stringify(error, null, 2)}
+
+ {JSON.stringify(error, null, 2)}
+
@@ -135,11 +137,11 @@ const TaskList = () => {
),
)}
-
+
Totalt {tasks.length} oppgaver
-
+
);
@@ -178,15 +180,3 @@ const getPath: UrlFn = (id, typeId) => `/${TYPE_TO_PATH[typeId]}/${id}`;
const NoWrapTableHeaderCell = styled(Table.HeaderCell)`
white-space: nowrap;
`;
-
-const StyledTableFooter = styled.tfoot`
- font-style: italic;
-`;
-
-const Code = styled.code`
- display: block;
- white-space: pre-wrap;
- padding: var(--a-spacing-4);
- border-radius: var(--a-border-radius-medium);
- background-color: var(--a-surface-neutral-subtle);
-`;
diff --git a/frontend/src/components/app/error-boundary.tsx b/frontend/src/components/app/error-boundary.tsx
index fc51d94fe..aeb6608f7 100644
--- a/frontend/src/components/app/error-boundary.tsx
+++ b/frontend/src/components/app/error-boundary.tsx
@@ -58,7 +58,7 @@ export class AppErrorBoundary extends Component {
Ooops, noe gikk galt :(
{isUpToDate ? null : (
-
+
Kabal er utdatert.
Din versjon:
{ENVIRONMENT.version}
@@ -66,7 +66,7 @@ export class AppErrorBoundary extends Component
{
Siste versjon: {lastestVersion}
-
+
)}
Feilmelding
@@ -116,7 +116,3 @@ const CodeBlock = styled.code`
word-break: normal;
overflow-wrap: break-word;
`;
-
-const StyledAlert = styled(Alert)`
- margin-bottom: var(--a-spacing-4);
-`;
diff --git a/frontend/src/components/app/no-access-page.tsx b/frontend/src/components/app/no-access-page.tsx
index 4815255a0..4c9951830 100644
--- a/frontend/src/components/app/no-access-page.tsx
+++ b/frontend/src/components/app/no-access-page.tsx
@@ -6,7 +6,6 @@ import { PageWrapper } from '@app/pages/page-wrapper';
import { ALL_PUBLIC_ROLES, type Role } from '@app/types/bruker';
import { BodyShort, Heading, Tag } from '@navikt/ds-react';
import { useContext, useEffect } from 'react';
-import { styled } from 'styled-components';
interface Props {
requiredRoles: Role[];
@@ -29,7 +28,7 @@ export const NoAccessPage = ({ requiredRoles }: Props) => {
return (
-
+
Din bruker har ikke tilgang til denne siden
@@ -51,22 +50,13 @@ export const NoAccessPage = ({ requiredRoles }: Props) => {
roles={ALL_PUBLIC_ROLES.filter((r) => !(user.roller.includes(r) || requiredRoles.includes(r)))}
variant="neutral-moderate"
/>
-
+
);
};
const Path = () => (
- {window.location.pathname}
+ {window.location.pathname}
);
-
-const StyledPre = styled.pre`
- margin: 0;
-`;
-
-const Centered = styled.div`
- margin: 0 auto;
- width: fit-content;
-`;
diff --git a/frontend/src/components/app/not-found-page.tsx b/frontend/src/components/app/not-found-page.tsx
index 78485c047..4a91fa7b3 100644
--- a/frontend/src/components/app/not-found-page.tsx
+++ b/frontend/src/components/app/not-found-page.tsx
@@ -1,6 +1,5 @@
import { PageWrapper } from '@app/pages/page-wrapper';
import { BodyShort, Heading, Tag } from '@navikt/ds-react';
-import { styled } from 'styled-components';
export const NotFoundPage = () => (
@@ -15,10 +14,6 @@ export const NotFoundPage = () => (
const Path = () => (
- {window.location.pathname}
+ {window.location.pathname}
);
-
-const StyledPre = styled.pre`
- margin: 0;
-`;
diff --git a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx
index 556f0da24..4cf3d4fa9 100644
--- a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx
+++ b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx
@@ -9,7 +9,7 @@ interface Props {
export const BehandlingSection = ({ label, children, testid }: Props) => {
if (typeof label === 'undefined') {
return (
-
+
{children}
);
@@ -18,7 +18,7 @@ export const BehandlingSection = ({ label, children, testid }: Props) => {
const id = `behandling-section-${label.toLowerCase().replaceAll(/\s/g, '-')}`;
return (
-
+
{label}
diff --git a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx
index 8047ce359..a3a9be581 100644
--- a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx
+++ b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx
@@ -9,7 +9,6 @@ import { useUpdateExtraUtfallMutation } from '@app/redux-api/oppgaver/mutations/
import { type SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk';
import { Button, HStack, HelpText, Label, Tag, VStack } from '@navikt/ds-react';
import { type ReactNode, useMemo, useRef, useState } from 'react';
-import { styled } from 'styled-components';
interface TagsProps {
utfallIdSet: UtfallEnum[];
@@ -69,7 +68,7 @@ const ExtraUtfallButton = ({ utfallIdSet, mainUtfall, oppgaveId, typeId }: Props
const disabled = mainUtfall === null;
return (
-
+
setIsOpen((o) => !o)} size="small" disabled={disabled}>
Sett ekstra utfall for tilpasset tekst
@@ -89,7 +88,7 @@ const ExtraUtfallButton = ({ utfallIdSet, mainUtfall, oppgaveId, typeId }: Props
close={() => setIsOpen(false)}
/>
-
+
);
};
@@ -139,19 +138,10 @@ const Tags = ({ utfallIdSet, mainUtfall, typeId }: TagsProps) => {
);
};
-const ButtonContainer = styled.div`
- position: relative;
-`;
-
const Popup = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {
if (!isOpen) {
return null;
}
- return {children} ;
+ return {children}
;
};
-
-const StyledPopup = styled.div`
- position: absolute;
- z-index: 1;
-`;
diff --git a/frontend/src/components/behandling/behandlingsdetaljer/innsendingshjemmel.tsx b/frontend/src/components/behandling/behandlingsdetaljer/innsendingshjemmel.tsx
index c95603c9c..6eb30ff6a 100644
--- a/frontend/src/components/behandling/behandlingsdetaljer/innsendingshjemmel.tsx
+++ b/frontend/src/components/behandling/behandlingsdetaljer/innsendingshjemmel.tsx
@@ -8,7 +8,6 @@ import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebeh
import { PencilIcon } from '@navikt/aksel-icons';
import { Button, HStack, Tag, Tooltip } from '@navikt/ds-react';
import { useRef, useState } from 'react';
-import { styled } from 'styled-components';
interface Props {
oppgavebehandling: IOppgavebehandling;
@@ -35,14 +34,14 @@ export const Innsendingshjemmel = ({ oppgavebehandling }: Props) => {
}
/>
{oppgavebehandling.isAvsluttetAvSaksbehandler ? null : (
-
+
setIsOpen((o) => !o)}
icon={ }
- style={{ alignSelf: 'start', marginLeft: 'auto' }}
+ className="ml-auto self-start"
/>
{isOpen ? (
@@ -54,17 +53,9 @@ export const Innsendingshjemmel = ({ oppgavebehandling }: Props) => {
direction={Direction.DOWN}
/>
) : null}
-
+
)}
);
};
-
-const PopupContainer = styled.div`
- position: relative;
- align-self: start;
- flex-grow: 0;
- flex-shrink: 0;
- width: min-content;
-`;
diff --git a/frontend/src/components/behandling/behandlingsdetaljer/select-gosys-oppgave/select-gosys-oppgave.tsx b/frontend/src/components/behandling/behandlingsdetaljer/select-gosys-oppgave/select-gosys-oppgave.tsx
index f07d2cfd8..1263a06f8 100644
--- a/frontend/src/components/behandling/behandlingsdetaljer/select-gosys-oppgave/select-gosys-oppgave.tsx
+++ b/frontend/src/components/behandling/behandlingsdetaljer/select-gosys-oppgave/select-gosys-oppgave.tsx
@@ -120,7 +120,7 @@ export const SelectGosysOppgaveModal = ({ hasGosysOppgave }: SelectGosysOppgaveM
{canEdit ? : }
- setIsOpen(false)} style={{ alignSelf: 'flex-end' }}>
+ setIsOpen(false)} className="self-start">
Lukk
@@ -227,7 +227,7 @@ const SelectGosysOppgave = () => {
variant="secondary"
size="small"
onClick={onShowOpenClick}
- style={{ alignSelf: 'flex-start' }}
+ className="self-start"
disabled={showOpen && !hasGosysOppgaveId}
>
{showOpen ? 'Vis bare valgt' : 'Bytt oppgave'}
@@ -238,7 +238,7 @@ const SelectGosysOppgave = () => {
variant="secondary"
size="small"
onClick={onShowOtherClick}
- style={{ alignSelf: 'flex-start' }}
+ className="self-start"
icon={showOther ? : }
>
{showOther
diff --git a/frontend/src/components/behandling/behandlingsdetaljer/tilbakekreving.tsx b/frontend/src/components/behandling/behandlingsdetaljer/tilbakekreving.tsx
index 88e5a2fd8..cded9d472 100644
--- a/frontend/src/components/behandling/behandlingsdetaljer/tilbakekreving.tsx
+++ b/frontend/src/components/behandling/behandlingsdetaljer/tilbakekreving.tsx
@@ -2,7 +2,6 @@ import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
import { useCanEditBehandling } from '@app/hooks/use-can-edit';
import { useSetTilbakekrevingMutation } from '@app/redux-api/oppgaver/mutations/set-tilbakekreving';
import { Alert, BodyShort, Checkbox, CheckboxGroup, HStack, Heading, HelpText } from '@navikt/ds-react';
-import { styled } from 'styled-components';
const TILBAKEKREVING_IDS = [
'144',
@@ -41,12 +40,12 @@ export const Tilbakekreving = () => {
if (!canEdit) {
return (
-
-
+
+
Tilbakekreving
Gjelder{tilbakekreving ? ' ' : ' ikke '}en tilbakekrevingssak
-
+
);
}
@@ -65,7 +64,7 @@ export const Tilbakekreving = () => {
);
return (
-
+
{
{showWarning ? : null}
-
+
);
};
@@ -86,7 +85,3 @@ const Warning = () => (
at dette er riktig?
);
-
-const Container = styled.div`
- margin-top: var(--a-spacing-4);
-`;
diff --git a/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx b/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx
index 19415c4fc..f3ea7f290 100644
--- a/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx
+++ b/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx
@@ -52,7 +52,6 @@ export const OppgaveRow = ({ oppgaveId, columns, testId }: Props): JSX.Element =
};
const getColumns = (columnKeys: ColumnKeyEnum[], oppgave: IOppgave) =>
- // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: ¯\_(ツ)_/¯
columnKeys.map((key) => {
switch (key) {
case ColumnKeyEnum.Type:
diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx
index 30f9ca95a..00dd91dda 100644
--- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx
+++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx
@@ -30,7 +30,7 @@ export const Registreringshjemler = ({ params, setParams, columnKey }: FilterDro
const chevron = open ? : ;
return (
-
+
{TABLE_HEADERS[columnKey]} ({params.registreringshjemler?.length ?? 0}) {chevron}
diff --git a/frontend/src/components/datetime/datetime.tsx b/frontend/src/components/datetime/datetime.tsx
index af442c87f..f833e2e21 100644
--- a/frontend/src/components/datetime/datetime.tsx
+++ b/frontend/src/components/datetime/datetime.tsx
@@ -19,7 +19,7 @@ export const ModifiedCreatedDateTime = ({ id, lastEdit, created }: Props) => {
return (
- } dateTime={dateTime} title={title} />
+ } dateTime={dateTime} title={title} />
{lastEdit === undefined ? null : , av {lastEdit.actor.navn} }
@@ -34,7 +34,7 @@ interface DateTimeProps {
}
export const DateTime = ({ dateTime, title, icon, id }: DateTimeProps) => (
-
+
{icon}
{isoDateTimeToPretty(dateTime)}
diff --git a/frontend/src/components/deassign/popup.tsx b/frontend/src/components/deassign/popup.tsx
index 14d3e6990..0643811b9 100644
--- a/frontend/src/components/deassign/popup.tsx
+++ b/frontend/src/components/deassign/popup.tsx
@@ -72,7 +72,7 @@ export const Popup = ({ oppgaveId, typeId, ytelseId, hjemmelIdList, close, direc
gap="2"
padding="4"
width="280px"
- style={{ zIndex: 10, [direction === Direction.UP ? 'bottom' : 'top']: '100%' }}
+ className={`z-10 ${direction === Direction.UP ? 'bottom-full' : 'top-full'}`}
data-testid="deassign-oppgave-popup"
>
diff --git a/frontend/src/components/documents/expanded-documents.tsx b/frontend/src/components/documents/expanded-documents.tsx
index e4d50b4cd..e2c58f459 100644
--- a/frontend/src/components/documents/expanded-documents.tsx
+++ b/frontend/src/components/documents/expanded-documents.tsx
@@ -112,7 +112,8 @@ export const ExpandedDocuments = () => {
overflowY="hidden"
overflowX="auto"
position="relative"
- style={{ minWidth, resize: 'horizontal' }}
+ minWidth={`${minWidth}px`}
+ className="resize-x"
ref={ref}
>
diff --git a/frontend/src/components/documents/journalfoerte-documents/document-list.tsx b/frontend/src/components/documents/journalfoerte-documents/document-list.tsx
index eb137d63a..4ae3e6431 100644
--- a/frontend/src/components/documents/journalfoerte-documents/document-list.tsx
+++ b/frontend/src/components/documents/journalfoerte-documents/document-list.tsx
@@ -83,7 +83,7 @@ export const DocumentList = ({
if (isLoading) {
return (
-
+
diff --git a/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx b/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx
index 789615e8a..418132427 100644
--- a/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx
+++ b/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx
@@ -8,7 +8,7 @@ export const IncludedFilter = () => {
const title = value ? 'Viser kun inkluderte dokumenter.' : 'Viser alle dokumenter.';
return (
-
+
setValue(!value)} title={title}>
{title}
diff --git a/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx b/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx
index a7f2be79b..6a7b76e61 100644
--- a/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx
+++ b/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx
@@ -31,7 +31,7 @@ export const PDFPreview = ({ isLoading, noFlickerReload }: Props) => {
}, [onReload, setVersions]);
return (
-