changed favicon + stats section + appbar

M-Farmaha · Jan 22, 2024 · 35683fe · 35683fe
1 parent 9eacbcf
commit 35683fe
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 11 deletions.
diff --git a/public/512logo.png b/public/512logo.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/components/AppBar/AppBar-styled.jsx b/src/components/AppBar/AppBar-styled.jsx
@@ -69,6 +69,7 @@ export const NavLinkStyled = styled(NavLink)`
   line-height: 24px;
   height: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   color: var(--primary-black-color);
@@ -115,3 +116,9 @@ export const NavLinkStyled = styled(NavLink)`
     }
   }
 `;
+
+export const NavIconSvg = styled.svg`
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+`;
diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx
@@ -9,8 +9,11 @@ import {
   NavWrap,
   Header,
   HeaderFilter,
+  NavIconSvg,
 } from "./AppBar-styled";
 
+import sprite from "../../sprite.svg";
+
 export const AppBar = () => {
   const [flipped, setFlipped] = useState(false);
   const { transform } = useSpring({
@@ -39,11 +42,21 @@ export const AppBar = () => {
           </a.div>
           <NavList>
             <NavItem>
-              <NavLinkStyled to="/members">Учасники</NavLinkStyled>
+              <NavLinkStyled to="/members">
+                <NavIconSvg>
+                  <use href={sprite + "#icon-users"}></use>
+                </NavIconSvg>
+                Учасники
+              </NavLinkStyled>
             </NavItem>
 
             <NavItem>
-              <NavLinkStyled to="/gallery">Галерея</NavLinkStyled>
+              <NavLinkStyled to="/gallery">
+                <NavIconSvg>
+                  <use href={sprite + "#icon-camera"}></use>
+                </NavIconSvg>
+                Галерея
+              </NavLinkStyled>
             </NavItem>
           </NavList>
         </NavWrap>

diff --git a/src/components/StatsSection/StatsSection-styled.jsx b/src/components/StatsSection/StatsSection-styled.jsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const Section = styled.section`
   padding-top: 100px;
   padding-bottom: 100px;
-  
+
   backdrop-filter: blur(10px);
 `;
 
@@ -45,8 +45,14 @@ export const SubTitle = styled.p`
 `;
 
 export const StatsIconSvg = styled.svg`
-  margin-bottom: 10px;
   width: 80px;
   height: 80px;
   fill: var(--primary-white-color);
+  background-color: rgba(45, 219, 42, 0.1);
+
+  border: outset;
+  border-width: 1px;
+  border-radius: 50%;
+
+  margin-bottom: 10px;
 `;
diff --git a/src/components/StatsSection/StatsSection.jsx b/src/components/StatsSection/StatsSection.jsx
@@ -28,23 +28,23 @@ export const StatsSection = () => {
               <StatsIconSvg>
                 <use href={sprite + "#icon-stats-2"}></use>
               </StatsIconSvg>
-              <AnimatedStat number={100} id={"stats-2"}/>
+              <AnimatedStat number={100} id={"stats-2"} />
               <SubTitle>Гравців у клубі</SubTitle>
             </Item>
 
             <Item>
               <StatsIconSvg>
                 <use href={sprite + "#icon-stats-3"}></use>
               </StatsIconSvg>
-              <AnimatedStat number={8} id={"stats-3"}/>
+              <AnimatedStat number={8} id={"stats-3"} />
               <SubTitle>Років досвіду</SubTitle>
             </Item>
 
             <Item>
               <StatsIconSvg>
                 <use href={sprite + "#icon-stats-4"}></use>
               </StatsIconSvg>
-              <AnimatedStat number={5} id={"stats-4"}/>
+              <AnimatedStat number={5} id={"stats-4"} />
               <SubTitle>Тренерів у клубі</SubTitle>
             </Item>
           </List>

diff --git a/src/sprite.svg b/src/sprite.svg