Skip to content

Commit 9738e38

Browse files
mahvalcskrov
mahval
authored and
cskrov
committed
Toggle hvit/grå bakgrunn
1 parent 36546d6 commit 9738e38

11 files changed

+322
-151
lines changed

‎src/assets/VeilederIcon.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
3+
function VeilederIcon() {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
6+
<path fill="#e7e5e2" d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"></path>
7+
<path
8+
fill="#5c4378"
9+
d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
10+
></path>
11+
<path
12+
fill="#d2242a"
13+
d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
14+
></path>
15+
<path
16+
fill="#fff"
17+
d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
18+
></path>
19+
<path
20+
fill="#c52d35"
21+
d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
22+
></path>
23+
<path
24+
fill="#c52d35"
25+
d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
26+
></path>
27+
<path
28+
fill="#c52d35"
29+
d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
30+
></path>
31+
<path
32+
fill="#c52d35"
33+
d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
34+
></path>
35+
<path
36+
fill="#5a1f57"
37+
d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
38+
></path>
39+
<path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z"></path>
40+
<path
41+
fill="#e7e5e2"
42+
d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
43+
></path>
44+
<path
45+
fill="#635e59"
46+
d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
47+
></path>
48+
<path
49+
fill="#d1bfa3"
50+
d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
51+
></path>
52+
<path
53+
fill="#593a32"
54+
d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
55+
></path>
56+
<path
57+
fill="#f6b873"
58+
d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
59+
></path>
60+
<path
61+
fill="#f6b873"
62+
d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
63+
></path>
64+
</svg>
65+
);
66+
}
67+
68+
export default VeilederIcon;

‎src/routes/inngang/inngang-hovedkategorier.tsx

+37-21
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,49 @@ import { INNGANG_KATEGORIER } from '../../kategorier/kategorier';
66
import { KlageFlexLinkPanel } from '../../link/link';
77
import { PageIdentifier } from '../../logging/amplitude';
88
import { useLogPageView } from '../../logging/use-log-page-view';
9-
import { Margin40TopContainer, Margin40Container, PointsFlexListContainer } from '../../styled-components/common';
9+
import {
10+
Margin40TopContainer,
11+
Margin40Container,
12+
PointsFlexListContainer,
13+
CenterInMobileContainer,
14+
WhiteBackgroundContainer
15+
} from '../../styled-components/common';
16+
import Layout from '../layout';
1017

1118
const InngangHovedkategorier = () => {
1219
useLogPageView(PageIdentifier.INNGANG_HOVEDKATEGORIER);
1320
return (
14-
<section>
15-
<div>
16-
<Margin40TopContainer>
17-
<Sidetittel>Klage eller anke på vedtak</Sidetittel>
18-
</Margin40TopContainer>
21+
<Layout backgroundColor="#e7e9e9">
22+
<section>
23+
<div>
24+
<Margin40TopContainer>
25+
<CenterInMobileContainer>
26+
<Sidetittel>Klage eller anke på vedtak</Sidetittel>
27+
</CenterInMobileContainer>
28+
</Margin40TopContainer>
1929

20-
<Margin40TopContainer>
21-
<Veilederpanel type={'plakat'} kompakt svg={<img src={VeilederIcon} alt="Veileder" />}>
22-
<Normaltekst>
23-
Hvis NAV har behandlet en sak som gjelder deg og du er uenig i vedtaket, har du flere
24-
valgmuligheter for å belyse saken bedre og få en ny vurdering. Start med å velge hvilket
25-
tema saken gjelder. Du finner denne informasjonen i vedtaket som du har mottatt fra NAV.
26-
</Normaltekst>
27-
</Veilederpanel>
28-
</Margin40TopContainer>
30+
<Margin40TopContainer>
31+
<Veilederpanel type={'plakat'} kompakt svg={<img src={VeilederIcon} alt="Veileder" />}>
32+
<Normaltekst>
33+
Hvis NAV har behandlet en sak som gjelder deg og du er uenig i vedtaket, har du flere
34+
valgmuligheter for å belyse saken bedre og få en ny vurdering. Start med å velge hvilket
35+
område saken gjelder. Du finner denne informasjonen i vedtaket som du har mottatt fra
36+
NAV.
37+
</Normaltekst>
38+
</Veilederpanel>
39+
</Margin40TopContainer>
2940

30-
<Margin40Container>
31-
<Systemtittel>Hvilket tema gjelder det?</Systemtittel>
32-
</Margin40Container>
33-
</div>
34-
<PointsFlexListContainer>{getLinks()}</PointsFlexListContainer>
35-
</section>
41+
<Margin40Container>
42+
<WhiteBackgroundContainer>
43+
<Systemtittel>Hvilket område gjelder det?</Systemtittel>
44+
<Margin40TopContainer>
45+
<PointsFlexListContainer>{getLinks()}</PointsFlexListContainer>
46+
</Margin40TopContainer>
47+
</WhiteBackgroundContainer>
48+
</Margin40Container>
49+
</div>
50+
</section>
51+
</Layout>
3652
);
3753
};
3854

‎src/routes/inngang/inngang-innsendingsvalg-digital.tsx

+47-34
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,22 @@ import { LenkepanelBase } from 'nav-frontend-lenkepanel';
66
import Lenke from 'nav-frontend-lenker';
77
import LetterOpened from '../../assets/images/icons/LetterOpened';
88
import {
9+
CenterInMobileContainer,
910
IconContainer,
1011
LenkePanelContentWithImage,
1112
Margin40Container,
13+
Margin40TopContainer,
1214
MarginContainer,
13-
MarginTopContainer
15+
MarginTopContainer,
16+
WhiteBackgroundContainer
1417
} from '../../styled-components/common';
1518
import MobilePhone from '../../assets/images/icons/MobilePhone';
1619
import { useLogPageView } from '../../logging/use-log-page-view';
1720
import { PageIdentifier } from '../../logging/amplitude';
1821
import { KlageLinkPanel } from '../../link/link';
1922
import { TemaKey, Tema } from '../../tema/tema';
2023
import { getUrlToPaperForm } from '../../tema/ytelse';
24+
import Layout from '../layout';
2125

2226
interface Props {
2327
temaKey: TemaKey;
@@ -30,39 +34,48 @@ const InngangInnsendingDigital = ({ temaKey, title = Tema[temaKey], saksnummer =
3034
const paperUrl = getUrlToPaperForm(temaKey);
3135

3236
return (
33-
<div>
34-
<Sidetittel>{title}</Sidetittel>
35-
<DigitalContent temaKey={temaKey} title={title} saksnummer={saksnummer} />
36-
<Margin40Container>
37-
<LenkepanelBase href={paperUrl} border>
38-
<LenkePanelContentWithImage>
39-
<IconContainer>
40-
<LetterOpened />
41-
</IconContainer>
42-
<div>
43-
<Systemtittel className="lenkepanel__heading">Klage via post</Systemtittel>
44-
<MarginTopContainer>
45-
<Normaltekst>
46-
Klageskjema som sendes inn via post. Også for deg som skal klage på vegne av andre.
47-
</Normaltekst>
48-
</MarginTopContainer>
49-
</div>
50-
</LenkePanelContentWithImage>
51-
</LenkepanelBase>
52-
</Margin40Container>
37+
<Layout backgroundColor="#e7e9e9">
38+
<Margin40TopContainer>
39+
<CenterInMobileContainer>
40+
<Sidetittel>{title}</Sidetittel>
41+
</CenterInMobileContainer>
42+
</Margin40TopContainer>
43+
<Margin40TopContainer>
44+
<WhiteBackgroundContainer>
45+
<DigitalContent temaKey={temaKey} title={title} saksnummer={saksnummer} />
46+
<Margin40Container>
47+
<LenkepanelBase href={paperUrl} border>
48+
<LenkePanelContentWithImage>
49+
<IconContainer>
50+
<LetterOpened />
51+
</IconContainer>
52+
<div>
53+
<Systemtittel className="lenkepanel__heading">Klage via post</Systemtittel>
54+
<MarginTopContainer>
55+
<Normaltekst>
56+
Klageskjema som sendes inn via post. Også for deg som skal klage på vegne av
57+
andre.
58+
</Normaltekst>
59+
</MarginTopContainer>
60+
</div>
61+
</LenkePanelContentWithImage>
62+
</LenkepanelBase>
63+
</Margin40Container>
5364

54-
<div>
55-
Les mer om{' '}
56-
<Lenke
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
href="https://www.nav.no/no/nav-og-samfunn/kontakt-nav/klage-ris-og-ros/klagerettigheter"
60-
>
61-
dine klagerettigheter på våre tema-sider
62-
</Lenke>
63-
.
64-
</div>
65-
</div>
65+
<div>
66+
Les mer om{' '}
67+
<Lenke
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
href="https://www.nav.no/no/nav-og-samfunn/kontakt-nav/klage-ris-og-ros/klagerettigheter"
71+
>
72+
dine klagerettigheter på våre tema-sider
73+
</Lenke>
74+
.
75+
</div>
76+
</WhiteBackgroundContainer>
77+
</Margin40TopContainer>
78+
</Layout>
6679
);
6780
};
6881

@@ -105,7 +118,7 @@ const DigitalContent = ({ temaKey, title, saksnummer }: DigitalContentProps) =>
105118
</LenkePanelContentWithImage>
106119
</KlageLinkPanel>
107120
<Lenke target="_blank" rel="noopener noreferrer" href="https://www.norge.no/elektronisk-id">
108-
Jeg har ikke elektronisk ID
121+
Slik skaffer du deg elektronisk ID
109122
</Lenke>
110123
</MarginContainer>
111124
);

‎src/routes/inngang/inngang-innsendingsvalg-post.tsx

+66-42
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,22 @@ import { LenkepanelBase } from 'nav-frontend-lenkepanel';
44
import Lenke from 'nav-frontend-lenker';
55
import LetterOpened from '../../assets/images/icons/LetterOpened';
66
import {
7+
CenterInMobileContainer,
78
IconContainer,
89
LenkePanelContentWithImage,
910
Margin40Container,
10-
MarginTopContainer
11+
Margin40TopContainer,
12+
MarginContainer,
13+
MarginTopContainer,
14+
WhiteBackgroundContainer
1115
} from '../../styled-components/common';
1216
import { useLogPageView } from '../../logging/use-log-page-view';
1317
import { PageIdentifier } from '../../logging/amplitude';
1418
import { TemaKey, Tema } from '../../tema/tema';
1519
import { getUrlToPaperForm } from '../../tema/ytelse';
20+
import Veileder from 'nav-frontend-veileder';
21+
import VeilederIcon from '../../assets/VeilederIcon';
22+
import Layout from '../layout';
1623

1724
interface Props {
1825
temaKey: TemaKey;
@@ -24,49 +31,66 @@ const InngangInnsendingPost = ({ temaKey, title = Tema[temaKey] }: Props) => {
2431
const paperUrl = getUrlToPaperForm(temaKey);
2532

2633
return (
27-
<div>
28-
<Sidetittel>{title}</Sidetittel>
29-
<Margin40Container>
30-
<Systemtittel>Innsending via post</Systemtittel>
31-
<MarginTopContainer>
32-
<Normaltekst>
33-
Klage eller anke på denne tjenesten krever at du må du sende inn via post. Veiviseren hjelper
34-
deg med utfylling av en førsteside og klageskjema. Dette må du skrive ut ut og sende inn til den
35-
adressen som står på førstesiden, sammen med kopi av eventuelle andre dokumenter eller
36-
kvitteringer.
37-
</Normaltekst>
38-
</MarginTopContainer>
39-
</Margin40Container>
34+
<Layout backgroundColor="#e7e9e9">
35+
<Margin40TopContainer>
36+
<CenterInMobileContainer>
37+
<Sidetittel>{title}</Sidetittel>
38+
</CenterInMobileContainer>
39+
</Margin40TopContainer>
40+
4041
<Margin40Container>
41-
<LenkepanelBase href={paperUrl} border>
42-
<LenkePanelContentWithImage>
43-
<IconContainer>
44-
<LetterOpened />
45-
</IconContainer>
46-
<div>
47-
<Systemtittel className="lenkepanel__heading">Skjema for klager</Systemtittel>
48-
<MarginTopContainer>
49-
<Normaltekst>
50-
Dette velger du når du skal klage på et vedtak du har fått fra NAV.
51-
</Normaltekst>
52-
</MarginTopContainer>
53-
</div>
54-
</LenkePanelContentWithImage>
55-
</LenkepanelBase>
56-
</Margin40Container>
42+
<WhiteBackgroundContainer>
43+
<CenterInMobileContainer>
44+
<Systemtittel>Innsending via post</Systemtittel>
45+
</CenterInMobileContainer>
5746

58-
<div>
59-
Les mer om{' '}
60-
<Lenke
61-
target="_blank"
62-
rel="noopener noreferrer"
63-
href="https://www.nav.no/no/nav-og-samfunn/kontakt-nav/klage-ris-og-ros/klagerettigheter"
64-
>
65-
dine klagerettigheter på våre tema-sider
66-
</Lenke>
67-
.
68-
</div>
69-
</div>
47+
<MarginContainer>
48+
<Veileder>
49+
<VeilederIcon />
50+
</Veileder>
51+
</MarginContainer>
52+
53+
<MarginTopContainer>
54+
<Normaltekst>
55+
Klage eller anke på denne tjenesten krever at du må du sende inn via post. Veiviseren
56+
hjelper deg med utfylling av en førsteside og klageskjema. Dette må du skrive ut ut og sende
57+
inn til den adressen som står på førstesiden, sammen med kopi av eventuelle andre dokumenter
58+
eller kvitteringer.
59+
</Normaltekst>
60+
</MarginTopContainer>
61+
62+
<Margin40Container>
63+
<LenkepanelBase href={paperUrl} border>
64+
<LenkePanelContentWithImage>
65+
<IconContainer>
66+
<LetterOpened />
67+
</IconContainer>
68+
<div>
69+
<Systemtittel className="lenkepanel__heading">Skjema for klager</Systemtittel>
70+
<MarginTopContainer>
71+
<Normaltekst>
72+
Dette velger du når du skal klage på et vedtak du har fått fra NAV.
73+
</Normaltekst>
74+
</MarginTopContainer>
75+
</div>
76+
</LenkePanelContentWithImage>
77+
</LenkepanelBase>
78+
</Margin40Container>
79+
80+
<div>
81+
Les mer om{' '}
82+
<Lenke
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
href="https://www.nav.no/no/nav-og-samfunn/kontakt-nav/klage-ris-og-ros/klagerettigheter"
86+
>
87+
dine klagerettigheter på våre tema-sider
88+
</Lenke>
89+
.
90+
</div>
91+
</WhiteBackgroundContainer>
92+
</Margin40Container>
93+
</Layout>
7094
);
7195
};
7296

0 commit comments

Comments
 (0)