Fixing bugs

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -8,7 +8,7 @@ export const FilterCardContainer = styled(Box)`
   border-top-right-radius: 4px;
   height: ${(props) =>
     props.myOffers ? `calc(100% - 153px)` : `calc(100% - 90px)`};
-  padding: ${props => props.skeleton ? "0" : "36px"};
+  padding: ${(props) => (props.skeleton ? "0" : "36px")};
   background-color: white;
   width: calc(100% / 12 * 3.5);
   left: 0;
@@ -46,7 +46,7 @@ export const FilterCardContainer = styled(Box)`
     transition: all ease-in-out 0.36s;
   }
   & * {
-    ${props => props.skeleton && 'display: none;'}
+    ${(props) => props.skeleton && "display: none;"}
   }
   @media (max-width: 600px) {
     margin-top: -14px;
@@ -58,6 +58,7 @@ export const ContentContainer = styled(Box)`
   margin-bottom: 1.8rem;
   &::-webkit-scrollbar {
     width: 5px;
+    height: 5px;
   }
   &::-webkit-scrollbar-track {
     background: #ddd;
@@ -69,5 +70,3 @@ export const ContentContainer = styled(Box)`
   scrollbar-color: #ddd;
   ${() => window.scrollbars.visible && `padding-right: 15px`};
 `;
-
-

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.styled.js

@@ -11,20 +11,20 @@ export const SelectedItemsContainer = styled(Box)`
 `;
 
 export const ClearText = styled(Box)`
-    padding-top: 1px;
-    border-radius: 100%;
-    cursor: pointer;
-    padding-right: 2px;
-    position: relative;
-    left: 6px;
-    width: 21px;
-    height: 21px;
-    &:hover {
-        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
-    }
-`
+  padding-top: 1px;
+  border-radius: 100%;
+  cursor: pointer;
+  padding-right: 2px;
+  position: relative;
+  left: 6px;
+  width: 21px;
+  height: 21px;
+  &:hover {
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+  }
+`;
 export const SearchBar = styled(TextField)`
   & div {
     background-color: white;
   }
-`
+`;

src/components/CheckBox/Label.styled.js

@@ -3,30 +3,30 @@ import styled from "styled-components";
 import selectedTheme from "../../themes";
 
 export const LabelContainer = styled(Box)`
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    max-width: ${props => props.maxWidth};
-`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  max-width: ${(props) => props.maxWidth};
+`;
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: ${selectedTheme.fonts.textFont};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 200px;
-    flex: 1;
-    cursor: pointer;
-    color: ${selectedTheme.colors.primaryText};
-`
+  font-family: ${selectedTheme.fonts.textFont};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+  flex: 1;
+  cursor: pointer;
+  color: ${selectedTheme.colors.primaryText};
+`;
 export const RightLabel = styled(FormLabel)`
-    margin-left: 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100px;
-    cursor: pointer;
-    color: ${selectedTheme.colors.primaryText};
-    font-family: ${selectedTheme.fonts.textFont};
-
-`
+  margin-left: 10px;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+  cursor: pointer;
+  color: ${selectedTheme.colors.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+`;

src/components/CreateReview/CreateReview.js

@@ -27,6 +27,9 @@ const CreateReview = (props) => {
   const closeModalHandler = () => {
     dispatch(closeModal());
   };
+  setTimeout(() => {
+    dispatch(closeModal());
+  }, 3000);
   const handleApiResponseSuccess = () => {
     dispatch(fetchExchange(props.exchange._id));
   };

src/components/MarketPlace/Offers/OffersNotFound.styled.js

@@ -28,6 +28,10 @@ export const OffersNotFoundHeading = styled(Typography)`
   font-weight: 700;
   color: ${selectedTheme.colors.primaryPurple};
 
+  @media (max-width: 1370px) {
+    line-height: 1.2;
+  }
+
   @media (max-width: 600px) {
     font-size: 36px;
   }

src/components/Paging/Paging.styled.js

@@ -17,7 +17,7 @@ export const PagingContainer = styled(Box)`
   bottom: 15px;
   padding-left: 0;
   padding-right: 0;
-  margin: auto;
+  margin: -10px auto;
   left: 0;
   right: 0;
 `;
@@ -66,16 +66,17 @@ export const Arrow = styled(Button)`
             
         }
     `}
-    @media (max-width: 600px) {
-      width: 30px;
-      min-width: 30px;
-      height: 30px;
-      padding-top: 5px;
-      padding-left: 5px;
-    }
+  @media (max-width: 600px) {
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    padding-top: 5px;
+    padding-left: 5px;
+  }
 `;
 export const PageNumber = styled(Box)`
-  color: ${(props) => (!props.current ? selectedTheme.colors.primaryPurple : "white")};
+  color: ${(props) =>
+    !props.current ? selectedTheme.colors.primaryPurple : "white"};
   font-weight: 600;
   font-size: 16px;
   line-height: 18px;
@@ -86,7 +87,8 @@ export const PageNumber = styled(Box)`
   width: 40px !important;
   margin: 5px;
   padding-top: 10px;
-  background-color: ${(props) => props.current && selectedTheme.colors.primaryPurple};
+  background-color: ${(props) =>
+    props.current && selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   position: relative;
   top: 1px;
@@ -110,7 +112,8 @@ export const PageNumber = styled(Box)`
   }
 `;
 export const ThreeDots = styled(Box)`
-  color: ${(props) => (!props.current ? selectedTheme.colors.primaryPurple : "white")};
+  color: ${(props) =>
+    !props.current ? selectedTheme.colors.primaryPurple : "white"};
   font-weight: 600;
   font-size: 16px;
   line-height: 18px;
@@ -121,7 +124,8 @@ export const ThreeDots = styled(Box)`
   width: 40px !important;
   margin: 5px;
   padding-top: 10px;
-  background-color: ${(props) => props.current && selectedTheme.colors.primaryPurple};
+  background-color: ${(props) =>
+    props.current && selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   position: relative;
   top: 1px;
@@ -134,4 +138,4 @@ export const ThreeDots = styled(Box)`
     font-size: 14px;
     margin: 1px;
   }
-`
+`;

src/components/Popovers/MyPosts/MyPostsNotFound/MyPostsNotFound.styled.js

@@ -26,6 +26,7 @@ export const PostsNotFoundButton = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   text-decoration: underline;
   cursor: pointer;
+  vertical-align: unset;
 `;
 
 export const PostsNotFoundSkeleton = styled(Box)`

src/components/Popovers/PhonePopover/PhonePopover.js

@@ -9,7 +9,7 @@ import {
 import { useTranslation } from "react-i18next";
 
 const PhonePopover = (props) => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   return (
     <PhonePopoverContainer>
       <Arrow />