Home Explore Help
Sign In
LenDoc
/
PROJECT_HIPSTAGRAM
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add dark theme

LenDoc 2 years ago
parent
6db7466447
commit
3166257eeb
32 changed files with 740 additions and 262 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 3 0
      src/App.js
  3. 300 97
      src/App.scss
  4. 7 0
      src/actions/types/searchType.js
  5. 20 24
      src/components/LinkToUser.jsx
  6. 2 1
      src/components/ListOfUsers.jsx
  7. 6 2
      src/components/buttons/HeaderButtons.jsx
  8. 47 53
      src/components/comment/AddComment.jsx
  9. 1 13
      src/components/comment/Comment.jsx
  10. 3 1
      src/components/like/Like.jsx
  11. 14 2
      src/components/like/ModalLikes.jsx
  12. 3 2
      src/components/post/PostCard.jsx
  13. 19 0
      src/components/rootTheme/index.js
  14. 20 0
      src/components/toggle/index.js
  15. 99 0
      src/components/toggle/index.module.scss
  16. 8 0
      src/contexts/ThemeContext.js
  17. 1 0
      src/helpers/index.js
  18. 34 3
      src/index.css
  19. 6 2
      src/index.js
  20. 2 8
      src/pages/createAndEditPost/index.js
  21. 1 1
      src/pages/explorePosts/index.js
  22. 17 7
      src/pages/feedPosts/index.js
  23. 18 3
      src/pages/header/index.js
  24. 1 1
      src/pages/onePost/index.js
  25. 1 1
      src/pages/profilePage/index.js
  26. 14 26
      src/pages/search/index.js
  27. 20 13
      src/pages/setting/index.js
  28. 29 0
      src/providers/ThemeProvider.js
  29. 20 0
      src/redux/reducers/searchReducer.js
  30. 3 1
      src/redux/rootSaga.js
  31. 18 0
      src/redux/saga/search/index.js
  32. 2 0
      src/redux/store.js

+ 1 - 1
public/index.html
View File 

@@ -15,7 +15,7 @@
 
     
     <title>Memogram</title>
 
   </head>
 
-  <body>
 
+  <body class="Body">
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
     <!-- <div id="container" style="padding: 24px"> </div> -->

+ 3 - 0
src/App.js
View File 

@@ -9,6 +9,8 @@ import { actionFullProfilePageTypeSaga } from './actions/typeSaga/myDataTypesSag
 
 import { CShowHeader } from './pages/header'
 
 import { CRouting } from './components/Routing'
 
 import history from './helpers/history'
 
+import Root from './components/rootTheme/index'
 
+import ThemeProvider from './providers/ThemeProvider'
 
 store.subscribe(() => console.log(store.getState()))
 
 
 function App() {
 
@@ -18,6 +20,7 @@ function App() {
 
   return (
 
     <Router history={history}>
 
       <Provider store={store}>
 
+        
         <div className="App">
 
           <CRouting />
 
           <CShowHeader />

+ 300 - 97
src/App.scss
View File 

@@ -38,14 +38,19 @@
 
   @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
 
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
 
   'Noto Color Emoji';
 
+  background: var(--background-color);
 
 }
 
+
 
+.Body {
 
+  // font-size: 20px;
 
+  background: var(--background-color);
 
+}
 
+@import '~antd/dist/antd.css';
 
 body {
 
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
   font-size: 20px;
 
+  background: var(--background-color);
 
 }
 
-
 
-@import '~antd/dist/antd.css';
 
-
 
 .Dropzone {
 
   display: flex;
 
   flex-direction: column;
 
@@ -77,7 +82,9 @@ body {
 
   padding: 10px;
 
   z-index: 4;
 
   width: 100%;
 
-  background-color: rgb(206, 227, 255);
 
+  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),
 
@@ -85,20 +92,36 @@ body {
 
   .Links {
 
     margin: 0 10px;
 
     font-size: xx-large;
 
-    color: black;
 
+    color: var(--font-color);
 
     transition: 0.3s;
 
     padding: 0 5px;
 
     &:hover {
 
-      color: white;
 
+      color: var(--font-color-hover);
 
 
-      opacity: 0.7;
 
+      opacity: 0.9;
 
     }
 
     &:active {
 
       transform: scale(1.1);
 
     }
 
+
 
+    .Avatar {
 
+      // margin-left: 20px;
 
+      width: 50px;
 
+      border: 3px solid #fffff7;
 
+      height: 50px;
 
+      transition: 0.3s;
 
+    }
 
   }
 
 }
 
-
 
+.Save {
 
+  display: flex;
 
+  margin-top: 30px;
 
+  margin-bottom: 30px;
 
+  align-items: center;
 
+  align-content: center;
 
+  justify-content: center;
 
+  width: 200px;
 
+}
 
 .Recomendations {
 
   margin-left: 20px;
 
 }
 
@@ -124,17 +147,25 @@ body {
 
 .Post {
 
   max-width: 450px;
 
   margin: 0 auto;
 
-  background-color: white;
 
+  display: block;
 
+  background-color: var(--background-color-new-post);
 
   border: 6px solid #dbebfa;
 
   padding: 30px;
 
   border-radius: 25px;
 
-  display: 'flex';
 
+  // display: 'flex';
 
   align-items: 'center';
 
   justify-content: 'center';
 
-  margin-top: 100px;
 
+  // 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;
 
@@ -153,8 +184,7 @@ main {
 
   text-align: left;
 
   font-size: 18px;
 
   margin: 10px 0px;
 
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
-
 
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
 }
 
 .Input {
 
   display: flex;
 
@@ -177,25 +207,28 @@ main {
 
   margin-top: 100px;
 
   display: flex;
 
   justify-content: center;
 
-  .ProfileAvatar{
 
-  margin-right: 20px;
 
-  width: 150px;
 
-  height: 150px;
 
+  .ProfileAvatar {
 
+    margin-right: 20px;
 
+    width: 150px;
 
+    height: 150px;
 
   }
 
   .Info {
 
-    .Login{
 
+    .Login {
 
       font-weight: 600;
 
       font-size: 18px;
 
+      color: var(--font-color);
 
     }
 
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
     justify-content: center;
 
     display: flex;
 
     flex-direction: column;
 
-    p{font-size: 16px;
 
+    p {
 
+      font-size: 16px;
 
       font-weight: 400;
 
+      color: var(--font-color);
 
 
-    padding:0 auto;
 
-margin-bottom: 3px;
 
+      padding: 0 auto;
 
+      margin-bottom: 3px;
 
     }
 
   }
 
 }
 
@@ -233,13 +266,13 @@ margin-bottom: 3px;
 
   padding: 10px;
 
 }
 
 .Gallery {
 
-  position: fixed;
 
-  right: 0;
 
+  position: absolute;
 
   z-index: 2;
 
-  top: 0;
 
+  // right: 0;
 
   width: 50px;
 
   height: 50px;
 
   margin: 10px;
 
+  padding: 5px;
 
 }
 
 .Wrapper {
 
   margin: 40px;
 
@@ -295,11 +328,14 @@ margin-bottom: 3px;
 
 
 // }
 
 .Modal {
 
+  background-color: var(--modal-color);
 
   font-size: medium;
 
   display: flex;
 
   flex-direction: column;
 
-  margin-bottom: 20px;
 
+  padding: 10px;
 
+  // margin-bottom: 20px;
 
 }
 
+
 
 // .PostFeed {
 
 //   border-width: 20;
 
 //   border-color: #ffffff;
 
@@ -313,7 +349,7 @@ margin-bottom: 3px;
 
 
 .NextArrow {
 
   font-size: 35px;
 
-  color: rgb(84, 132, 222);
 
+  color: var(--arrow-color);
 
   position: absolute;
 
   left: 100%;
 
   top: 50%;
 
@@ -329,7 +365,7 @@ margin-bottom: 3px;
 
   transform: scale(1.1);
 
 }
 
 .PreviousArrow {
 
-  color: rgb(84, 132, 222);
 
+  color: var(--arrow-color);
 
   font-size: 35px;
 
   position: absolute;
 
   margin: auto;
 
@@ -392,13 +428,9 @@ margin-bottom: 3px;
 
   height: 100%;
 
   text-align: center;
 
   float: right;
 
-  background: rgb(58, 100, 180);
 
-  background: linear-gradient(
 
-    90deg,
 
-    rgba(58, 100, 180, 1) 0%,
 
-    rgba(92, 168, 221, 1) 51%,
 
-    rgba(29, 253, 182, 1) 100%
 
-  );
 
+  // background: var(--background-color-start);
 
+  background: var(--background-color-login);
 
+
 
   transition: 0.3s;
 
   // right: 0;
 
   text-align: center;
 
@@ -419,15 +451,19 @@ margin-bottom: 3px;
 
   font-size: xx-large;
 
   // margin-right: 15px;
 
 }
 
-.Send{
 
+.Send {
 
   font-size: xx-large;
 
-margin-bottom: 10px;
 
+  bottom: 5px;
 
 }
 
 .SmileBtnFilled {
 
   font-size: xx-large;
 
   // margin-right: 15px;
 
   color: #108ee9;
 
 }
 
+.FooterFeed {
 
+  display: flex;
 
+  margin: 15px 0px;
 
+}
 
 .Comments {
 
   position: fixed;
 
 
@@ -539,7 +575,7 @@ margin-bottom: 10px;
 
   box-shadow: 0 5px 10px rgba(21, 46, 57, 0.25),
 
     0 10px 10px rgba(12, 43, 58, 0.22);
 
 }
 
-.OnePost{
 
+.OnePost {
 
   margin-top: 100px;
 
 }
 
 .ResultUserFind {
 
@@ -547,7 +583,8 @@ margin-bottom: 10px;
 
   min-width: 320px;
 
   max-height: 500px;
 
   padding: 15px 0;
 
-  overflow: auto;
 
+  overflow-y: auto;
 
+  color:black;
 
 }
 
 .Search {
 
   padding: 10px;
 
@@ -572,6 +609,7 @@ margin-bottom: 10px;
 
   margin-top: 50px;
 
   padding: 15px 5px;
 
   overflow: auto;
 
+  padding-bottom: 60px;
 
 }
 
 .InputOnePost {
 
   display: flex;
 
@@ -585,13 +623,38 @@ margin-bottom: 10px;
 
   width: 150px;
 
   height: 150px;
 
 }
 
-.FooterPost{
 
-
 
-.CommentsPost{
 
-  height: 250px;
 
+.FooterPost {
 
+  .CommentsPost {
 
+    height: 250px;
 
+  }
 
 }
 
+.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);
 
+  .ModalAvatar {
 
+    width: 50px;
 
+    height: 50px;
 
+  }
 
 }
 
 
+.ModalEdit {
 
+  background-color: var(--modal-color);
 
+
 
+  display: flex;
 
+  padding: 10px 30px;
 
+  flex-direction: column;
 
+  font-size: 16px;
 
+  font-weight: bold;
 
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  color: var(--font-color);
 
+
 
+ color: var(--font-color);
 
+}
 
 @media screen and (max-width: 1450px) {
 
   .Explore {
 
     .Wrapper {
 
@@ -602,10 +665,15 @@ margin-bottom: 10px;
 
       }
 
     }
 
   }
 
-
 
 }
 
+
 
 /* 992px - 1200px */
 
 @media screen and (max-width: 1200px) {
 
+  .OneLike {
 
+    .LikeStyle {
 
+      width: 60px;
 
+    }
 
+  }
 
   .LoginForm {
 
     p {
 
       text-align: center;
 
@@ -637,7 +705,7 @@ margin-bottom: 10px;
 
     margin: 0px auto;
 
     .Like {
 
       .LikeStyle {
 
-        padding: 0px;
 
+        padding: 5px;
 
       }
 
     }
 
   }
 
@@ -659,11 +727,18 @@ margin-bottom: 10px;
 
       }
 
     }
 
   }
 
-  
 }
 
 
 // /* 768px - 992px */
 
 @media screen and (max-width: 992px) {
 
+  .OneLike {
 
+    .LikeStyle {
 
+      width: 60px;
 
+    }
 
+  }
 
+  .FooterFeed {
 
+    margin: 10px 0px;
 
+  }
 
   .LoginForm {
 
     p {
 
       text-align: center;
 
@@ -676,7 +751,6 @@ margin-bottom: 10px;
 
   }
 
   .AboutMe {
 
     margin-top: 20px;
 
-    
   }
 
   .PostsFeed {
 
     margin: 10px;
 
@@ -692,6 +766,11 @@ margin-bottom: 10px;
 
   }
 
   .Explore {
 
     .Wrapper {
 
+      .Gallery {
 
+        width: 15px;
 
+        height: 15px;
 
+        padding: 0px;
 
+      }
 
       margin: 20px;
 
       .Card {
 
         width: 150px;
 
@@ -699,29 +778,56 @@ margin-bottom: 10px;
 
       }
 
     }
 
   }
 
-  .Preloader{
 
-    margin-bottom:80px ;
 
+  .Preloader {
 
+    margin-bottom: 80px;
 
   }
 
-  .AboutMe{
 
-    .ProfileAvatar{
 
+  .AboutMe {
 
+    .ProfileAvatar {
 
       height: 100px;
 
       width: 100px;
 
     }
 
-   
-      .Info {
 
-        .Login{
 
-          font-size: 16px;
 
-        }
 
-    
-        p{font-size: 14px;
 
- 
-        }
 
+
 
+    .Info {
 
+      .Login {
 
+        font-size: 16px;
 
+      }
 
+
 
+      p {
 
+        font-size: 14px;
 
       }
 
     }
 
   }
 
+}
 
 
 /*576px-768px*/
 
 @media screen and (max-width: 768px) {
 
+  .Header {
 
+    .Links {
 
+      // margin: 0 10px;
 
+      // padding: 5px;
 
+      font-size: x-large;
 
+
 
+      .Avatar {
 
+        width: 40px;
 
+        border: 3px solid #fffff7;
 
+        height: 40px;
 
+        transition: 0.3s;
 
+      }
 
+    }
 
+  }
 
+  .FooterFeed {
 
+    margin: 10px 0px;
 
+  }
 
+  .NextArrow {
 
+    font-size: 30px;
 
+    padding-left: 0px;
 
+    margin-left: 10px;
 
+  }
 
+  .PreviousArrow {
 
+    font-size: 30px;
 
+    padding-right: 0px;
 
+    margin-right: 10px;
 
+  }
 
   .LoginForm {
 
     width: 70%;
 
     align-content: center;
 
@@ -729,6 +835,7 @@ margin-bottom: 10px;
 
     margin: 0 auto;
 
     margin: 0 100px;
 
     padding: 0;
 
+
 
     // height: 90%;
 
     p {
 
       font-size: x-large;
 
@@ -739,8 +846,8 @@ margin-bottom: 10px;
 
       // padding: 10px;
 
     }
 
   }
 
-  .Preloader{
 
-    margin-bottom:40px ;
 
+  .Preloader {
 
+    margin-bottom: 40px;
 
   }
 
   .Explore {
 
     margin-top: 0px;
 
@@ -752,44 +859,119 @@ margin-bottom: 10px;
 
       }
 
     }
 
   }
 
+  .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 {
 
+      width: 60px;
 
+    }
 
+  }
 
 }
 
 /*320px-576px*/
 
 @media screen and (max-width: 576px) {
 
+  .Modal {
 
+    display: flex;
 
+    flex-direction: column;
 
+    // margin: 20px;
 
+    // width: 300px;
 
+    .ModalAvatar {
 
+      width: 30px;
 
+      height: 30px;
 
+    }
 
+  }
 
+
 
+  .SmileBtn {
 
+    font-size: x-large;
 
+    // margin-right: 15px;
 
+  }
 
+  .Send {
 
+    font-size: x-large;
 
+    bottom: 5px;
 
+  }
 
+  .SmileBtnFilled {
 
+    font-size: x-large;
 
+    // margin-right: 15px;
 
+    color: #108ee9;
 
+  }
 
+  .NextArrow {
 
+    font-size: 25px;
 
+    padding-left: 0px;
 
+    margin-left: 10px;
 
+  }
 
+  .PreviousArrow {
 
+    font-size: 25px;
 
+    padding-right: 0px;
 
+    margin-right: 10px;
 
+  }
 
+  .PostsFeed {
 
+    margin: 20px;
 
+    padding: 0px;
 
+    margin-top: 20px;
 
+    .PostsFeed-one {
 
+      padding: 10px;
 
+    }
 
+  }
 
+  .Preview {
 
+    height: 80px;
 
+    width: 80px;
 
+    margin-bottom: 5px;
 
+  }
 
+  .Save {
 
+    width: 150px;
 
+  }
 
   .Title {
 
     font-size: 15px;
 
   }
 
   .Dropzone {
 
     padding: 10px;
 
-      font-size: 10px;
 
-  font-size: small;
 
-
 
+    font-size: 10px;
 
+    font-size: small;
 
   }
 
-  .OnePost{  
+  .OnePost {
 
     margin-top: 40px;
 
-  
   }
 
-  .ScrollForFeed{
 
+  .ScrollForFeed {
 
     height: 150px;
 
   }
 
-  .FooterPost{
 
+  .FooterPost {
 
     margin-bottom: 100px;
 
-    .CommentsPost{
 
+    .CommentsPost {
 
       height: 180px;
 
     }
 
-    }
 
-  
-.OneLike {
 
-  display: flex;
 
-  font-size: 12px;
 
-  .Like {
 
-    font-size: x-large;
 
-    color: black;
 
   }
 
-  .LikeStyle {
 
-    cursor: pointer;
 
-    padding: 0px;
 
+
 
+  .OneLike {
 
+    display: flex;
 
+    font-size: 12px;
 
+    .Like {
 
+      font-size: x-large;
 
+      color: black;
 
+    }
 
+    .LikeStyle {
 
+      cursor: pointer;
 
+      padding: 0px;
 
+      width: 40px;
 
+    }
 
   }
 
-}
 
 
   .MyCarousel {
 
     // display: block;
 
@@ -799,13 +981,11 @@ margin-bottom: 10px;
 
     box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
 
     background-color: white;
 
     border: 6px solid #dbebfa;
 
-    margin: 0 5%;
 
+    margin: 0 10%;
 
     border-radius: 5px;
 
     .PostImage {
 
-    
-      width: 300px;
 
-      height: 300px;
 
-     
+      width: 200px;
 
+      height: 200px;
 
     }
 
   }
 
   .LoginForm {
 
@@ -828,23 +1008,28 @@ margin-bottom: 10px;
 
       // padding: 20px;
 
     }
 
   }
 
-  .AboutMe{
 
-    .ProfileAvatar{
 
+  .AboutMe {
 
+    .ProfileAvatar {
 
       height: 80px;
 
       width: 80px;
 
     }
 
     .Info {
 
-      .Login{
 
+      .Login {
 
         font-size: 14px;
 
       }
 
-  
-      p{font-size: 12px;
 
 
+      p {
 
+        font-size: 12px;
 
       }
 
     }
 
   }
 
   .ProfilePage {
 
     .Wrapper {
 
+      .Gallery {
 
+        width: 15px;
 
+        height: 15px;
 
+        padding: 0px;
 
+      }
 
       margin: 10px;
 
       .Card {
 
         width: 90px;
 
@@ -852,17 +1037,35 @@ margin-bottom: 10px;
 
       }
 
     }
 
   }
 
+  .ModalLink {
 
+    font-size: 13px;
 
+    padding: 10px;
 
+    margin: 10px;
 
+  }
 
   .Post {
 
+    display: flex;
 
+    flex-direction: column;
 
     max-width: 380px;
 
+    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: 0px;
 
-    
-    }
 
+    // margin-top: 40px;
 
+    // margin-bottom: 40px;
 
+  }
 
   .Explore {
 
     margin-top: 0px;
 
-    margin:5px;
 
+    margin: 5px;
 
     .Wrapper {
 
+      .Gallery {
 
+        margin: 5px;
 
+        width: 20px;
 
+        height: 20px;
 
+      }
 
       margin: 10px;
 
       .Card {
 
         width: 120px;

+ 7 - 0
src/actions/types/searchType.js
View File 

@@ -0,0 +1,7 @@
 
+export const actionSearchType = (searchUser) => ({
 
+    type: 'SEARCH',
 
+    searchUser,
 
+})
 
+export const actionSearchSaga = (searchUser) => 
+({type: 'SEARCH-USERS', searchUser})
 
+export const actionClearSearchType = () => ({ type: 'CLEAR_SEARCH' })

+ 20 - 24
src/components/LinkToUser.jsx
View File 

@@ -9,8 +9,8 @@ export const LinkToUser = ({
 
   avatar,
 
   login,
 
   size,
 
-  font = '15px',
 
-  padding = '10px',
 
+  // font = '15px',
 
+  // padding = '10px',
 
   onClick,
 
   key,
 
 }) => {
 
@@ -18,32 +18,35 @@ 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}
 
       >
 
         <Col offset={1} className="gutter-row">
 
           {avatar ? (
 
             <Avatar
 
-              size={size}
 
+              className='ModalAvatar'
 
               src={backendURL+'/' + avatar?.url}
 
              
             />
 
           ) : (
 
-              <Avatar size={size} src={user}
 
+              <Avatar  className='ModalAvatar' src={user}
 
                 // style={{ marginRight: '3px' }}
 
               />
 
           )}
 
         </Col>
 
         <Col offset={3} style={{ marginTop: '5px' }}>
 
-          <h3> {login || 'Anon'}</h3>
 
+        
+          <h3 className="ModalLink"
 
+          > {login || 'Anon'}</h3>
 
         </Col>
 
       </Link>
 
     </Row>
 
@@ -55,8 +58,8 @@ export const LinkWithSubscribe = ({
 
   avatar,
 
   login,
 
   size,
 
-  font = '15px',
 
-  padding = '10px',
 
+  // font = '15px',
 
+  // padding = '10px',
 
   onClick,
 
   key,
 
   myId,
 
@@ -66,14 +69,7 @@ export const LinkWithSubscribe = ({
 
       <Link
 
         to={`/profile/${_id}`} 
 
-        style={{
 
-          display: 'flex',
 
-          padding: padding,
 
-          flexDirection: 'row',
 
-          fontSize: font,
 
-          fontWeight: 'bold',
 
-          color: 'black'
 
-        }}
 
+       className="ModalLink"
 
         onClick={onClick}
 
         key={key}
 
       >
 
@@ -89,7 +85,7 @@ export const LinkWithSubscribe = ({
 
           )}
 
         </Col>
 
         <Col offset={2} style={{ marginTop: '5px' }}>
 
-          <h3> {login || 'Anon'}</h3>
 
+          <h3 className='ModalLink'> {login || 'Anon'}</h3>
 
         </Col>
 
       </Link>

+ 2 - 1
src/components/ListOfUsers.jsx
View File 

@@ -28,10 +28,11 @@ export const ListOfUsers = ({ listUsers, text }) => {
 
         isModalVisible={isModalVisible}
 
         setIsModalVisible={setIsModalVisible}
 
       >
 
-        <div className="">
 
+        <div className="Modal">
 
           {listUsers?.map(({ _id, login, avatar }) => (
 
             <LinkToUser
 
               _id={_id}
 
+              className="ModalLink"
 
               login={login}
 
               avatar={avatar}
 
               size={40}

+ 6 - 2
src/components/buttons/HeaderButtons.jsx
View File 

@@ -53,9 +53,13 @@ const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
 
   return (
 
     <Link to={`/profile/${my_Id}`} className="Links" >
 
       {avatar?.url ? (
 
-        <Avatar src={backendURL + '/'  + avatar?.url} size={50} className="Avatar" />
 
+        <Avatar src={backendURL + '/' + avatar?.url}
 
+         xl={{size:50 }} 
+          className="Avatar" />
 
       ) : (
 
-        <Avatar src={user} size={50} className="Avatar" />
 
+          <Avatar src={user}
 
+            // size={50}
 
+            className="Avatar" />
 
       )}
 
     </Link>
 
   )

+ 47 - 53
src/components/comment/AddComment.jsx
View File 

@@ -1,8 +1,8 @@
 
 import { Picker } from 'emoji-mart'
 
 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 { Input, Col, Button } from 'antd'
 
+import { SmileOutlined, SmileFilled, SendOutlined } from '@ant-design/icons'
 
 import { Link } from 'react-router-dom'
 
 
 const AddComment = ({ addComment, postId, style, width }) => {
 
@@ -21,66 +21,60 @@ const AddComment = ({ addComment, postId, style, width }) => {
 
           showSkinTones={false}
 
           onSelect={(native) => addEmoji(native)}
 
         />
 
-        )}
 
-      
-      <Col xl={{ span: 10, offset: 1 }}
 
-       lg={{ span: 14, offset: 1 }}
 
-       md={{ offset: 1, span: 14 }}
 
-        sm={{ offset: 1, span: 10 }}
 
-        xs={{ offset: 1, span: 10 }}
 
+      )}
 
+
 
+      <Col
 
+        xl={{ span: 13, offset: 1 }}
 
+        lg={{ span: 13, offset: 1 }}
 
+        md={{ offset: 1, span: 16 }}
 
+        sm={{ offset: 1, span: 13 }}
 
+        xs={{ offset: 1, span: 14 }}
 
       >
 
-      <Input
 
+        <Input
 
           style={{
 
-          display:'flex',
 
-          // display: 'flex',
 
-          // width,
 
-          // margin: '5px 10px',
 
-          // padding:'5px'
 
-
 
-        }}
 
-          xl={{ size: "large" }}
 
-          xs={{ size:'small'}}
 
-        placeholder="Add a comment..."
 
-        value={text}
 
-        onChange={(e) => {
 
-          setComment(e.target.value)
 
-        }}
 
-        onPressEnter={(e) => setComment(e.target.value)}
 
+            display: 'flex',
 
+            // display: 'flex',
 
+            // width,
 
+            // margin: '5px 10px',
 
+            // padding:'5px'
 
+            // width:'100%'
 
+          }}
 
+          xl={{ size: 'large' }}
 
+          xs={{ size: 'small' }}
 
+          placeholder="Add a comment..."
 
+          value={text}
 
+          onChange={(e) => {
 
+            setComment(e.target.value)
 
+          }}
 
+          onPressEnter={(e) => setComment(e.target.value)}
 
         />
 
       </Col>
 
-      <Col xl={{ offset: 1, span: 1 }}
 
-       sm={{ offset: 1, span: 1 }}
 
-       xs={{offset: 1,  span: 1 }}
 
+
 
+      <Col
 
+        xl={{ offset: 1, span: 1 }}
 
+        sm={{ offset: 1, span: 1 }}
 
+        xs={{ offset: 1, span: 1 }}
 
       >
 
-      
         {!showEmojiPicker ? (
 
-          
-        <SmileOutlined className="SmileBtn" onClick={handleOK} />
 
-      ) : (
 
-        <SmileFilled className="SmileBtnFilled" onClick={handleOK} />
 
+          <SmileOutlined className="SmileBtn" onClick={handleOK} />
 
+        ) : (
 
+          <SmileFilled className="SmileBtnFilled" onClick={handleOK} />
 
         )}
 
       </Col>
 
-      <Col xl={{ offset: 1, span: 1 }}
 
-       sm={{offset: 1,  span: 1 }}
 
-        xs={{offset: 1 }}
 
-        
+      <Col
 
+        xl={{ offset: 1, span: 1 }}
 
+        sm={{ offset: 1, span: 1 }}
 
+        xs={{ offset: 1 }}
 
       >
 
-          
-        <Button type="text"
 
-       className="Send"
 
-          
-      disabled={text.length < 1}
 
-      onClick={(e) => {
 
-        addComment(postId, text) &&
 
-        setComment((e.target.value = ''))
 
-      }}
 
+        <Button
 
+          type="text"
 
+          className="Send"
 
+          disabled={text.length < 1}
 
+          onClick={(e) => {
 
+            addComment(postId, text) && setComment((e.target.value = ''))
 
+          }}
 
         >
 
-       
-        <SendOutlined
 
-       className="Send"
 
-      type="primary"
 
-     
-          />
 
+          <SendOutlined className="Send" type="primary" />
 
         </Button>
 
         {/* <Button
 
           
@@ -97,7 +91,7 @@ const AddComment = ({ addComment, postId, style, width }) => {
 
         {' '}
 
         Publish{' '}
 
         </Button> */}
 
-        </Col>
 
+      </Col>
 
     </>
 
   )
 
 }

+ 1 - 13
src/components/comment/Comment.jsx
View File 

@@ -26,7 +26,7 @@ export const Comments = ({
 
       {comments?.length && Object.keys(comments[0])?.length > 1
 
         ?
 
         <ViewComment text={'View all '} count={comments?.length}
 
-          style={{ overflowY: 'none' }}
 
+          
           textClosed={'Hide comments'}>
 
           {comments?.map((comment) => {
 
             return (
 
@@ -79,15 +79,3 @@ export const CCommentsOnePost = connect(
 
     findSubComment: actionFindSubCommentTypeSaga,
 
   },
 
 )(Comments)
 
-
 
-// export const CCommentsForFeed = connect(
 
-//   (state) => ({
 
-//     // postId: state.promise.onePost?.payload?._id,
 
-//     addComment: state.promise?.addComment?.payload,
 
-//     addSubComment: state.promise?.addSubComment,
 
-//   }),
 
-//   {
 
-//     addCommentReply: actionAddSubFullComment,
 
-//     findSubComment: actionFindSubComment,
 
-//   },
 
-// )(Comments)

+ 3 - 1
src/components/like/Like.jsx
View File 

@@ -5,10 +5,12 @@ import {
 
 } from '../../actions/typeSaga/likeTypesSaga'
 
 import { connect } from 'react-redux'
 
 import ModalLikes from './ModalLikes'
 
+
 
 export const Like = ({ my_Id, postId, likes = [], changeLike }) => {
 
   const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
 
   return (
 
     <>
 
+    
       <div className='OneLike'>
 
         <p onClick={() => changeLike(likeId, postId)}
 
           style={{ margin: '0 auto' }}>
 
@@ -20,7 +22,7 @@ export const Like = ({ my_Id, postId, likes = [], changeLike }) => {
 
           )}
 
         </p>
 
         <ModalLikes likes={likes} myId={my_Id} />
 
-      </div>
 
+        </div>
 
     </>
 
   )
 
 }

+ 14 - 2
src/components/like/ModalLikes.jsx
View File 

@@ -1,6 +1,8 @@
 
 import React, { useState } from 'react'
 
 import { ConstructorModal } from '../../helpers'
 
 import LikeList from './LikeList'
 
+import { Col } from 'antd'
 
+
 
 const ModalLikes = ({ likes, myId }) => {
 
   const [isModalVisible, setIsModalVisible] = useState(false)
 
   const showModal = () => {
 
@@ -8,9 +10,18 @@ const ModalLikes = ({ likes, myId }) => {
 
   }
 
   return (
 
     <>
 
+       <Col
 
+        xl={{ span: 15, offset: 0 }}
 
+        lg={{ span: 10, offset: 0 }}
 
+        
+       sm={{ offset: 0, span: 10 }}
 
+       xs={{ offset: 1, span: 20 }}
 
+      >
 
       {likes.length ?
 
         (
 
-        <h3 className="LikeStyle" style={{margin:'0 auto'}} onClick={showModal}>
 
+            <h3 className="LikeStyle"
 
+              style={{ margin: '0 auto' }}
 
+              onClick={showModal}>
 
           {' '}
 
           {likes.length} likes
 
         </h3>
 
@@ -24,7 +35,8 @@ const ModalLikes = ({ likes, myId }) => {
 
         setIsModalVisible={setIsModalVisible}
 
       >
 
         <LikeList likes={likes} myId={myId} />
 
-      </ConstructorModal>
 
+        </ConstructorModal>
 
+      </Col>
 
     </>
 
   )
 
 }

+ 3 - 2
src/components/post/PostCard.jsx
View File 

@@ -9,7 +9,8 @@ export const Card = ({ post }) => (
 
       {post?.images && post?.images.length > 1 ? (
 
         <div className="Wrapper">
 
           <img src={galery} className="Gallery" />
 
-          <img className="Card" src={backendURL+'/' + post.images[0].url} />
 
+          <img className="Card" src={backendURL + '/' +
 
+            post.images[0].url} />
 
         </div>
 
       ) : post?.images && post?.images[0] && post.images[0]?.url ? (
 
         <div className="Wrapper">
 
@@ -17,7 +18,7 @@ export const Card = ({ post }) => (
 
         </div>
 
       ) : (
 
         <div className="Wrapper">
 
-          <img className="Card" src={defaultPhoto} />
 
+          <img className="Card" style={{background:'white'}} src={defaultPhoto} />
 
         </div>
 
       )}
 
     </Link>

+ 19 - 0
src/components/rootTheme/index.js
View File 

@@ -0,0 +1,19 @@
 
+import React from 'react'
 
+import { ThemeContext, themes } from '../../contexts/ThemeContext'
 
+import Toggle from '../toggle/index'
 
+
 
+const Root = () => (
 
+  <ThemeContext.Consumer>
 
+    {({ theme, setTheme }) => (
 
+      <Toggle
 
+        onChange={() => {
 
+          if (theme === themes.light) setTheme(themes.dark)
 
+          if (theme === themes.dark) setTheme(themes.light)
 
+        }}
 
+        value={theme === themes.dark}
 
+      />
 
+    )}
 
+  </ThemeContext.Consumer>
 
+)
 
+
 
+export default Root

+ 20 - 0
src/components/toggle/index.js
View File 

@@ -0,0 +1,20 @@
 
+import React from 'react'
 
+import styles from './index.module.scss'
 
+
 
+const Toggle = ({ value, onChange }) => (
 
+    <label className={styles.switch}
 
+        htmlFor="toggler">
 
+    <input
 
+      id="toggler"
 
+      type="checkbox"
 
+      onClick={onChange}
 
+      checked={value}
 
+            readOnly
 
+            className='toggler'
 
+    />
 
+    <span className={styles.slider} />
 
+    <span className={styles.wave} />
 
+  </label>
 
+)
 
+
 
+export default Toggle

+ 99 - 0
src/components/toggle/index.module.scss
View File 

@@ -0,0 +1,99 @@
 
+input {
 
+  display: none;
 
+  // margin-bottom: 10px;
 
+}
 
+.slider {
 
+  position: absolute;
 
+  width: 80px;
 
+  height: 30px;
 
+  bottom: -30px;
 
+  margin-bottom: 15px;
 
+  box-shadow: 0 2px 5px rgba(18, 80, 105, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
 
+  z-index: 1;
 
+  overflow: hidden;
 
+  background-color: #315870;
 
+  border-radius: 50px;
 
+  cursor: pointer;
 
+  transition: all 1.4s;
 
+  &:before,
 
+  &:after {
 
+    content: '';
 
+
 
+    position: absolute;
 
+    bottom: -25px;
 
+    left: 5px;
 
+    bottom: 5px;
 
+    width: 20px;
 
+    height: 20px;
 
+    background-color: #ffffff;
 
+    border-radius: 30px;
 
+  }
 
+  &:before {
 
+    transition: 0.4s;
 
+  }
 
+  &:after {
 
+    transition: 0.5s;
 
+  }
 
+}
 
+.wave {
 
+  position: absolute;
 
+  width: 80px;
 
+  height: 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;
 
+    height: 30px;
 
+    bottom: -30px;
 
+    &:before,
 
+    &:after {
 
+      content: '';
 
+  
+      position: absolute;
 
+      left: 5px;
 
+      bottom: 5px;
 
+      width: 20px;
 
+      height: 20px;
 
+      background-color: #ffffff;
 
+      border-radius: 30px;
 
+    }
 
+  }
 
+  .wave {
 
+    position: absolute;
 
+    width: 50px;
 
+    height: 30px;
 
+  }
 
+  input:checked + .slider {
 
+    background-color: transparent;
 
+    //
 
+  
+    &:before,
 
+    &:after {
 
+      transform: translateX(20px);
 
+    }
 
+  }
 
+
 
+}

+ 8 - 0
src/contexts/ThemeContext.js
View File 

@@ -0,0 +1,8 @@
 
+import React from 'react'
 
+
 
+export const themes = {
 
+    dark: 'dark',
 
+    light: 'light',
 
+  }
 
+  
+  export const ThemeContext = React.createContext({})

+ 1 - 0
src/helpers/index.js
View File 

@@ -18,6 +18,7 @@ export const ConstructorModal = ({
 
       <Modal
 
         title={title}
 
         centered
 
+        bodyStyle={{ padding:'0px'}}
 
         className="Modal"
 
         footer={null}
 
         onCancel={handleCancel}

+ 34 - 3
src/index.css
View File 

@@ -1,13 +1,44 @@
 
-body {
 
+ body {
 
   margin: 0;
 
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 
     sans-serif;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;
 
+  background-color: var(--background-color);
 
 }
 
-
 
+/*
 
 code {
 
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
     monospace;
 
-}
 
+} */
 
+html[data-theme='light']{ 
+  --modal-color: #fafafa;
 
+  --arrow-color: rgb(84, 132, 222);
 
+   --background-color: #fafafa;
 
+   --background-color-new-post: #fafafa;
 
+
 
+  --background-color-header: rgb(206, 227, 255);
 
+  --background-color-login: linear-gradient(
 
+    90deg,
 
+    rgba(58, 100, 180, 1) 0%,
 
+    rgba(92, 168, 221, 1) 51%,
 
+    rgba(29, 253, 182, 1) 100%
 
+  );
 
+  --font-color:black;
 
+  --font-color-hover:white;
 
+
 
+}
 
+html[data-theme='dark']{
 
+  --modal-color: rgb(70, 87, 122);
 
+
 
+  --background-color-new-post: #a6bce2;
 
+  --arrow-color: rgb(34, 56, 98);
 
+  --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;
 
+
 
+}
 
+

+ 6 - 2
src/index.js
View File 

@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 
 import './index.css';
 
 import App from './App';
 
 import reportWebVitals from './reportWebVitals';
 
-
 
+import ThemeProvider from './providers/ThemeProvider'
 
+import Root from './components/rootTheme/index'
 
 ReactDOM.render(
 
   <React.StrictMode>
 
-  <App />
 
+    {/* <ThemeProvider> */}
 
+      <App />
 
+      {/* <Root/> */}
 
+    {/* </ThemeProvider> */}
 
 </React.StrictMode>,
 
   document.getElementById('root')
 
 );

+ 2 - 8
src/pages/createAndEditPost/index.js
View File 

@@ -111,18 +111,12 @@ const PostEditor = ({
 
       <br />
 
       <Col offset={5}>
 
         <Button
 
-          style={{
 
-            display: 'flex',
 
-            marginTop: '30px',
 
-            alignItems: 'center',
 
-            alignContent: 'center',
 
-            justifyContent: 'center',
 
-            width: '200px',
 
-          }}
 
+          className='Save'
 
           disabled={disabledBtn}
 
           onClick={savePost}
 
           size="large"
 
           type="primary"
 
+
 
         >
 
           Save
 
         </Button>

+ 1 - 1
src/pages/explorePosts/index.js
View File 

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

+ 17 - 7
src/pages/feedPosts/index.js
View File 

@@ -72,8 +72,8 @@ const MyPostFeed = ({
 
           <div>
 
             {postsFeed?.length == 0 && (
 
               <div style={{ textAlign: 'center' }}>
 
-                <h1> You have no posts to feed! </h1>
 
-                <h1> Post and follow other users! </h1>
 
+                <p style={{fontSize:'20px'}}> You have no posts to feed! </p>
 
+                <p style={{fontSize:'20px'}}> Post and follow other users! </p>
 
               </div>
 
             )}
 
             {(postsFeed || []).map(
 
@@ -92,18 +92,28 @@ const MyPostFeed = ({
 
                       size={40}
 
                     />
 
                   </Col>
 
+                  <Col
 
+                    xs={{ offset: 1, span: 22 }}
 
+                  
+                  >
 
+            
                   <MyCarousel
 
                     images={images}
 
                     carouselWidth={'600px'}
 
                     carouselHeight={'400px'}
 
-                  />
 
-                  <div style={{ margin: '0 7%' }}>
 
+                    />
 
+                  </Col>
 
+                  <div style={{ margin: '0 5%' }}>
 
                     <p className="Title"> Title: {title || ''}</p>
 
                     <p className="Title"> Text: {text || ''}</p>
 
-                    <Divider>Comments</Divider>
 
-                    <div style={{ margin: '10px', position: 'relative' }}>
 
+                    <p>
 
+                    <Divider>Comments</Divider></p>
 
+                    <div style={{
 
+                      margin: '10px',
 
+                      position: 'relative'
 
+                    }}>
 
                       <CCommentsForFeed postId={_id} comments={comments} />
 
-                      <div style={{ display: 'flex', margin: '20px 0px' }}>
 
+                      <div className='FooterFeed'>
 
                         <CLikeFeed likes={likes} postId={_id} />
 
                         <AddComment
 
                           addComment={addComment}

+ 18 - 3
src/pages/header/index.js
View File 

@@ -9,19 +9,34 @@ import {
 
 } from '../../components/buttons/HeaderButtons'
 
 import { connect } from 'react-redux'
 
 import { Row, Col } from 'antd'
 
-
 
+import  Root  from '../../components/rootTheme'
 
+import ThemeProvider from '../../providers/ThemeProvider'
 
 export const Header = () => {
 
   return (
 
     <section className="Header">
 
+
 
+
 
       <Col
 
-        xl={{ offset: 4, span: 16 }}
 
-        lg={{ offset: 4, span: 17 }}
 
+        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'}}}
 
+            md={{ span: 2 }}
 
+           sm={{ span: 2 }}
 
+            xs={{ span: 2 }}
 
+         
+          >
 
+         
+          <ThemeProvider>
 
+            <Root />
 
+            </ThemeProvider>
 
+          </Col>
 
           <Col
 
            md={{ span: 1 }}
 
            sm={{ span: 1 }}

+ 1 - 1
src/pages/onePost/index.js
View File 

@@ -106,7 +106,7 @@ export const PagePost = ({
 
             <Row>
 
               <Col
 
                 xl={{ span: 4, offset: 1 }}
 
-                lg={{ span: 10, offset: 1 }}
 
+                lg={{ span: 3, offset: 1 }}
 
                 xs={{ offset: 1, span: 3 }}
 
               >
 
                 {/* <div style={{ display: 'flex', margin: '20px 0px' }}> */}

+ 1 - 1
src/pages/profilePage/index.js
View File 

@@ -136,7 +136,7 @@ export const PageAboutUser = ({
 
           lg={{ offset: 4, span: 20 }}
 
           md={{ offset: 4, span: 20}}
 
           sm={{ offset: 3, span: 15 }}
 
-          xs={{ offset: 1, span: 24 }}
 
+          xs={{ offset: 0, span: 24 }}
 
         //  md={{ span: 1 }}
 
         >
 
           <div

+ 14 - 26
src/pages/search/index.js
View File 

@@ -2,14 +2,19 @@ import { connect } from 'react-redux'
 
 import { Input, Popover } from 'antd'
 
 import { actionSearchUser } from '../../actions/query/searchUserQuery'
 
 import { UserOutlined } from '@ant-design/icons'
 
-
 
+import {actionSearchSaga,actionClearSearchType} from '../../actions/types/searchType'
 
 import { actionFullProfilePageUserTypeSaga } from '../../actions/typeSaga/userTypesSaga'
 
 import LinkToUser from '../../components/LinkToUser'
 
-export const ResultUserFind = ({text, userFind = [], handleCancel }) => {
 
+export const ResultUserFind = ({ userFind, handleCancel }) => {
 
   return (
 
     <div className="ResultUserFindMobile">
 
+      {console.log('userfind ', userFind)}
 
+     
+      {typeof userFind === 'undefined' 
       
-      {userFind ?
 
+        ? 
+        null :
 
+        userFind?.length > 0 ?
 
       userFind?.map(({ _id, login, avatar }) => (
 
         <LinkToUser
 
           _id={_id}
 
@@ -23,39 +28,22 @@ export const ResultUserFind = ({text, userFind = [], handleCancel }) => {
 
         />
 
       ))
 
         :
 
-        <p> Not found by request "{text} "</p>
 
+        <p style={{fontSize:'16px', textAlign:'center'}}> Not found by request </p>
 
     }
 
     </div>
 
   )
 
 }
 
 
-const SearchUser = ({my_Id, onSearch, searchUser, onPageData }) => {
 
-  // const [value, setSearch] = useState('')
 
-  // const onSearchUser = onSearch(setSearch(value))
 
+const SearchUser = ({my_Id,onSearch,actionClear, searchUser, onPageData }) => {
 
   const onSearchUser = (value) =>
 
-    console.log('value ', value)&&
 
     onSearch(value)
 
     const { Search } = Input
 
-    // console.log('value ', value)
 
   return (
 
       <>
 
-        {/* <Popover
 
-          placement="bottom"
 
-          destroyTooltipOnHide={true}
 
-          size="large"
 
-          content={
 
-            <ResultUserFind
 
-              my_Id={my_Id}
 
-              size={'20px'}
 
-              onPageData={onPageData}
 
-              userFind={searchUser}
 
-            />
 
-          }
 
-        > */}
 
           <Search
 
             placeholder="Enter search user"
 
-            allowClear
 
-            prefix={<UserOutlined />}
 
+            allowClear={actionClear}
 
+        prefix={<UserOutlined />}
 
             enterButton="Search"
 
             size="large"
 
                 onSearch={onSearchUser}
 
@@ -63,7 +51,6 @@ const SearchUser = ({my_Id, onSearch, searchUser, onPageData }) => {
 
             />
 
             <div>
 
           <ResultUserFind
 
-            text={value}
 
               my_Id={my_Id}
 
               size={'20px'}
 
               onPageData={onPageData}
 
@@ -83,7 +70,8 @@ const SearchUser = ({my_Id, onSearch, searchUser, onPageData }) => {
 
     }),
 
   
     {
 
-      onSearch: actionSearchUser,
 
+      onSearch: actionSearchSaga,
 
+      actionClear:actionClearSearchType,
 
       onPageData: actionFullProfilePageUserTypeSaga,
 
     },
 
   )(SearchUser)

+ 20 - 13
src/pages/setting/index.js
View File 

@@ -97,12 +97,16 @@ const EditSetting = ({
 
         setIsModalVisible={setIsModalVisibleEdit}
 
         handleCancel={handleCancelEdit}
 
       >
 
-        <h3> Edit avatar </h3>
 
-        <SpoilerButton text={'Change avatar'} style={{ width: '100%' }}>
 
-          <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
 
+        <div className='ModalEdit'> 
+        <p> Edit avatar </p>
 
+          <SpoilerButton text={'Change avatar'}
 
+            style={{ width: '100%' }}>
 
+            <CEditAvatar
 
+              setIsModalVisibleEdit={setIsModalVisibleEdit} />
 
         </SpoilerButton>
 
-        <h3> Edit login </h3>
 
-        <SpoilerButton text={'Change login'} style={{ width: '100%' }}>
 
+        <p> Edit login </p>
 
+          <SpoilerButton text={'Change login'}
 
+            style={{ width: '100%' }}>
 
           <div
 
             style={{
 
               display: 'flex',
 
@@ -124,10 +128,11 @@ const EditSetting = ({
 
               {' '}
 
               Save login{' '}
 
             </Button>
 
-          </div>
 
+            </div>
 
+            
         </SpoilerButton>
 
 
-        <h3> Edit nick </h3>
 
+        <p> Edit nick </p>
 
         <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
 
           <div
 
             style={{
 
@@ -151,9 +156,10 @@ const EditSetting = ({
 
             </Button>
 
           </div>
 
         </SpoilerButton>
 
-        <h3> Edit password </h3>
 
-        <SpoilerButton text={'Change password'} style={{ width: '100%' }}>
 
-          <h3> Login</h3>
 
+        <p> Edit password </p>
 
+          <SpoilerButton text={'Change password'}
 
+            style={{ width: '100%', marginBottom:'10px' }}>
 
+          <p> Login</p>
 
           <div
 
             style={{
 
               display: 'flex',
 
@@ -167,7 +173,7 @@ const EditSetting = ({
 
               type={true}
 
             />
 
           </div>
 
-          <h3> Old password</h3>
 
+          <p> Old password</p>
 
           <div
 
             style={{
 
               display: 'flex',
 
@@ -193,7 +199,7 @@ const EditSetting = ({
 
               />
 
             )}
 
           </div>
 
-          <h3> New password</h3>
 
+          <p> New password</p>
 
           <div
 
             style={{
 
               display: 'flex',
 
@@ -243,7 +249,8 @@ const EditSetting = ({
 
               Save new password
 
             </Button>
 
           </div>
 
-        </SpoilerButton>
 
+          </SpoilerButton>
 
+          </div>
 
       </ConstructorModal>
 
     </div>
 
   )

+ 29 - 0
src/providers/ThemeProvider.js
View File 

@@ -0,0 +1,29 @@
 
+import React from 'react'
 
+import { ThemeContext, themes } from '../contexts/ThemeContext'
 
+
 
+const getTheme = () => {
 
+  const theme = `${window?.localStorage?.getItem('theme')}`
 
+  if (Object.values(themes).includes(theme)) return theme
 
+
 
+  const userMedia = window.matchMedia('(prefers-color-scheme: light)')
 
+  if (userMedia.matches) return themes.light
 
+
 
+  return themes.dark
 
+}
 
+
 
+const ThemeProvider = ({ children }) => {
 
+  const [ theme, setTheme ] = React.useState(getTheme)
 
+
 
+  React.useEffect(() => {
 
+    document.documentElement.dataset.theme = theme
 
+    localStorage.setItem('theme', theme)
 
+  }, [ theme ])
 
+
 
+  return (
 
+    <ThemeContext.Provider value={{ theme, setTheme }}>
 
+      {children}
 
+    </ThemeContext.Provider>
 
+  )
 
+}
 
+
 
+export default ThemeProvider

+ 20 - 0
src/redux/reducers/searchReducer.js
View File 

@@ -0,0 +1,20 @@
 
+
 
+export const searchReducer = (state = {}, { type, searchUser}) => {
 
+    const types = {
 
+        'SEARCH': () => {
 
+            return {
 
+                ...state,
 
+                searchUser,
 
+            }
 
+        },
 
+        'CLEAR_SEARCH': () => {
 
+            return {
 
+                searchUser: {},
 
+            }
 
+        },
 
+    }
 
+    if (type in types) {
 
+      return types[type]()
 
+    }
 
+    return state
 
+  }

+ 3 - 1
src/redux/rootSaga.js
View File 

@@ -23,6 +23,7 @@ import { onePostWatcher, postsWatcher } from './saga/post'
 
 import { changeLikePostWatcher, changeLikePostFeedWatcher } from './saga/like'
 
 import { changeSubscribeWatcher } from './saga/subscribe'
 
 import { editPostWatcher } from './saga/post'
 
+import {searchWatcher} from './saga/search'
 
 function* rootSaga() {
 
   yield all([
 
     promiseWatcher(),
 
@@ -46,7 +47,8 @@ function* rootSaga() {
 
     getSubCommentWatcher(),
 
     changeLikePostFeedWatcher(),
 
     getSubCommentFeedWatcher(),
 
-    addSubCommentFeedWatcher()
 
+    addSubCommentFeedWatcher(),
 
+    searchWatcher()
 
   ])
 
 
 }

+ 18 - 0
src/redux/saga/search/index.js
View File 

@@ -0,0 +1,18 @@
 
+import { promiseWorker } from '../promise'
 
+import { put, takeLeading, takeEvery, call, select } from 'redux-saga/effects'
 
+import { actionSearchUser } from "../../../actions/query/searchUserQuery"
 
+import { actionSearchType } from "../../../actions/types/searchType"
 
+export function* searchWorker({ searchUser }) {
 
+    const findUser = yield call(
 
+        promiseWorker,
 
+        actionSearchUser(searchUser),
 
+    )
 
+      if (findUser) {
 
+        yield put(actionSearchType(findUser))
 
+      }
 
+    }
 
+  
+  export function* searchWatcher() {
 
+      yield takeEvery('SEARCH-USERS',
 
+      searchWorker)
 
+  }

+ 2 - 0
src/redux/store.js
View File 

@@ -8,6 +8,7 @@ import { postReducer } from './reducers/postReducer'
 
 import { exploreReducer } from './reducers/exploreReducer'
 
 import createSagaMiddleware from 'redux-saga'
 
 import rootSaga from './rootSaga'
 
+import { searchReducer } from './reducers/searchReducer'
 
 const sagaMiddleware = createSagaMiddleware()
 
 
 export const store = createStore(
 
@@ -19,6 +20,7 @@ export const store = createStore(
 
     feed: feedReducer,
 
     post: postReducer,
 
     explore: exploreReducer,
 
+    search: searchReducer
 
   }),
 
   applyMiddleware(sagaMiddleware),
 
 )