Responsiveness

README.md

@@ -39,15 +39,15 @@ This project is centered on enabling people within the tech ecosystem to share/g
 <!-- PROJECT LINKS -->
 ### Project Links
 
-- Project Documentation - https://docs.google.com/document/d/1lgoH_PtHqetFhnvqx-dK8v78pIeqiglOnmbXwsw72Eg/edit
+<!-- - Project Documentation - https://docs.google.com/document/d/1lgoH_PtHqetFhnvqx-dK8v78pIeqiglOnmbXwsw72Eg/edit -->
 <!-- - Design Link - https://www.figma.com/file/SR7xS1DbOfIOwpqa1MpDHv/?node-id=0%3A1 -->
 - Frontend Github Repo - https://github.com/zuri-training/creer-fe-pjt-105
-- Backend Github Repo - https://github.com/zuri-training/MyIssue-be-pjt-105
+<!-- - Backend Github Repo - https://github.com/zuri-training/MyIssue-be-pjt-105 -->
 
 
 
 <!-- INSTALLATION -->
-## Installation
+## Run Locally
 
 - After cloning the files, Navigate into the project folder (For you to have the file locally on your machine you will have to follow the steps below.)
   ```javascript
@@ -85,11 +85,11 @@ This project is centered on enabling people within the tech ecosystem to share/g
 
 This project is only possible thanks to the wonderful people that carried it from just an idea all the way to a live product that is making life a lot easier.
 
-Below is a list of these wonderful people;
+Below is a list of the wonderful people;
 
 - [Imiebo Godson](https://github.com/ImieboGodson) - Frontend Developer
 - [Adekola Mariam](https://github.com/Marrockx) - Frontend Developer
 - [Okoroafor Daniel](https://github.com/OkoroaforDaniel) -Frontend Developer
-- [Praise Odoh](https://github.com/odohpraise) - Frontend Developer
+- [Praise Odoh](https://github.com/odohpraise) - Frontend Developer 
 
 

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@mantine/core": "^5.2.3",
+    "@mantine/hooks": "^5.2.3",
+    "@mantine/rte": "^5.2.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^3.0.0"
   },
   "scripts": {
     "predeploy": "npm run build",

src/App.js

@@ -1,35 +1,27 @@
-import { useState } from 'react';
-import './App.css'
-import RoutingComponent from './containers/routingComponent';
-import Header from './components/Header/Header';
-import { useLocation } from 'react-router-dom';
+import { useState } from "react";
+import { MantineProvider } from "@mantine/core";
+import "./App.css";
+import RoutingComponent from "./containers/routingComponent";
+import Header from "./components/Header/Header";
+import { useLocation } from "react-router-dom";
 
 function App() {
-
   const [isAuth, setIsAuth] = useState(false);
 
-  const routeName = useLocation().pathname.split('/')[1];
-  const isFormPage = routeName === 'signup' || routeName === 'signin';
-  console.log(isFormPage);
+  const routeName = useLocation().pathname.split("/")[1];
+  const isFormPage = routeName === "signup" || routeName === "signin";
 
   const onAuth = () => {
     setIsAuth(true);
-  }
+  };
 
   return (
-    <div className="App">
-        <>
-          {
-            (!isFormPage) ?
-            (
-              <Header isAuth={isAuth}/>
-            )
-            :
-            ('')
-          }
-        </>
-        <RoutingComponent setAuth={onAuth} isUserAuth={isAuth}/>
-    </div>
+    <MantineProvider>
+      <div className="App">
+        <>{!isFormPage ? <Header isAuth={isAuth} /> : ""}</>
+        <RoutingComponent setAuth={onAuth} isUserAuth={isAuth} />
+      </div>
+    </MantineProvider>
   );
 }
 

src/components/AboutCommunity/AboutCommunity.js

@@ -0,0 +1,21 @@
+import './AboutCommunity.css'
+import ContentWrapper from '../ContentWrapper/ContentWrapper'
+
+const AboutCommunity = () => {
+  return (
+    <ContentWrapper>
+        <header className='contentWrapper-header'>
+            <p className='contentWrapper-title'>About</p>
+        </header>
+        <div className='contentWrapper-main'>
+            <p>Google Question Hub is a Platform to gather a lot of Knowledge.<br></br><br></br>
+            There are two main Goals here: <br></br><br></br>
+            1. To spread interesting content: Any content that might be interesting for people to see is welcome in this space. It could be in any format: a link, a share of another Quora answer, or an answer to a question already in this space, but it shouldn’t be of excessively low quality.<br></br><br></br>
+            2. Invite and Sharing: Make sure to invite your followers to this space, click on any ads you see, and otherwise simply be engaged in the space.
+            </p>
+        </div>
+    </ContentWrapper>
+  )
+}
+
+export default AboutCommunity

src/components/AuthLayout/AuthLayout.css

@@ -0,0 +1,15 @@
+#layoutWrapper {
+    max-width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background-color: rgb(240, 240, 240);
+  }
+
+  @media (max-width: 640px) {
+    #layoutWrapper {
+      background-color: rgb(255, 255, 255);
+    }
+  }

src/components/AuthLayout/AuthLayout.js

@@ -0,0 +1,7 @@
+import "./AuthLayout.css";
+
+const AuthLayout = ({ children }) => {
+  return <div id="layoutWrapper">{children}</div>;
+};
+
+export default AuthLayout;

src/components/Comment/Comment.css

@@ -1,8 +1,9 @@
 .comment {
     padding: 10px 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.207);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.207);
     /* border-bottom: 1px solid rgba(0, 0, 0, 0.207); */
-    background-color: rgba(204, 204, 204, 0.138);
+    /* background-color: rgba(204, 204, 204, 0.138); */
+    background-color: rgba(252, 253, 253, 0.927);
 }
 
 
@@ -37,22 +38,31 @@
 }
 
 .commentInfo .userName {
+    font-size: 0.7rem;
+    line-height: 15px;
     font-weight: bold;
     cursor: pointer;
 }
 
+.userTitle {
+    margin-right: 10px;
+    font-size: 0.6rem;
+    font-weight: 300;
+}
+
 .commentBody {
     padding: 5px 35px 5px 70px;
-    cursor: pointer;
+    /* cursor: pointer; */
 }
 
 .commentBody p {
-    margin: 10px 0;
+    margin: 5px 0;
 }
 
 .commentBody .commentBodyText {
-    font-size: 14px;
+    font-size: 0.75rem;
     font-weight: 400;
+    line-height: 20px;
 }
 
 .commentFooter {
@@ -65,7 +75,7 @@
 
 .commentFooter p {
     margin: 0 0 0 5px;
-    font-size: 16px;
+    font-size: 0.8rem;
     font-weight: 400;
 }
 
@@ -86,6 +96,7 @@
     cursor: pointer;
     color: rgba(0, 0, 0, 0.713);
     border-radius: 5px;
+    background-color: rgba(227, 226, 226, 0.333);
 }
 
 .likeIcon.liked,
@@ -99,7 +110,7 @@
 
 .commentLikes:hover,
 .commentReply:hover {
-    background-color: rgba(55, 87, 255, 0.05);
+    background-color: rgba(227, 226, 226, 0.694);
 }
 
 .commentReplies.noDisplay {
@@ -125,16 +136,30 @@
 }
 
 .postAReply textarea {
-    width: 65%;
+    width: 68% !important;
     height: 34px;
-    padding: 6px;
-    border-radius: 10px;
+    border-radius: 3px;
     box-sizing: border-box;
+    padding: 8px 10px;
+    background: #FFFFFF;
+    border: 1px solid #9C9797;
+    font-size: 0.8rem;
+    font-weight: 500;
+    border: 1px solid #9C9797;
 }
 
 .postAReplyBtn {
+    padding: 10px 15px;
     border: none;
-    padding: 15px;
-    border-radius: 10px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: #fff;
+    background-color: #516df8;
     cursor: pointer;
+    transition: .2s;
+}
+
+.postAReplyBtn:hover {
+    background-color: #3757FF;
 }

src/components/Comment/Comment.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import './Comment.css';
 import { BiLike } from 'react-icons/bi';
 import { RiReplyLine } from 'react-icons/ri';
-import { Users } from '../../dummyData';
+import { Users } from '../../db';
 
 const Comment = ({ comment }) => {
 
@@ -28,7 +28,7 @@ const Comment = ({ comment }) => {
                     <img alt="user" src={process.env.PUBLIC_URL + Users.filter(u => u.id === comment.userId)[0].profilePicture} className='userprofileImage'/>
                     <div className='commentInfo'>
                         <p className='userName'>{Users.filter(u => u.id === comment.userId)[0].username}</p>
-                        <p className='userTitle'>{Users.filter(u => u.id === comment.userId)[0].jobRole}</p>
+                        <p className='userTitle'>{Users.filter(u => u.id === comment.userId)[0].jobRole}<span> · </span><span className='postTimeStamp'>5 days ago</span></p>
                     </div>
                 </div>
             </div>
@@ -38,11 +38,11 @@ const Comment = ({ comment }) => {
             <div className='commentFooter'>
                 <div className='commentfooterLeftSide'>
                     <div className='commentLikes' onClick={likeHandler}>
-                        <BiLike className={`likeIcon ${isLiked ? 'liked' : ''}`} size='1.5em'/>
+                        <BiLike className={`likeIcon ${isLiked ? 'liked' : ''}`} size='1.2rem'/>
                         <p className={`likeCounter ${isLiked ? 'liked' : ''}`}>{likes}</p>
                     </div>
                     <div className='commentReply' onClick={commentDisplayHandler}>
-                        <RiReplyLine className='replyIcon' size='1.5em'/>
+                        <RiReplyLine className='replyIcon' size='1.2rem'/>
                         <p>Reply</p>
                     </div>
                 </div>

src/components/CommunitiesToFollow/CommunitiesToFollow.css

@@ -1,21 +1,21 @@
 .communitiesToFollow {
     margin-top: 20px;
     width: 100%;
-    /* padding-bottom: 20px; */
     background-color: #fff;
     box-sizing: border-box;
-    border-radius: 5px;
+    border-radius: 3px;
     border: 1px solid #ccc;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
 }
 
 .communitiesToFollowHeader {
-    padding: 5px 10px;
+    padding: 10px;
     border-bottom: 1px solid #ccc;
 }
 
 .communitiesToFollowHeaderText {
     margin: 0;
-    font-size: 0.88rem;
+    font-size: 0.8rem;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.85);
     cursor: pointer;
@@ -42,11 +42,13 @@
 
 .communitiesToFollowListItem p {
     margin: 0;
-    font-size: 0.85rem;
+    font-size: 0.7rem;
     font-weight: 500;
     color: rgba(0, 0, 0, 0.775);
 }
 
 .communitiesToFollowListItem:hover {
-    background-color: rgba(250, 250, 241, 0.849);
+    /* background-color: rgba(250, 250, 241, 0.849); */
+    /* color: #000; */
+    background-color: rgba(227, 226, 226, 0.734);
 }