Mayank0255 · Mayank0255 · Mar 18, 2022 · Mar 8, 2022 · Mar 8, 2022 · Mar 13, 2022
diff --git a/package.json b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
     "@stackoverflow/stacks-icons": "^2.25.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",

diff --git a/public/index.html b/public/index.html
@@ -11,8 +11,12 @@
     />
 
     <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' 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://fonts.googleapis.com/icon?family=Material+Icons"
+    />
   </head>
   <body class='theme-dark'>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -7,7 +7,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Liberation Sans",sans-serif !important;
     transition: all 300ms ease-in-out;
 }
 

diff --git a/src/RoutesTree.js b/src/RoutesTree.js
@@ -1,38 +1,38 @@
 import React from 'react';
 import {Switch, Route} from 'react-router-dom';
-import withPageTitle from './services/withPageTitle';
+import withPageTitle from './components/withPageTitle/withPageTitle';
 
-import PageContainer from './components/PageContainer/PageContainer.component';
+import LayoutWrapper from './components/LayoutWrapper/LayoutWrapper.component';
 import HomePage from './pages/HomePage/HomePage.component';
 import QuestionsPage from './pages/QuestionsPage/QuestionsPage.component';
-import TagsPage from './pages/TagsPage/TagsPage.component';
-import UsersPage from './pages/UsersPage/UsersPage.component';
+import AllTagsPage from './pages/AllTagsPage/AllTagsPage.component';
+import AllUsersPage from './pages/AllUsersPage/AllUsersPage.component';
 import Register from './pages/Register/Register.component';
 import Login from './pages/Login/Login.component';
 import Post from './pages/Post/Post.component';
 import PostForm from './pages/PostForm/PostForm.component';
 import TagPage from './pages/TagPage/TagPage.component';
-import UserPage from './pages/UserPage/UserPage.component';
+import ProfilePage from './pages/ProfilePage/ProfilePage.component';
 import NotFound from './pages/NotFound/NotFound.component';
 
 const HomePageComponent = withPageTitle({
-  component: PageContainer({component: HomePage}),
+  component: LayoutWrapper({component: HomePage}),
   title:
     'CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers',
 });
 
 const QuestionsPageComponent = withPageTitle({
-  component: PageContainer({component: QuestionsPage}),
+  component: LayoutWrapper({component: QuestionsPage}),
   title: 'All Questions - CLONE Stack Overflow',
 });
 
-const TagsPageComponent = withPageTitle({
-  component: PageContainer({component: TagsPage}),
+const AllTagsPageComponent = withPageTitle({
+  component: LayoutWrapper({component: AllTagsPage}),
   title: 'Tags - CLONE Stack Overflow',
 });
 
-const UsersPageComponent = withPageTitle({
-  component: PageContainer({component: UsersPage}),
+const AllUsersPageComponent = withPageTitle({
+  component: LayoutWrapper({component: AllUsersPage}),
   title: 'Users - CLONE Stack Overflow',
 });
 
@@ -56,21 +56,21 @@ const NotFoundComponent = withPageTitle({
   title: 'Error 404',
 });
 
-const PostComponent = PageContainer({component: Post});
-const UserPageComponent = PageContainer({component: UserPage});
-const TagPageComponent = PageContainer({component: TagPage});
+const PostComponent = LayoutWrapper({component: Post});
+const ProfilePageComponent = LayoutWrapper({component: ProfilePage});
+const TagPageComponent = LayoutWrapper({component: TagPage});
 
 const RoutesTree = () => {
   return (
     <Switch>
       <Route exact path='/' component={HomePageComponent} />
       <Route exact path='/questions' component={QuestionsPageComponent} />
-      <Route exact path='/tags' component={TagsPageComponent} />
-      <Route exact path='/users' component={UsersPageComponent} />
+      <Route exact path='/tags' component={AllTagsPageComponent} />
+      <Route exact path='/users' component={AllUsersPageComponent} />
       <Route exact path='/register' component={RegisterComponent} />
       <Route exact path='/login' component={LoginComponent} />
       <Route exact path='/questions/:id' component={PostComponent} />
-      <Route exact path='/users/:id' component={UserPageComponent} />
+      <Route exact path='/users/:id' component={ProfilePageComponent} />
       <Route exact path='/tags/:tagname' component={TagPageComponent} />
       <Route exact path='/add/question' component={PostFormComponent} />
       <Route path='*' component={NotFoundComponent} />

diff --git a/src/assets/Edit.svg b/src/assets/Edit.svg
diff --git a/src/assets/ExternalLink.svg b/src/assets/ExternalLink.svg
diff --git a/src/assets/Quote.svg b/src/assets/Quote.svg
diff --git a/src/assets/StackExchange.svg b/src/assets/StackExchange.svg
diff --git a/src/assets/Tags.svg b/src/assets/Tags.svg
diff --git a/src/assets/Trophy.svg b/src/assets/Trophy.svg
diff --git a/src/assets/Vote.svg b/src/assets/Vote.svg
diff --git a/src/components/Alert/Alert.component.jsx b/src/components/Alert/Alert.component.jsx
@@ -4,14 +4,25 @@ import {connect} from 'react-redux';
 
 import './Alert.styles.scss';
 
-const Alert = ({alerts}) =>
-  alerts !== null &&
-  alerts.length > 0 &&
-  alerts.map((alert, index) => (
-    <div key={index} className={`alert alert-${alert.alertType} fw-normal`}>
-      {alert.msg}
-    </div>
-  ));
+const Alert = ({ alerts }) => {
+  return alerts.length > 0 &&
+    alerts.map((alert, index) => {
+      if (alert.alertType === 'success') {
+        return (
+          <aside key={index} className="alert s-notice s-notice__success s-notice__important" role="alert">
+            {alert.msg}
+          </aside>
+        )
+      } else {
+        return (
+          <aside key={index} className="alert s-notice s-notice__danger s-notice__important" role="alert">
+            {alert.msg}
+          </aside>
+        )
+      }
+    }
+  )
+}
 
 Alert.propTypes = {
   alerts: PropTypes.array.isRequired,

diff --git a/src/components/Alert/Alert.styles.scss b/src/components/Alert/Alert.styles.scss
@@ -1,21 +1,10 @@
 .alert {
+  top: 75px;
+  z-index: 10;
   position: fixed;
-  padding: .75rem 1.25rem;
-  border: 1px solid transparent;
-  border-radius: .25rem;
-  width: 50%;
-  top: 79px;
-  left: 22.5%;
-  z-index: 4;
-  font-size: 15px;
-}
-
-.alert-success {
-  background-color: #48a868;
-  color: #2d2d2d;
-}
-
-.alert-danger {
-  background-color: #c4524f;
-  color: #2d2d2d;
+  width: 70%;
+  max-width: 1000px;
+  min-width: 320px;
+  left: 50%;
+  transform: translateX(-50%);
 }
diff --git a/src/components/AuthForm/AuthForm.component.jsx b/src/components/AuthForm/AuthForm.component.jsx
@@ -6,6 +6,7 @@ import {login} from '../../redux/auth/auth.actions';
 import {register} from '../../redux/auth/auth.actions';
 
 import {ReactComponent as Logo} from '../../assets/LogoGlyphMd.svg';
+import {ReactComponent as ExternalLink} from '../../assets/ExternalLink.svg';
 
 import './AuthForm.styles.scss';
 
@@ -128,16 +129,7 @@ const AuthForm = ({register, login, action}) => {
               name='talent'
             >
               Sign up on Talent{' '}
-              <svg
-                aria-hidden='true'
-                className='svg-icon va-text-bottom sm-d-none icon-share-sm'
-                width='14'
-                height='14'
-                viewBox='0 0 14 14'
-              >
-                <path d='M5 1H3a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9h-2v2H3V3h2V1z' />
-                <path d='M7 1h6v6h-2V4.5L6.5 9 5 7.5 9.5 3H7V1z' />
-              </svg>
+              <ExternalLink/>
             </Link>
           </div>
         </div>

diff --git a/src/components/Header/Header.component.jsx b/src/components/Header/Header.component.jsx
@@ -9,9 +9,9 @@ import {ReactComponent as Logo} from '../../assets/LogoMd.svg';
 import {ReactComponent as SmallLogo} from '../../assets/LogoGlyphMd.svg';
 import Spinner from '../Spinner/Spinner.component';
 import LinkButton from '../LinkButton/LinkButton.component';
+import MobileSideBar from '../MobileSideBar/MobileSideBar.component';
 
 import './Header.styles.scss';
-import SideNavBar from '../SideNavBar/SideNavBar.component';
 
 const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
   let history = useHistory();
@@ -95,7 +95,7 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
     <Fragment>
       <nav className='navbar fixed-top navbar-expand-lg navbar-light bs-md'>
         <div className="hamburger">
-          <SideNavBar hasOverlay />
+          <MobileSideBar hasOverlay />
         </div>
         <div className='header-brand-div'>
           <Link className='navbar-brand' to='/'>

diff --git a/...PageContainer/PageContainer.component.jsx → ...LayoutWrapper/LayoutWrapper.component.jsx b/...PageContainer/PageContainer.component.jsx → ...LayoutWrapper/LayoutWrapper.component.jsx
@@ -1,12 +1,11 @@
 import React, {Fragment} from 'react';
 
-import SideBar from '../SideBar/SideBar.component';
-import RightSideBar from '../RightSideBar/RightSideBar.component';
+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 {
-
+const LayoutWrapper = ({component: Component}) => {
+  return class DefaultLayoutWrapper extends React.Component {
     render() {
       return (
         <Fragment>
@@ -24,4 +23,4 @@ const PageContainer = ({component: Component}) => {
   };
 };
 
-export default PageContainer;
+export default LayoutWrapper;
diff --git a/...s/RightSideBar/RightSideBar.component.jsx → ...r/RightSideBar/RightSideBar.component.jsx b/...s/RightSideBar/RightSideBar.component.jsx → ...r/RightSideBar/RightSideBar.component.jsx
diff --git a/...nts/RightSideBar/RightSideBar.styles.scss → ...per/RightSideBar/RightSideBar.styles.scss b/...nts/RightSideBar/RightSideBar.styles.scss → ...per/RightSideBar/RightSideBar.styles.scss
diff --git a/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.component.jsx b/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.component.jsx
@@ -0,0 +1,55 @@
+import React, {Fragment} from 'react';
+import {Link} from 'react-router-dom';
+
+import { SideBarWidgetData } from "./SideBarWidgetData";
+
+import './SideBarWidget.styles.scss';
+
+const SideBarWidget = () => {
+  return (
+    <Fragment>
+      <div className="s-sidebarwidget s-sidebarwidget__yellow s-anchors s-anchors__grayscale mb16" data-tracker="cb=1">
+        <ul className="d-block p0 m0">
+          {SideBarWidgetData.map(({ type, title, icon, link }, index) => {
+            if (type === 'header') {
+              return <WidgetHeader
+                key={index}
+                title={title}
+              />
+            } else {
+              return <WidgetItem
+                key={index}
+                icon={icon}
+                title={title}
+                link={link}
+              />
+            }
+          })}
+        </ul>
+      </div>
+    </Fragment>
+  );
+};
+
+const WidgetHeader = ({ title }) => (
+  <div className="s-sidebarwidget--header s-sidebarwidget__small-bold-text fc-light d:fc-black-900 bb bbw1">
+    {title}
+  </div>
+)
+
+const WidgetItem = ({ icon, title, link }) => (
+  <li className="s-sidebarwidget--item d-flex px16">
+    <div className="flex--item1 fl-shrink0">
+      {icon}
+    </div>
+    <div className="flex--item wmn0 ow-break-word">
+      <Link
+        to={link}
+        className="js-gps-track"
+        data-ga={`[&quot;community bulletin board&quot;,&quot;The Overflow Blog&quot;,&quot;${link}&quot;,null,null]`}
+        data-gps-track="communitybulletin.click({ priority: 1, position: 0 })">{title}</Link>
+    </div>
+  </li>
+)
+
+export default SideBarWidget;
diff --git a/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.styles.scss b/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.styles.scss
@@ -0,0 +1,4 @@
+.s-sidebarwidget__yellow {
+  color: #f2f2f3 !important;
+  margin-top: 24px;
+}