💄 Gjennbruker gradient for alle hero-headers

navikt · Apr 2, 2024 · 4d320ed · 4d320ed
1 parent c953ce2
commit 4d320ed
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/...s-page/hero/tema-hero/TemaHero.module.css → ...out/god-praksis-page/hero/Hero.module.css b/...s-page/hero/tema-hero/TemaHero.module.css → ...out/god-praksis-page/hero/Hero.module.css
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx
@@ -1,5 +1,7 @@
+import cl from "clsx";
 import { Box, Heading } from "@navikt/ds-react";
 import Cube from "@/layout/god-praksis-page/hero/HeroCube";
+import styles from "../Hero.module.css";
 
 type GpIntroHeroProps = {
   title: string;
@@ -13,7 +15,10 @@ function IntroHero({ title, children }: GpIntroHeroProps) {
       borderRadius="large"
       paddingInline={{ xs: "4", lg: "10" }}
       paddingBlock={{ xs: "6", lg: "10" }}
-      className="relative isolate bg-gradient-to-tr from-teal-400 via-teal-200 via-60% to-teal-200 ring-1 ring-inset ring-teal-400"
+      className={cl(
+        "relative isolate ring-1 ring-inset ring-teal-400",
+        styles.heroGradient,
+      )}
     >
       <Cube />
       <Heading level="1" size="xlarge" className="relative z-10 mt-2">

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
@@ -6,7 +6,7 @@ import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCar
 import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
 import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
 import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "./TemaHero.module.css";
+import styles from "../Hero.module.css";
 
 type GpTemaHeroModalProps = { tema: GpTemaT | null } & HeroNavT;
 

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
@@ -7,7 +7,7 @@ import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCar
 import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
 import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
 import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "./TemaHero.module.css";
+import styles from "../Hero.module.css";
 
 type GpTemaHeroStaticProps = { tema: GpTemaT | null } & HeroNavT;