th3cyb3rhub · 0xk4b1r · Oct 31, 2024 · Oct 14, 2024 · Oct 28, 2024 · Oct 30, 2024
diff --git a/src/App.css b/src/App.css
@@ -54,3 +54,9 @@ html {
 ::-webkit-resizer {
     background-color: #666;
 }
+
+@media (min-width: 980px) {
+    #main-searchbar {
+        display: none;
+    }
+}
diff --git a/src/components/CaptureTheFlag/CTFElements.jsx b/src/components/CaptureTheFlag/CTFElements.jsx
@@ -241,7 +241,7 @@ export const SearchContainer = styled.div`
     /* margin: 10px 0; */
     background: #090909;
     border-radius: 4px;
-    padding: 25px;
+    padding: 5px;
 `;
 
 export const SearchDifficulty = styled.div`

diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
@@ -27,6 +27,7 @@ export const SearchBox = styled.div`
     align-items: center;
     background: #252525;
     border-radius: 5px;
+    width: 100%;
 `;
 
 export const SearchIcon = styled.div`

diff --git a/src/components/Common/SocialSidebar/Sidebar.jsx b/src/components/Common/SocialSidebar/Sidebar.jsx
@@ -22,6 +22,7 @@ const Sidebar = ({
     data,
     selectedTags,
     setSelectedTags,
+    hideNav = false,
 }) => {
     const renderFollowingFilterButtons = () => (
         <>
@@ -87,7 +88,7 @@ const Sidebar = ({
     );
 
     return (
-        <SidebarContainer $sidebarType={sidebarType}>
+        <SidebarContainer $sidebarType={sidebarType} className={hideNav ? "hide-nav" : ""}>
             {sidebarType === "blogs" && (
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
                     {user?.role === "admin" || user?.role === "team" ? (

diff --git a/src/components/Common/SocialSidebar/SidebarElements.jsx b/src/components/Common/SocialSidebar/SidebarElements.jsx
@@ -13,6 +13,14 @@ export const SidebarContainer = styled.div`
     color: #fff;
     box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
     border-radius: 10px;
+
+    @media screen and (width <= 1280px) {
+        min-width: 80%;
+    }
+
+    @media screen and (width <= 1080px) {
+        width: 96%;
+    }
 `;
 
 export const FilterButton = styled.button`

diff --git a/src/components/Feeds/Feeds.jsx b/src/components/Feeds/Feeds.jsx
@@ -100,6 +100,7 @@ const Feeds = () => {
                         data={feeds}
                         selectedTags={selectedTags}
                         setSelectedTags={setSelectedTags}
+                        hideNav={true}
                     />
                 </LeftContainer>
             </FeedsContainer>

diff --git a/src/components/Feeds/FeedsElements.jsx b/src/components/Feeds/FeedsElements.jsx
@@ -8,6 +8,11 @@ export const FeedsContainer = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+
+    @media screen and (width <= 1160px) {
+        gap: 1%;
+    }
+
 `;
 
 export const MiddleSection = styled.div`

diff --git a/src/components/Feeds/PostForm/ModifyFeed.jsx b/src/components/Feeds/PostForm/ModifyFeed.jsx
@@ -9,6 +9,9 @@ import { cdnContentImagesUrl } from "src/features/apiUrl";
 import { CircleSpinner } from "react-spinners-kit";
 import { toast } from "react-toastify";
 import { ImageInput, ImagePreview, useUploadImages } from "src/components/Common/ImageUpload";
+import { SearchContainer } from "src/components/CaptureTheFlag/CTFElements";
+import SearchInputBox from "src/components/Common/SearchInputBox";
+import { RouterNavCreateButtonLink } from "src/components/Header/Navbar/NavbarElements";
 
 const MAX_IMAGE_SIZE_BYTES = 1048576;
 const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" }) => {
@@ -37,10 +40,14 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" })
     const [content, setContent] = useState(editFeed?.content || "");
     const [tags, setTags] = useState(editFeed?.tags || []);
     const [showAuthPopup, setShowAuthPopup] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
 
     const MAX_CHARACTER_COUNT = 1500;
 
     const [remainingCharacters, setRemainingCharacters] = useState(MAX_CHARACTER_COUNT);
+    const handleSearchTermChange = (event) => {
+        setSearchTerm(event.target.value);
+    };
 
     useEffect(() => {
         setRemainingCharacters(MAX_CHARACTER_COUNT - content.length);
@@ -98,65 +105,87 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" })
     const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id);
     const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || editFeed?.avatar || "avatar.png"));
     return (
-        <AddFeedCommentContainer onDrop={(e) => onImageDrop(e, true, 4)} onDragOver={onImageDragOver}>
-            {!editFeed && (
-                <LeftSection>
-                    <PostHeaderImg src={avatar} alt="Profile picture" />
-                </LeftSection>
-            )}
-            <RightSection>
-                <div>
-                    <FeedCommentInput
-                        ref={textareaRef}
-                        placeholder="What's on your mind?"
-                        value={content}
-                        onChange={handleChange}
-                        onPaste={(e) => onImagePaste(e, true, 4)}
+        <>
+            <div id="main-searchbar" className="my-4">
+                <SearchContainer>
+                    {/* <input placeholder="search" /> */}
+                    <SearchInputBox
+                        placeholder="Search by name"
+                        value={searchTerm}
+                        onChange={handleSearchTermChange}
+                        setValue={setSearchTerm}
+                        hideNav={true}
                     />
-                    <p
-                        style={{
-                            color:
-                                remainingCharacters <= 99 ? "#ff2525" : remainingCharacters <= 500 ? "#ff6b08" : "grey",
-                            width: "100%",
-                            textAlign: "right",
-                            fontSize: "12px",
-                            fontWeight: "bold",
-                            // border: '1px solid #ff6b08',
-                            marginTop: "-15px",
-                            marginBottom: "-10px",
-                        }}
-                    >
-                        {remainingCharacters < 0 ? "-" : ""} {Math.abs(remainingCharacters)}
-                    </p>
+                </SearchContainer>
+                <div className="flex justify-between p-2">
+                    <RouterNavCreateButtonLink to={"/feeds/my-feeds"}>View My Feeds</RouterNavCreateButtonLink>
+                    <RouterNavCreateButtonLink to={"/dashboard/saved"}>Saved</RouterNavCreateButtonLink>
                 </div>
-
-                <ImagePreview files={images} filesName={imagesName} onRemove={onImageRemove} />
-
-                {showPostTags && <AddPostTags tags={tags} setTags={setTags} />}
-
-                <FooterSection>
-                    <ImageInput
-                        inputName={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
-                        onChange={(e) => onImageChange(e, true, 4)}
-                        labelStyles={{ background: "transparent", border: "transparent", padding: "0" }}
-                        filesName={imagesName}
-                        multiple
-                        key={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
-                    />
-
-                    {isFeedLoading ? (
-                        <PostFormButton>
-                            <CircleSpinner size={17} />
-                        </PostFormButton>
-                    ) : (
-                        <PostFormButton onClick={handleSubmit}>{editFeed ? "Update" : "Create"}</PostFormButton>
-                    )}
-                </FooterSection>
-            </RightSection>
-
-            {/* Render the AuthPopup component */}
-            {showAuthPopup && <AuthPopup onClose={() => setShowAuthPopup(false)} />}
-        </AddFeedCommentContainer>
+            </div>
+            <AddFeedCommentContainer onDrop={(e) => onImageDrop(e, true, 4)} onDragOver={onImageDragOver}>
+                {!editFeed && (
+                    <LeftSection>
+                        <PostHeaderImg src={avatar} alt="Profile picture" />
+                    </LeftSection>
+                )}
+                <RightSection>
+                    <div>
+                        <FeedCommentInput
+                            ref={textareaRef}
+                            placeholder="What's on your mind?"
+                            value={content}
+                            onChange={handleChange}
+                            onPaste={(e) => onImagePaste(e, true, 4)}
+                        />
+                        <p
+                            style={{
+                                color:
+                                    remainingCharacters <= 99
+                                        ? "#ff2525"
+                                        : remainingCharacters <= 500
+                                          ? "#ff6b08"
+                                          : "grey",
+                                width: "100%",
+                                textAlign: "right",
+                                fontSize: "12px",
+                                fontWeight: "bold",
+                                // border: '1px solid #ff6b08',
+                                marginTop: "-15px",
+                                marginBottom: "-10px",
+                            }}
+                        >
+                            {remainingCharacters < 0 ? "-" : ""} {Math.abs(remainingCharacters)}
+                        </p>
+                    </div>
+
+                    <ImagePreview files={images} filesName={imagesName} onRemove={onImageRemove} />
+
+                    {showPostTags && <AddPostTags tags={tags} setTags={setTags} />}
+
+                    <FooterSection>
+                        <ImageInput
+                            inputName={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
+                            onChange={(e) => onImageChange(e, true, 4)}
+                            labelStyles={{ background: "transparent", border: "transparent", padding: "0" }}
+                            filesName={imagesName}
+                            multiple
+                            key={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
+                        />
+
+                        {isFeedLoading ? (
+                            <PostFormButton>
+                                <CircleSpinner size={17} />
+                            </PostFormButton>
+                        ) : (
+                            <PostFormButton onClick={handleSubmit}>{editFeed ? "Update" : "Create"}</PostFormButton>
+                        )}
+                    </FooterSection>
+                </RightSection>
+
+                {/* Render the AuthPopup component */}
+                {showAuthPopup && <AuthPopup onClose={() => setShowAuthPopup(false)} />}
+            </AddFeedCommentContainer>
+        </>
     );
 };
 

diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx
@@ -220,6 +220,11 @@ export const RouterNavCreateButtonLink = styled(Link)`
         font-size: 12px;
     }
 
+    @media screen and (width <= 1280px) {
+        min-width: 10px;
+        font-size: 14px;
+    }
+
     /* @media screen and (max-width: 1150px) {
      display: none;
     }

diff --git a/src/index.css b/src/index.css
@@ -20,3 +20,9 @@ code {
     background-color: #ff6b08;
     color: #000000;
 }
+
+@media (width <= 980px) {
+    .hide-nav {
+        display: none !important;
+    }
+}