Merge pull request #90 from MargoMarm/bugfix-modal

Bugfix modal
MargoMarm · Sep 26, 2023 · 2febd0a · 2febd0a
2 parents dc71dfc + 11596ac
commit 2febd0a
Show file tree

Hide file tree

Showing 21 changed files with 204 additions and 116 deletions.
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx
@@ -119,6 +119,7 @@ export default function AddExerciseForm({ data, addExercise }) {
       </InfoCardConteiner>
       <ButtonWrapper>
         <AddButton
+          disabled={burnedCalory > 10 ? false : true}
           type="button"
           onClick={() =>
             addExercise({

diff --git a/src/components/AddProductForm/AddProductForm.jsx b/src/components/AddProductForm/AddProductForm.jsx
@@ -10,6 +10,8 @@ import {
   InputQuantity,
   InputTitle,
   TitleCalories,
+  Label,
+  InputWrapper,
 } from './AddProductForm.styled';
 import formatDate from '../../utils/formatDate';
 
@@ -25,17 +27,15 @@ function AddProductForm({ data, closeModal, addProduct }) {
         <label>
           <InputTitle type="text" value={data.title} disabled />
         </label>
-
-        <label>
+        <InputWrapper>
           <InputQuantity
-
-            placeholder="grams"
+            id="grams"
             type="number"
             value={quantity}
             onChange={e => setQuantity(e.target.value)}
           />
-           </label>
-
+          <Label htmlFor="grams">grams </Label>
+        </InputWrapper>
       </InputContainer>
 
       <Calories>
@@ -44,6 +44,7 @@ function AddProductForm({ data, closeModal, addProduct }) {
 
       <ButtonContainer>
         <AddButton
+          disabled={quantity > 0 ? false : true}
           type="button"
           onClick={() =>
             addProduct({

diff --git a/src/components/AddProductForm/AddProductForm.styled.jsx b/src/components/AddProductForm/AddProductForm.styled.jsx
@@ -11,6 +11,8 @@ export const Container = styled.div`
 `;
 
 export const InputContainer = styled.div`
+  position: relative;
+
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
@@ -34,8 +36,6 @@ export const InputTitle = styled.input`
     width: 244px;
     height: 40px;
   }
-  
-
 `;
 
 export const InputQuantity = styled.input`
@@ -60,9 +60,9 @@ export const InputQuantity = styled.input`
     margin: 0;
   }
 
-  &[type='number'] {
+  /* &[type='number'] {
     -moz-appearance: textfield;
-  }
+  } */
 
   ${mq.tablet} {
     width: 155px;
@@ -71,10 +71,31 @@ export const InputQuantity = styled.input`
   }
 
   :focus-visible {
-    outline: 2px solid ${colors.orange};
+	outline: 0;
+    border: 2px solid ${colors.orange};
+  }
+
+  &:focus + label {
+    top: -10px;
   }
 `;
 
+export const Label = styled.label`
+  position: absolute;
+  top: 10px;
+  right: 18px;
+  font-size: 14px;
+  padding: 0 12px;
+  background-color: ${colors.modalBlack};
+  color: ${colors.textWhite03};
+
+  transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1);
+`;
+
+export const InputWrapper = styled.div`
+  position: relative;
+`;
+
 export const Calories = styled.p`
   font-size: 12px;
   align-items: end;
@@ -112,16 +133,23 @@ export const AddButton = styled.button`
   font-weight: 500;
   line-height: calc(18 / 16);
   border: 1px solid ${colors.textWhite03};
-  transition: background 0.3s ease-out;
   margin-right: 14px;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
-    background: #ef8964;
+    background-color: ${colors.orangeSecondary};
   }
 
   ${mq.tablet} {
     margin-right: 16px;
   }
+
+  &:disabled {
+    color: ${colors.textWhite06};
+    background: ${colors.orangeSecondary};
+
+    cursor: not-allowed;
+  }
 `;
 
 export const CloseButton = styled.button`
@@ -141,4 +169,9 @@ export const CloseButton = styled.button`
   ${mq.tablet} {
     padding: 12px 40px;
   }
+
+  &:hover {
+    border-color: ${colors.orange};
+    transition: border-color 0.3s ease-out;
+  }
 `;
diff --git a/src/components/BtnSubmit/BtnSubmit.styled.jsx b/src/components/BtnSubmit/BtnSubmit.styled.jsx
@@ -13,20 +13,25 @@ export const ButtonSubmit = styled.button`
   margin-top: ${({ margin }) => {
     return margin?.top.mob || 0;
   }};
-  margin-bottom: : ${({ margin }) => {
+  margin-bottom: ${({ margin }) => {
     return margin?.bot.mob || 0;
   }};
 
   color: ${colors.white};
   font-size: 16px;
   font-weight: 500;
   line-height: 112.5%;
+  transition: background 0.3s ease-out;
 
   ${mq.tablet} {
-    padding: 16px 60px;
-    font-size: ${fontSize => fontSize};
+    padding: 14px 32px;
     line-height: 120%;
     margin-top: ${({ margin }) => margin?.top.tab || 0};
-    margin-bottom: : ${({ margin }) => margin?.bot.tab || 0} ;
+    margin-bottom: ${({ margin }) => margin?.bot.tab || 0};
+  }
+
+  &:hover,
+  &:focus {
+    background: ${colors.orangeSecondary};
   }
 `;
diff --git a/src/components/ButtonIconForInput/ButtonIconForInput.styled.jsx b/src/components/ButtonIconForInput/ButtonIconForInput.styled.jsx
@@ -15,8 +15,13 @@ export const Button = styled.button`
   align-items: center;
   justify-content: center;
   background-color: transparent;
+  color: ${colors.white};
+  transition:
+    scale 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
   &:hover {
-    fill: ${colors.orange};
-    stroke: ${colors.orange};
+    color: ${colors.orange};
+    scale: 1.15;
   }
 `;
diff --git a/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx b/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx
@@ -41,11 +41,10 @@ export const Input = styled.input`
 
   &:focus {
     color: ${colors.orange};
-    border: none;
   }
 
   &:focus-visible {
-    border: none;
+    outline: none;
   }
 
   &:focus + svg {

diff --git a/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx b/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx
@@ -6,49 +6,43 @@ export const ButtonBack = styled.button`
   display: flex;
   align-items: center;
 
- padding: 0px;
- margin-top:10px;
-
-	font-size: 14px;
-  line-height: 1.28; 
-
+  padding: 0px;
+  margin-top: 10px;
 
+  font-size: 14px;
+  line-height: 1.28;
 
   background-color: transparent;
   color: ${colors.textWhite04};
   border: none;
-	scale: 1;
+  scale: 1;
 
   transition:
-  scale 250ms ease-in-out,
-  color 250ms ease-in-out;
-	fill 250ms ease-in-out;
-
-
-		${mq.tablet}{
- font-size: 16px;
-line-height: 1.5; 
-		}
-
+    scale 250ms ease-in-out,
+    color 250ms ease-in-out,
+    fill 250ms ease-in-out;
 
+  ${mq.tablet} {
+    font-size: 16px;
+    line-height: 1.5;
+  }
 
   &:hover {
     color: ${colors.orange};
     scale: 1.1;
-
   }
   &:focus {
     color: ${colors.orange};
-		scale: 1.1;
+    scale: 1.1;
   }
 
   &:hover svg {
     fill: ${colors.orange};
-		scale: 1.1;
+    scale: 1.1;
   }
   &:focus svg {
     fill: ${colors.orange};
-		scale: 1.1;
+    scale: 1.1;
   }
 `;
 

diff --git a/src/components/MobMenu/MobMenu.jsx b/src/components/MobMenu/MobMenu.jsx
@@ -14,6 +14,7 @@ import {
   Svg,
   Link,
   Overlay,
+  AvatarWrapper,
 } from './MobMenu.styled';
 import { UserAvatar } from '../headersComp/UserNav/UserNav.styled';
 import { selectUser } from '../../redux/auth/selectors';
@@ -51,7 +52,7 @@ const MobMenu = () => {
             <use href={sprite + `#settings`}></use>
           </Svg>
         </Link>
-        <ButtonMenu type="button">
+        <AvatarWrapper>
           {avatarURL ? (
             <UserAvatar>
               <img src={avatarURL} alt="user's avatar" />
@@ -61,7 +62,7 @@ const MobMenu = () => {
               <use href={sprite + `#user`}></use>
             </Svg>
           )}
-        </ButtonMenu>
+        </AvatarWrapper>
         <ButtonMenu type="button" onClick={toggleMobMenu}>
           <Svg>
             <use href={sprite + `#menu`}></use>

diff --git a/src/components/MobMenu/MobMenu.styled.js b/src/components/MobMenu/MobMenu.styled.js
@@ -31,6 +31,18 @@ export const ButtonMenu = styled.button`
     display: none;
   }
 `;
+
+export const AvatarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  ${button}
+
+  ${mq.desktop} {
+    display: none;
+  }
+`;
+
 export const Svg = styled.svg`
   fill: ${colors.grey};
   width: 24px;

diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -39,10 +39,24 @@ export const ButtonExit = styled.button`
   top: 14px;
   right: 14px;
   ${button}
+
+  &:hover svg {
+    stroke: ${colors.orange};
+    scale: 1.1;
+  }
+  &:focus svg {
+    stroke: ${colors.orange};
+    scale: 1.1;
+  }
 `;
 
 export const Svg = styled.svg`
-  fill: ${colors.grey};
   width: 24px;
   height: 24px;
+  stroke: ${colors.textWhite04};
+  scale: 1;
+
+  transition:
+    scale 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
 `;