From 5795386b9a01117daa995ca92c288b7200614367 Mon Sep 17 00:00:00 2001
From: ebelegu <egzon.belegu@nav.no>
Date: Fri, 25 Aug 2023 10:44:19 +0200
Subject: [PATCH] Ryddet opp

---
 src/App/Hovedside/Sak/SakPanel.tsx     | 31 ++++++++++----------------
 src/App/Hovedside/Sak/SaksListe.css    |  7 +-----
 src/GeneriskeElementer/StatusLinje.css |  5 +++++
 src/GeneriskeElementer/StatusLinje.tsx |  2 +-
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/App/Hovedside/Sak/SakPanel.tsx b/src/App/Hovedside/Sak/SakPanel.tsx
index 645af81e3..3d7dc3aad 100644
--- a/src/App/Hovedside/Sak/SakPanel.tsx
+++ b/src/App/Hovedside/Sak/SakPanel.tsx
@@ -2,22 +2,22 @@ import { BodyShort, Button, Detail, Heading } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import './SaksListe.css';
 import {
+    BeskjedIkon,
     NyOppgaveIkon,
     OppgaveUtfortIkon,
-    BeskjedIkon,
     TidslinjeLinjeIkon,
     TidslinjeLinjeIkonKort,
 } from './OppgaveBeskjedIkoner';
 import {
     BeskjedTidslinjeElement,
     OppgaveTidslinjeElement,
+    OppgaveTilstand,
     Sak,
     TidslinjeElement,
 } from '../../../api/graphql-types';
 import { LenkeMedLogging } from '../../../GeneriskeElementer/LenkeMedLogging';
 import { StatusLinje } from '../../../GeneriskeElementer/StatusLinje';
 import { Collapse, Expand } from '@navikt/ds-icons';
-import { undefined } from 'zod';
 
 export const dateFormat = new Intl.DateTimeFormat('no', {
     year: 'numeric',
@@ -32,7 +32,7 @@ type SakPanelProps = {
 
 export const SakPanel = ({
                              placeholder,
-                             sak: { id, lenke, tittel, virksomhet, sisteStatus, tidslinje },
+                             sak: { lenke, tittel, virksomhet, sisteStatus, tidslinje },
                          }: SakPanelProps) => {
     const fake = placeholder ?? false;
     const style: React.CSSProperties = fake ? { visibility: 'hidden' } : {};
@@ -59,7 +59,7 @@ export const SakPanel = ({
             <div>
                 {tidslinje.map((tidslinjeelement, i) => (
                     <Tidslinjeelement
-                        key={id}
+                        key={tidslinjeelement.id}
                         tidslinjeelement={tidslinjeelement}
                         indeks={i}
                         apen={tidslinjeOpen}
@@ -73,16 +73,9 @@ export const SakPanel = ({
                     className='tidslinje-vis-mer-knapp'
                     variant='tertiary'
                     onClick={() => setTidslinjeOpen(!tidslinjeOpen)}
+                    icon={tidslinjeOpen ? <Collapse/> : <Expand/>}
                 >
-                    {tidslinjeOpen ? (
-                        <div className='tidslinje-vis-mer'>
-                            <Collapse /> <BodyShort> Vis mindre </BodyShort>
-                        </div>
-                    ) : (
-                        <div className='tidslinje-vis-mer'>
-                            <Expand /> <BodyShort> Vis mer </BodyShort>
-                        </div>
-                    )}
+                        {tidslinjeOpen ? <>Vis mindre</> : <>Vis mer</>}
                 </Button>
             ) : null}
         </div>
@@ -172,12 +165,12 @@ const OppgaveElement = ({ tidslinjeelement, erSist, tidslinjeOpen }: Tidslinjeel
                 />
             </div>
             <div className='tidslinje-linje'>
-                {erSist || !tidslinjeOpen ? null : frist === null &&
-                paaminnelseTidspunkt === null ? (
-                    <TidslinjeLinjeIkonKort />
-                ) : (
-                    <TidslinjeLinjeIkon />
-                )}
+                {erSist || !tidslinjeOpen ? null
+                    : (tilstand === OppgaveTilstand.Ny && frist === null && paaminnelseTidspunkt === null) ? (
+                        <TidslinjeLinjeIkonKort />
+                    ) : (
+                        <TidslinjeLinjeIkon />
+                    )}
             </div>
         </div>
     );
diff --git a/src/App/Hovedside/Sak/SaksListe.css b/src/App/Hovedside/Sak/SaksListe.css
index bd8c9441e..a871c65d3 100644
--- a/src/App/Hovedside/Sak/SaksListe.css
+++ b/src/App/Hovedside/Sak/SaksListe.css
@@ -78,12 +78,7 @@ ul.saks-liste .sakscontainer .tidslinje-element {
 
 .tidslinje-vis-mer-knapp{
   max-width: 8rem;
-  padding: 8px 0 0 0 ;
-}
-
-.tidslinje-vis-mer {
-  display: flex;
-  gap: 8px;
+  padding: 8px 0 0 0;
 }
 
 
diff --git a/src/GeneriskeElementer/StatusLinje.css b/src/GeneriskeElementer/StatusLinje.css
index 36bb99d23..7908650e3 100644
--- a/src/GeneriskeElementer/StatusLinje.css
+++ b/src/GeneriskeElementer/StatusLinje.css
@@ -5,3 +5,8 @@
   align-items: center;
   gap: 0.5ch;
 }
+
+.statuslinje_tekstmedikon {
+  display: flex;
+  gap: 4px;
+}
\ No newline at end of file
diff --git a/src/GeneriskeElementer/StatusLinje.tsx b/src/GeneriskeElementer/StatusLinje.tsx
index c3af0d4f3..d9e46b155 100644
--- a/src/GeneriskeElementer/StatusLinje.tsx
+++ b/src/GeneriskeElementer/StatusLinje.tsx
@@ -115,7 +115,7 @@ type StatusIkonMedTekstProps = {
 };
 
 const StatusIkonMedTekst: FC<StatusIkonMedTekstProps> = ({ icon, className, children }) => (
-    <span className={className}>
+    <span className={`statuslinje_tekstmedikon ${className}`} >
         {icon} {children}
     </span>
 );