fix: split brand icon

gravity-ui · Dec 2, 2024 · 5b61dbd · 5b61dbd
1 parent 922db29
commit 5b61dbd
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 188 deletions.
diff --git 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
@@ -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) => (
-    <Link className={b(null, className)} href="https://gravity-ui.com">
-        <div className={b('content')}>
-            <span className={b('text')}>{i18n('created-on')}</span>
-            <div className={b('brand-icon')}>
-                <BrandIcon />
-            </div>
-            <div className={b('brand-name')}>
-                <BrandName />
+const BrandFooter = ({className}: ClassNameProps) => {
+    const theme = useTheme();
+
+    return (
+        <Link className={b({theme}, className)} href="https://gravity-ui.com">
+            <div className={b('content')}>
+                <span className={b('text')}>{i18n('created-on')}</span>
+                <div className={b('brand-icon')}>
+                    {theme === Theme.Light ? <BrandIconLight /> : <BrandIconDark />}
+                </div>
+                <div className={b('brand-name')}>
+                    <BrandName />
+                </div>
             </div>
-        </div>
-    </Link>
-);
+        </Link>
+    );
+};
 
 export default BrandFooter;
diff --git a/src/icons/BrandIcon.tsx b/src/icons/BrandIcon.tsx
diff --git a/src/icons/BrandIconDark.tsx b/src/icons/BrandIconDark.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import {a11yHiddenSvgProps} from '../utils/svg';
+
+export const BrandIconDark: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        {...a11yHiddenSvgProps}
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M19.8424 19.8433C24.3958 15.2896 24.3958 7.90683 19.8424 3.35327L16.5682 6.6277C19.244 9.40598 19.2329 13.8068 16.5192 16.5207C13.8055 19.2345 9.4048 19.2457 6.62664 16.5697L3.35327 19.8433C7.90663 24.3967 15.2891 24.3967 19.8424 19.8433Z"
+            fill="url(#paint0_radial_6_104)"
+        />
+        <mask
+            id="mask0_6_104"
+            style={{maskType: 'alpha'}}
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="24"
+            height="24"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z"
+                fill="#FF3377"
+            />
+        </mask>
+        <g mask="url(#mask0_6_104)">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z"
+                fill="#FF3377"
+            />
+            <g filter="url(#filter0_f_6_104)">
+                <path
+                    d="M3.66425 16.9431C1.23717 13.223 1.65507 8.18643 4.91797 4.91963C8.18443 1.64924 13.2224 1.2335 16.9393 3.67239C17.2067 3.84045 17.3423 3.92521 17.4693 3.97423C17.7646 4.08818 18.008 4.10447 18.3158 4.03088C18.4503 3.99874 18.6311 3.91633 18.9928 3.75149C20.1947 3.20385 21.8808 2.02762 22.4725 2.62002C23.3813 3.52987 20.6464 8.26011 14.4508 14.4631C8.25521 20.666 3.53061 23.5804 2.62184 22.6706C2.03011 22.0781 3.20502 20.2137 3.75214 19.0102C3.91609 18.6497 3.99806 18.4693 4.03013 18.3355C4.10438 18.0256 4.08784 17.7804 3.97268 17.4833C3.92291 17.355 3.83661 17.2178 3.66402 16.9433L3.66425 16.9431Z"
+                    fill="#FFFF00"
+                />
+            </g>
+        </g>
+        <defs>
+            <filter
+                id="filter0_f_6_104"
+                x="-1.54024"
+                y="-1.54195"
+                width="27.8346"
+                height="28.0273"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="1.82578" result="effect1_foregroundBlur_6_104" />
+            </filter>
+            <radialGradient
+                id="paint0_radial_6_104"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(11.5717 11.7474) rotate(45.0013) scale(11.5058)"
+            >
+                <stop offset="0.646153" stopColor="#FFFF00" />
+                <stop offset="1" stopColor="#FF3377" />
+            </radialGradient>
+        </defs>
+    </svg>
+);