Redesign header

src/App.scss

@@ -7,31 +7,7 @@ body {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 20px;
 }
-// ::-webkit-scrollbar { /* 1 - скроллбар */
-//   width: 10px;
-//   height: 10px;
-//   background-color: #8e1919;
-//   background-color: darkgrey;
-// }
-// ::-webkit-scrollbar-thumb {
-//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-// }
-/* width */
-// ::-webkit-scrollbar {
-// width: 20px;
-// // height: 20px;
-// }
 
-// ::-webkit-scrollbar-track {
-// box-shadow: inset 0 0 5px #32373b;
-// // border-radius: 2px;
-// }
-
-// /* Handle */
-// ::-webkit-scrollbar-thumb {
-// background: #1d5b78;
-// border-radius: 3px;
-// }
 @import '~antd/dist/antd.css';
 
 .Dropzone {
@@ -62,22 +38,31 @@ body {
 
   opacity: 0.7;
 }
+.Link{
+  color: white;
+   margin-left: 5px;
+
+}
+.Link:hover{
+  text-decoration: underline;
+  color:rgb(241, 69, 155);
+}
 
 .Links:active {
-  transform: scale(1.1); /* Увеличение картинки */
+  transform: scale(1.1);
 }
 .Header {
   display: flex;
   position: fixed;
-  align-items: center;
-  justify-content: center;
   padding: 10px;
   z-index: 4;
   width: 100%;
-  background: #74d2e7;
+  background-color:  rgb(206, 227, 255);
   top: 0;
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
+  0 10px 5px rgba(191, 194, 196, 0.22);
+
 }
 
 .Recomendations {
@@ -138,7 +123,6 @@ main {
   display: flex;
   width: 90%;
   padding: 5px;
-  // margin: 5px;
   border-radius: 20px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 30px;
@@ -146,7 +130,6 @@ main {
 .container {
   padding: 10px;
   margin-top: 20px;
-  // margin: 20px;
 }
 .AboutMe {
   margin-top: 100px;
@@ -159,35 +142,14 @@ main {
   flex-direction: column;
 }
 .Card {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-  // animation: fade .5s linear forwards;
-}
-// @keyframes fade {
-//   0% {
-//     opacity: 0;
-//   }
-//   100% {
-//     opacity: 1;
-//   }
-// }
-
-// .Card:hover {
-//   display: block;
-//   background: rgba(0, 0, 0, 0.5);
-//   cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 
+  0 10px 10px rgba(0, 0, 0, 0.22);
+}
 
-// }
 .Wrapper {
-  // background: rgba(0, 0, 0, 0.5);
-  // opacity: 0;
-  //  padding: 10px;
   margin: 40px;
-  // background: rgb(0, 0, 0);
-
-  // opacity: 1;
+ 
   transition: filter 0.5s;
-  // background: #000;  /* У блока, оборачивающего картинку при наведении будет просвечивать черный фон */
-  // overflow: hidden;  /* Ограничиваем видиую область */
 }
 .Wrapper:hover {
   -webkit-filter: brightness(40%);
@@ -198,8 +160,6 @@ main {
   cursor: pointer;
   font-size: xx-large;
   color: red;
-
-  // background-color: red;
 }
 .Like:active {
   transform: scale(1.1); 
@@ -207,7 +167,6 @@ main {
 .UnLike {
   cursor: pointer;
   font-size: xx-large;
-  // opacity: 1;
   color: white;
   transition: filter 0.3s;
 }
@@ -217,8 +176,6 @@ main {
 
 .MyCarousel {
   display: block;
-  // min-width: 60%;
-  // min-height: 60%;
   object-fit: cover;
   background: #84898987;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
@@ -233,7 +190,6 @@ main {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
-  // justify-content: center;
 }
 .PostFeed {
   border-width: 20;
@@ -245,7 +201,6 @@ main {
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
-  // padding: 20px;
 }
 .InputForm {
   position: fixed;
@@ -299,7 +254,6 @@ main {
   display: flex;
   align-items: center;
   width: 700px;
-  // margin: 20px;
   height: 500px;
   object-fit: cover;
   margin-left: auto;
@@ -375,11 +329,12 @@ main {
   border: 3px solid #fffff7;
   height: 55px;
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  // box-shadow: 0 5px 10px rgba(77, 141, 168, 0.25),
+  //   0 10px 10px rgba(22, 93, 129, 0.22);
 }
 .Avatar:hover {
-  box-shadow: 0 5px 10px rgba(77, 141, 168, 0.25),
-    0 10px 10px rgba(22, 93, 129, 0.22);
+  box-shadow: 0 5px 10px rgba(21, 46, 57, 0.25),
+    0 10px 10px rgba(12, 43, 58, 0.22);
 }
 
 .ResultUserFind {
@@ -392,7 +347,6 @@ main {
 .InputOnePost{
 display: flex;
 width: 40%;
-// margin: 10px 0;
 margin-left: 10px;
 margin-right: 10px;
 }

src/components/EditAvatar.jsx

@@ -25,11 +25,9 @@ const EditAvatar = ({
     fileStatus?.status == 'FULFILLED' &&
       setState({
         ...state,
-        // ...state?.avatar?._id,
         ...fileStatus?.payload,
       })
   }, [fileStatus])
-  // onSaveAvatar(state?._id, myId)&&
   const saveAvatar = () => {
     if (fileStatus)
       onSaveAvatar(state?._id, myId) &&
@@ -50,7 +48,6 @@ const EditAvatar = ({
         {fileStatus?.payload?.url && (
           <Image
             style={{
-              // marginBottom: '30px',
               width: '200px',
               objectFit: 'cover',
               height: '150px',

src/components/HeaderButtons.jsx

@@ -22,20 +22,9 @@ const DefaultLink = ({link, tag}) =>
 }
 export const Feed = () =>
   <DefaultLink link={"/feed"} tag={<HomeOutlined />} />
-{/* <HomeOutlined /> */ }
 export const Explore = () =>
   <DefaultLink link={"/explore"} tag={<CompassOutlined />} />
 
-{/* <CompassOutlined /> */}
-// export const Feed = () => {
-//   return (
-//     <>
-//       <Link to={`/feed`}  onClick={()=>console.log('щас фид')}>
-//         <a className="button"> Feed </a>
-//       </Link>
-//     </>
-//   )
-// } 
 
 export const AddPost = ({ children }) => {
   const [state, setState] = useState(false)
@@ -61,7 +50,7 @@ const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
       onMyPage(my_Id)
   }, [my_Id])
   return (
-    <Link to={`/profile/${_id}`}>
+    <Link to={`/profile/${my_Id}`}>
       {avatar?.url ? (
         <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
       ) : (

src/components/LinkToUser.jsx

@@ -90,7 +90,7 @@ export const LinkWithSubscribe =  ({
         console.log('my_id', myId)}
       
        { myId == _id ?
-          console.log('DDDDDDDDDD') :
+          null :
         <div style={{
             right: '0',
     position: 'absolute', marginRight:'20px'}}>

src/components/Search_Users.jsx

@@ -3,10 +3,10 @@ import { connect } from 'react-redux'
 import { Row, Col,Avatar, Input,  Popover } from 'antd'
 import user from '../materials/user.png'
 import { actionSearchUser } from '../actions'
-import {UserOutlined } from '@ant-design/icons'
+import {UserOutlined,SearchOutlined } from '@ant-design/icons'
 
 import { actionFullProfilePageUser } from '../redux/saga'
-import { LinkWithSubscribe } from './LinkToUser'
+import LinkToUser from './LinkToUser'
 export const ResultUserFind = ({
   userFind = [],
   handleCancel, 
@@ -17,7 +17,7 @@ export const ResultUserFind = ({
     <div className="ResultUserFind">
       {userFind?.map(({ _id, login, avatar }) => (
        
-        <LinkWithSubscribe _id={_id} login={login}
+        <LinkToUser _id={_id} login={login}
         
           avatar={avatar} size={40} padding={'0px'}
           onClick={handleCancel} key={_id} />
@@ -43,6 +43,7 @@ const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
           />
         }
       >
+        
         <Search
           // style={{ width: '25%' }}
           placeholder="Enter search user"
@@ -50,7 +51,7 @@ const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
           prefix={<UserOutlined />}
           enterButton="Search"
           size="large"
-          onSearch={onSearchUser}
+          onSearch={onSearchUser} 
         />
       </Popover>
     </>

src/components/Subscribe.jsx

@@ -19,18 +19,19 @@ const Subscribe = ({
   console.log('check following in subscribe component', checkFollowId)
     return (
       <>
-        <div style={{ display: 'flex' }} onClick={()=>changeSubscribe(followId,checkFollowId)}>
+        <div style={{ display: 'flex', alignItems:'center' }} onClick={()=>changeSubscribe(followId,checkFollowId)}>
           {checkFollowId ?
           
             (
-            <Button
+            <Button style={{width:'120px'}}
               size="large" type="primary"
                danger
             >
               Unsubscribe
             </Button>
           ) : (
-            <Button
+              <Button
+              style={{width:'120px'}}
               size="large"
                 type="primary"
                 primary

src/components/authorization/InitialForm.jsx

@@ -44,7 +44,7 @@ const InitialForm = ({ onLogin, children }) => {
             },
           ]}
           style={{
-            margin: '0 auto',
+            // margin: '0 auto',
 
             // textAlign: 'center',
           }}
@@ -54,15 +54,14 @@ const InitialForm = ({ onLogin, children }) => {
             value={login}
             size="medium"
             onChange={(e) => setLogin(e.target.value)}
+          
           />
-              </Form.Item>
-              <div style={{textAlign:'left', marginLeft:'30px', margin:'10px' }}>
-              
-        <Text type="secondary" style={{color:'rgb(35, 60, 107)'}} >
+
+           <Text type="secondary" style={{color:'rgb(35, 60, 107)', margin:'20px 5px'}} >
           {' '}
           Login must be at least 5 characters{' '}
         </Text>
-</div>
+              </Form.Item>
         <Form.Item
           label="Password"
           name="password"
@@ -73,25 +72,23 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input your password!',
             },
           ]}
-          style={{
-            margin: '0 auto',
+          // style={{
+          //   margin: '0 auto',
 
-            // textAlign: 'center',
-          }}
+          //   // textAlign: 'center',
+          // }}
         >
           <Input
             size="medium"
             type={checked ? 'text' : 'password'}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-          />
-              </Form.Item>
-              <div style={{textAlign:'left', marginLeft:'30px',margin:'10px' }}>
-        <Text type="secondary"  style={{color:'rgb(35, 60, 107)'}}>
+          /> <Text type="secondary"  style={{color:'rgb(35, 60, 107)', margin:'20px 0px'}}>
           Password must contain at least eight characters, include letters,
           numbers and special symbols{' '}
         </Text>
-</div>
+              </Form.Item>
+            
         <Form.Item
           name="checked"
           valuePropName="checked"

src/components/authorization/LoginForm.jsx

@@ -11,8 +11,8 @@ import {
   actionRegisterTypeSaga,
 } from '../../redux/saga'
 import InitialForm from './InitialForm'
-
-const LoginForm = ({ onLogin, children, auth }) => {
+import {actionClearPromiseForName} from '../../actions/index'
+const LoginForm = ({ onLogin, children, auth, onClearPromise }) => {
  
   useEffect(() => {
     if (auth?.status === 'FULFILLED' && auth?.payload === null) {
@@ -22,8 +22,9 @@ const LoginForm = ({ onLogin, children, auth }) => {
           marginTop: '80px',
         },
       })
-
+ && onClearPromise('auth')
     }
+   
   }, [auth])
 
  
@@ -35,11 +36,12 @@ const LoginForm = ({ onLogin, children, auth }) => {
 }
 export const CLoginForm = connect(
     (state) => ({
-      children: `Sign In`,
+      // children: `Sign In`,
       auth: state.promise?.auth,
     }),
     {
       onLogin: actionLoginTypeSaga,
+      onClearPromise:actionClearPromiseForName
   
     },
   )(LoginForm)

src/components/authorization/RegisterForm.jsx

@@ -9,8 +9,8 @@ import {
   actionRegisterTypeSaga,
 } from '../../redux/saga'
 import InitialForm from './InitialForm'
-
-const RegisterForm = ({ onLogin, children, register }) => {
+import { actionClearPromiseForName } from '../../actions'
+const RegisterForm = ({ onLogin, children, register,onClearPromise }) => {
  
     useEffect(() => {
         if (register?.status === 'FULFILLED' && register?.payload === null) {
@@ -20,6 +20,7 @@ const RegisterForm = ({ onLogin, children, register }) => {
               marginTop: '80px',
             },
           })
+          &&onClearPromise("register")
         }
       }, [register])
 
@@ -37,5 +38,7 @@ export const CRegisterForm = connect(
     }),
     {
       onLogin: actionRegisterTypeSaga,
+      onClearPromise:actionClearPromiseForName
+
     },
   )(RegisterForm)

src/components/comment/Reply.jsx

@@ -2,16 +2,16 @@ import React, { useState } from 'react'
 import { Input, Button } from 'antd'
 import { connect } from 'react-redux'
 import { actionAddSubCommentTypeSaga } from '../../actions/typeSaga/postActionSaga'
-import { SpoilerButton } from './SpoilerButton'
+import { ReplyButton } from './SpoilerButton'
 export const CommentAction = ({ commentId }) => {
   return (
     <>
       <div style={{ flexDirection: 'column' }}>
-        <SpoilerButton text={'Reply to'}
+        <ReplyButton text={'Reply to'}
         
           style={{margin:'0 auto', padding:'0 auto'}}>
           <CCommentsForReply  commentId={commentId}  />
-        </SpoilerButton>
+        </ReplyButton>
       </div>
     </>
   )

src/components/comment/SpoilerButton.jsx

@@ -5,16 +5,33 @@ export const SpoilerButton = ({ text, children, style }) => {
     const [opened, setOpened] = useState(false)
     return (
       <>
-         <Text type="secondary" strong
+         <Button
           onClick={() => {
             setOpened(!opened)
           }}
           style={style}
         >
           {text}
-          </Text>
+          </Button>
        
         {opened && children}
       </>
     )
-  }
+}
+export const ReplyButton = ({ text, children, style }) => {
+  const [opened, setOpened] = useState(false)
+  return (
+    <>
+       <Text type="secondary" strong
+        onClick={() => {
+          setOpened(!opened)
+        }}
+        style={style}
+      >
+        {text}
+        </Text>
+     
+      {opened && children}
+    </>
+  )
+}

src/components/like/Like.jsx

@@ -1,21 +1,14 @@
-import { Avatar, Col, Row } from 'antd'
-import { Link } from 'react-router-dom'
 import { HeartOutlined, HeartFilled } from '@ant-design/icons'
-import React, { useState } from 'react'
 import {
   actionChangeLike
 } from '../../redux/saga'
 import { connect } from 'react-redux'
-import LikeList  from './LikeList'
 import ModalLikes from './ModalLikes'
 export const Like = ({
   my_Id,
   postId,
-  addLike,
-  deleteLike,
   likes = [],
   changeLike,
-  children,
 }) => {
   const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
 console.log('like id in component', likeId)
@@ -48,8 +41,6 @@ const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
   />
  
 )
-  {/* <LikeList likes={likes} />
-  </Like>  */}
 export const CLike = connect(
   (state) => ({
     my_Id: state.auth?.payload?.sub?.id || '',

src/pages/header/index.js

@@ -1,4 +1,3 @@
-
 import { CLogout } from '../../components/authorization/LogOut'
 import { CSearch } from '../../components/Search_Users'
 import { Feed, AddPost, Explore, CUser } from '../../components/HeaderButtons'
@@ -6,39 +5,35 @@ import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 
 export const Header = () => {
-    return (
-      <section className="Header">
-        <CLogout className="button" />
-
-       <Row justify="end" align="middle">
-    {/* <Col span={18} push={6}> */}
+  return (
+    <section className="Header">
+      <Col span={12} offset={6}>
+        <Row justify="space-between" align="middle">
           <Col>
+            <CLogout className="button" />
+          </Col>
+          <Col offset={3}>
             <CSearch />
           </Col>
-          
-          {/* <Col span={6} pull={18}> */}
-          <Col>
-          
+          <Col offset={2}>
             <Feed />
           </Col>
           <Col>
-          
             <AddPost />
           </Col>
           <Col>
-          
             <Explore />
           </Col>
           <Col>
-          
             <CUser />
-            </Col>
-  </Row>
-      </section>
-    )
-  }
-  
+          </Col>
+        </Row>
+      </Col>
+    </section>
+  )
+}
+
 const ShowHeader = ({ token }) => (token ? <Header /> : null)
 export const CShowHeader = connect((state) => ({
   token: state.auth?.token,
-}))(ShowHeader)
+}))(ShowHeader)

src/pages/login/index.js

@@ -5,41 +5,8 @@ import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-export const InputForm = ({onLogin, children}) => {
-    return (
-      // <div style={{display:'flex',flexDirection:'row'}}>
-      <div className="InputForm">
-        <Row>
-          <Col span={12}>
-            <img className="LoginPage" src={logo} />
-          </Col>
-  
-          <Col span={12}>
-            <div className="LoginForm">
-              {/* <LoginForm onLogin={onLogin} children={children} /> */}
-              {children === "Register" ?
-                  <h2>
-                 Have an account?
-                  <Link to="/login"
-                  style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
-                </h2>
-                :
-                <h2>
-                  Don't have an account yet?
-                  <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
-                </h2>
-              }
-            </div>
-          </Col>
-        </Row>
-      </div>
-  
-    )
-}
-
 export const LoginPageForm = () => 
 
-        // <div style={{display:'flex',flexDirection:'row'}}>
         <div className="InputForm">
           <Row>
             <Col span={12}>
@@ -52,7 +19,8 @@ export const LoginPageForm = () =>
      
                         <h2>
                     Don't have an account yet?
-                    <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
+            <Link to="/register" className="Link"
+             >Register</Link>
                   </h2>
             
               </div>
@@ -63,7 +31,6 @@ export const LoginPageForm = () =>
 
 export const RegisterPageForm = () => 
 
-        // <div style={{display:'flex',flexDirection:'row'}}>
         <div className="InputForm">
           <Row>
             <Col span={12}>
@@ -76,7 +43,7 @@ export const RegisterPageForm = () =>
                         <h2>
                    Have an account?
                     <Link to="/login"
-                    style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
+                   className="Link">Login</Link>
                   </h2>
                
           </div>

src/pages/profilePage/index.js

@@ -122,12 +122,13 @@ export const PageAboutUser = ({
                     text={'following'}
                   />
                 </div>
-                <h3> nick: {nick == null ? login : nick}</h3>
+                <h3> nick: {nick == null ? login : nick}</h3>  
+              
                 {checkMyId ? 
                    <CEditSetting />
                   : 
                   <CSubscribe />
-                }
+                  }
               </div>
             </Row>
           </section>

src/pages/setting/index.js

@@ -251,7 +251,7 @@ const EditSetting = ({
                   : true
               }
               onClick={saveNewPassword}
-              size="large"
+              size="x-large"
               type="primary"
             >
               Save new password