Merge pull request #99 from MargoMarm/animation

Update index.css + add animation
MargoMarm · Sep 27, 2023 · 0b43bdf · 0b43bdf
2 parents bce6490 + fa76343
commit 0b43bdf
Show file tree

Hide file tree

Showing 22 changed files with 46 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@mui/x-date-pickers": "^6.14.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@table-library/react-table-library": "^4.1.7",
+    "animate.css": "^4.1.1",
     "axios": "^1.5.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.9",

diff --git a/src/assets/cursor-disabled.png b/src/assets/cursor-disabled.png
diff --git a/src/assets/cursor-pointer.png b/src/assets/cursor-pointer.png
diff --git a/src/assets/cursor.png b/src/assets/cursor.png
diff --git a/src/components/AddProductForm/AddProductForm.styled.jsx b/src/components/AddProductForm/AddProductForm.styled.jsx
@@ -148,7 +148,6 @@ export const AddButton = styled.button`
     color: ${colors.textWhite06};
     background: ${colors.orangeSecondary};
 
-    cursor: not-allowed;
   }
 `;
 

diff --git a/src/components/ButtonIconForInput/ButtonIconForInput.styled.jsx b/src/components/ButtonIconForInput/ButtonIconForInput.styled.jsx
@@ -6,9 +6,7 @@ export const Button = styled.button`
   top: 50%;
   right: ${({ right }) => right || '0'};
   transform: translateY(-50%);
-  width: 18px;
-  height: 18px;
-  padding: 0;
+  padding: 8px;
   border: none;
   outline: none;
   display: inline-flex;

diff --git a/src/components/Calendar/Calendar.styled.js b/src/components/Calendar/Calendar.styled.js
@@ -36,7 +36,7 @@ export const GlobalStyles = css`
     display: flex;
     justify-content: center;
     text-align: center;
-    cursor: pointer;
+    cursor: url('./assets/cursor-pointer.png'), pointer;
     position: absolute;
     top: 12px;
     padding: 0;
@@ -118,7 +118,7 @@ export const GlobalStyles = css`
     height: 32px;
     border-radius: 50%;
     font-size: 14px;
-    cursor: pointer;
+    cursor: url('./assets/cursor-pointer.png'), pointer;
     transition:
       color 0.3s,
       background-color 0.3s;
@@ -132,6 +132,7 @@ export const GlobalStyles = css`
   .react-datepicker__day:active {
     background: ${colors.textWhite04};
     color: ${colors.orange};
+    cursor: url('./assets/cursor-pointer.png'), pointer;
   }
 
   .react-datepicker__day--outside-month {
@@ -148,7 +149,7 @@ export const GlobalStyles = css`
     position: absolute;
     top: 16px;
     right: 40px;
-    cursor: pointer;
+    cursor: url('./assets/cursor-pointer.png'), pointer;
   }
 
   .react-datepicker__month-read-view--selected-month,

diff --git a/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx b/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx
@@ -7,8 +7,7 @@ export const Label = styled.label`
   background-color: inherit;
   border: none;
 
-  cursor: pointer;
-
+  cursor: url('./assets/cursor-pointer.png'), pointer;
   &:hover svg,
   &:hover input {
     stroke: ${colors.orange};
@@ -31,8 +30,7 @@ export const Input = styled.input`
   font-weight: 700;
   line-height: 1.11;
 
-  cursor: pointer;
-
+  cursor: url('./assets/cursor-pointer.png'), pointer;
   color: ${colors.white};
   border: none;
   background-color: inherit;

diff --git a/src/components/ExercisesItem/ExercisesItem.styled.js b/src/components/ExercisesItem/ExercisesItem.styled.js
@@ -27,7 +27,7 @@ export const Item = styled.li`
 export const WrapCard = styled.a`
   display: block;
 
-  cursor: pointer;
+  cursor: url('./assets/cursor-pointer.png'), pointer;
   position: relative;
   border-radius: 12px;
   background-color: ${colors.background05};

diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -34,7 +34,6 @@ export const ModalWrap = styled.div`
 `;
 
 export const ButtonExit = styled.button`
-  cursor: pointer;
   position: absolute;
   top: 14px;
   right: 14px;

diff --git a/src/components/ProductsFilter/ProductsFilter.jsx b/src/components/ProductsFilter/ProductsFilter.jsx
@@ -105,7 +105,7 @@ export default function ProductsFilter() {
             <use href={sprite + `#icon-search`}></use>
           </Svg>
         </SpanForSvg>
-        <ButtonIconForInput right="42px" type="reset">
+        <ButtonIconForInput right="35px" type="reset">
           <Svg>
             <use href={sprite + `#close`}></use>
           </Svg>

diff --git a/src/components/ProductsFilter/ProductsFilter.styled.jsx b/src/components/ProductsFilter/ProductsFilter.styled.jsx
@@ -10,7 +10,7 @@ export const Option = styled.option`
   border-radius: 4px;
   background-color: #fff;
   appearance: none;
-  cursor: pointer;
+  cursor: url('./assets/cursor-pointer.png'), pointer;
 `;
 
 export const Select = styled.select`
@@ -124,26 +124,28 @@ export const TextInput = styled.input`
     border: 1px solid ${colors.orange};
   }
 
-  &:focus-visible + span {
-    color: ${colors.orange};
+  &:focus-visible + span > svg{
+    stroke: ${colors.orange};
   }
 `;
 
 export const Svg = styled.svg`
-  stroke: currentColor;
+  stroke: ${colors.textWhite06};
 
   width: 18px;
   height: 18px;
+
+  &:hover {
+    stroke: ${colors.orange};
+  }
 `;
 
 export const SpanForSvg = styled.span`
   position: absolute;
   top: 15px;
   right: 18px;
-
   width: 18px;
   height: 18px;
-
   ${mq.tablet} {
     top: 17px;
   }

diff --git a/src/components/ProductsOrExercisesItem/ProductsOrExercisesItem.styled.jsx b/src/components/ProductsOrExercisesItem/ProductsOrExercisesItem.styled.jsx
@@ -83,7 +83,6 @@ export const AddBtn = styled.button`
 
   color: inherit;
   background-color: transparent;
-  cursor: pointer;
 
   color: ${colors.orange};
 

diff --git a/src/components/Title/Title.jsx b/src/components/Title/Title.jsx
@@ -1,5 +1,6 @@
 import { StyledTitle } from './Title.styled';
 import PropTypes from 'prop-types';
+import 'animate.css';
 
 const Title = ({ text, margin }) => {
   return <StyledTitle margin={margin}>{text}</StyledTitle>;

diff --git a/src/components/Title/Title.styled.jsx b/src/components/Title/Title.styled.jsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { mq, colors } from '../../utils';
 
 export const StyledTitle = styled.h2`
+  animation: backInLeft 1s ease-in-out  alternate;
   color: ${colors.white};
 
   font-family: Roboto;

diff --git a/src/components/headersComp/Logo/Logo.jsx b/src/components/headersComp/Logo/Logo.jsx
@@ -1,5 +1,6 @@
 import { WrapLogo, Svg } from './Logo.styled';
 import sprite from '../../../assets/sprite.svg';
+import 'animate.css';
 
 import { UseAuth } from '../../../hooks/useAuth';
 import { NavLink } from 'react-router-dom';

diff --git a/src/components/headersComp/Logo/Logo.styled.js b/src/components/headersComp/Logo/Logo.styled.js
@@ -12,6 +12,7 @@ export const WrapLogo = styled.div`
 `;
 
 export const Svg = styled.svg`
+  animation: pulse 2s ease-in-out infinite alternate;
   width: 126px;
   height: 13px;
   ${mq.tablet} {

diff --git a/src/components/headersComp/UserNav/UserNav.jsx b/src/components/headersComp/UserNav/UserNav.jsx
@@ -47,7 +47,7 @@ export const UserNav = () => {
         >
           <Span>Logout</Span>
           <Svg>
-            <use href={sprite + `#logout`}></use>
+            <use href={sprite + `#logout_`}></use>
           </Svg>{' '}
         </Button>
       </ButtonWrap>

diff --git a/src/components/headersComp/UserNav/UserNav.styled.js b/src/components/headersComp/UserNav/UserNav.styled.js
@@ -15,7 +15,7 @@ export const WrapUserNav = styled.div`
 export const Svg = styled.svg`
   width: 24px;
   height: 24px;
-  fill: ${colors.grey};
+  stroke: currentColor;
 `;
 export const SvgUser = styled.svg`
   ${svgUser}
@@ -31,10 +31,10 @@ export const Button = styled.button`
   display: flex;
   align-items: center;
   gap: 5px;
+  color: ${colors.orange};
   ${button};
 `;
 export const Span = styled.span`
-  color: ${colors.orange};
   font-size: 16px;
   line-height: 24px;
 

diff --git a/src/index.css b/src/index.css
@@ -23,6 +23,10 @@
     url('assets/fonts/roboto-bold-webfont.woff') format('woff');
 }
 
+html {
+  cursor: url('./assets/cursor.png'), default;
+}
+
 body {
   background-color: rgb(0, 0, 0);
   background-size: auto 100%;
@@ -36,6 +40,7 @@ body {
   height: 100vh;
   margin: 0;
 }
+
 h1,
 h2,
 h3,
@@ -48,6 +53,9 @@ p {
 a {
   text-decoration: none;
 }
+a:hover {
+  cursor: url('./assets/cursor-pointer.png'), pointer;
+}
 ul {
   list-style: none;
   padding: 0;
@@ -56,10 +64,14 @@ ul {
 img {
   display: block;
 }
-button {
-  cursor: pointer;
+button:hover {
+  cursor: url('./assets/cursor-pointer.png'), pointer;
+}
+button:disabled {
+  cursor: url('./assets/cursor-disabled.png'), not-allowed;
 }
 
+
 .css-9l3uo3 {
   color: #efede8;
   font-size: 14px;

diff --git a/src/pages/Diary/Diary.jsx b/src/pages/Diary/Diary.jsx
@@ -4,6 +4,7 @@ import DayDiaryProductsOrExercises from '../../components/DayDiaryProductsOrExer
 import DescriptionText from '../../components/DescriptionText/DescriptionText';
 import Calendar from '../../components/Calendar/Calendar';
 
+
 import {
   DiaryWrapper,
   CustomDivForCards,