Moved saved posts from sidebar to profile (#1126)

* Moved saved posts from sidebar to profile * style: format --------- Co-authored-by: narayan soni <[email protected]>
narayan954 · Aug 5, 2023 · 0fbcb5e · 0fbcb5e
1 parent f4dd063
commit 0fbcb5e
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 160 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -28,7 +28,6 @@ const Contributors = React.lazy(() =>
   import("./pages/FooterPages/ContributorPage"),
 );
 // ------------------------------------- Components ------------------------------------------------
-const Favorite = React.lazy(() => import("./components/Favorite"));
 const Notifications = React.lazy(() => import("./components/Notification"));
 const Post = React.lazy(() => import("./components/Post"));
 const SideBar = React.lazy(() => import("./components/SideBar"));
@@ -388,14 +387,6 @@ function App() {
             />
 
             <Route path="*" element={<NotFound />} />
-            <Route
-              path="/dummygram/favourites"
-              element={
-                <ErrorBoundary inApp={true}>
-                  <Favorite />
-                </ErrorBoundary>
-              }
-            />
           </Routes>
           {/* below scroll button must be checked for implementation */}
           <FaArrowCircleUp

diff --git a/src/components/Favorite.jsx b/src/components/Favorite.jsx
diff --git a/src/components/SideBar/index.css b/src/components/SideBar/index.css
@@ -85,7 +85,7 @@
 
 .sidebar_user_dropdown_container {
   position: absolute;
-  top: 390px;
+  top: 333px;
   left: 100px;
   padding: 0;
   border-radius: 10px;

diff --git a/src/components/SideBar/index.jsx b/src/components/SideBar/index.jsx
@@ -11,7 +11,6 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { AiOutlineClose } from "react-icons/ai";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import BookmarksIcon from "@mui/icons-material/Bookmarks";
 import { ClickAwayListener } from "@mui/material";
 import { Dialog } from "@mui/material";
 import ErrorBoundary from "../../reusableComponents/ErrorBoundary";
@@ -100,21 +99,6 @@ function SideBar({ anonymous }) {
               <AddCircleOutlineIcon className="icon" /> <span>Create</span>
             </div>
           </li>
-          <li
-            onClick={() =>
-              navigate(`/dummygram/${anonymous ? "signup" : "favourites"}`)
-            }
-            className={
-              location.pathname.includes("/dummygram/favourites")
-                ? "activeTab"
-                : ""
-            }
-          >
-            <div className="sidebar_align">
-              <BookmarksIcon className="icon" />
-              <span>Saved</span>
-            </div>
-          </li>
           <li
             onClick={() =>
               navigate(`/dummygram/${anonymous ? "signup" : "notifications"}`)

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,7 +1,6 @@
 import Caption from "./Post/Caption";
 import ChatBox from "./CommunityChat";
 import EditProfile from "./EditProfile";
-import Favorite from "./Favorite";
 import GuestSignInBtn from "./Guest/GuestSignInBtn";
 import GuestSignUpBtn from "./Guest/GuestSignUpBtn";
 import ImgUpload from "./ImgUpload";
@@ -19,7 +18,6 @@ export {
   Caption,
   ChatBox,
   EditProfile,
-  Favorite,
   GuestSignInBtn,
   GuestSignUpBtn,
   ImgUpload,

diff --git a/src/pages/Profile/index.css b/src/pages/Profile/index.css
@@ -16,6 +16,55 @@
   margin: auto;
 }
 
+.feed_btn_container {
+  margin-left: 17vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  padding: 10px;
+}
+
+.feed_change_btn {
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  padding-inline: 20px;
+  cursor: pointer;
+  background: var(--bg-color);
+  border: none;
+  color: var(--text-secondary);
+}
+
+.feed_btn_deactivated {
+  opacity: 0.7;
+  color: var(--profile-color);
+}
+
+.feed_btn_deactivated:hover {
+  opacity: 1;
+}
+
+.feed_btn_activated {
+  border-top: 4px solid;
+}
+
+.feed_btn_text {
+  margin-left: 8px;
+}
+
+.outer-profile-box {
+  position: relative;
+  margin-top: 0;
+  width: 85%;
+  padding-block: 5px;
+  padding-inline: 6px;
+  border: none;
+  margin: 0rem auto 2rem;
+}
 .user-details-section {
   display: flex;
   z-index: 99;
@@ -231,6 +280,12 @@
   transition: all 0.3s ease;
 }
 
+.no_posts_msg {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
 /* media query */
 
 @media screen and (max-width: 600px) {
@@ -265,7 +320,25 @@
   }
 }
 
+@media screen and (max-width: 1200px) {
+  .background-image-container {
+    padding: 4em 0 0 8vw;
+  }
+
+  .feed_btn_container {
+    margin-left: 8vw;
+  }
+}
+
 @media screen and (max-width: 800px) {
+  .outer-profile-box {
+    width: calc(100% - 10vw);
+  }
+
+  .feed_btn_container {
+    margin-left: 0;
+  }
+
   .background-image-container {
     padding: 0 !important;
     padding-top: 4em !important;
@@ -294,15 +367,6 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
-  .background-image-container {
-    padding: 4em 0 0 8vw;
-  }
-  .user-details-section {
-    padding: 0 12vw;
-  }
-}
-
 @media screen and (min-width: 1200px) {
   .outer-profile-box {
     width: calc(100% - 34vw);