import { Tekst } from "../components/fellesKomponenter/typografi/Tekst";
import styled from "styled-components";

export const UnderArbeidMelding = () => (
    <InformasjonsmeldingWrapper>
        <Informasjonsikon />
        <div>
            <Tekst $størrelse="L" $bold={true} $nomargin={true}>
                Analyse av friksjonsfiler (beta)
            </Tekst>
            <Tekst $størrelse="M" $nomargin={true}>
                Her kan du laste opp friksjonsmålinger som er i .dat format, for deretter å kunne
                analysere disse.
            </Tekst>
            <Tekst $størrelse="M" $nomargin={false}>
                <b>
                    Når du har lastet opp filen vil den bli tilgjengelig for alle som har tilgang
                    til denne siden (byggherrepersonell i DoV, samt støttefunksjoner til disse).
                </b>
            </Tekst>
            <Tekst $størrelse="M" $nomargin={true}>
                Oppdager du feil kan du ta kontakt på kos@vegvesen.no. Skriv gjerne hva som er feil,
                ta et skjermbilde eller send oss filen du lastet opp sånn at vi kan gjenskape feilen
                hos oss.
            </Tekst>
        </div>
    </InformasjonsmeldingWrapper>
);

const InformasjonsmeldingWrapper = styled.div`
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: var(--orange-bg);
    border: 2px solid var(--orange);
    max-width: 800px;
    margin: 22px auto 22px auto;
`;

const Informasjonsikon = styled.i`
    display: block;
    flex-shrink: 0;
    margin-right: 2rem;
    margin-top: 12px;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTIgMEM1LjQgMCAwIDUuNCAwIDEyQzAgMTguNiA1LjQgMjQgMTIgMjRDMTguNiAyNCAyNCAxOC42IDI0IDEyQzI0IDUuNCAxOC42IDAgMTIgMFoiIGZpbGw9IiNGRjk2MDAiLz4NCjxwYXRoIGQ9Ik0xMy41IDE3Ljc1OThDMTMuNSAxOC41OTk4IDEyLjkgMTkuMTk5OCAxMiAxOS4xOTk4QzExLjA0IDE5LjE5OTggMTAuNSAxOC41OTk4IDEwLjUgMTcuODE5OEMxMC41IDE2LjkxOTggMTEuMDQgMTYuMzc5OCAxMiAxNi4zNzk4QzEyLjkgMTYuMzc5OCAxMy41IDE2LjkxOTggMTMuNSAxNy43NTk4Wk0xMC43NCA5LjQ3OThMMTAuOTggMTQuNzU5OEgxMy4xNEwxMy4zOCA5LjQ3OThWNC43OTk4SDEwLjc0VjkuNDc5OFoiIGZpbGw9IndoaXRlIi8+DQo8L3N2Zz4NCg==")
        no-repeat;
`;