From 118b19cc036f0e04bd5b59ebefca40d0c3255c75 Mon Sep 17 00:00:00 2001 From: adesh_ghadage Date: Sun, 27 Oct 2024 23:48:04 +0530 Subject: [PATCH] updated Lotengdev logo according to background color --- src/assets/lotengdev-logo-dark.svg | 14 +++++++++++++ src/assets/lotengdev-logo-light.svg | 14 +++++++++++++ src/components/Navbar/Brand.jsx | 32 ++++++++++++++++++++++++----- src/components/Navbar/index.jsx | 2 +- 4 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 src/assets/lotengdev-logo-dark.svg create mode 100644 src/assets/lotengdev-logo-light.svg diff --git a/src/assets/lotengdev-logo-dark.svg b/src/assets/lotengdev-logo-dark.svg new file mode 100644 index 0000000..69f48cf --- /dev/null +++ b/src/assets/lotengdev-logo-dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/lotengdev-logo-light.svg b/src/assets/lotengdev-logo-light.svg new file mode 100644 index 0000000..215388c --- /dev/null +++ b/src/assets/lotengdev-logo-light.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Navbar/Brand.jsx b/src/components/Navbar/Brand.jsx index 4a8c9aa..448c52f 100644 --- a/src/components/Navbar/Brand.jsx +++ b/src/components/Navbar/Brand.jsx @@ -1,17 +1,39 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; -import LogtengDevLogo from '@/assets/lotengdev-logo.svg'; +import { useEffect, useState, useRef } from 'react'; +import LogtengDevLogoLight from '@/assets/lotengdev-logo-light.svg'; +import LogtengDevLogoDark from '@/assets/lotengdev-logo-dark.svg'; export function Brand({ url }) { + const [isDarkBackground, setIsDarkBackground] = useState(false); + const brandRef = useRef(null); + + useEffect(() => { + if (brandRef.current) { + const backgroundColor = window.getComputedStyle(brandRef.current).backgroundColor; + const rgb = backgroundColor.match(/\d+/g); + + if (rgb) { + const brightness = (0.299 * rgb[0]) + (0.587 * rgb[1]) + (0.114 * rgb[2]); + setIsDarkBackground(brightness < 128); + } + } + }, []); + return (
- + LogtengDev Logo
- ) + ); } Brand.propTypes = { - url: PropTypes.string.isRequired -} \ No newline at end of file + url: PropTypes.string.isRequired, + isDarkBackground: PropTypes.bool +}; diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx index e0b8216..b0ec83e 100644 --- a/src/components/Navbar/index.jsx +++ b/src/components/Navbar/index.jsx @@ -22,7 +22,7 @@ function CTAButtons() { export default function Navbar() { return (