diff --git a/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx index 2647a18b5..3abfe475d 100644 --- a/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx +++ b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx @@ -11,7 +11,7 @@ export default function ShortcutsListItems({ className, }: ShortcutsListItemsProps) { return ( -
- {next(node.children, embeds, fullRenderOptions)} -
- ) - }, [RTETypeEnum.a]: ( node: RTERegularNode, embeds: EmbedByUid, diff --git a/components/Blocks/TextCols/textcols.module.css b/components/Blocks/TextCols/textcols.module.css index 8c3a1bda1..4c69c878b 100644 --- a/components/Blocks/TextCols/textcols.module.css +++ b/components/Blocks/TextCols/textcols.module.css @@ -1,39 +1,18 @@ .columns { - display: flex; - flex-direction: column; + display: grid; gap: var(--Spacing-x3); } .column { + display: grid; + gap: var(--Spacing-x1); + align-content: start; padding-bottom: var(--Spacing-x2); border-bottom: 1px solid var(--Base-Border-Subtle); - gap: var(--Spacing-x1); - display: flex; - flex-direction: column; -} - -.p { - color: var(--UI-Text-High-contrast); - line-height: var(--Spacing-x3); - margin: 0; -} - -.a { - color: var(--Base-Text-High-contrast); -} - -.text > section { - gap: 0; } @media (min-width: 768px) { .columns { - flex-direction: row; - flex-wrap: wrap; - } - - .column { - flex: 0 0 calc(50% - var(--Spacing-x3)); - max-width: calc(50% - var(--Spacing-x3)); + grid-template-columns: repeat(2, 1fr); } } diff --git a/components/Blocks/UspGrid/renderOptions.tsx b/components/Blocks/UspGrid/renderOptions.tsx index 96a0f7fa1..83cc60e4b 100644 --- a/components/Blocks/UspGrid/renderOptions.tsx +++ b/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 ( -- {next(node.children, embeds, fullRenderOptions)} -
- ) - }, - [RTETypeEnum.a]: ( - node: RTERegularNode, - embeds: EmbedByUid, - next: RTENext, - fullRenderOptions: RenderOptions - ) => { - if (node.attrs.url) { - return ( - - {next(node.children, embeds, fullRenderOptions)} - - ) - } - return null - }, [RTETypeEnum.reference]: ( node: RTENode, embeds: EmbedByUid, @@ -59,7 +20,12 @@ export const renderOptions: RenderOptions = { : node.attrs.href return ( - + {next(node.children, embeds, fullRenderOptions)} ) diff --git a/components/Blocks/UspGrid/uspgrid.module.css b/components/Blocks/UspGrid/uspgrid.module.css index 91c6f8fd8..be5ceb565 100644 --- a/components/Blocks/UspGrid/uspgrid.module.css +++ b/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); + } } diff --git a/components/DeprecatedJsonToHtml/renderOptions.tsx b/components/DeprecatedJsonToHtml/renderOptions.tsx index c22f469e0..d0bd2e1a1 100644 --- a/components/DeprecatedJsonToHtml/renderOptions.tsx +++ b/components/DeprecatedJsonToHtml/renderOptions.tsx @@ -65,6 +65,7 @@ export const renderOptions: RenderOptions = { next: RTENext, fullRenderOptions: RenderOptions ) => { + console.log({ RTE_A_NODE: node }) if (node.attrs.url) { const props = extractPossibleAttributes(node.attrs) return ( diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 2ce1afbec..3e09663b9 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/components/JsonToHtml/renderOptions.tsx @@ -1,7 +1,6 @@ import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import { insertResponseToImageVaultAsset } from "@/utils/imageVault" -import { removeMultipleSlashes } from "@/utils/url" import ImageContainer from "../ImageContainer" import Divider from "../TempDesignSystem/Divider" diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index 13dbec1fa..4e09ffc3e 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -65,7 +65,6 @@ .shortcut { align-items: center; - border-bottom: 1px solid var(--Base-Border-Subtle); display: grid; font-family: var(--typography-Body-Regular-fontFamily); font-size: var(--typography-Body-Regular-fontSize); @@ -74,7 +73,13 @@ grid-template-columns: 1fr auto; letter-spacing: var(--typography-Body-Regular-letterSpacing); line-height: var(--typography-Body-Regular-lineHeight); - padding: var(--Spacing-x3); + padding: var(--Spacing-x2) var(--Spacing-x3); + background-color: var(--Base-Surface-Primary-light-Normal); + transition: background-color 0.3s; +} + +.shortcut:hover { + background-color: var(--UI-Input-Controls-Surface-Hover); } .shortcut:last-of-type {