Merge pull request #43 from pesto-students/development

issue fixing
pesto-students · Dec 12, 2021 · 5858419 · 5858419
2 parents 6e0bcd3 + cbf7e62
commit 5858419
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 13 deletions.
diff --git a/src/components/Cart/styledComponents.js b/src/components/Cart/styledComponents.js
@@ -16,6 +16,7 @@ const Item = styled.div`
   padding-top: 12px;
   padding-bottom: 12px;
   flex-direction: column;
+
   @media (min-width: 992px) {
     flex-direction: row;
   }
@@ -108,6 +109,7 @@ const ItemImage = styled.div`
     width: 100%;
     height: 100%;
     object-fit: contain;
+    cursor: pointer;
   }
 `;
 

diff --git a/src/components/ProductListingPage/Card.js b/src/components/ProductListingPage/Card.js
@@ -27,6 +27,7 @@ const ShoppingCard = ({
             text={'Add to cart'}
           />
         </div>
+        <div className="card-tag">{item.condition}</div>
       </CardImgContainer>
       <CardBody>
         <h6 className="card-body-title">{title}</h6>
@@ -97,6 +98,16 @@ export const CardImgContainer = styled.div`
       border-radius: 0;
     }
   }
+  .card-tag {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: ${(props) => props.theme.colors.primary};
+    padding: 5px 10px;
+    border-radius: ${(props) => props.theme.size.xsm};
+    font-weight: bold;
+    color: #fff;
+  }
   &:hover .img-overlay {
     display: flex;
     height: 50px;

diff --git a/src/components/ProductListingPage/SideBar.js b/src/components/ProductListingPage/SideBar.js
@@ -43,7 +43,6 @@ function SideBar() {
       format: __getFilterValue(filterState.format)
     };
     const query = genrateQueryString(payload);
-    console.log(payload);
     history.push({
       pathname: PRODUCT_LISTING,
       search: `${query ? '?' + query : ''}`,

diff --git a/src/components/ProductListingPage/styledComponents.js b/src/components/ProductListingPage/styledComponents.js
@@ -47,7 +47,7 @@ const Sidebar = styled.div`
     margin: 10px;
     background-color: black;
     &:hover {
-      background-color: black;
+      background-color: ${(props) => props.theme.colors.primaryLight};
       color: white;
     }
   }

diff --git a/src/components/common/header/index.js b/src/components/common/header/index.js
@@ -43,7 +43,15 @@ const Header = ({
     <HeaderContainer>
       <HeaderLeftContainer>
         <Link to={HOME} className="link">
-          <BrandName>The</BrandName>
+          <BrandName>
+            The
+            <FeatherIcon
+              className="brand-name-icon"
+              onClick={() => setHamburgClicked(true)}
+              icon="book-open"
+              size="30"
+            />
+          </BrandName>
           <BrandName>Booktown</BrandName>
         </Link>
         {!isSearchBarHide && (

diff --git a/src/components/common/header/styledComponents.js b/src/components/common/header/styledComponents.js
@@ -4,7 +4,7 @@ export const MenuContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 30%;
+  width: 40%;
 
   & {
     @media (max-width: ${(props) => props.theme.breakpoints.tablet}) {
@@ -46,6 +46,9 @@ export const HeaderContainer = styled.div`
       opacity: 1;
     }
   }
+  .brand-name-icon {
+    margin-left: 10px;
+  }
   & {
     @media (max-width: ${(props) => props.theme.breakpoints.tablet}) {
       ${MenuContainer} {

diff --git a/src/components/common/search/index.js b/src/components/common/search/index.js
@@ -1,9 +1,8 @@
-import { LoaderIcon } from 'react-hot-toast';
 import {
   SearchContainer,
+  SearchInput,
   SearchItem,
-  SearchResultsContainer,
-  SearchInput
+  SearchResultsContainer
 } from './styledComponents';
 function SearchBar({
   onChange = () => {},
@@ -26,12 +25,7 @@ function SearchBar({
       </SearchContainer>
       <SearchResultsContainer>
         {searchLoader ? (
-          <div className="search-loader">
-            <LoaderIcon
-              style={{ height: '30px', width: '30px', padding: '10px' }}
-            />{' '}
-            Loading...
-          </div>
+          <div className="search-loader">Loading...</div>
         ) : (
           searchData.map((item, index) => (
             <SearchItem key={item.id} onClick={() => onSearchItemSelect(item)}>