Merge branch 'master' of https://github.com/Mayank0255/Stackoverflow-Clone-Frontend into dev

Author: ozair-dev

.github/workflows/deploy-on-release.yml

@@ -0,0 +1,35 @@
+name: "Deploy"
+
+on:
+  release:
+    types:
+      - published
+  push:
+    branches:
+      - dev
+  workflow_dispatch:
+
+jobs:
+  vercel:
+    runs-on: ubuntu-latest
+    name: "Deploy Front-End"
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+          registry-url: https://registry.npmjs.org/
+
+      - name: "Deploy to Vercel"
+        run: |
+          prodRun=""
+          if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
+            prodRun="--prod"
+          fi
+
+          npx vercel --token ${VERCEL_TOKEN} $prodRun
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.gitignore

@@ -5,4 +5,5 @@
 .env
 package-lock.json
 /client/package-lock.json
-yarn.lock
+yarn.lock
+.vercel

README.md

@@ -43,6 +43,8 @@ There are two ways to setup the project: manually or using the Dockerfile. Read
    ```
 
 2. Setup the backend code -
+   
+   __NOTE:__ For Frontend Developers, if they dont want to setup the Backend Code, they can skip the Step 2, and make sure they follow the optional step mentioned in Step 4
 
    - Create a `.env` file and the format should be as given in `.env.example`.
    - Clone the code & install the modules-
@@ -76,6 +78,11 @@ There are two ways to setup the project: manually or using the Dockerfile. Read
      ```
 
    - Run the client index `npm start`.
+   
+   __OPTIONAL (Recommended For Frontend Developers):__ Can just change the path [here](https://github.com/Mayank0255/Stackoverflow-Clone-Frontend/blob/53b64c37981c618802547cd17483525532de83f0/src/config/index.js#L6) to this `https://stackoverflow-clone-backend.herokuapp.com`
+   Now, it will hit PROD
+
+Let me know if you are interested and would want me to assign it to you
 
 ### Docker Setup
 

package.json

@@ -14,7 +14,7 @@
     "axios": "^0.24.0",
     "bad-words": "^3.0.4",
     "feather-icons": "^4.28.0",
-    "moment": "^2.29.2",
+    "moment": "^2.29.4",
     "prop-types": "^15.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/Header/Header.component.jsx

@@ -106,7 +106,7 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
             <Fragment>{isAuthenticated ? authTabs : guestTabs}</Fragment>
           )}
         </div>
-        <div className="header-search-div">
+        
           <form
             id='search'
             onSubmit={() => history.push('/questions')}
@@ -125,6 +125,7 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
               <Search />
             </div>
           </form>
+          <div className="header-search-div">
           <Search className="search-icon" onClick={() => setSearchState(!searchState)} />
           {!loading && (
             <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>

src/components/Header/Header.styles.scss

@@ -93,7 +93,6 @@
 
 .header-search-div {
   display: flex;
-  //margin-left: 10%;
   justify-content: flex-end;
   align-items: center
 }
@@ -137,6 +136,13 @@
   right: 5%;
 }
 
+.s-input__search{
+  margin-top: 10px;
+}
+.s-input-icon {
+  margin-top: -2px;
+}
+
 // Side Navbar
 
 .hamburger {
@@ -176,16 +182,18 @@
   }
   .header-search-div {
     justify-content: space-around;
-    form {
-      &:first-of-type {
-        display: none;
-      }
+  }
+  .searchbar {
+      display: none;
     }
     .search-icon {
       display: block;
       margin-right: 1rem;
+      position: absolute;
+      left: 77%;
+      top: 30%;
     }
-  }
+
   .btns {
     margin-right: 20px;
   }
@@ -202,6 +210,12 @@
   .full-logo {
     display: none;
   }
+  .search-icon {
+    display: block;
+    position: relative;
+    left: 15%;
+    top: 30%;
+  }
 }
 
 @media (max-width: 560px) {
@@ -220,6 +234,9 @@
   }
   .search-icon {
     display: block;
+    position: relative;
+    left: 5%;
+    top: 30%;
   }
   .hamburger {
     display: block;
@@ -239,6 +256,12 @@
       margin-left: -4.7rem;
     }
   }
+  .search-icon {
+    display: block;
+    position: relative;
+    left: 5%;
+    top: 30%;
+  }
 }
 
 @media (max-width: 390px) {

src/components/LayoutWrapper/SideBar/SideBarData.js

@@ -4,7 +4,7 @@ export const SideBarData = [
   {
     link: '/questions',
     icon: <GlobalIcon className='icon' />,
-    text: 'Stack Overflow',
+    text: 'Questions',
   },
   {
     link: '/tags',

src/components/PostItem/PostItem.component.jsx

@@ -30,7 +30,7 @@ const PostItem = ({
 }) => {
   const answerVoteUp = (
     <div className="vote answer">
-      <span className="vote-count fc-green-500">{answer_count}</span>
+      <span className="vote-count">{answer_count}</span>
       <div className="count-text">answers</div>
     </div>
   );
@@ -67,17 +67,14 @@ const PostItem = ({
         <div
           className="brief"
           dangerouslySetInnerHTML={{
-            __html: injectEllipsis(htmlSubstring(censorBadWords(body), 200)),
+            __html: injectEllipsis(censorBadWords(htmlSubstring(body, 200))),
           }}
         ></div>
-        {tags.map((tag, index) => (
-          <TagBadge
-            key={index}
-            tag_name={tag.tagname}
-            size={"s-tag"}
-            float={"left"}
-          />
-        ))}
+        <div className="profile-tags">
+          {tags.map((tag, index) => (
+            <TagBadge key={index} tag_name={tag.tagname} size={"s-tag"} />
+          ))}
+        </div>
         <UserCard
           created_at={created_at}
           user_id={user_id}