From 80e9416e45e335c26355c51c9399fcc200b7bdc2 Mon Sep 17 00:00:00 2001 From: Abir Maity Date: Mon, 23 Mar 2026 19:26:53 +0530 Subject: [PATCH 1/4] Convert Sponsors component styles to Tailwind in JSX --- src/components/Sponsors/Sponsors.jsx | 39 ++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index ad8c9b217f58..a8e211f496cb 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -1,40 +1,55 @@ +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 grid
-
+
ag charts + ag charts
-
+
-
+
Datagrid and Charting for Enterprise Applications
-
+
webpack ( loading="lazy" />
-
Proud to partner with webpack
+
+ Proud to partner with webpack +
From 1e0faf61af39af17f4097427c851e09cc8025113 Mon Sep 17 00:00:00 2001 From: Abir Maity Date: Mon, 23 Mar 2026 19:51:19 +0530 Subject: [PATCH 2/4] Remove Sponsors.scss after Tailwind migration --- src/components/Sponsors/Sponsors.scss | 104 -------------------------- 1 file changed, 104 deletions(-) delete mode 100644 src/components/Sponsors/Sponsors.scss 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 72663796fda7b5bfb14b7e4a55df63e2f33db825 Mon Sep 17 00:00:00 2001 From: Abir Maity Date: Mon, 23 Mar 2026 19:59:18 +0530 Subject: [PATCH 3/4] feat(sponsors): use single theme-aware logo image in Sponsors component --- src/components/Sponsors/Sponsors.jsx | 124 +++++++++++++++------------ 1 file changed, 68 insertions(+), 56 deletions(-) diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index a8e211f496cb..ea19bf34b89b 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -1,3 +1,4 @@ +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"; @@ -5,66 +6,77 @@ import AGLogo from "../../assets/ag-grid-logo.png"; import WebpackIcon from "../../assets/icon-square-small.svg"; import Link from "../Link/Link.jsx"; -const Sponsors = () => ( -
-
-
- - ag grid - ag grid - -
-
- - ag charts - ag charts - -
-
- -
- Datagrid and Charting for Enterprise Applications -
-
+const useThemeAsset = (lightSrc, darkSrc) => { + const [asset, setAsset] = useState(lightSrc); + + useEffect(() => { + if (typeof document === "undefined") { + return undefined; + } + + const root = document.documentElement; + const setThemeAsset = () => { + setAsset(root.dataset.theme === "dark" ? darkSrc : lightSrc); + }; + + setThemeAsset(); + + const observer = new MutationObserver(setThemeAsset); + observer.observe(root, { + attributes: true, + attributeFilter: ["data-theme"], + }); + + return () => observer.disconnect(); + }, [darkSrc, lightSrc]); + + return asset; +}; + +const Sponsors = () => { + const agGridLogo = useThemeAsset(AGLogo, AGLogoDark); + const agChartsLogo = useThemeAsset(AGChartsLogo, AGChartsLogoDark); + + return ( +
+
+
+ + ag grid + +
+
+ webpack -
-
- Proud to partner with webpack -
- + +
+
+ +
+ Datagrid and Charting for Enterprise Applications +
+
+ webpack +
+
+ Proud to partner with webpack +
+ +
-
-); + ); +}; export default Sponsors; From 07aaad0dcec37c66c7a17c7056156d0fafb7814c Mon Sep 17 00:00:00 2001 From: Abir Maity Date: Mon, 23 Mar 2026 22:45:33 +0530 Subject: [PATCH 4/4] refactor(sponsors): use class-only dark logo styling with single img --- src/components/Sponsors/Sponsors.jsx | 112 ++++++++++----------------- 1 file changed, 42 insertions(+), 70 deletions(-) diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx index ea19bf34b89b..bf2a5dd95bb3 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors.jsx @@ -1,82 +1,54 @@ -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"; -const useThemeAsset = (lightSrc, darkSrc) => { - const [asset, setAsset] = useState(lightSrc); - - useEffect(() => { - if (typeof document === "undefined") { - return undefined; - } - - const root = document.documentElement; - const setThemeAsset = () => { - setAsset(root.dataset.theme === "dark" ? darkSrc : lightSrc); - }; - - setThemeAsset(); - - const observer = new MutationObserver(setThemeAsset); - observer.observe(root, { - attributes: true, - attributeFilter: ["data-theme"], - }); - - return () => observer.disconnect(); - }, [darkSrc, lightSrc]); - - return asset; -}; - -const Sponsors = () => { - const agGridLogo = useThemeAsset(AGLogo, AGLogoDark); - const agChartsLogo = useThemeAsset(AGChartsLogo, AGChartsLogoDark); - - return ( -
-
-
- - ag grid - -
-
- +const Sponsors = () => ( +
+
+
+ + ag grid + +
+
+ + ag charts + +
+
+ +
+ Datagrid and Charting for Enterprise Applications +
+
ag charts - -
-
- -
- Datagrid and Charting for Enterprise Applications -
-
- webpack -
-
- Proud to partner with webpack -
- -
+
+
+ Proud to partner with webpack +
+
- ); -}; +
+); export default Sponsors;