From 217224224585cf430a9f7710fea7c60abd64c4d8 Mon Sep 17 00:00:00 2001 From: Rahul Harpal <51887323+rahulharpal1603@users.noreply.github.com> Date: Fri, 26 Jul 2024 18:03:07 +0530 Subject: [PATCH] chore: Update dark theme logos styling (Fixes #1209) (#1213) * chore: Update dark theme logos styling * replaced var with let * Replaced var with let - 2 * Applied suggestions from code review Co-authored-by: Gabriel Jablonski * changed in approach. added a new key in Svg component. * ran prettier --------- Co-authored-by: Gabriel Jablonski --- docs/src/components/AdsContainer/styles.css | 2 +- docs/src/components/BannerSponsor/styles.css | 2 +- docs/src/components/HomepageFeatures/index.tsx | 12 ++++++++++-- .../components/HomepageFeatures/styles.module.css | 4 ++++ docs/src/components/HomepageSponsored/index.tsx | 11 +++++++++-- .../components/HomepageSponsored/styles.module.css | 4 ++++ docs/static/img/Algolia-logo.svg | 2 +- 7 files changed, 30 insertions(+), 7 deletions(-) diff --git a/docs/src/components/AdsContainer/styles.css b/docs/src/components/AdsContainer/styles.css index 23f36db4b..17836b0f2 100644 --- a/docs/src/components/AdsContainer/styles.css +++ b/docs/src/components/AdsContainer/styles.css @@ -11,4 +11,4 @@ width: 100%; max-width: 341px; } -} \ No newline at end of file +} diff --git a/docs/src/components/BannerSponsor/styles.css b/docs/src/components/BannerSponsor/styles.css index dfb66ce71..9323ab5c3 100644 --- a/docs/src/components/BannerSponsor/styles.css +++ b/docs/src/components/BannerSponsor/styles.css @@ -18,4 +18,4 @@ .sponsor-banner-silver { max-width: 163px; -} \ No newline at end of file +} diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx index 6878007c2..70caddc8a 100644 --- a/docs/src/components/HomepageFeatures/index.tsx +++ b/docs/src/components/HomepageFeatures/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/require-default-props */ /* eslint-disable import/no-unresolved */ /* eslint-disable @typescript-eslint/no-var-requires */ /* eslint-disable global-require */ @@ -9,6 +10,7 @@ type FeatureItem = { title: string Svg: React.ComponentType> description: JSX.Element + allowsDarkMode?: boolean } const FeatureList: FeatureItem[] = [ @@ -28,6 +30,7 @@ const FeatureList: FeatureItem[] = [ community to always try to improve ReactTooltip. ), + allowsDarkMode: true, }, { title: 'Focus on What Matters', @@ -41,11 +44,16 @@ const FeatureList: FeatureItem[] = [ }, ] -function Feature({ title, Svg, description }: FeatureItem) { +function Feature({ title, Svg, description, allowsDarkMode }: FeatureItem) { return (
- +

{title}

diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css index b248eb2e5..a7268eded 100644 --- a/docs/src/components/HomepageFeatures/styles.module.css +++ b/docs/src/components/HomepageFeatures/styles.module.css @@ -9,3 +9,7 @@ height: 200px; width: 200px; } + +html[data-theme='dark'] .svgDarkMode { + fill: #fff; +} diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx index 0ba14b1c9..184acd6b9 100644 --- a/docs/src/components/HomepageSponsored/index.tsx +++ b/docs/src/components/HomepageSponsored/index.tsx @@ -14,6 +14,7 @@ type FeatureItem = { // eslint-disable-next-line react/no-unused-prop-types eventTitle?: string link: string + allowsDarkMode?: boolean } type SponsorItem = FeatureItem & { @@ -30,6 +31,7 @@ const FeatureList: FeatureItem[] = [ title: 'Algolia', Svg: require('@site/static/img/Algolia-logo.svg').default, link: 'https://docsearch.algolia.com/', + allowsDarkMode: true, }, ] @@ -50,12 +52,17 @@ const SponsorList: SponsorItem[] = [ // }, ] -function Feature({ title, Svg, link }: FeatureItem) { +function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) { return ( diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css index c5af04aeb..512e506c1 100644 --- a/docs/src/components/HomepageSponsored/styles.module.css +++ b/docs/src/components/HomepageSponsored/styles.module.css @@ -29,3 +29,7 @@ width: 100%; } } + +html[data-theme='dark'] .svgDarkMode { + fill: #fff; +} diff --git a/docs/static/img/Algolia-logo.svg b/docs/static/img/Algolia-logo.svg index 48d492a6a..31b645700 100644 --- a/docs/static/img/Algolia-logo.svg +++ b/docs/static/img/Algolia-logo.svg @@ -1 +1 @@ - +