From baedf7ca9fe711cde60ddb37585e68f83904ee00 Mon Sep 17 00:00:00 2001 From: rolandixor Date: Tue, 24 Mar 2026 15:12:28 -0400 Subject: [PATCH 1/3] refactor(sponsors): Corrected errors identified by the linter --- src/components/Sponsors/Sponsors.jsx | 102 +++++++++++++++---------- src/components/Sponsors/Sponsors.scss | 104 -------------------------- 2 files changed, 61 insertions(+), 145 deletions(-) delete mode 100644 src/components/Sponsors/Sponsors.scss diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index ad8c9b217f58..bea1c9e854f9 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -1,53 +1,73 @@ +import { useEffect, useState } from "react"; +import AGChartsLogoDark from "../../assets/ag-charts-logo-dark.png"; import AGChartsLogo from "../../assets/ag-charts-logo.png"; +import AGLogoDark from "../../assets/ag-grid-logo-dark.png"; import AGLogo from "../../assets/ag-grid-logo.png"; import WebpackIcon from "../../assets/icon-square-small.svg"; import Link from "../Link/Link.jsx"; -import "../Sponsors/Sponsors.scss"; -const Sponsors = () => ( -
-
-
- - ag grid - -
-
- - ag charts - -
-
- -
- Datagrid and Charting for Enterprise Applications -
-
+const useDarkMode = () => { + const [isDark, setIsDark] = useState( + document.documentElement.getAttribute("data-theme") === "dark" + ); + + useEffect(() => { + const observer = new MutationObserver(() => { + setIsDark(document.documentElement.getAttribute("data-theme") === "dark"); + }); + observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] }); + return () => observer.disconnect(); + }, []); + + return isDark; +}; + +const Sponsors = () => { + const isDark = useDarkMode(); + return ( +
+
+
+ + ag grid + +
+
+ webpack -
-
Proud to partner with webpack
- + +
+
+ +
+ Datagrid and Charting for Enterprise Applications +
+
+ ag grid +
+
Proud to partner with webpack
+ +
-
-); + ) +}; export default Sponsors; diff --git a/src/components/Sponsors/Sponsors.scss b/src/components/Sponsors/Sponsors.scss deleted file mode 100644 index ea7fd7d6a937..000000000000 --- a/src/components/Sponsors/Sponsors.scss +++ /dev/null @@ -1,104 +0,0 @@ -@use "../../styles/partials/functions" as *; -@use "../../styles/partials/mixins" as *; - -$sponsor-text-color-dark: #cecece; -$sponsor-text-color-light: getColor(emperor); -$background-color-hover: rgb(50, 50, 50); -$link-wrapper-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2); -$link-wrapper-shadow-dark: 0 3px 10px 0px rgba(255, 255, 255, 0.2); -$link-wrapper-radius: 8px; -$link-wrapper-margin: 8px; -$tagline-font-size: 2em; -$footer-font-size: 1.7em; - -[data-theme="dark"] { - .agGridLogo { - content: url("../../assets/ag-grid-logo-dark.png"); - } - - .agChartsLogo { - content: url("../../assets/ag-charts-logo-dark.png"); - } - - .sponsors { - &__tagline, - &__footer { - margin: 1rem 0; - text-align: center; - color: $sponsor-text-color-dark; - } - &__tagline { - font-size: $tagline-font-size; - } - &__footer { - font-size: $footer-font-size; - font-style: italic; - } - &__link-wrapper { - background: rgb(12, 12, 12); - box-shadow: $link-wrapper-shadow-dark; - border-radius: $link-wrapper-radius; - margin: $link-wrapper-margin; - transition: transform 0.2s; - &:hover { - background-color: $background-color-hover; - transform: scale(1.05); - } - } - } -} - -.sponsors { - position: absolute; - height: 100%; - width: 250px; - margin-left: -250px; - margin-right: 8px; - - &__link-wrapper { - box-shadow: $link-wrapper-shadow; - border-radius: $link-wrapper-radius; - margin: $link-wrapper-margin; - transition: transform 0.2s; - &:hover { - background-color: getColor(concrete); - transform: scale(1.05); - } - } - &__tagline, - &__footer { - margin: 1rem 0; - text-align: center; - color: $sponsor-text-color-light; - } - &__tagline { - font-size: $tagline-font-size; - } - &__footer { - font-size: $footer-font-size; - font-style: italic; - } - &__content { - position: sticky; - display: none; - margin: 1.5em 0; - top: 6em; - padding: 0 1.5em 3em; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - border-right: 2px solid getColor(concrete); - overflow: hidden; - transition: background-color 250ms; - @include break(xlarge) { - display: flex; - } - } - &__img { - &__wrapper { - display: flex; - justify-content: center; - width: 100%; - } - } -} From 593a996052745cd9dba81289f4bef24606ef90b0 Mon Sep 17 00:00:00 2001 From: rolandixor Date: Tue, 24 Mar 2026 15:35:49 -0400 Subject: [PATCH 2/3] refactor(sponsors): Ran prettier to fix linter errors --- src/components/Sponsors/Sponsors.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index bea1c9e854f9..378e1897c11e 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -8,14 +8,17 @@ import Link from "../Link/Link.jsx"; const useDarkMode = () => { const [isDark, setIsDark] = useState( - document.documentElement.getAttribute("data-theme") === "dark" + document.documentElement.getAttribute("data-theme") === "dark", ); useEffect(() => { const observer = new MutationObserver(() => { setIsDark(document.documentElement.getAttribute("data-theme") === "dark"); }); - observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] }); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }); return () => observer.disconnect(); }, []); @@ -55,19 +58,16 @@ const Sponsors = () => { Datagrid and Charting for Enterprise Applications
- ag grid + ag grid +
+
+ Proud to partner with webpack
-
Proud to partner with webpack
- ) + ); }; export default Sponsors; From 2a5ea73e75c034fbbda93e7cb31395f0962b3abe Mon Sep 17 00:00:00 2001 From: rolandixor Date: Tue, 24 Mar 2026 15:47:41 -0400 Subject: [PATCH 3/3] refactor(sponsors): Fixed the error with SSG tests failing --- src/components/Sponsors/Sponsors.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index 378e1897c11e..7de93a0676be 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -8,10 +8,12 @@ import Link from "../Link/Link.jsx"; const useDarkMode = () => { const [isDark, setIsDark] = useState( - document.documentElement.getAttribute("data-theme") === "dark", + typeof document !== "undefined" && + document.documentElement.getAttribute("data-theme") === "dark", ); useEffect(() => { + if (typeof document === "undefined") return; const observer = new MutationObserver(() => { setIsDark(document.documentElement.getAttribute("data-theme") === "dark"); });