refactor Header logos and Readme

daniilminin1990 · Jun 14, 2024 · 4a018b1 · 4a018b1
1 parent af4d004
commit 4a018b1
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Cards
 
 <p align="center">
-  <img src="src/assets/LogoVariantsSVG/cardMemoLogoGolden.svg" style="width: 400px" alt="logo" />
+  <img src="src/assets/img/cardMemoLogoGolden.png" style="width: 400px" alt="logo" />
 </p>
 
 React + TypeScript SPA 🚀

diff --git a/src/assets/LogoVariantsSVG/cardMemoSmallLogoCards.svg b/src/assets/LogoVariantsSVG/cardMemoSmallLogoCards.svg
diff --git a/src/assets/icons/svg/CardMemo/CardMemoMiniLogoCards.tsx b/src/assets/icons/svg/CardMemo/CardMemoMiniLogoCards.tsx
@@ -0,0 +1,169 @@
+import type { SVGProps } from 'react'
+import { Ref, forwardRef, memo } from 'react'
+
+const SvgCardMemoLogoMinimalisticGolden = (
+  props: SVGProps<SVGSVGElement>,
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    data-name={'Слой 5'}
+    id={'b6800518-986e-440e-97c0-96edb74bcfd6'}
+    ref={ref}
+    viewBox={'0 0 136.04 107.21'}
+    xmlns={'http://www.w3.org/2000/svg'}
+    {...props}
+  >
+    <defs>
+      <linearGradient
+        gradientTransform={'translate(134.75 -32.19) rotate(90)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'b9e203a6-5834-4a5f-99a2-b7c10ef4877a'}
+        x1={'49.14'}
+        x2={'122.45'}
+        y1={'44.8'}
+        y2={'44.8'}
+      >
+        <stop offset={'0'} stopColor={'#ffd22e'} />
+        <stop offset={'0.9'} stopColor={'#b27010'} />
+      </linearGradient>
+      <linearGradient
+        gradientTransform={'translate(119.13 -17.57) rotate(90)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'ba75b3fa-98c8-4f41-b302-29502aa425f8'}
+        x1={'31.72'}
+        x2={'105.02'}
+        y1={'50.79'}
+        y2={'50.79'}
+      >
+        <stop offset={'0'} stopColor={'#ffd22e'} />
+        <stop offset={'0.92'} stopColor={'#d6861d'} />
+      </linearGradient>
+      <linearGradient
+        gradientTransform={'translate(-3.18 2.86)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'aff64dbb-f74f-42ce-9585-ef626f06ad58'}
+        x1={'14.01'}
+        x2={'87.32'}
+        y1={'50.74'}
+        y2={'50.74'}
+      >
+        <stop offset={'0'} stopColor={'#ffd22e'} />
+        <stop offset={'1'} stopColor={'#ffa617'} />
+      </linearGradient>
+      <linearGradient
+        gradientTransform={'matrix(0.96, -0.26, -0.26, -0.96, 25.65, 149.43)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'b3ea50c5-9b42-4dd8-a38a-bf3a76458297'}
+        x1={'43.7'}
+        x2={'49.49'}
+        y1={'102.86'}
+        y2={'70.2'}
+      >
+        <stop offset={'0'} stopColor={'#6a45ff'} />
+        <stop offset={'0.28'} stopColor={'#7d40ff'} />
+        <stop offset={'0.73'} stopColor={'#9839ff'} />
+        <stop offset={'1'} stopColor={'#a236ff'} />
+      </linearGradient>
+      <linearGradient
+        gradientTransform={'matrix(0.96, -0.26, -0.26, -0.96, 25.65, 149.43)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'b63b1520-fb9b-4686-99d0-5a3e360c5783'}
+        x1={'29.3'}
+        x2={'53.88'}
+        y1={'101.82'}
+        y2={'79.54'}
+      >
+        <stop offset={'0'} stopColor={'#3a00e7'} />
+        <stop offset={'1'} stopColor={'#8d00b9'} />
+      </linearGradient>
+      <linearGradient
+        gradientTransform={'translate(-8.92 23.07) rotate(-15.3)'}
+        gradientUnits={'userSpaceOnUse'}
+        id={'ae68982e-52af-4939-99b8-d5284380089d'}
+        x1={'51.64'}
+        x2={'41.05'}
+        y1={'61.62'}
+        y2={'26.47'}
+      >
+        <stop offset={'0'} stopColor={'#7200ff'} />
+        <stop offset={'0.07'} stopColor={'#7605ff'} />
+        <stop offset={'0.68'} stopColor={'#9628ff'} />
+        <stop offset={'1'} stopColor={'#a236ff'} />
+      </linearGradient>
+    </defs>
+    <title>cardMemoLogoGoldenPreviewCardsSVG20240614</title>
+    <rect
+      fill={'url(#b9e203a6-5834-4a5f-99a2-b7c10ef4877a)'}
+      height={'73.3'}
+      rx={'10.43'}
+      stroke={'#ffa300'}
+      strokeMiterlimit={'10'}
+      strokeWidth={'3px'}
+      transform={'translate(17.49 129.19) rotate(-77)'}
+      width={'91.11'}
+      x={'44.4'}
+      y={'16.95'}
+    />
+    <path
+      d={
+        'M107.63,106.36a12.7,12.7,0,0,1-2.87-.33L53.67,94.23A12.64,12.64,0,0,1,44.2,79.08L60,10.64A12.64,12.64,0,0,1,75.15,1.18L126.25,13a12.64,12.64,0,0,1,9.46,15.15l-15.8,68.45a12.63,12.63,0,0,1-12.28,9.79ZM72.31,5.25a8.25,8.25,0,0,0-8,6.38L48.49,80.07A8.24,8.24,0,0,0,54.66,90l51.09,11.8a8.23,8.23,0,0,0,9.87-6.17l15.81-68.45a8.24,8.24,0,0,0-6.17-9.87L74.16,5.46A8.4,8.4,0,0,0,72.31,5.25Z'
+      }
+    />
+    <rect
+      fill={'url(#ba75b3fa-98c8-4f41-b302-29502aa425f8)'}
+      height={'73.3'}
+      rx={'10.43'}
+      stroke={'#ffa300'}
+      strokeMiterlimit={'10'}
+      strokeWidth={'3px'}
+      transform={'translate(17.34 118.98) rotate(-89.83)'}
+      width={'91.11'}
+      x={'22.79'}
+      y={'14.14'}
+    />
+    <path
+      d={
+        'M94.45,98.63h0L42,98.47A12.63,12.63,0,0,1,29.38,85.8l.22-70.24A12.63,12.63,0,0,1,42.27,3l52.43.16a12.65,12.65,0,0,1,12.6,12.67L107.08,86A12.64,12.64,0,0,1,94.45,98.63ZM42.23,7.36A8.25,8.25,0,0,0,34,15.57l-.21,70.24A8.23,8.23,0,0,0,42,94.07l52.44.16h0A8.24,8.24,0,0,0,102.68,86l.22-70.24a8.25,8.25,0,0,0-8.21-8.26L42.25,7.36Z'
+      }
+    />
+    <rect
+      fill={'url(#aff64dbb-f74f-42ce-9585-ef626f06ad58)'}
+      height={'91.11'}
+      rx={'10.43'}
+      stroke={'#ffa300'}
+      strokeMiterlimit={'10'}
+      strokeWidth={'3px'}
+      transform={'translate(-12.89 15.1) rotate(-15.93)'}
+      width={'73.3'}
+      x={'10.84'}
+      y={'8.05'}
+    />
+    <path
+      d={
+        'M31.92,107.21A12.66,12.66,0,0,1,19.77,98L.49,30.5A12.65,12.65,0,0,1,9.17,14.88h0L59.59.49A12.64,12.64,0,0,1,75.2,9.16L94.49,76.71a12.64,12.64,0,0,1-8.68,15.61l-50.42,14.4A12.64,12.64,0,0,1,31.92,107.21ZM63.05,4.4a8,8,0,0,0-2.25.32L10.37,19.11A8.24,8.24,0,0,0,4.72,29.29L24,96.83a8.25,8.25,0,0,0,10.18,5.66L84.6,88.09a8.24,8.24,0,0,0,5.66-10.17L71,10.37A8.24,8.24,0,0,0,63.05,4.4Z'
+      }
+    />
+    <path
+      d={
+        'M42.54,16.47,33.2,62a1.53,1.53,0,0,0,1.18,1.8,1.46,1.46,0,0,0,.72,0l12.54-3.43,4.47,30.39a.65.65,0,0,0,.73.53.63.63,0,0,0,.52-.45L63.14,47a1.35,1.35,0,0,0-1-1.61,1.43,1.43,0,0,0-.65,0L49,48.65,43.72,16.53a.59.59,0,0,0-.56-.62A.59.59,0,0,0,42.54,16.47Z'
+      }
+      fill={'url(#b3ea50c5-9b42-4dd8-a38a-bf3a76458297)'}
+    />
+    <path
+      d={
+        'M42.7,17,33.36,62.57a1.52,1.52,0,0,0,1.18,1.81,1.55,1.55,0,0,0,.71,0l12.54-3.43,4.48,30.38a.64.64,0,0,0,1.24.09l9.78-43.84a1.35,1.35,0,0,0-1-1.62,1.38,1.38,0,0,0-.64,0L49.11,49.21,43.87,17.08A.59.59,0,0,0,42.7,17Z'
+      }
+      fill={'url(#b63b1520-fb9b-4686-99d0-5a3e360c5783)'}
+    />
+    <path
+      d={
+        'M53.38,93l-.28.06a2.42,2.42,0,0,1-1.79-.45,2.39,2.39,0,0,1-1-1.59l-4.18-28.4-10.61,2.9h0a3.34,3.34,0,0,1-1.54,0,3.29,3.29,0,0,1-2.08-1.42,3.25,3.25,0,0,1-.47-2.48L40.79,16.2a2.36,2.36,0,0,1,4.7.17L50.4,46.45,61,43.68a3.11,3.11,0,0,1,3.82,3.72l-9.8,43.94A2.42,2.42,0,0,1,53.38,93ZM47.17,58.66l1.93-.53L53,84.42l8.29-37.13L47.52,50.86,43,23.09,35,62ZM34.94,62.37h0Zm-.31-.28ZM61.41,46.61h0Z'
+      }
+      fill={'url(#ae68982e-52af-4939-99b8-d5284380089d)'}
+    />
+  </svg>
+)
+const ForwardRef = forwardRef(SvgCardMemoLogoMinimalisticGolden)
+const Memo = memo(ForwardRef)
+
+export default Memo
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
 
 import CardMemoLogoGolden from '@/assets/icons/svg/CardMemo/CardMemoLogoGolden'
+import CardMemoMiniLogoCards from '@/assets/icons/svg/CardMemo/CardMemoMiniLogoCards'
 import LogOut from '@/assets/icons/svg/LogOut'
 import PersonOutline from '@/assets/icons/svg/PersonOutline'
 import CardMemoLogoGoldenPng from '@/assets/img/cardMemoLogoGolden.png'
@@ -33,13 +35,30 @@ const Header = ({ data }: HeaderProps) => {
   }
   const theme = localStorage.getItem('theme')
 
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 480)
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize() // Проверяем при первой загрузке
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
   return (
     <div className={clsx(style.box, theme === 'sun' ? style.sun : '')}>
       <div className={style.wrapper}>
         <div className={style.boxImg}>
           <Typography as={'a'} className={style.logo} href={`${path.decks}`} variant={'body2'}>
             <div className={'step-go-home'}>
-              <CardMemoLogoGolden className={style.img} />
+              {isSmallScreen ? (
+                <CardMemoMiniLogoCards className={style.img} />
+              ) : (
+                <CardMemoLogoGolden className={style.img} />
+              )}
               <img
                 alt={'cardMemoLogoGoldenPng'}
                 className={style.imgHidden}