Layout fixes

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,4 +1,5 @@
 import { useState } from 'react';
+import { MantineProvider } from '@mantine/core';
 import './App.css'
 import RoutingComponent from './containers/routingComponent';
 import Header from './components/Header/Header';
@@ -17,6 +18,7 @@ function App() {
   }
 
   return (
+    <MantineProvider >
     <div className="App">
         <>
           {
@@ -30,6 +32,7 @@ function App() {
         </>
         <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/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

@@ -4,18 +4,18 @@
     /* padding-bottom: 20px; */
     background-color: #fff;
     box-sizing: border-box;
-    border-radius: 5px;
+    border-radius: 3px;
     border: 1px solid #ccc;
 }
 
 .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);
 }

src/components/ContentWrapper/ContentWrapper.css

@@ -0,0 +1,83 @@
+.contentWrapper-container {
+    margin-bottom: 20px;
+    width: 100%;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+    border: 1px solid #ccc;
+}
+
+.contentWrapper-padding-1 {
+    padding: 5px;
+}
+
+.contentWrapper-padding-2 {
+    padding: 10px;
+}
+
+.contentWrapper-header {
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    border-bottom: 0.5px solid #ccc;
+}
+
+.contentWrapper-header-text {
+    font-size: 0.8rem;
+    font-weight: 300;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.contentWrapper-title {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.contentWrapper-list {
+    list-style: none;
+}
+
+.contentWrapper-list > li {
+    padding: 8px 15px;
+    border-bottom: 0.5px solid #ccc;
+    font-size: 0.7rem;
+    line-height: 20px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.79);
+    transition: ease-in-out 0.3s all;
+}
+
+.contentWrapper-list > li:hover {
+    color: #000;
+    background-color: rgba(227, 226, 226, 0.103);
+}
+
+.contentWrapper-main {
+    padding: 10px 15px;
+}
+
+.contentWrapper-main > p {
+    font-size: 0.72rem;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.contentWrapper-footer {
+    padding: 10px 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.7rem;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
+    border-bottom: 0.5px solid #ccc;
+    cursor: pointer;
+}
+
+.contentWrapper-footer:hover {
+    color: #000;
+    background-color: rgba(227, 226, 226, 0.367);
+}

src/components/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,27 @@
+import './ContentWrapper.css'
+
+const ContentWrapper = ({ children, type }) => {
+
+  // const checkWrapperType = (wrapperType) => {
+  //   switch(wrapperType) {
+  //     case 'list':
+  //       return (
+  //         'Hello'
+  //       );
+  //     case 'card':
+  //       return (
+  //         <main>Admins can manage submissions, content, and settings</main>
+  //       );
+  //     default:
+  //       return 'Error: wrapper type not specified.';
+  //   }
+  // }
+
+  return (
+    <div className='contentWrapper-container'>
+        {children}
+    </div>
+  )
+}
+
+export default ContentWrapper;