🐛 Adding noInvert prop for card with coloredbackground #2420

equinor · Aug 19, 2024 · a2ceb98 · a2ceb98
1 parent 820876f
commit a2ceb98
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/web/pageComponents/shared/portableText/Blocks.tsx b/web/pageComponents/shared/portableText/Blocks.tsx
@@ -124,6 +124,7 @@ export type BlockProps = {
   /** Use to clamp lines on number */
   clampLines?: number
   includeFootnotes?: boolean
+  noInvert?: boolean
 } & PortableTextProps
 
 const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicIframe']
@@ -139,6 +140,7 @@ export default function Blocks({
   id,
   clampLines,
   includeFootnotes = false,
+  noInvert = false,
 }: BlockProps) {
   let div: PortableTextBlock[] = []
   return (
@@ -158,7 +160,11 @@ export default function Blocks({
             div = []
 
             return (
-              <div key={block._key} className={twMerge(`prose ${proseClassName} dark:prose-invert`, className)} id={id}>
+              <div
+                key={block._key}
+                className={twMerge(`prose ${proseClassName} ${noInvert ? '' : `dark:prose-invert`}`, className)}
+                id={id}
+              >
                 <PortableText
                   value={value}
                   //@ts-ignore

diff --git a/web/sections/cards/Card/Card.tsx b/web/sections/cards/Card/Card.tsx
@@ -78,7 +78,7 @@ export const Card = forwardRef<HTMLAnchorElement, CardProps>(function Card(
       text-slate-80
       focus:outline-none
       focus-visible:envis-outline
-      dark:text-white-100
+      dark:text-slate-80
       dark:focus-visible:envis-outline-invert
       `,
         className,

diff --git a/web/sections/cards/Card/CardContent.tsx b/web/sections/cards/Card/CardContent.tsx
@@ -44,7 +44,6 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function
     `
     size-arrow-right
     text-energy-red-100
-    dark:text-white-100
     mr-2
     group-hover/card:translate-x-2
     transition-all

diff --git a/web/sections/cards/Card/CardHeader.tsx b/web/sections/cards/Card/CardHeader.tsx
@@ -61,6 +61,7 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function C
     ${variantTitle[variant]}
     max-w-prose
     text-pretty
+    dark:text-slate-80
   `,
     titleClassName,
   )

diff --git a/web/sections/cards/PromotionCard/PromotionCard.tsx b/web/sections/cards/PromotionCard/PromotionCard.tsx
@@ -50,6 +50,7 @@ const PromotionCard = forwardRef<HTMLAnchorElement, PromotionCardProps>(function
         />
         {ingress && (
           <Blocks
+            noInvert
             value={ingress}
             className={`break-word max-w-prose grow ${
               type !== 'news' && type !== 'localNews' ? '' : 'hidden lg:block'