From 5b61dbd4e064841a4bfd33c81922634dafa2130f Mon Sep 17 00:00:00 2001 From: PahaN47 Date: Mon, 2 Dec 2024 16:09:41 +0300 Subject: [PATCH] fix: split brand icon --- src/components/BrandFooter/BrandFooter.scss | 26 ++- src/components/BrandFooter/BrandFooter.tsx | 33 ++-- src/icons/BrandIcon.tsx | 169 -------------------- src/icons/BrandIconDark.tsx | 78 +++++++++ src/icons/BrandIconLight.tsx | 81 ++++++++++ 5 files changed, 199 insertions(+), 188 deletions(-) delete mode 100644 src/icons/BrandIcon.tsx create mode 100644 src/icons/BrandIconDark.tsx create mode 100644 src/icons/BrandIconLight.tsx diff --git a/src/components/BrandFooter/BrandFooter.scss b/src/components/BrandFooter/BrandFooter.scss index ac46083f5..cf98e10bc 100644 --- a/src/components/BrandFooter/BrandFooter.scss +++ b/src/components/BrandFooter/BrandFooter.scss @@ -25,12 +25,6 @@ $block: '.#{$ns}brand-footer'; right: 0; left: 0; height: $borderHeight; - background: linear-gradient( - 270deg, - rgba(228, 106, 68, 0.6) 0%, - rgba(242, 159, 85, 0.6) 46.62%, - rgba(255, 212, 102, 0.6) 100% - ); opacity: 0; transition: opacity 0.5s ease-out; content: ''; @@ -45,6 +39,26 @@ $block: '.#{$ns}brand-footer'; } } + &_theme { + &_light::after { + background: linear-gradient( + 270deg, + rgba(228, 106, 68, 1) 0%, + rgba(242, 159, 85, 1) 46.62%, + rgba(255, 212, 102, 1) 100% + ); + } + + &_dark::after { + background: linear-gradient( + 270deg, + rgba(228, 106, 68, 0.6) 0%, + rgba(242, 159, 85, 0.6) 46.62%, + rgba(255, 212, 102, 0.6) 100% + ); + } + } + &__content { display: flex; align-items: center; diff --git a/src/components/BrandFooter/BrandFooter.tsx b/src/components/BrandFooter/BrandFooter.tsx index 265159d4f..953ced11f 100644 --- a/src/components/BrandFooter/BrandFooter.tsx +++ b/src/components/BrandFooter/BrandFooter.tsx @@ -2,9 +2,12 @@ import React from 'react'; import {Link} from '@gravity-ui/uikit'; -import {BrandIcon} from '../../icons/BrandIcon'; +import {useTheme} from '../../context/theme'; +import {BrandIconDark} from '../../icons/BrandIconDark'; +import {BrandIconLight} from '../../icons/BrandIconLight'; import {BrandName} from '../../icons/BrandName'; import type {ClassNameProps} from '../../models'; +import {Theme} from '../../models'; import {block} from '../../utils'; import {i18n} from './i18n'; @@ -13,18 +16,22 @@ import './BrandFooter.scss'; const b = block('brand-footer'); -const BrandFooter = ({className}: ClassNameProps) => ( - -
- {i18n('created-on')} -
- -
-
- +const BrandFooter = ({className}: ClassNameProps) => { + const theme = useTheme(); + + return ( + +
+ {i18n('created-on')} +
+ {theme === Theme.Light ? : } +
+
+ +
-
- -); + + ); +}; export default BrandFooter; diff --git a/src/icons/BrandIcon.tsx b/src/icons/BrandIcon.tsx deleted file mode 100644 index 5ed51493e..000000000 --- a/src/icons/BrandIcon.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React from 'react'; - -import {useTheme} from '../context/theme'; -import {Theme} from '../models'; -import {a11yHiddenSvgProps} from '../utils/svg'; - -export const BrandIcon: React.FC> = (props) => { - const theme = useTheme(); - - return ( - - {theme === Theme.Light ? ( - - - - - - - - - - - - - - - - - - - - - - - - ) : ( - - - - - - - - - - - - - - - - - - - - - - - - )} - - ); -}; diff --git a/src/icons/BrandIconDark.tsx b/src/icons/BrandIconDark.tsx new file mode 100644 index 000000000..c7178d3ec --- /dev/null +++ b/src/icons/BrandIconDark.tsx @@ -0,0 +1,78 @@ +import React from 'react'; + +import {a11yHiddenSvgProps} from '../utils/svg'; + +export const BrandIconDark: React.FC> = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/icons/BrandIconLight.tsx b/src/icons/BrandIconLight.tsx new file mode 100644 index 000000000..9c6a7f0a3 --- /dev/null +++ b/src/icons/BrandIconLight.tsx @@ -0,0 +1,81 @@ +import React from 'react'; + +import {a11yHiddenSvgProps} from '../utils/svg'; + +export const BrandIconLight: React.FC> = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + +);