worstka

shop/src/App.css

@@ -7,6 +7,19 @@
 a {
   text-decoration: none;
   color: rgb(229, 229, 243);
+}
+input {
+  background-color: rgb(229, 229, 243);
+  border-radius: 10%;
+  
+}
+input:hover {
+  background-color: rgb(248, 238, 238);
+}
+
+button:disabled {
+  background-color: rgb(90, 88, 88);
+
 }
 
  .links {
@@ -24,12 +37,14 @@ a {
   background-color: rgb(58, 58, 65);
   display: flex;
   justify-content: space-between;
-  padding-top: 10px;
+  /* padding-top: 10px; */
   height: 50px;
   z-index: 2;
 }
 
 .header .standartMenu {
+  height: 100%;
+  align-items: center;
   width: 50%; 
   list-style-type: none; 
   display: flex;
@@ -60,6 +75,8 @@ a {
 
 
 .rightSide {
+  height: 100%;
+  align-items: center;
   width: 30%;
   display: flex;
   justify-content: space-around;
@@ -77,6 +94,7 @@ a {
   background-size: cover;
   width: 100%;
   min-height: 45em;
+  max-height: 100%;
   margin-top: 50px;
   padding-bottom: 100px;
   display: flex;
@@ -136,6 +154,13 @@ content {
   list-style: none;
   padding: 3%;
 }
+.catalog li {
+  background-color: rgb(58, 58, 65);
+
+  border: 0.01px;
+  border-style: solid;
+  border-color:rgb(229, 229, 243);
+}
 
 
 
@@ -174,6 +199,7 @@ content {
 button {
   margin: 10px;
   width: 100px;
+
   background-color: rgb(58, 58, 65);
   border-radius: 15%;
 }
@@ -181,7 +207,6 @@ button {
 .loginForm button {
   margin: 10px;
   width: 100px;
-  background-color: rgb(58, 58, 65);
   border-radius: 15%;
 }
 
@@ -223,11 +248,20 @@ button {
     display: inline-block;
   }
   .rightSide {
-    width: 60%;
+    font-size: 10px;
+    width: 70%;
     align-items: center;
   }
+  .rightSide button {
+    width: 50px;
+  }
   .loginForm {
     flex-direction: column;
+    
+  }
+  .loginForm input {
+    margin: 5px ;
+    width: 150px;
   }
 
   .catalog {

shop/src/components/MainImg.js

@@ -38,6 +38,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/catalog/:id" component= {({match}) => <CGoodsCategory id = {match.params.id} /> }/>
                         <Route path = "/search/:name" component = {({match}) => <CGoodsSearch name = {match.params.name}/>}/>
                         <Route path = "/login" component = {LoginForm}/>
+                        <Route path = "/profile/:login" component = {YourProfile}/>
                         <Route path="/about" component = {About} exact/>
                         <Route path = "/post" component = {Post} exact/>
                         <Route path = "/contacts" component = {Contacts} />
@@ -51,12 +52,13 @@ const Main = ({className = "MainImg" }) => {
   }
 //   const Id = ({name = "Idishnic"} )=> {
 //    return(<div>{name}</div>) }
-  const MainMag = () => <div>Я тут кароче самый главный страниц</div>
-  const About = () => <div>Мы крутой магазин, бла-бла</div>
-  const NotFound = () => <div>Да пошел ты!</div>
-  const MainCatalog = () => <div>Chose</div>
-  const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
-  const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
+const YourProfile = () => <div>Ну привет, мистер</div>
+const MainMag = () => <div>Я тут кароче самый главный страниц</div>
+const About = () => <div>Мы крутой магазин, бла-бла</div>
+const NotFound = () => <div>Да пошел ты!</div>
+const MainCatalog = () => <div>Chose</div>
+const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
+const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
   
 
 export default Main;

shop/src/components/header.js

@@ -57,7 +57,7 @@ const ToLoginPage = ({login, onLogout}) => {
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
         <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
         </svg>
-        <Link to = {login ? "/yourPage": "/login"} >
+        <Link to = {login ? "/profile/" + login: "/login"} >
             <span className = "link">{login ? login : "Вхід"}</span>
             {login && <button onClick = {onLogout}>Вихід</button>}
         </Link>

shop/src/components/loginOnPage.js

@@ -29,6 +29,7 @@ const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
     const [pass2, setPass2] = useState("");
 
 
+
     return (
         <>
             <div>
@@ -48,7 +49,7 @@ const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
                 ></input>
             </div>
             <div>
-                <button disabled = {isLoggedIn} onClick={() => onLogin(pass1, pass2)}>Login</button>
+                <button disabled = {isLoggedIn} onClick={() => {onLogin(pass1, pass2)}}>Login</button>
                 <CButtonLogout />
             </div>
 
@@ -57,8 +58,7 @@ const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
 };
 
 const CFormLogin = connect((s) => ({isLoggedIn: s.auth.payload}), {
-    onLogin:actionLogin,
-})(PasswordConfirm);
+    onLogin:actionLogin})(PasswordConfirm);
 
 
 

shop/src/reducers/actionLogin.js

@@ -18,7 +18,6 @@ async dispatch => {
 
     let loginData = await dispatch(actionPromise('login', res))
 
-    console.log(loginData);
 
     if (loginData && loginData.data && loginData.data.login){
         dispatch(actionAuthLogin(loginData.data.login))