Merge branch 'FearlessTech:main' into network-page-wireframe

FearlessTech · Jan 12, 2023 · 3d93b49 · 3d93b49
2 parents 06f5a25 + 7068959
commit 3d93b49
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 186 deletions.
diff --git a/public/images/MaineRRLogo.png b/public/images/MaineRRLogo.png
diff --git a/public/images/RRLogo.png b/public/images/RRLogo.png
diff --git a/src/Doublechecks.md b/src/Doublechecks.md
@@ -0,0 +1,9 @@
+
+
+
+In `src/components/ResourcesComponents/styledResourcePopup.jsx`
+under `const Popup = styled.div`
+```jsx
+margin: auto;
+margin-top: 4%;
+```
diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -10,7 +10,6 @@ const AboutUs = (props) => {
             height="275"
             src="https://www.youtube.com/embed/pBy1zgt0XPc"
             title="YouTube video player"
-            frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
           ></iframe>

diff --git a/src/components/Posts/PostModal.jsx b/src/components/Posts/PostModal.jsx
@@ -17,7 +17,7 @@ import {
   AttachAssets,
   PostButton,
   Editor,
-} from "../../styles/stylesPostModal.jsx";
+} from "./stylesPostModal.jsx";
 import ReactPlayer from "react-player";
 import { useRef } from "react";
 

diff --git a/src/styles/stylesPostModal.jsx → src/components/Posts/stylesPostModal.jsx b/src/styles/stylesPostModal.jsx → src/components/Posts/stylesPostModal.jsx
diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 import { AiOutlineUserAdd, AiOutlinePlus } from "react-icons/ai";
 import { BsFillBookmarkFill } from "react-icons/bs";
-
+import ResourceCheckBoxes from "./ResourceCheckBoxes";
 import {
   Container,
   ArtCard,
@@ -23,7 +23,6 @@ import {
   PFHeading,
   Content,
 } from "../styles/stylesProfile.jsx";
-import ResourceCheckBoxes from "./ResourceCheckBoxes";
 
 const Profile = (props) => {
   return (

diff --git a/src/components/ResourcesComponents/ResourcePopup.jsx b/src/components/ResourcesComponents/ResourcePopup.jsx
@@ -1,103 +1,44 @@
 import React from "react";
 import { AiOutlineCloseCircle } from "react-icons/ai";
-
+import ResourceCheckBoxes from "../ResourceCheckBoxes";
 import {
   Popup,
-  HR,
   Top,
   Content,
-  SubContent,
-  LeftCon,
-  RightCon,
-  Bottom,
-  LeftB,
-  RightB,
-  Switch,
+  RPUHeading,
+  OrgInfo,
+  ResourceDescription,
+  ResourcesCheckBoxes,
 } from "./styledResourcePopup";
 
-export const ResourcePopup = () => {
+export const ResourcePopup = (props) => {
   return (
-    <Popup>
-      <Top>
-        <p>Resource alerts</p>
-        <AiOutlineCloseCircle />
-      </Top>
-      <HR />
-      <Content>
-        <SubContent>
-          <LeftCon>
-            <h4>Resources</h4>
-            <h6>Maine</h6>
-            <p>Frequency: Daily via email and notification</p>
-            <p>Get notified of similar Resources: Yes</p>
-          </LeftCon>
-          <RightCon>
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1659/1659682.png"
-              alt=""
-            />
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1345/1345823.png"
-              alt=""
-            />
-          </RightCon>
-        </SubContent>
-        <SubContent>
-          <LeftCon>
-            <h4>resource at India</h4>
-            <h6>India</h6>
-            <p>Frequency: Daily via email and notification</p>
-            <p>Get notified of similar Resources: Yes</p>
-          </LeftCon>
-          <RightCon>
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1659/1659682.png"
-              alt=""
-            />
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1345/1345823.png"
-              alt=""
-            />
-          </RightCon>
-        </SubContent>
-        <SubContent>
-          <LeftCon>
-            <h4>resource at India</h4>
-            <h6>India</h6>
-            <p>Frequency: Daily via email and notification</p>
-            <p>Get notified of similar Resources: Yes</p>
-          </LeftCon>
-          <RightCon>
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1659/1659682.png"
-              alt=""
-            />
-            <img
-              src="https://cdn-icons-png.flaticon.com/128/1345/1345823.png"
-              alt=""
-            />
-          </RightCon>
-        </SubContent>
-      </Content>
-      <HR />
-      <Bottom>
-        <LeftB>
-          <h4>Resources recommendations</h4>
-          <h6>
-            Based on your Resources alerts, activity, and profile.
-            <span className="blue">Learn more.</span>{" "}
-          </h6>
-        </LeftB>
-        <RightB>
-          {/* <span className='gray'>On</span> */}
-          <Switch>
-            <input />
-            <span></span>
-          </Switch>
-        </RightB>
-      </Bottom>
-      <HR />
-      <button>Done</button>
-    </Popup>
+    <>
+      {props.showModal === "open" && (
+        <Popup>
+          <Top>
+            <p>Resource alerts</p>
+            <AiOutlineCloseCircle />
+          </Top>
+          <OrgInfo>
+            <RPUHeading></RPUHeading>
+            <img src="/images/user.svg" alt="" />
+            <Content></Content>
+          </OrgInfo>
+          <ResourceDescription>
+            <RPUHeading></RPUHeading>
+            <Content></Content>
+          </ResourceDescription>
+          <ResourcesCheckBoxes>
+            <RPUHeading></RPUHeading>
+            <Content>
+              <ResourceCheckBoxes />
+            </Content>
+          </ResourcesCheckBoxes>
+
+          <button>Done</button>
+        </Popup>
+      )}
+    </>
   );
 };
diff --git a/src/components/ResourcesComponents/Resources.jsx b/src/components/ResourcesComponents/Resources.jsx
@@ -3,6 +3,8 @@ import styles from "./Resources.module.css";
 import ResourceOutput from "./ResourceOutput";
 import ResourcesItem from "./ResourcesItem";
 import { SearchResults } from "../Search/SearchResults";
+import PostModal from "../Posts/PostModal";
+import { ResourcePopup } from "./ResourcePopup";
 const Resources = (props) => {
   const [showModal, setShowModal] = useState("close");
 
@@ -58,6 +60,9 @@ const Resources = (props) => {
           <ResourcesItem />
         </div>
       </div>
+      {showModal === "open" && (
+        <ResourcePopup showModal={showModal} handleClick={handleClick} />
+      )}
     </div>
   );
 };

diff --git a/src/components/ResourcesComponents/Resources.module.css b/src/components/ResourcesComponents/Resources.module.css
@@ -1,15 +1,16 @@
 @import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
 .container {
-  display: none;
   padding-top: 103px;
   max-width: 2150px;
   display: flex;
-  height: max-content;
+  height: 80%;
   gap: 73px;
   background-color: #ffffff;
   min-height: 100vh;
   padding-left: 75px;
   padding-right: 75px;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 .searchBox {
   flex: 0 1 30%;

diff --git a/src/components/ResourcesComponents/styledResource.jsx b/src/components/ResourcesComponents/styledResource.jsx
@@ -39,8 +39,6 @@ const StyledLeftASide = styled.div`
     margin: 3rem auto;
     width: 100%;
     max-width: auto;
-    width: 100%;
-    max-width: auto;
   }
 `;
 
@@ -125,8 +123,6 @@ const StyledMiddleAside = styled.div`
     margin: 1rem auto 0rem auto;
     width: 100%;
     max-width: auto;
-    width: 100%;
-    max-width: auto;
   }
 `;
 

diff --git a/src/components/ResourcesComponents/styledResourcePopup.jsx b/src/components/ResourcesComponents/styledResourcePopup.jsx
@@ -1,13 +1,23 @@
 import styled from "styled-components";
 
 const Popup = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: whitesmoke;
   width: 56%;
   border-radius: 10px;
   padding: 1%;
-  margin: auto;
-  margin-top: 3%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 4%;
   border: 1px solid rgb(201, 201, 201);
-  height: 70%;
+  height: 85%;
+  overflow-y: scroll;
+  overflow-x: hidden;
   button {
     border-radius: 50px;
     padding: 7px 20px;
@@ -18,11 +28,7 @@ const Popup = styled.div`
     cursor: pointer;
   }
 `;
-const HR = styled.div`
-  width: 103.5%;
-  margin-left: -1.9%;
-  margin-top: 1%;
-`;
+
 const Top = styled.div`
   display: flex;
   p {
@@ -44,94 +50,39 @@ const Top = styled.div`
   }
 `;
 const Content = styled.div`
-  height: 300px;
+  min-height: 100px;
+  background-color: whitesmoke;
+  margin-left: 40px;
   overflow-y: scroll;
   /* border: 1px solid blue; */
 `;
-const SubContent = styled.div`
+
+const RPUHeading = styled.div`
+  background-color: #077a7a;
+  height: 50px;
   display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  padding-right: 20px;
+  color: whitesmoke;
 `;
-const LeftCon = styled.div`
-  width: 85%;
-  line-height: 5px;
-  /* border: 1px solid red; */
-  h4 {
-    hover {
-      color: rgb(27, 126, 255);
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-  p {
-    color: gray;
-  }
-`;
-const RightCon = styled.div`
-  display: flex;
+
+const OrgInfo = styled.div`
   img {
-    width: 20px;
-    margin: 15%;
-    height: 20px;
-    padding: 10%;
-    /* border: 3px solid red; */
-    hover {
-      cursor: pointer;
-      border-radius: 50px;
-      background-color: rgb(209, 209, 209);
-    }
-  }
-`;
-const Bottom = styled.div`
-  display: flex;
-`;
-const LeftB = styled.div`
-  width: 85%;
-  line-height: 5px;
-  color: rgb(27, 126, 255);
-  span {
-    hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
+    width: 20%;
   }
 `;
-const RightB = styled.div`
-  margin: 3% 0 0 -1%;
-`;
 
-const Switch = styled.label`
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  span {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-  }
-`;
+const ResourceDescription = styled.div``;
+
+const ResourcesCheckBoxes = styled.div``;
 
 export {
   Popup,
-  HR,
   Top,
   Content,
-  SubContent,
-  LeftCon,
-  RightCon,
-  Bottom,
-  LeftB,
-  RightB,
-  Switch,
+  RPUHeading,
+  OrgInfo,
+  ResourceDescription,
+  ResourcesCheckBoxes,
 };