Update adaptive, edit theme and clean code

src/App.scss

@@ -42,9 +42,11 @@
 }
 
 .Body {
-  // font-size: 20px;
   background: var(--background-color);
 }
+p {
+  color: var(--font-color);
+}
 @import '~antd/dist/antd.css';
 body {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -84,11 +86,9 @@ body {
   width: 100%;
   opacity: 1;
   background-color: var(--background-color-header);
-  // background-color: rgb(206, 227, 255);
   top: 0;
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
-    0 10px 5px rgba(191, 194, 196, 0.22);
+  box-shadow: var(--shadow);
   .Links {
     margin: 0 10px;
     font-size: xx-large;
@@ -105,7 +105,6 @@ body {
     }
 
     .Avatar {
-      // margin-left: 20px;
       width: 50px;
       border: 3px solid #fffff7;
       height: 50px;
@@ -152,20 +151,14 @@ body {
   border: 6px solid #dbebfa;
   padding: 30px;
   border-radius: 25px;
-  // display: 'flex';
   align-items: 'center';
   justify-content: 'center';
-  // margin-top: 100px;
   transition: 0.3s;
-  // margin-bottom: 20px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
   position: absolute;
   top: 20%;
   left: 30%;
-  // margin-right: -50%;
-
-  // transform: translate(-10%, -50%)
 }
 ul {
   margin: 0;
@@ -188,18 +181,19 @@ main {
 }
 .Input {
   display: flex;
-  // padding: 5px;
   margin: 10px;
   width: 80%;
   border-radius: 5px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-size: 20px;
 }
 .container {
   margin: 10px;
   background-color: rgb(84, 132, 222);
   margin-top: 20px;
 }
+.ButtonComment {
+  color: var(--color-comments);
+}
 .ButtonComment:hover {
   cursor: pointer;
 }
@@ -232,13 +226,16 @@ main {
     }
   }
 }
-
+.Tooltip {
+  color: var(--color-tooltip);
+}
 .Card {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   width: 250px;
   height: 250px;
   object-fit: cover;
   position: relative;
+  background-color: #ffffff;
 }
 .EditAvatar {
   display: flex;
@@ -268,7 +265,6 @@ main {
 .Gallery {
   position: absolute;
   z-index: 2;
-  // right: 0;
   width: 50px;
   height: 50px;
   margin: 10px;
@@ -284,20 +280,12 @@ main {
   filter: brightness(50%);
 }
 
-// .Like {
-//   cursor: pointer;
-//   font-size: xx-large;
-//   color: red;
-// }
-// .Like:active {
-//   transform: scale(1.1);
-// }
 .OneLike {
   display: flex;
   .Like {
     cursor: pointer;
     font-size: xx-large;
-    color: black;
+    color: var(--font-color);
     transition: filter 0.3s;
     &:active {
       transform: scale(1.1);
@@ -311,42 +299,14 @@ main {
     padding: 3px;
   }
 }
-// .UnLike:hover {
-//   opacity: 0.6;
-// }
-
-// .MyCarousel {
-//   display: block;
-//   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);
-//   box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
-//   background-color: white;
-//   border: 6px solid #dbebfa;
-//   margin: 0 10%;
-//   border-radius: 5px;
-
-// }
 .Modal {
   background-color: var(--modal-color);
   font-size: medium;
   display: flex;
   flex-direction: column;
   padding: 10px;
-  // margin-bottom: 20px;
 }
 
-// .PostFeed {
-//   border-width: 20;
-//   border-color: #ffffff;
-//   background: #edf8f89e;
-//   border-radius: 5px;
-//   border-style: solid;
-//   margin-bottom: 40px;
-//   transition: 0.3s;
-//   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-// }
-
 .NextArrow {
   font-size: 35px;
   color: var(--arrow-color);
@@ -428,11 +388,9 @@ main {
   height: 100%;
   text-align: center;
   float: right;
-  // background: var(--background-color-start);
   background: var(--background-color-login);
 
   transition: 0.3s;
-  // right: 0;
   text-align: center;
   align-items: center;
   justify-content: center;
@@ -442,24 +400,32 @@ main {
   }
 }
 
-// .LikeStyle {
-//   cursor: pointer;
-//   padding: 3px;
-// }
-
+.SmilePosition {
+  right: 30px;
+}
 .SmileBtn {
   font-size: xx-large;
-  // margin-right: 15px;
+  color: var(--color-smile);
+
+  padding: 0 auto;
+  margin: 0 auto;
+  bottom: 10px;
+  position: relative;
 }
 .Send {
   font-size: xx-large;
   bottom: 5px;
+  color: var(--font-color);
 }
 .SmileBtnFilled {
   font-size: xx-large;
-  // margin-right: 15px;
-  color: #108ee9;
+  color: var(--color-smile);
+  padding: 0 auto;
+  margin: 0 auto;
+  bottom: 10px;
+  position: relative;
 }
+
 .FooterFeed {
   display: flex;
   margin: 15px 0px;
@@ -475,15 +441,15 @@ main {
   display: block;
 
   flex-direction: column;
-  // height: 200px;
 }
 .Scroll {
   display: block;
 
   flex-direction: column;
-  height: 200px;
+  height: 250px;
   overflow-y: scroll;
 }
+
 .ScrollForFeed {
   display: block;
   flex-direction: column;
@@ -517,8 +483,8 @@ main {
   margin-top: 50px;
   .PostsFeed-one {
     border-width: 20;
-    border-color: #ffffff;
-    background: #edf8f89e;
+    border-color: var(--border-color-post);
+    background: var(--background-post);
     border-radius: 5px;
     border-style: solid;
     margin-bottom: 40px;
@@ -530,7 +496,6 @@ main {
   }
 }
 .MyCarousel {
-  // display: block;
   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);
@@ -539,6 +504,7 @@ main {
   border: 6px solid #dbebfa;
   margin: 0 7%;
   border-radius: 5px;
+
   .PostImage {
     display: flex;
     align-items: center;
@@ -584,7 +550,7 @@ main {
   max-height: 500px;
   padding: 15px 0;
   overflow-y: auto;
-  color:black;
+  color: black;
 }
 .Search {
   padding: 10px;
@@ -592,7 +558,6 @@ main {
   position: fixed;
   z-index: 4;
   width: 100%;
-  //  background-color: rgb(206, 227, 255);
   background-color: #ffffff;
   top: 0;
   transition: 0.3s;
@@ -602,10 +567,6 @@ main {
 .ResultUserFindMobile {
   display: flex;
   flex-direction: column;
-  // align-items: center;
-  // max-width: 500px;
-  // min-width: 320px;
-  // max-height: 500px;
   margin-top: 50px;
   padding: 15px 5px;
   overflow: auto;
@@ -619,7 +580,6 @@ main {
 }
 .ProfileAvatar {
   margin-right: 20px;
-
   width: 150px;
   height: 150px;
 }
@@ -630,13 +590,11 @@ main {
 }
 .ModalLink {
   display: flex;
-  padding: 5px;
   flex-direction: row;
-  font-size: 16px;
   font-weight: bold;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  color: var(--font-color);
-
- color: var(--font-color);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--font-color);
+  color: var(--font-color);
   .ModalAvatar {
     width: 50px;
     height: 50px;
@@ -651,9 +609,10 @@ main {
   flex-direction: column;
   font-size: 16px;
   font-weight: bold;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  color: var(--font-color);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--font-color);
 
- color: var(--font-color);
+  color: var(--font-color);
 }
 @media screen and (max-width: 1450px) {
   .Explore {
@@ -681,18 +640,14 @@ main {
     }
     section {
       display: flex;
-      // flex-direction: row;
-      // width: 100%;
       align-items: center;
       text-align: center;
       margin: 0 auto;
     }
   }
   .InputForm {
-    // width: 960px;
     img {
       width: 100%;
-      // height: 50%;
       margin-bottom: 40%;
       margin-left: 20%;
     }
@@ -729,7 +684,7 @@ main {
   }
 }
 
-// /* 768px - 992px */
+/* 768px - 992px */
 @media screen and (max-width: 992px) {
   .OneLike {
     .LikeStyle {
@@ -803,8 +758,6 @@ main {
 @media screen and (max-width: 768px) {
   .Header {
     .Links {
-      // margin: 0 10px;
-      // padding: 5px;
       font-size: x-large;
 
       .Avatar {
@@ -835,15 +788,12 @@ main {
     margin: 0 auto;
     margin: 0 100px;
     padding: 0;
-
-    // height: 90%;
     p {
       font-size: x-large;
       margin: 35px;
     }
     .LoginForm-Form {
       width: 90%;
-      // padding: 10px;
     }
   }
   .Preloader {
@@ -861,24 +811,14 @@ main {
   }
   .Post {
     display: block;
-    // left: 0%;
     top: 20%;
     left: 20%;
-
     padding: 50px;
     margin-right: -50%;
-
-    // right: 0%;
   }
   .MyCarousel {
     margin: 0 10%;
     border-radius: 5px;
-    // .PostImage {
-
-    //   width: 300px;
-    //   height: 300px;
-
-    // }
   }
   .OneLike {
     .LikeStyle {
@@ -888,11 +828,12 @@ main {
 }
 /*320px-576px*/
 @media screen and (max-width: 576px) {
+  .DropzoneText {
+    font-size: 12px;
+  }
   .Modal {
     display: flex;
     flex-direction: column;
-    // margin: 20px;
-    // width: 300px;
     .ModalAvatar {
       width: 30px;
       height: 30px;
@@ -901,7 +842,7 @@ main {
 
   .SmileBtn {
     font-size: x-large;
-    // margin-right: 15px;
+    bottom: 5px;
   }
   .Send {
     font-size: x-large;
@@ -909,8 +850,8 @@ main {
   }
   .SmileBtnFilled {
     font-size: x-large;
-    // margin-right: 15px;
-    color: #108ee9;
+
+    bottom: 5px;
   }
   .NextArrow {
     font-size: 25px;
@@ -946,6 +887,7 @@ main {
     font-size: 10px;
     font-size: small;
   }
+
   .OnePost {
     margin-top: 40px;
   }
@@ -953,18 +895,18 @@ main {
     height: 150px;
   }
   .FooterPost {
-    margin-bottom: 100px;
+    margin-bottom: 80px;
     .CommentsPost {
-      height: 180px;
+      height: 220px;
     }
   }
 
   .OneLike {
     display: flex;
     font-size: 12px;
+    margin: 0 -10px;
     .Like {
       font-size: x-large;
-      color: black;
     }
     .LikeStyle {
       cursor: pointer;
@@ -974,7 +916,6 @@ main {
   }
 
   .MyCarousel {
-    // display: block;
     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);
@@ -984,8 +925,8 @@ main {
     margin: 0 10%;
     border-radius: 5px;
     .PostImage {
-      width: 200px;
-      height: 200px;
+      width: 250px;
+      height: 220px;
     }
   }
   .LoginForm {
@@ -993,7 +934,6 @@ main {
     align-content: center;
     justify-content: center;
     margin: 30px 20px;
-    // padding: 20px;
     height: 90%;
     padding-right: 12px;
 
@@ -1003,9 +943,6 @@ main {
     }
     .LoginForm-Form {
       padding: 10px 20px;
-
-      // width: 80%;
-      // padding: 20px;
     }
   }
   .AboutMe {
@@ -1032,15 +969,13 @@ main {
       }
       margin: 10px;
       .Card {
-        width: 90px;
-        height: 90px;
+        width: 120px;
+        height: 120px;
       }
     }
   }
   .ModalLink {
     font-size: 13px;
-    padding: 10px;
-    margin: 10px;
   }
   .Post {
     display: flex;
@@ -1049,13 +984,18 @@ main {
     top: 0%;
     left: 0%;
     overflow: hidden;
-
     background-color: var(background-color-new-post);
-    // margin-top: 50px;
     margin: 10% 0;
-    // height: 500px;
-    // margin-top: 40px;
-    // margin-bottom: 40px;
+  }
+  .ModalLink {
+    padding: 0px;
+    font-size: 14px;
+    font-weight: 540;
+    color: var(--font-color);
+    .ModalAvatar {
+      width: 40px;
+      height: 40px;
+    }
   }
   .Explore {
     margin-top: 0px;

src/actions/query/likeQuery.js

@@ -62,20 +62,3 @@ export const actionFindLikes = (_id) =>
     ),
   )
 
-//   export const actionGetFindLiked = (_id) => 
-//     actionPromise(
-//       'findLiked',
-//       gql(
-//         ` query LikeFindPost($id:String!) {
-//           LikeFind(query:$id){
-//              owner { _id nick login
-//                 avatar{_id url}
-//                   }
-//                 }
-//             } `,
-//         {
-//           id: JSON.stringify([{ 'post._id': _id }]),
-//         },
-//       ),
-//     )
-

src/components/EditAvatar.jsx

@@ -49,7 +49,6 @@ const EditAvatar = ({
         style={{ width: '200px' }}
         disabled={fileStatus ? false : true}
         onClick={saveAvatar}
-        size="large"
         type="primary"
       >
         Save avatar

src/components/Input.jsx

@@ -7,6 +7,6 @@ export const CustomInput = ({ state, onChangeText, checked }) => (
       placeholder={state || ''}
     onChange={onChangeText}
     type={checked ? 'password':'text'}
-    size="large"
+
   />
   )

src/components/LinkToUser.jsx

@@ -10,7 +10,7 @@ export const LinkToUser = ({
   login,
   size,
   // font = '15px',
-  // padding = '10px',
+  padding = '10px',
   onClick,
   key,
 }) => {
@@ -18,14 +18,14 @@ export const LinkToUser = ({
     <Row style={{ marginBottom:'5px'}}>
       <Link
         to={`/profile/${_id}`}
-        // style={{
-        //   display: 'flex',
-        //   padding: padding,
-        //   flexDirection: 'row',
-        //   fontSize: font,
-        //   fontWeight: 'bold',
-        //   color: 'black'
-        // }}
+        style={{
+          // display: 'flex',
+          padding: padding,
+          // flexDirection: 'row',
+          // fontSize: font,
+          // fontWeight: 'bold',
+          // color: 'black'
+        }}
         className="ModalLink"
         onClick={onClick}
         key={key}

src/components/UploadFiles.jsx

@@ -2,7 +2,7 @@ import { useDropzone } from 'react-dropzone'
 import React, { useEffect } from 'react'
 import { Button,Image } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
-import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
+import "antd/dist/antd.css";
 export function Dropzone({ onLoad }) {
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
   const files = acceptedFiles.map((file) => (
@@ -19,7 +19,6 @@ export function Dropzone({ onLoad }) {
         <input {...getInputProps()} />
         <Button type="dashed" xl={{ size: 'large' }}
           sm={{size:'small'}}
-          // size="large"
           icon={<UploadOutlined />}>
           Drag 'n' drop some files here, or click to select files
         </Button>

src/components/authorization/InitialForm.jsx

@@ -29,8 +29,7 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input login!',
             },
           ]}
-          style={{ marginBottom: '5px',  }}
-          // wrapperCol={{ offset: 3, span: 17 }}
+          style={{ marginBottom: '5px' }}
         >
           <Input
             prefix={<UserOutlined className="site-form-item-icon" />}
@@ -40,10 +39,7 @@ const InitialForm = ({ onLogin, children }) => {
             onChange={(e) => setLogin(e.target.value)}
           />
         </Form.Item>
-        <Form.Item
-          style={{ margin: '0 auto' }}
-          // wrapperCol={{ offset: 3, span: 17 }}
-        >
+        <Form.Item style={{ margin: '0 auto' }}>
           <p> * Login must be at least 5 characters </p>
         </Form.Item>
         <Form.Item
@@ -56,7 +52,6 @@ const InitialForm = ({ onLogin, children }) => {
             },
           ]}
           style={{ padding: '0 auto', marginBottom: '5px' }}
-          // wrapperCol={{ offset: 3, span: 17 }}
         >
           <Input
             prefix={<LockOutlined className="site-form-item-icon" />}
@@ -67,17 +62,13 @@ const InitialForm = ({ onLogin, children }) => {
             onChange={(e) => setPassword(e.target.value)}
           />
         </Form.Item>
-        <Form.Item
-          style={{ margin: '0 auto' }}
-          // wrapperCol={{ offset: 3, span: 17 }}
-        >
+        <Form.Item style={{ margin: '0 auto' }}>
           <p>* Use a combination of 8 or more letters, numbers, and symbols</p>
         </Form.Item>
 
         <Form.Item
           name="checked"
           valuePropName="checked"
-          // wrapperCol={{ offset: 0 }}
           style={{ margin: '10px 0px' }}
         >
           <Checkbox
@@ -91,9 +82,7 @@ const InitialForm = ({ onLogin, children }) => {
           </Checkbox>
         </Form.Item>
 
-        <Form.Item
-          // wrapperCol={{ offset: 3, span: 17 }}
-        >
+        <Form.Item>
           <Button
             size="large"
             type="primary"

src/components/buttons/EditPostButton.jsx

@@ -7,11 +7,10 @@ export const EditMyPostButton = ({ _id }) => {
       <Link to={`/edit/post/${_id}`}>
         <Button
           style={{
-            // marginLeft: '200px',
-            // marginTop: '10px',
             width: '100px',
           }}
-          size="large"
+          xl={{ size: 'large' }}
+          xs={{ size: 'small' }}
           type="primary"
         >
           Edit Post

src/components/buttons/HeaderButtons.jsx

@@ -10,7 +10,7 @@ import {
   CompassOutlined,
   PlusSquareOutlined,
   ImportOutlined,
-  SearchOutlined
+  SearchOutlined,
 } from '@ant-design/icons'
 import React, { useEffect, useState } from 'react'
 const DefaultLink = ({ link, tag }) => {
@@ -20,8 +20,7 @@ const DefaultLink = ({ link, tag }) => {
     </Link>
   )
 }
-export const Feed = () =>
-  <DefaultLink link={'/feed'}  tag={<HomeOutlined />} />
+export const Feed = () => <DefaultLink link={'/feed'} tag={<HomeOutlined />} />
 export const Explore = () => (
   <DefaultLink link={'/explore'} tag={<CompassOutlined />} />
 )
@@ -29,7 +28,6 @@ export const SearchMobile = () => (
   <DefaultLink link={'/search'} tag={<SearchOutlined />} />
 )
 
-
 export const AddPost = ({ children }) => {
   const [state, setState] = useState(false)
 
@@ -51,15 +49,11 @@ const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
     if (my_Id) onMyPage(my_Id)
   }, [my_Id])
   return (
-    <Link to={`/profile/${my_Id}`} className="Links" >
+    <Link to={`/profile/${my_Id}`} className="Links">
       {avatar?.url ? (
-        <Avatar src={backendURL + '/' + avatar?.url}
-         xl={{size:50 }} 
-          className="Avatar" />
+        <Avatar src={backendURL + '/' + avatar?.url} className="Avatar" />
       ) : (
-          <Avatar src={user}
-            // size={50}
-            className="Avatar" />
+        <Avatar src={user} className="Avatar" />
       )}
     </Link>
   )
@@ -72,4 +66,3 @@ export const CUser = connect(
   }),
   { onMyPage: actionFullProfilePageUserTypeSaga },
 )(User)
-

src/components/comment/AddComment.jsx

@@ -3,9 +3,10 @@ import 'emoji-mart/css/emoji-mart.css'
 import React, { useState } from 'react'
 import { Input, Col, Button } from 'antd'
 import { SmileOutlined, SmileFilled, SendOutlined } from '@ant-design/icons'
-import { Link } from 'react-router-dom'
+import styles from '../../index.css'
 
-const AddComment = ({ addComment, postId, style, width }) => {
+console.log('styles', styles)
+const AddComment = ({ addComment, postId, style, className, width }) => {
   const [text, setComment] = useState('')
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const handleOK = () => setShowEmojiPicker(!showEmojiPicker)
@@ -15,7 +16,7 @@ const AddComment = ({ addComment, postId, style, width }) => {
       {showEmojiPicker && (
         <Picker
           style={style}
-          theme="light"
+          theme={localStorage.theme}
           native={true}
           showPreview={false}
           showSkinTones={false}
@@ -33,11 +34,6 @@ const AddComment = ({ addComment, postId, style, width }) => {
         <Input
           style={{
             display: 'flex',
-            // display: 'flex',
-            // width,
-            // margin: '5px 10px',
-            // padding:'5px'
-            // width:'100%'
           }}
           xl={{ size: 'large' }}
           xs={{ size: 'small' }}
@@ -56,15 +52,19 @@ const AddComment = ({ addComment, postId, style, width }) => {
         xs={{ offset: 1, span: 1 }}
       >
         {!showEmojiPicker ? (
-          <SmileOutlined className="SmileBtn" onClick={handleOK} />
+          <span className="SmileBtn">
+            <SmileOutlined onClick={handleOK} />
+          </span>
         ) : (
-          <SmileFilled className="SmileBtnFilled" onClick={handleOK} />
+          <span className="SmileBtnFilled">
+            <SmileFilled onClick={handleOK} />
+          </span>
         )}
       </Col>
       <Col
         xl={{ offset: 1, span: 1 }}
         sm={{ offset: 1, span: 1 }}
-        xs={{ offset: 1 }}
+        xs={{ offset: 1, span: 1 }}
       >
         <Button
           type="text"
@@ -76,21 +76,6 @@ const AddComment = ({ addComment, postId, style, width }) => {
         >
           <SendOutlined className="Send" type="primary" />
         </Button>
-        {/* <Button
-          
-          xl={{ size: 'large' }}
-          xs={{ size: 'small' }}
-
-        disabled={text.length < 1}
-        type="primary"
-        onClick={(e) => {
-          addComment(postId, text) &&
-          setComment((e.target.value = ''))
-        }}
-      >
-        {' '}
-        Publish{' '}
-        </Button> */}
       </Col>
     </>
   )

src/components/comment/Comment.jsx

@@ -54,14 +54,14 @@ export const Comments = ({
         </ViewComment>
         : 
      comments?.length && (
-            <Text className='ButtonComment'
+            <p className='ButtonComment'
               type="secondary"
               strong
               style={{ margin: '0 auto' }}
               onClick={() => findSubComment(parentId)}
             >
               {/* __ View answers ({comments.length}) */}
-            </Text>
+            </p>
           )}
       
       

src/components/comment/CommentAuthor.jsx

@@ -1,7 +1,8 @@
 import { Link } from 'react-router-dom'
 
-const CommentAuthor = ({ owner }) =>
-    <Link to={`/profile/${owner?._id}`} style={{fontWeight:'bold',fontSize:'14px', color:'black'}}>
-{owner?.login || 'Anon'}
-    </Link>
-export default CommentAuthor
+const CommentAuthor = ({ owner }) => (
+  <Link to={`/profile/${owner?._id}`}>
+    <p className="ModalLink">{owner?.login || 'Anon'}</p>
+  </Link>
+)
+export default CommentAuthor

src/components/comment/CommentDate.jsx

@@ -2,15 +2,14 @@ import { Tooltip } from 'antd'
 import moment from 'moment'
 
 export const CommentDate = ({ createdAt }) => {
-    return (
-      <Tooltip
-        color={'#108ee9'}
-        style={{ paddingLeft: '10px' }}
-        title={moment(new Date(+createdAt)).format('lll')}
-      >
-        {moment(new Date(+createdAt))
-          .startOf()
-          .fromNow()}
-      </Tooltip>
-    )
-  }
+  return (
+    <Tooltip
+      className="Tooltip"
+      title={moment(new Date(+createdAt)).format('lll')}
+    >
+      {moment(new Date(+createdAt))
+        .startOf()
+        .fromNow()}
+    </Tooltip>
+  )
+}

src/components/comment/Reply.jsx

@@ -1,23 +1,26 @@
 import React, { useState } from 'react'
 import { Input, Button } from 'antd'
 import { connect } from 'react-redux'
+import { SendOutlined } from '@ant-design/icons'
+
 import { actionAddSubCommentTypeSaga } from '../../actions/typeSaga/postTypesSaga'
 import { ReplyButton } from './SpoilerButton'
 export const CommentAction = ({ commentId }) => {
   return (
     <>
       <div style={{ flexDirection: 'column' }}>
-        <ReplyButton text={'Reply to'}
-        
-          style={{margin:'0 auto', padding:'0 auto'}}>
-          <CCommentsForReply  commentId={commentId}  />
+        <ReplyButton
+          text={'Reply to'}
+          style={{ margin: '0 auto', padding: '0 auto' }}
+        >
+          <CCommentsForReply commentId={commentId} />
         </ReplyButton>
       </div>
     </>
   )
 }
 
-const CommentForReply = ({ addCommentReply, commentId}) => {
+const CommentForReply = ({ addCommentReply, commentId }) => {
   const [newResult, setComment] = useState('')
 
   console.log('comment', newResult)
@@ -27,8 +30,7 @@ const CommentForReply = ({ addCommentReply, commentId}) => {
         style={{
           display: 'flex',
           flexDirection: 'row',
-          width: '100%',
-          padding: '5px',
+          margin: '5px',
           marginLeft: '10px',
         }}
       >
@@ -40,23 +42,21 @@ const CommentForReply = ({ addCommentReply, commentId}) => {
           }}
         />
         <Button
+          type="text"
+          className="Send"
           disabled={newResult.length < 1}
-          type="primary"
-          onClick={(e) =>
+          onClick={(e) => {
             addCommentReply(commentId, newResult) &&
-            setComment((e.target.value = ''))
-          }
+              setComment((e.target.value = ''))
+          }}
         >
-          {' '}
-          Publish{' '}
+          <SendOutlined className="Send" type="primary" />
         </Button>
       </div>
     </>
   )
 }
 
-const CCommentsForReply = connect(null,
-  {
-    addCommentReply: actionAddSubCommentTypeSaga,
-  },
-)(CommentForReply)
+const CCommentsForReply = connect(null, {
+  addCommentReply: actionAddSubCommentTypeSaga,
+})(CommentForReply)

src/components/comment/SpoilerButton.jsx

@@ -1,15 +1,9 @@
 import React, { useState } from 'react'
-import { Button, Typography } from 'antd'
-const { Text } = Typography
-const { Title } = Typography
-
-
+import { Button } from 'antd'
 export const SpoilerButton = ({ text, children, style }) => {
   const [opened, setOpened] = useState(false)
   return (
     <>
-      
-      
       <Button
         onClick={() => {
           setOpened(!opened)
@@ -27,8 +21,7 @@ export const ReplyButton = ({ text, children, style }) => {
   const [opened, setOpened] = useState(false)
   return (
     <>
-      <Text
-        type="secondary"
+      <p
         strong
         className="ButtonComment"
         onClick={() => {
@@ -37,32 +30,28 @@ export const ReplyButton = ({ text, children, style }) => {
         style={style}
       >
         {text}
-      </Text>
+      </p>
       {opened && children}
     </>
   )
 }
-export const ViewComment = ({ text, count, children, style,textClosed }) => {
+export const ViewComment = ({ text, count, children, style, textClosed }) => {
   const [opened, setOpened] = useState(false)
   return (
     <>
-      <Text
-        type="secondary"
+      <p
         strong
-        // level={1}
-        style={{fontSize:'14px'}}
         className="ButtonComment"
         onClick={() => {
           setOpened(!opened)
         }}
-        // style={style}
       >
-       { !opened ? text + count + ' comments'  : textClosed}
-
-      </Text>
-      {<div className={opened && children ? 'ScrollForFeed' : 'WithOutScroll'}>
-        {opened && children}
-      </div>
+        {!opened ? text + count + ' comments' : textClosed}
+      </p>
+      {
+        <div className={opened && children ? 'ScrollForFeed' : 'WithOutScroll'}>
+          {opened && children}
+        </div>
       }
     </>
   )

src/components/like/ModalLikes.jsx

@@ -15,18 +15,18 @@ const ModalLikes = ({ likes, myId }) => {
         lg={{ span: 10, offset: 0 }}
         
        sm={{ offset: 0, span: 10 }}
-       xs={{ offset: 1, span: 20 }}
+       xs={{ offset: 0, span: 5 }}
       >
       {likes.length ?
         (
-            <h3 className="LikeStyle"
+            <p className="LikeStyle"
               style={{ margin: '0 auto' }}
               onClick={showModal}>
           {' '}
           {likes.length} likes
-        </h3>
+        </p>
       ) : (
-        <h3 className="LikeStyle"> 0 likes</h3>
+        <p className="LikeStyle"> 0 likes</p>
       )}
 
       <ConstructorModal

src/components/post/Carousel.jsx

@@ -21,7 +21,7 @@ const SamplePrevArrow = (props) => {
   )
 }
 
-export const MyCarousel = ({ images = [],carouselWidth,carouselHeight }) => {
+export const MyCarousel = ({ images = [], carouselWidth, carouselHeight }) => {
   return (
     <>
       <div className="MyCarousel">
@@ -36,18 +36,17 @@ export const MyCarousel = ({ images = [],carouselWidth,carouselHeight }) => {
               (i, index) =>
                 i?.url && (
                   <div key={index}>
-                    <img key={index} className="PostImage"
-                      // style={{width:carouselWidth, height: carouselHeight }}
-                      src={backendURL+'/' + i?.url} />
+                    <img
+                      key={index}
+                      className="PostImage"
+                      src={backendURL + '/' + i?.url}
+                    />
                   </div>
                 ),
             )
           ) : (
             <div>
-                <img className="PostImage"
-                      style={{width:carouselWidth, height: carouselHeight }}
-                  
-                  src={defaultPhoto} />
+              <img className="PostImage" src={defaultPhoto} />
             </div>
           )}
         </Carousel>

src/components/post/PostCard.jsx

@@ -14,11 +14,13 @@ export const Card = ({ post }) => (
         </div>
       ) : post?.images && post?.images[0] && post.images[0]?.url ? (
         <div className="Wrapper">
-          <img className="Card" src={backendURL+'/' + post.images[0].url} />
+            <img className="Card" src={backendURL + '/'
+              + post.images[0].url} />
         </div>
       ) : (
         <div className="Wrapper">
-          <img className="Card" style={{background:'white'}} src={defaultPhoto} />
+              <img className="Card"
+                src={defaultPhoto} />
         </div>
       )}
     </Link>

src/components/toggle/index.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import styles from './index.module.scss'
-
+  console.log('styles ttt, ',styles)
 const Toggle = ({ value, onChange }) => (
+
     <label className={styles.switch}
         htmlFor="toggler">
     <input
@@ -10,7 +11,7 @@ const Toggle = ({ value, onChange }) => (
       onClick={onChange}
       checked={value}
             readOnly
-            className='toggler'
+     
     />
     <span className={styles.slider} />
     <span className={styles.wave} />

src/components/toggle/index.module.scss

@@ -1,6 +1,5 @@
 input {
   display: none;
-  // margin-bottom: 10px;
 }
 .slider {
   position: absolute;
@@ -39,30 +38,23 @@ input {
   position: absolute;
   width: 80px;
   height: 30px;
-    bottom: -30px;
+  bottom: -30px;
   margin-bottom: 15px;
   border-radius: 50px;
   transition: all 1.4s;
 }
 input:checked + .slider {
   background-color: transparent;
-  //
-
   &:before,
   &:after {
     transform: translateX(50px);
   }
 }
 input:checked ~ .wave {
-  // display: block;
-  // bottom: -30px;
-  // margin-bottom: 20px;
-
   background-color: #a5c1d1;
 }
 
 @media screen and (max-width: 768px) {
-
   .slider {
     position: absolute;
     width: 50px;
@@ -71,7 +63,7 @@ input:checked ~ .wave {
     &:before,
     &:after {
       content: '';
-  
+
       position: absolute;
       left: 5px;
       bottom: 5px;
@@ -88,12 +80,9 @@ input:checked ~ .wave {
   }
   input:checked + .slider {
     background-color: transparent;
-    //
-  
     &:before,
     &:after {
       transform: translateX(20px);
     }
   }
-
 }

src/contexts/ThemeContext.js

@@ -4,5 +4,4 @@ export const themes = {
     dark: 'dark',
     light: 'light',
   }
-  
   export const ThemeContext = React.createContext({})

src/helpers/index.js

@@ -45,8 +45,12 @@ export function Dropzone({ onLoad }) {
     <section className="container">
       <div {...getRootProps({ className: 'Dropzone' })}>
         <input {...getInputProps()} />
-        <Button type="default" size="medium" icon={<UploadOutlined />}>
-          Drag 'n' drop some files here, or click to select files
+        <Button type="default"  icon={<UploadOutlined />}>
+          <span className='DropzoneText' >
+            
+       
+            Drag 'n' drop some files here, or click to select files
+          </span>
         </Button>
       </div>
     </section>

src/index.css

@@ -1,4 +1,4 @@
- body {
+body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -12,11 +12,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 } */
-html[data-theme='light']{ 
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *:before,
+html.theme-transition *:after {
+  transition: all 750ms !important;
+  transition-delay: 0 !important;
+}
+
+html[data-theme='light'] {
+  --color-comments: rgb(74, 73, 73);
+  --color-tooltip: #108ee9;
   --modal-color: #fafafa;
-  --arrow-color: rgb(84, 132, 222);
-   --background-color: #fafafa;
-   --background-color-new-post: #fafafa;
+  --color-smile: #108ee9;
+  --shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
+    0 10px 5px rgba(191, 194, 196, 0.22);
+
+  --arrow-color: rgb(68, 89, 129);
+  --background-color: #fafafa;
+  --background-color-new-post: #fafafa;
 
   --background-color-header: rgb(206, 227, 255);
   --background-color-login: linear-gradient(
@@ -25,20 +39,34 @@ html[data-theme='light']{
     rgba(92, 168, 221, 1) 51%,
     rgba(29, 253, 182, 1) 100%
   );
-  --font-color:black;
-  --font-color-hover:white;
+  --font-color: black;
+  --font-color-hover: white;
 
+  --background-post: #edf8f8b9;
+  --border-color-post: #fff;
 }
-html[data-theme='dark']{
-  --modal-color: rgb(70, 87, 122);
+html[data-theme='dark'] {
+  --color-comments: rgb(228, 220, 220);
+
+  --shadow: 0 5px 10px rgba(137, 151, 157, 0.111),
+    0 10px 5px rgba(87, 91, 94, 0.148);
 
+  --modal-color: rgb(70, 87, 122);
+  --color-tooltip: #aecbe1;
+  --color-smile: #aecbe1;
   --background-color-new-post: #a6bce2;
-  --arrow-color: rgb(34, 56, 98);
+  --arrow-color: rgb(196, 206, 226);
   --background-color-header: rgb(46, 55, 67);
---background-color-login:linear-gradient(90deg, rgba(37,40,84,1) 0%, rgba(78,31,128,1) 42%, rgba(40,145,142,1) 100%);
- --background-color: #2b3e51;
- --font-color:white;
- --font-color-hover:black;
+  --background-color-login: linear-gradient(
+    90deg,
+    rgba(37, 40, 84, 1) 0%,
+    rgba(78, 31, 128, 1) 42%,
+    rgba(40, 145, 142, 1) 100%
+  );
+  --background-color: #354d66;
+  --font-color: white;
+  --font-color-hover: black;
+  --background-post: #90a6bdb9;
 
+  --border-color-post: #233243;
 }
-

src/pages/explorePosts/index.js

@@ -52,7 +52,7 @@ const ExplorePosts = ({
           lg={{ offset: 2, span: 20 }}
           md={{ offset: 2, span: 20 }}
           sm={{ offset: 2, span: 22 }}
-          xs={{offset:1, span: 22 }}
+          xs={{offset:2, span: 22 }}
           // span={18} offset={4}
         
         >

src/pages/feedPosts/index.js

@@ -99,8 +99,7 @@ const MyPostFeed = ({
             
                   <MyCarousel
                     images={images}
-                    carouselWidth={'600px'}
-                    carouselHeight={'400px'}
+                   
                     />
                   </Col>
                   <div style={{ margin: '0 5%' }}>
@@ -119,12 +118,16 @@ const MyPostFeed = ({
                           addComment={addComment}
                           postId={_id}
                           style={{
-                            position: 'absolute',
-                            // bottom: '70px',
-                            // zIndex: '100',
-                            // height:'30px'
+                            position: 'absolute', width: '250px',
+                            bottom: '80px', right: '0px'
                           }}
-                          // width={'300px'}
+                          // xs={{
+                          //   style: {
+                          //     position: 'absolute',
+                          //     bottom: '100px', right: '30px'
+                          //   }
+                          // }}
+                      
                         />
                       </div>
                     </div>

src/pages/header/index.js

@@ -9,39 +9,30 @@ import {
 } from '../../components/buttons/HeaderButtons'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
-import  Root  from '../../components/rootTheme'
+import Root from '../../components/rootTheme'
 import ThemeProvider from '../../providers/ThemeProvider'
 export const Header = () => {
   return (
     <section className="Header">
-
-
       <Col
         xl={{ offset: 3, span: 17 }}
         lg={{ offset: 4, span: 18 }}
         md={{ offset: 3, span: 17 }}
         sm={{ offset: 3, span: 15 }}
         xs={{ offset: 2, span: 17 }}
-        // span={12} offset={6}
       >
         <Row justify="space-between" align="middle">
           <Col
-            xl={{span:2, style:{marginBottom:'15px'}}}
+            xl={{ span: 2, style: { marginBottom: '15px' } }}
             md={{ span: 2 }}
-           sm={{ span: 2 }}
+            sm={{ span: 2 }}
             xs={{ span: 2 }}
-         
           >
-         
-          <ThemeProvider>
-            <Root />
+            <ThemeProvider>
+              <Root />
             </ThemeProvider>
           </Col>
-          <Col
-           md={{ span: 1 }}
-           sm={{ span: 1 }}
-           xs={{ span: 1 }}
-          >
+          <Col md={{ span: 1 }} sm={{ span: 1 }} xs={{ span: 1 }}>
             <CLogout />
           </Col>
           <Col
@@ -50,7 +41,6 @@ export const Header = () => {
             md={{ span: 0 }}
             sm={{ span: 0 }}
             xs={{ span: 0 }}
-            // offset={3}
           >
             <CSearch />
           </Col>
@@ -60,8 +50,6 @@ export const Header = () => {
             md={{ span: 1 }}
             sm={{ span: 1 }}
             xs={{ span: 1 }}
-
-            // offset={2}
           >
             <Feed />
           </Col>
@@ -72,7 +60,6 @@ export const Header = () => {
             md={{ span: 1 }}
             sm={{ span: 1 }}
             xs={{ span: 1 }}
-            // offset={3}
           >
             <SearchMobile />
           </Col>

src/pages/login/index.js

@@ -3,43 +3,35 @@ import { CLoginForm } from '../../components/authorization/LoginForm'
 import logo from '../../materials/login.png'
 import { Row, Col } from 'antd'
 import { Link } from 'react-router-dom'
-import { Typography } from 'antd'
-const { Title } = Typography
 export const LoginPageForm = () => (
   <div className="InputForm">
     <Row gutter={[16, 16]}>
       <Col
-        // span={12}
         xl={{ span: 10 }}
         lg={{ span: 8 }}
         md={{ span: 0 }}
         sm={{ span: 0 }}
-        xs={{span: 0 }}
+        xs={{ span: 0 }}
       >
-        {/* xl={4} */}
-
         <img src={logo} />
       </Col>
 
       <Col
-        xl={{ offset:0, span: 14 }}
-        lg={{ offset:0, span: 16 }}
-        md={{ offset:2, span: 22 }}
-        sm={{offset:2, span: 22  }}
-        xs={{offset:1, span: 22  }}
-
+        xl={{ offset: 0, span: 14 }}
+        lg={{ offset: 0, span: 16 }}
+        md={{ offset: 2, span: 22 }}
+        sm={{ offset: 2, span: 22 }}
+        xs={{ offset: 1, span: 22 }}
       >
         <div className="LoginForm">
-         
-            <p
-              style={{
-                color: 'rgb(224, 236, 244)'
-                // width: '100%'float: 'left',
-              }}
-            >
-              Welcome to Memogram!{' '}
-            </p>
-         
+          <p
+            style={{
+              color: 'rgb(224, 236, 244)',
+            }}
+          >
+            Welcome to Memogram!{' '}
+          </p>
+
           <CLoginForm />
 
           <p>
@@ -57,34 +49,31 @@ export const LoginPageForm = () => (
 export const RegisterPageForm = () => (
   <div className="InputForm">
     <Row>
-      <Col   xl={{ span: 10 }}
+      <Col
+        xl={{ span: 10 }}
         lg={{ span: 8 }}
         md={{ span: 0 }}
         sm={{ span: 0 }}
-        xs={{span: 0 }}
-      
+        xs={{ span: 0 }}
       >
-        <img src={logo}
-        
-        />
+        <img src={logo} />
       </Col>
 
-      <Col xl={{ offset:0, span: 14 }}
-        lg={{ offset:0, span: 16 }}
-        md={{ offset:2, span: 22 }}
-        sm={{offset:2, span: 22}}
-        xs={{offset:1, span: 22  }}
-
+      <Col
+        xl={{ offset: 0, span: 14 }}
+        lg={{ offset: 0, span: 16 }}
+        md={{ offset: 2, span: 22 }}
+        sm={{ offset: 2, span: 22 }}
+        xs={{ offset: 1, span: 22 }}
       >
         <div className="LoginForm">
-            <p
-              style={{
-                color: 'rgb(224, 236, 244)'
-                // width: '100%'float: 'left',
-              }}
-            >
-              Welcome to Memogram!{' '}
-            </p>
+          <p
+            style={{
+              color: 'rgb(224, 236, 244)',
+            }}
+          >
+            Welcome to Memogram!{' '}
+          </p>
           <CRegisterForm />
           <p>
             Have an account?

src/pages/onePost/index.js

@@ -39,8 +39,6 @@ export const PagePost = ({
         <Col
           xl={{ offset: 1, span: 13 }}
           lg={{ offset: 2, span: 18 }}
-          // md={{ offset: 3, span: 17 }}
-          // sm={{ offset: 3, span: 15 }}
           xs={{ offset: 2, span: 20 }}
         >
           <div className="OnePost">
@@ -59,10 +57,10 @@ export const PagePost = ({
               carouselWidth={'750px'}
               carouselHeight={'500px'}
             />
-            <h3 style={{ textAlign: 'center', padding: '10px' }}>
+            <p style={{ textAlign: 'center', padding: '10px' }}>
               Created Post:{' '}
               {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
-            </h3>
+            </p>
           </div>
         </Col>
         <Col
@@ -83,13 +81,11 @@ export const PagePost = ({
                   avatar={onePost?.owner?.avatar}
                   key={_id}
                   size={50}
-                  padding={'0px'}
+                  padding={'10px 5px'}
                 />
-                {/* <Row span={1}> */}
                 {my_Id === onePost?.owner?._id && (
                   <EditMyPostButton _id={_id} />
                 )}
-                {/* </Row> */}
               </Row>
             </Col>
           </div>
@@ -107,25 +103,21 @@ export const PagePost = ({
               <Col
                 xl={{ span: 4, offset: 1 }}
                 lg={{ span: 3, offset: 1 }}
-                xs={{ offset: 1, span: 3 }}
+                xs={{ offset: 0, span: 2 }}
               >
-                {/* <div style={{ display: 'flex', margin: '20px 0px' }}> */}
                 <CLike likes={onePost?.likes} postId={onePost?._id} />
               </Col>
-              {/* <Col xl={{span:10,offset:1}}> */}
 
               <AddComment
                 addComment={addComment}
                 style={{
                   position: 'absolute',
-                  // bottom: '120px',
-                  // right: '30px',
+                  bottom: '120px',
+                  right: '30px',
+                  width: '250px',
                 }}
-                // width={'40%'}
                 postId={onePost?._id}
               />
-              {/* </Col> */}
-              {/* </div> */}
             </Row>
           </div>
         </Col>

src/pages/profilePage/index.js

@@ -68,7 +68,8 @@ export const PageAboutUser = ({
   return (
     <>
       <Row>
-        <Col xl={{ span: 12, offset: 6 }}
+        <Col
+          xl={{ span: 12, offset: 6 }}
           md={{ span: 20, offset: 3 }}
           sm={{ offset: 3, span: 15 }}
           xs={{ offset: 2, span: 20 }}
@@ -77,18 +78,18 @@ export const PageAboutUser = ({
             <Row>
               {avatar?.url ? (
                 <Avatar
-                  
-        className='ProfileAvatar'
-                  src={backendURL+'/' + avatar?.url}
+                  className="ProfileAvatar"
+                  src={backendURL + '/' + avatar?.url}
                 />
               ) : (
-                <Avatar
-                className='ProfileAvatar'
-                  src={user}
-                />
+                <Avatar className="ProfileAvatar" src={user} />
               )}
               <div className="Info">
-                {login ? <p className='Login'> {login}</p> : <p className='Login'> {'Anon'}</p>}
+                {login ? (
+                  <p className="Login"> {login}</p>
+                ) : (
+                  <p className="Login"> {'Anon'}</p>
+                )}
 
                 <p>
                   Created Account:{' '}
@@ -131,17 +132,14 @@ export const PageAboutUser = ({
         </Col>
       </Row>
       <Row>
-
-        <Col xl={{ span: 17, offset: 4 }}
+        <Col
+          xl={{ span: 17, offset: 4 }}
           lg={{ offset: 4, span: 20 }}
-          md={{ offset: 4, span: 20}}
+          md={{ offset: 4, span: 20 }}
           sm={{ offset: 3, span: 15 }}
-          xs={{ offset: 0, span: 24 }}
-        //  md={{ span: 1 }}
+          xs={{ offset: 1, span: 21 }}
         >
-          <div
-            className='ProfilePage'
-          >
+          <div className="ProfilePage">
             {(allPosts || [])?.map((item) => (
               <Card post={item} onPost={onPost} />
             ))}

src/pages/search/index.js

@@ -28,7 +28,7 @@ export const ResultUserFind = ({ userFind, handleCancel }) => {
         />
       ))
         :
-        <p style={{fontSize:'16px', textAlign:'center'}}> Not found by request </p>
+        <p style={{fontSize:'16px',textAlign:'center'}}> Not found by request </p>
     }
     </div>
   )

src/pages/setting/index.js

@@ -14,8 +14,6 @@ export const EditAccount = ({ showModalEdit }) => {
     <Button
       type="primary"
       style={{
-        fontWeight: '600',
-        fontSize: '15px',
         transition: '.3s',
         boxShadow: '0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
       }}
@@ -71,7 +69,7 @@ const EditSetting = ({
     })
   const saveChange = () => {
     onSaveUserUpsert(state, myId) &&
-      message.success(`Successfully saved changed new login!`) &&
+      message.success(`Successfully saved changed !`) &&
       setIsModalVisibleEdit(false)
   }
   const saveNewPassword = () => {
@@ -97,160 +95,157 @@ const EditSetting = ({
         setIsModalVisible={setIsModalVisibleEdit}
         handleCancel={handleCancelEdit}
       >
-        <div className='ModalEdit'> 
-        <p> Edit avatar </p>
-          <SpoilerButton text={'Change avatar'}
-            style={{ width: '100%' }}>
-            <CEditAvatar
-              setIsModalVisibleEdit={setIsModalVisibleEdit} />
-        </SpoilerButton>
-        <p> Edit login </p>
-          <SpoilerButton text={'Change login'}
-            style={{ width: '100%' }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
-            <CustomInput
-              state={state?.login || ''}
-              onChangeText={onChangeLogin}
-            />
-            <Button
-              size="large"
-              style={{ margin: '10px' }}
-              onClick={saveChange}
-              disabled={state?.login && state?.login.length >= 5 ? false : true}
-              type="primary"
+        <div className="ModalEdit">
+          <p> Edit avatar </p>
+          <SpoilerButton text={'Change avatar'} style={{ width: '100%' }}>
+            <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
+          </SpoilerButton>
+          <p> Edit login </p>
+          <SpoilerButton text={'Change login'} style={{ width: '100%' }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
             >
-              {' '}
-              Save login{' '}
-            </Button>
+              <CustomInput
+                state={state?.login || ''}
+                onChangeText={onChangeLogin}
+              />
+              <Button
+                style={{ margin: '10px' }}
+                onClick={saveChange}
+                disabled={
+                  state?.login && state?.login.length >= 5 ? false : true
+                }
+                type="primary"
+              >
+                {' '}
+                Save login{' '}
+              </Button>
             </div>
-            
-        </SpoilerButton>
+          </SpoilerButton>
 
-        <p> Edit nick </p>
-        <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
-            <CustomInput
-              state={state?.nick || ''}
-              onChangeText={onChangeNick}
-            />
-            <Button
-              style={{ margin: '10px' }}
-              disabled={state?.nick && state?.nick.length >= 5 ? false : true}
-              onClick={saveChange}
-              size="large"
-              type="primary"
+          <p> Edit nick </p>
+          <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
             >
-              Save nick
-            </Button>
-          </div>
-        </SpoilerButton>
-        <p> Edit password </p>
-          <SpoilerButton text={'Change password'}
-            style={{ width: '100%', marginBottom:'10px' }}>
-          <p> Login</p>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
-            <CustomInput
-              state={changePass?.login}
-              onChangeText={onChangePassLogin}
-              type={true}
-            />
-          </div>
-          <p> Old password</p>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
-            <CustomInput
-              state={changePass?.password}
-              onChangeText={onChangePassPassword}
-              checked={checked1}
-            />
-
-            {checked1 ? (
-              <EyeInvisibleOutlined
-                onClick={() => setChecked1(!checked1)}
-                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
-              />
-            ) : (
-              <EyeOutlined
-                onClick={() => setChecked1(!checked1)}
-                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+              <CustomInput
+                state={state?.nick || ''}
+                onChangeText={onChangeNick}
               />
-            )}
-          </div>
-          <p> New password</p>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
+              <Button
+                style={{ margin: '10px' }}
+                disabled={state?.nick && state?.nick.length >= 5 ? false : true}
+                onClick={saveChange}
+                type="primary"
+              >
+                Save nick
+              </Button>
+            </div>
+          </SpoilerButton>
+          <p> Edit password </p>
+          <SpoilerButton
+            text={'Change password'}
+            style={{ width: '100%', marginBottom: '10px' }}
           >
-            <CustomInput
-              state={changePass?.newPassword || ''}
-              checked={checked2}
-              onChangeText={onChangePassNew}
-            />
-            {checked2 ? (
-              <EyeInvisibleOutlined
-                onClick={() => setChecked2(!checked2)}
-                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+            <p> Login</p>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
+            >
+              <CustomInput
+                state={changePass?.login}
+                onChangeText={onChangePassLogin}
+                type={true}
               />
-            ) : (
-              <EyeOutlined
-                onClick={() => setChecked2(!checked2)}
-                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+            </div>
+            <p> Old password</p>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
+            >
+              <CustomInput
+                state={changePass?.password}
+                onChangeText={onChangePassPassword}
+                checked={checked1}
               />
-            )}
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'column',
-            }}
-          >
-            <Button
-              style={{ margin: '10px' }}
-              disabled={
-                changePass?.login &&
-                changePass?.password &&
-                /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
-                  changePass?.newPassword,
-                )
-                  ? false
-                  : true
-              }
-              onClick={saveNewPassword}
-              size="x-large"
-              type="primary"
+
+              {checked1 ? (
+                <EyeInvisibleOutlined
+                  onClick={() => setChecked1(!checked1)}
+                  style={{ marginLeft: '5px', fontSize: 'x-large' }}
+                />
+              ) : (
+                <EyeOutlined
+                  onClick={() => setChecked1(!checked1)}
+                  style={{ marginLeft: '5px', fontSize: 'x-large' }}
+                />
+              )}
+            </div>
+            <p> New password</p>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
             >
-              Save new password
-            </Button>
-          </div>
+              <CustomInput
+                state={changePass?.newPassword || ''}
+                checked={checked2}
+                onChangeText={onChangePassNew}
+              />
+              {checked2 ? (
+                <EyeInvisibleOutlined
+                  onClick={() => setChecked2(!checked2)}
+                  style={{ marginLeft: '5px', fontSize: 'x-large' }}
+                />
+              ) : (
+                <EyeOutlined
+                  onClick={() => setChecked2(!checked2)}
+                  style={{ marginLeft: '5px', fontSize: 'x-large' }}
+                />
+              )}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+              }}
+            >
+              <Button
+                style={{ margin: '10px' }}
+                disabled={
+                  changePass?.login &&
+                  changePass?.password &&
+                  /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
+                    changePass?.newPassword,
+                  )
+                    ? false
+                    : true
+                }
+                onClick={saveNewPassword}
+                type="primary"
+              >
+                Save new password
+              </Button>
+            </div>
           </SpoilerButton>
-          </div>
+        </div>
       </ConstructorModal>
     </div>
   )

src/providers/ThemeProvider.js

@@ -5,7 +5,8 @@ const getTheme = () => {
   const theme = `${window?.localStorage?.getItem('theme')}`
   if (Object.values(themes).includes(theme)) return theme
 
-  const userMedia = window.matchMedia('(prefers-color-scheme: light)')
+    const userMedia = window.matchMedia(
+        '(prefers-color-scheme: light)')
   if (userMedia.matches) return themes.light
 
   return themes.dark
@@ -17,10 +18,18 @@ const ThemeProvider = ({ children }) => {
   React.useEffect(() => {
     document.documentElement.dataset.theme = theme
     localStorage.setItem('theme', theme)
-  }, [ theme ])
+  }, [theme])
+  console.log('theme ', theme)
+
+  document.documentElement.classList.add('theme-transition')
+  document.documentElement.setAttribute('data-theme', theme)
+  window.setTimeout(function() {
+    document.documentElement.classList.remove('theme-transition')
+  }, 100)
 
   return (
     <ThemeContext.Provider value={{ theme, setTheme }}>
+      
       {children}
     </ThemeContext.Provider>
   )

src/redux/saga/comment/index.js

@@ -1,4 +1,4 @@
-import { put, takeEvery, takeLeading, select, call } from 'redux-saga/effects' //
+import { put, takeEvery, takeLeading, select, call } from 'redux-saga/effects' 
 import { promiseWorker } from '../promise'
 import {
   actionAddComment,
@@ -54,6 +54,7 @@ export function* addCommentFeedWatcher() {
   yield takeLeading('FEED_POST_COMMENT', addCommentFeedWorker)
 }
 
+
 function* addSubCommentWorker({ commentId, newResult }) {
   yield call(promiseWorker, actionAddSubComment(commentId, newResult))
   const {

src/redux/saga/explore/index.js

@@ -1,4 +1,4 @@
-import { put, takeLeading, select, call } from 'redux-saga/effects' //
+import { put, takeLeading, select, call } from 'redux-saga/effects' 
 import { promiseWorker } from '../promise'
 import {
   actionExplorePostsCount,

src/redux/saga/feed/index.js

@@ -1,4 +1,4 @@
-import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; //
+import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; 
 import { fullProfilePageWorker } from '../../saga/myProfile'
 import { promiseWorker } from '../promise';
 import {actionFullProfilePageTypeSaga} from '../../../actions/typeSaga/myDataTypesSaga'

src/redux/saga/myProfile/index.js

@@ -55,8 +55,6 @@ function* setAvatarWorker({ file }) {
   if (setAvatar) {
     yield call(fullPageAboutUserWorker, { _id })
     yield put(actionUpdateAvatarType(avatar))
-    // yield call(promiseWorker,actionClearPromiseForName("setAvatar"))
-    // yield call(promiseWorker,actionClearPromiseForName("uploadFile"))
   }
 }