Mayank0255 · Mayank0255 · Mar 6, 2022 · Mar 6, 2022 · Mar 6, 2022 · Mar 6, 2022
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
+    "feather-icons": "^4.28.0",
     "moment": "^2.29.1",
     "prop-types": "^15.8.0",
     "react": "^17.0.2",

diff --git a/public/index.html b/public/index.html
@@ -13,16 +13,13 @@
     <title>CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
     <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7' >
     <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=c5fdf309f06b' >
-    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
-    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
   </head>
   <body class='theme-dark'>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id='root'></div>
     <script src='https://unpkg.com/@stackoverflow/stacks-icons'></script>
     <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'></script>
-    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossorigin='anonymous'></script>
     <script>
       let pageX = $(document).width();
       let pageY = $(document).height();

diff --git a/src/assets/Database.svg b/src/assets/Database.svg
diff --git a/src/assets/GitHub.svg b/src/assets/GitHub.svg
diff --git a/src/assets/Hamburger.svg b/src/assets/Hamburger.svg
diff --git a/src/components/Alert/Alert.component.jsx b/src/components/Alert/Alert.component.jsx
@@ -7,8 +7,8 @@ import './Alert.styles.scss';
 const Alert = ({alerts}) =>
   alerts !== null &&
   alerts.length > 0 &&
-  alerts.map((alert) => (
-    <div key={alert.id} className={`alert alert-${alert.alertType} fw-normal`}>
+  alerts.map((alert, index) => (
+    <div key={index} className={`alert alert-${alert.alertType} fw-normal`}>
       {alert.msg}
     </div>
   ));

diff --git a/src/components/ButtonGroup/ButtonGroup.component.jsx b/src/components/ButtonGroup/ButtonGroup.component.jsx
@@ -6,9 +6,9 @@ const ButtonGroup = ({buttons, selected, setSelected}) => {
     <Fragment>
       <div className='grid--cell'>
         <div className=' grid s-btn-group js-filter-btn'>
-          {buttons.map((button) => (
+          {buttons.map((button, index) => (
             <BaseButton
-              key={button}
+              key={index}
               text={button}
               selected={selected}
               onClick={() => setSelected(button)}

diff --git a/src/components/Footer/Footer.component.jsx b/src/components/Footer/Footer.component.jsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from "react";
+
+import {ReactComponent as GitHub} from "../../assets/GitHub.svg";
+import {ReactComponent as Database} from "../../assets/Database.svg";
+
+import './Footer.styles.scss';
+
+const Footer = () => {
+  return <Fragment>
+    <div className='footer'>
+      <div className="socials">
+        <div className="social-item">
+          <a
+            href='https://github.com/Mayank0255/Stackoverflow-Clone-Frontend'
+            target='_blank'
+            rel="noreferrer"
+          >
+            <GitHub/>
+          </a>
+          <p><strong>Frontend</strong></p>
+        </div>
+        <div className="social-item">
+          <a
+            href='https://github.com/Mayank0255/Stackoverflow-Clone-Backend'
+            target='_blank'
+            rel="noreferrer"
+          >
+            <Database/>
+          </a>
+          <p><strong>Backend</strong></p>
+        </div>
+      </div>
+    </div>
+  </Fragment>
+};
+
+export default Footer;
diff --git a/src/components/Footer/Footer.styles.scss b/src/components/Footer/Footer.styles.scss
@@ -0,0 +1,19 @@
+.footer {
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  padding-top: 32px;
+  background-color: #232629;
+
+  .socials {
+    display: flex;
+    justify-content: space-between;
+    width: 120px;
+
+    .social-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/components/Header/Header.component.jsx b/src/components/Header/Header.component.jsx
@@ -94,7 +94,7 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
   ) : (
     <Fragment>
       <nav className='navbar fixed-top navbar-expand-lg navbar-light bs-md'>
-        <div class="hamburger">
+        <div className="hamburger">
           <SideNavBar hasOverlay />
         </div>
         <div className='header-brand-div'>

diff --git a/src/components/Header/Header.styles.scss b/src/components/Header/Header.styles.scss
@@ -9,6 +9,13 @@
   justify-content: space-between;
 }
 
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
 .s-navigation {
   padding: 2px 2px;
 }
@@ -216,6 +223,7 @@
   }
   .hamburger {
     display: block;
+    padding-top: 6px;
   }
   .header-search-div, .header-brand-div {
     transform: scale(0.8);

diff --git a/src/components/PageContainer/PageContainer.component.jsx b/src/components/PageContainer/PageContainer.component.jsx
@@ -2,9 +2,11 @@ import React, {Fragment} from 'react';
 
 import SideBar from '../SideBar/SideBar.component';
 import RightSideBar from '../RightSideBar/RightSideBar.component';
+import Footer from "../Footer/Footer.component";
 
 const PageContainer = ({component: Component}) => {
   return class DefaultPageContainer extends React.Component {
+
     render() {
       return (
         <Fragment>
@@ -15,6 +17,7 @@ const PageContainer = ({component: Component}) => {
               <RightSideBar />
             </div>
           </div>
+          <Footer/>
         </Fragment>
       );
     }

diff --git a/src/components/Pagination/Pagination.component.jsx b/src/components/Pagination/Pagination.component.jsx
@@ -34,10 +34,11 @@ const Pagination = ({
   const getPaginationItem = useCallback(
     (currentIdx, activeIdx) =>
       activeIdx === currentIdx + 1 ? (
-        <span class="s-pagination--item is-selected">{currentIdx + 1}</span>
+        <span key={currentIdx} className="s-pagination--item is-selected">{currentIdx + 1}</span>
       ) : (
         <span
-          class="s-pagination--item"
+          key={currentIdx}
+          className="s-pagination--item"
           onClick={() => handleChange(currentIdx + 1)}
         >
           {currentIdx + 1}

diff --git a/src/components/PostItem/PostItem.component.jsx b/src/components/PostItem/PostItem.component.jsx
@@ -63,8 +63,8 @@ const PostItem = ({
           <Link to={`/questions/${id}`}>{title}</Link>
         </h3>
         <div className='brief' dangerouslySetInnerHTML={{__html: injectEllipsis(htmlSubstring(body, 200))}}></div>
-        {tags.map((tag) => (
-          <TagBadge tag_name={tag.tagname} size={'s-tag'} float={'left'} />
+        {tags.map((tag, index) => (
+          <TagBadge key={index} tag_name={tag.tagname} size={'s-tag'} float={'left'} />
         ))}
         <UserCard
           created_at={created_at}

diff --git a/src/components/RichTextEditor/RichTextEditor.styles.scss b/src/components/RichTextEditor/RichTextEditor.styles.scss
@@ -1,8 +1,8 @@
 .rich-text-editor-root {
-  background-color: transparent;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
+  background-color: transparent !important;
+  border: none !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
 
   .rich-text-editor-toolbar {
     border-bottom: 1px solid var(--black-200);

diff --git a/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx b/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx
@@ -32,8 +32,8 @@ const TagsWidget = ({getTags, tag: {tags, loading}}) => {
     <Fragment>
       <div className='side-bar-tags'>
         <h4 className='tag-headline'>Top {numList[tags.length - 1]} Tags</h4>
-        {tags.slice(0, 10).map((tag) => (
-          <div key={tag.tagname} className='tag-content'>
+        {tags.slice(0, 10).map((tag, index) => (
+          <div key={index} className='tag-content'>
             <TagBadge
               tag_name={tag.tagname}
               size={'s-tag s-tag__md'}

diff --git a/src/components/SideNavBar/SideNavBar.component.jsx b/src/components/SideNavBar/SideNavBar.component.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 
-import { ReactComponent as Hamburger } from "../../assets/Hamburger.svg";
+import { ReactComponent as Hamburger } from "../../assets/LogoGlyphMd.svg";
 import { ReactComponent as Stack } from "../../assets/LogoMd.svg";
-
 import { ReactComponent as GlobalIcon } from "../../assets/Globe.svg";
+
 import "./SideNavBar.styles.scss";
 
 const SidebarUI = ({ isOpen, ...rest }) => {

diff --git a/src/components/SideNavBar/SideNavBar.styles.scss b/src/components/SideNavBar/SideNavBar.styles.scss
@@ -15,13 +15,12 @@
 	.SidebarContent {
 		position: fixed;
 		z-index: 100;
-		background-color: white;
 		transition: 300ms ease-in-out;
 		transition-property: left, right, top, bottom;
 		overflow-x: hidden;
 		overflow-y: auto;
 		scroll-behavior: smooth;
-		background-color: gray;
+		background-color: #333;
 	}
 
 	&.is-open {
@@ -43,20 +42,19 @@
 	}
 	.ham {
 		margin-left: 1rem;
-		filter: invert(1);
 		&:hover {
 			cursor: pointer;
 		}
 	}
 
 	.content-logo {
 		padding: 1rem 2rem;
-		background-color: #5a5959;
+		background-color: #4d4d4d;
 		box-shadow: 2px -2px 8px 3px black;
 	}
 
 	.content-inner {
-		padding: 2rem;
+		padding: 2rem 0;
 		filter: contrast(1.4);
 		.side-bar-tabs {
 			float: right;

diff --git a/src/index.js b/src/index.js
@@ -5,10 +5,8 @@ import {BrowserRouter} from 'react-router-dom';
 import App from './App';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
   document.getElementById('root')
 );
diff --git a/src/pages/HomePage/HomePage.component.jsx b/src/pages/HomePage/HomePage.component.jsx
@@ -6,11 +6,11 @@ import {getPosts} from '../../redux/posts/posts.actions';
 import LinkButton from '../../components/LinkButton/LinkButton.component';
 import PostItem from '../../components/PostItem/PostItem.component';
 import Spinner from '../../components/Spinner/Spinner.component';
-
-import './HomePage.styles.scss';
 import Pagination from '../../components/Pagination/Pagination.component';
 import handleSorting from "../../services/handleSorting";
 
+import './HomePage.styles.scss';
+
 const itemsPerPage = 12;
 const showInline = 5;
 
@@ -48,8 +48,8 @@ const HomePage = ({getPosts, post: {posts, loading}}) => {
         <div className="questions">
           {currentPosts
             .sort(handleSorting('Top'))
-            .map((post) => (
-            <PostItem key={post.id} post={post} />
+            .map((post, index) => (
+            <PostItem key={index} post={post} />
           ))}
         </div>
         <Pagination

diff --git a/src/pages/HomePage/HomePage.styles.scss b/src/pages/HomePage/HomePage.styles.scss
@@ -7,6 +7,7 @@
 }
 
 #content {
+  max-width: none;
   width: 100vw;
   padding: 0;
   margin-right: 60px;
@@ -56,6 +57,7 @@
 
 @media (max-width: 1100px) {
   #content {
+    max-width: none;
     width: calc(100vw - 220px);
   }
 
@@ -71,6 +73,7 @@
 
 @media (max-width: 768px) {
   #content {
+    max-width: none;
     width: 99%;
   }
 
@@ -86,6 +89,7 @@
 
 @media (min-width: 1350px) {
   #content {
+    max-width: none;
     margin-right: 11.5vw;
   }
 }
diff --git a/src/pages/Login/Login.component.jsx b/src/pages/Login/Login.component.jsx
@@ -4,6 +4,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import AuthForm from '../../components/AuthForm/AuthForm.component';
+import Footer from "../../components/Footer/Footer.component";
 
 const Login = ({isAuthenticated}) => {
   if (isAuthenticated) {
@@ -19,6 +20,7 @@ const Login = ({isAuthenticated}) => {
           </div>
         </div>
       </div>
+      <Footer/>
     </Fragment>
   );
 };

diff --git a/src/pages/Post/AnswerSection/AnswerSection.component.jsx b/src/pages/Post/AnswerSection/AnswerSection.component.jsx
@@ -37,8 +37,8 @@ const AnswerSection = ({getAnswers, answer, post: {post}}) => {
         {answer.loading === null ? (
           <Spinner width='25px' height='25px' />
         ) : (
-          answer.answers?.sort(handleSorting(sortType)).map((answer) => (
-            <div key={answer.id} className='answers'>
+          answer.answers?.sort(handleSorting(sortType)).map((answer, index) => (
+            <div key={index} className='answers'>
               <AnswerItem answer={answer}/>
             </div>
           ))

diff --git a/src/pages/Post/Post.styles.scss b/src/pages/Post/Post.styles.scss
@@ -7,6 +7,7 @@
 }
 
 #content {
+  max-width: none;
   padding: 0;
 }
 

diff --git a/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx b/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx
@@ -53,8 +53,8 @@ const CommentCell = ({
             {comment.loading === null ? (
               <Spinner width='25px' height='25px' />
             ) : (
-              comment.comments.map((comment) => (
-                <li className='comments-item' key={comment.id}>
+              comment.comments.map((comment, index) => (
+                <li key={index} className='comments-item'>
                   <div className='comment-text fc-black-800'>
                     <div className='comment-body'>
                       <span className='body'>{comment.body}</span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
     }
     #content {
+      max-width: none;
       padding: 0;
     }
@@ Expand Down @@