fix(SW-741): UI fixes on contentpages and some components

components/Blocks/UspGrid/renderOptions.tsx

@@ -1,50 +1,11 @@
 import Link from "@/components/TempDesignSystem/Link"
 
-import styles from "./uspgrid.module.css"
-
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
-import type {
-  RTEDefaultNode,
-  RTENext,
-  RTENode,
-  RTERegularNode,
-} from "@/types/transitionTypes/rte/node"
+import type { RTENext, RTENode } from "@/types/transitionTypes/rte/node"
 import type { RenderOptions } from "@/types/transitionTypes/rte/option"
 
 export const renderOptions: RenderOptions = {
-  [RTETypeEnum.p]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    return (
-      <p key={node.uid} className={styles.p}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </p>
-    )
-  },
-  [RTETypeEnum.a]: (
-    node: RTERegularNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if (node.attrs.url) {
-      return (
-        <a
-          href={node.attrs.url}
-          target={node.attrs.target ?? "_blank"}
-          key={node.uid}
-          className={styles.a}
-        >
-          {next(node.children, embeds, fullRenderOptions)}
-        </a>
-      )
-    }
-    return null
-  },
   [RTETypeEnum.reference]: (
     node: RTENode,
     embeds: EmbedByUid,
@@ -59,7 +20,12 @@ export const renderOptions: RenderOptions = {
           : node.attrs.href
 
         return (
-          <Link href={href} key={node.uid} className={styles.a}>
+          <Link
+            href={href}
+            key={node.uid}
+            variant="underscored"
+            color="burgundy"
+          >
             {next(node.children, embeds, fullRenderOptions)}
           </Link>
         )

components/Blocks/UspGrid/uspgrid.module.css

@@ -2,26 +2,18 @@
   display: grid;
   gap: var(--Spacing-x3);
 }
+
+.usp {
+  display: grid;
+  gap: var(--Spacing-x3);
+  align-content: start;
+}
+
 @media screen and (min-width: 767px) {
   .grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .grid:has(.usp:nth-child(4)) {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-.usp {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-}
-.p {
-  margin: 0;
-  font-size: var(--typography-Caption-Regular-fontSize);
-  color: var(--UI-Text-Medium-contrast);
-  line-height: 21px; /* Caption variable for line-height is 139.9999976158142%, but it set to 21px in design  */
-}
-.a {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  color: var(--Base-Text-High-contrast);
+  .grid:has(.usp:nth-child(3)):not(:has(.usp:nth-child(4))) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }