Tk38 forbedringer kvalitetssikring 14a (#41)

* TK-38 Forbedringer kvalitetssikring-14a. Nye ikoner, overskrift tar mindre plass, midtstilling av innhold når skjermstørrelse er over maks bredde.

* TK-38 Forbedringer kvalitetssikring-14a. Har fjernet Filters, samt .less-filene for bruker-filter og status-dropdown. Styling lagt inn i filters.less. Tittel har nå samme venstre marg som tabellen. Feilretting som etterspurt i PR.

* TK-38 Forbedringer kvalitetssikring-14a. Har fjernet Filters, samt .less-filene for bruker-filter og status-dropdown. Styling lagt inn i filters.less. Tittel har nå samme venstre marg som tabellen. Feilretting som etterspurt i PR.
26.08: Styling ikoner plassert i .less-fil

Co-authored-by: [Klara Margrethe Helgemo] <[[email protected]]>

Author: klaramargrethehelgemo

src/components/header/header.less

@@ -1,7 +1,7 @@
 .header {
 	background-color: white;
 	display: grid;
-	grid-template-columns: 30% 15% 5% 20%;
+	grid-template-columns: minmax(150px, 400px) minmax(120px, 150px) minmax(50px, 50px) minmax(135px, 250px);
 	align-items: center;
 	padding: 0.5rem 2rem 1rem 2rem;
 	margin-bottom: 1rem;

src/components/user-table/body/user-table-body.less

@@ -1,63 +1,64 @@
-@import "~nav-frontend-core/less/_variabler";
-@import "../user-table";
+@import '~nav-frontend-core/less/_variabler';
+@import '../user-table';
 
 .user-table-body {
-  padding: 0;
-  margin: 0;
-  border: 1px solid @navLysGra;
+	padding: 0;
+	margin: 0;
+	border: 1px solid @navLysGra;
 
-  .user-table-row:nth-child(even) {
-    background-color: white;
-  }
+	.user-table-row:nth-child(even) {
+		background-color: white;
+	}
 
-  .user-table-row:nth-child(odd) {
-    background-color: #f7f7f7;
-  }
+	.user-table-row:nth-child(odd) {
+		background-color: #f7f7f7;
+	}
 }
 
 .user-table-row {
-  display: block;
-
-  &__innhold {
-    display: grid;
-    .column-template();
-    justify-items: start;
-    padding: 1rem 2rem;
-    cursor: pointer;
-    text-align: center;
-    align-items: end;
-    color: @navMorkGra;
-    text-decoration: none;
-  }
-
-  &__innhold--maskert {
-    cursor: not-allowed;
-  }
-
-  &:hover {
-    position: relative;
-    z-index: 1;
-
-    box-shadow: 0 5px 5px fade(@navGra20, 60%), 0 -5px 5px fade(@navGra20, 60%);
-  }
-
-  .status {
-    display: grid;
-    grid-template-columns: 2rem auto;
-    align-items: center;
-
-    .status_ikon {
-      max-width: 26px;
-      &__bla{
-        stroke: @navLysBlaDarken40;
-      }
-      &__oransje{
-        stroke: @navOransjeDarken20;
-      }
-      &__default{
-        stroke: @navMorkGra;
-      }
-    }
-  }
+	display: block;
 
+	&__innhold {
+		display: grid;
+		.column-template();
+		justify-items: start;
+		padding: 1rem 2rem;
+		cursor: pointer;
+		text-align: center;
+		align-items: end;
+		color: @navMorkGra;
+		text-decoration: none;
+	}
+
+	&__innhold--maskert {
+		cursor: not-allowed;
+	}
+
+	&:hover {
+		position: relative;
+		z-index: 1;
+
+		box-shadow: 0 5px 5px fade(@navGra20, 60%), 0 -5px 5px fade(@navGra20, 60%);
+	}
+
+	.status {
+		display: grid;
+		grid-template-columns: 2rem auto;
+		align-items: center;
+		text-align: left;
+
+		.status_ikon {
+			max-width: 26px;
+			font-size: 1.5rem;
+			&__bla {
+				color: @navLysBlaDarken40;
+			}
+			&__oransje {
+				color: @navOransjeDarken20;
+			}
+			&__default {
+				color: @navGra80;
+			}
+		}
+	}
 }

src/components/user-table/body/user-table-row.tsx

@@ -42,7 +42,7 @@ export const UserRow = (props: { idx: number; bruker: Bruker; aktivEnhet: OrNoth
 				href={lagBrukerUrl()}
 			>
 				<Normaltekst tag="span" role="cell" style={alignStart}>
-					{lagBrukerNavn(brukerFornavn, brukerEtternavn)}
+					{lagBrukerNavn(brukerEtternavn, brukerFornavn)}
 				</Normaltekst>
 				<Element tag="span" role="cell">
 					{brukerFnr}
@@ -76,7 +76,7 @@ const UtkastStatusData = (props: { status: UtkastStatus }) => {
 	switch (props.status) {
 		case UtkastStatus.TRENGER_BESLUTTER:
 			StatusIkon = AddPeople;
-			ikonFarge = '';
+			ikonFarge = 'status_ikon__default';
 			break;
 		case UtkastStatus.KLAR_TIL_BESLUTTER:
 			StatusIkon = DialogReport;
@@ -94,7 +94,7 @@ const UtkastStatusData = (props: { status: UtkastStatus }) => {
 
 	return (
 		<span role="cell" className={'status'}>
-			<StatusIkon className={ikonFarge} aria-label={ariaLabel} role="img" focusable="false" />
+			<StatusIkon className={`status_ikon ${ikonFarge}`} aria-label={ariaLabel} role="img" focusable="false" />
 			<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
 		</span>
 	);

src/components/user-table/user-table.less

@@ -13,7 +13,7 @@
 
 .column-template() {
 	grid-template-columns:
-		minmax(150px, 2fr) minmax(120px, 150px) minmax(100px, 150px) minmax(125px, 250px) minmax(100px, 2fr)
+		minmax(150px, 2fr) minmax(120px, 150px) minmax(100px, 150px) minmax(135px, 250px) minmax(120px, 2fr)
 		minmax(100px, 2fr) minmax(100px, 200px) minmax(75px, 150px);
 	grid-column-gap: 4px;
 }

src/hovedside/hovedside.less

@@ -5,6 +5,6 @@
 
 	&__table {
 		max-width: 1900px;
-		margin: 2rem 2.5rem;
+		margin: 0 2.5rem 2rem;
 	}
 }