Merge pull request #52 from Sokilskill/welcome_input

loader
Sokilskill · Jan 20, 2024 · 838b388 · 838b388
2 parents 6882856 + 65d5f2f
commit 838b388
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 56 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useDispatch, useSelector } from 'react-redux';
 import {
+  selectIsLoading,
   selectIsLoggedIn,
   selectIsParamsData,
   selectIsRefreshing,
@@ -36,14 +37,15 @@ const ErrorPage = lazy(() => import('./pages/ErrorPage/ErrorPage'));
 function App() {
   const isLoggedIn = useSelector(selectIsLoggedIn);
   const isParamsData = useSelector(selectIsParamsData);
-  const dispatch = useDispatch();
+  const isLoading = useSelector(selectIsLoading);
   const isRefreshing = useSelector(selectIsRefreshing);
-
+  const dispatch = useDispatch();
+
   useEffect(() => {
     dispatch(refreshThunk());
   }, [dispatch]);
 
-  return isRefreshing ? (
+  return isRefreshing || isLoading ? (
     <MyLoader />
   ) : (
     <>

diff --git a/src/components/Loader/DiaryLoader.jsx b/src/components/Loader/DiaryLoader.jsx
@@ -1,23 +1,19 @@
-
 import { RotatingLines } from 'react-loader-spinner';
-import '../../index.css'
+import '../../index.css';
+import { Container, Loader } from './DiaryLoader.styled';
 
-const MyLoader = ({ display }) => (
-  <div
-    style={{
-      display: display,
-      justifyContent: 'center',
-      width: '100%',
-    }}
-  >
-    <RotatingLines
-      strokeColor= {`var(--white)`}
-      strokeWidth="5"
-      animationDuration="0.75"
-      width="20%"
-      visible={true}
-    />
-  </div>
+const MyLoader = () => (
+  <Container>
+    <Loader>
+      <RotatingLines
+        // strokeColor={`var(--white)`}
+        strokeWidth="5"
+        animationDuration="0.75"
+        width="20%"
+        visible={true}
+      />
+    </Loader>
+  </Container>
 );
 
 export default MyLoader;
diff --git a/src/components/Loader/DiaryLoader.styled.jsx b/src/components/Loader/DiaryLoader.styled.jsx
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: absolute;
+  top: 35%;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+export const Loader = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+`;
diff --git a/src/components/MainLayout/MainLayout.jsx b/src/components/MainLayout/MainLayout.jsx
@@ -1,14 +1,15 @@
 import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Header } from '../Header/Header';
-import Loader from '../Loader/Loader';
+// import Loader from '../Loader/Loader';
+import MyLoader from '../Loader/DiaryLoader';
 
 const MainLayout = () => {
   return (
     <>
       <Header />
       <main>
-        <Suspense fallback={<Loader />}>
+        <Suspense fallback={<MyLoader />}>
           <Outlet />
         </Suspense>
       </main>

diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx
@@ -48,8 +48,8 @@ export const SignInForm = ({ onSubmit }) => {
                       !errors.email
                         ? !touched.email
                           ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_imput}`
-                        : `${css.form_input} ${css.error_imput}`
+                          : `${css.form_input} ${css.success_input}`
+                        : `${css.form_input} ${css.error_input}`
                     }
                   />
                   {errors.email && touched.email ? (
@@ -83,8 +83,8 @@ export const SignInForm = ({ onSubmit }) => {
                         !errors.password
                           ? !touched.password
                             ? `${css.form_input}`
-                            : `${css.form_input} ${css.success_imput}`
-                          : `${css.form_input} ${css.error_imput}`
+                            : `${css.form_input} ${css.success_input}`
+                          : `${css.form_input} ${css.error_input}`
                       }
                     />
                     <svg

diff --git a/src/components/SignInForm/SignInForm.module.css b/src/components/SignInForm/SignInForm.module.css
@@ -25,11 +25,11 @@
 .form_input:is(:hover, :focus) {
   border: 1px solid var(--orange, #e6533c);
 }
-.error_imput {
-  border: 1px solid #d80027;
+.error_input {
+  border: 1px solid var(--error-color, #d80027);
 }
-.success_imput {
-  border: 1px solid #3cbf61;
+.success_input {
+  border: 1px solid var(--success-color, #3cbf61);
 }
 .input_pass_field {
   display: flex;
@@ -58,20 +58,20 @@
   background-color: var(--orange-1, #ef8964);
 }
 .icon_checkbox_error {
-  fill: #d80027;
+  fill: var(--error-color, #d80027);
   width: 16px;
   height: 16px;
 }
 .icon_checkbox_succsess {
-  fill: #3cbf61;
+  fill: var(--success-color, #3cbf61);
   width: 16px;
   height: 16px;
 }
 .error_row {
   display: flex;
   gap: 4px;
   align-items: center;
-  color: #d80027;
+  color: var(--error-color, #d80027);
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
@@ -80,7 +80,7 @@
   display: flex;
   gap: 4px;
   align-items: center;
-  color: #3cbf61;
+  color: var(--success-color, #3cbf61);
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;

diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx
@@ -53,8 +53,8 @@ export const SignUpForm = ({ onSubmit }) => {
                       !errors.name
                         ? !touched.name
                           ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_imput}`
-                        : `${css.form_input} ${css.error_imput}`
+                          : `${css.form_input} ${css.success_input}`
+                        : `${css.form_input} ${css.error_input}`
                     }
                   />
                   {errors.name && touched.name ? (
@@ -87,8 +87,8 @@ export const SignUpForm = ({ onSubmit }) => {
                       !errors.email
                         ? !touched.email
                           ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_imput}`
-                        : `${css.form_input} ${css.error_imput}`
+                          : `${css.form_input} ${css.success_input}`
+                        : `${css.form_input} ${css.error_input}`
                     }
                   />
                   {errors.email && touched.email ? (
@@ -122,8 +122,8 @@ export const SignUpForm = ({ onSubmit }) => {
                         !errors.password
                           ? !touched.password
                             ? `${css.form_input}`
-                            : `${css.form_input} ${css.success_imput}`
-                          : `${css.form_input} ${css.error_imput}`
+                            : `${css.form_input} ${css.success_input}`
+                          : `${css.form_input} ${css.error_input}`
                       }
                     />
                     <svg

diff --git a/src/components/SignUpForm/SignUpForm.module.css b/src/components/SignUpForm/SignUpForm.module.css
@@ -25,11 +25,11 @@
 .form_input:is(:hover, :focus) {
   border: 1px solid var(--orange, #e6533c);
 }
-.error_imput {
-  border: 1px solid #d80027;
+.error_input {
+  border: 1px solid var(--error-color, #d80027);
 }
-.success_imput {
-  border: 1px solid #3cbf61;
+.success_input {
+  border: 1px solid var(--success-color, #3cbf61);
 }
 .input_pass_field {
   display: flex;
@@ -58,20 +58,20 @@
   background-color: var(--orange-1, #ef8964);
 }
 .icon_checkbox_error {
-  fill: #d80027;
+  fill: var(--error-color, #d80027);
   width: 16px;
   height: 16px;
 }
 .icon_checkbox_succsess {
-  fill: #3cbf61;
+  fill: var(--success-color, #3cbf61);
   width: 16px;
   height: 16px;
 }
 .error_row {
   display: flex;
   gap: 4px;
   align-items: center;
-  color: #d80027;
+  color: var(--error-color, #d80027);
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
@@ -80,7 +80,7 @@
   display: flex;
   gap: 4px;
   align-items: center;
-  color: #3cbf61;
+  color: var(--success-color, #3cbf61);
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;

diff --git a/src/index.css b/src/index.css
@@ -60,8 +60,8 @@
 
 :root {
   --white: #efede8;
-  --red: #E9101D;
-  --green: #419B09;
+  --red: #e9101d;
+  --green: #419b09;
   --secondary-text-color: #efede866;
   --orange: #e6533c;
   --orange-1: #ef8964;
@@ -96,9 +96,9 @@
   --secondary-color-text: rgba(239, 237, 232, 0.5);
   --icon-color: rgba(239, 137, 100, 1);
   --text-calorie-intake: rgba(239, 237, 232, 0.8);
-  --input-border: rgba(239, 237, 232, 0.30);
-  --calendar-arrows: rgba(239, 237, 232, 0.40);
-  --calendar-button-border: rgba(239, 237, 232, 0.20);
+  --input-border: rgba(239, 237, 232, 0.3);
+  --calendar-arrows: rgba(239, 237, 232, 0.4);
+  --calendar-button-border: rgba(239, 237, 232, 0.2);
 }
 
 body {
@@ -164,4 +164,3 @@ button {
     padding: 0 96px;
   }
 }
-
diff --git a/src/redux/auth/auth-selectors.js b/src/redux/auth/auth-selectors.js
@@ -1,6 +1,7 @@
 export const selectIsLoggedIn = (state) => state.auth.isLoggedIn;
 export const selectUser = (state) => state.auth.user;
 export const selectIsRefreshing = (state) => state.auth.isRefreshing;
+export const selectIsLoading = (state) => state.auth.isLoading;
 export const selectIsToken = (state) => state.auth.token;
 export const selectUserBodyParams = (state) => state.auth.user.bodyParams;
 

diff --git a/src/redux/exercises/exercisesOperations.js b/src/redux/exercises/exercisesOperations.js
@@ -2,7 +2,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { messageNotification } from '../../components/alertMessages/alertMessages';
 
-axios.defaults.baseURL = 'https://power-pulse-6-backend.onrender.com/api';
+// axios.defaults.baseURL = 'https://power-pulse-6-backend.onrender.com/api';
 
 export const getExercises = createAsyncThunk(
   '/exercises',