Fixed bug 1460

src/components/Cards/CreateOfferCard/FirstPart/OfferCategoryField/OfferCategoryField.js

@@ -3,9 +3,16 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { FieldLabel, SelectOption } from "../FirstPartCreateOffer.styled";
 import { SelectField } from "../../CreateOffer.styled";
+import { CategoryContainer, CategoryIcon } from "./OfferCategoryField.styled";
+import {
+  getImageUrl,
+  variants,
+} from "../../../../../util/helpers/imageUrlGetter";
+import useIsMobile from "../../../../../hooks/useIsMobile";
 
 const OfferCategoryField = (props) => {
   const { t } = useTranslation();
+  const { isMobile } = useIsMobile();
   const formik = props.formik;
   return (
     <>
@@ -27,7 +34,12 @@ const OfferCategoryField = (props) => {
               value={cat.name}
               onClick={() => props.handleSubcategories(cat.name)}
             >
-              {cat.name}
+              <CategoryContainer>
+                <CategoryIcon
+                  src={getImageUrl(cat.image, variants.categoryIcon, isMobile)}
+                />
+                {cat.name}
+              </CategoryContainer>
             </SelectOption>
           );
         })}

src/components/Cards/CreateOfferCard/FirstPart/OfferCategoryField/OfferCategoryField.styled.js

@@ -0,0 +1,12 @@
+import { Box } from "@mui/system";
+import styled from "styled-components";
+
+export const CategoryContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const CategoryIcon = styled.img`
+  margin-right: 13px;
+`;

src/components/Select/Option/Option.styled.js

@@ -3,14 +3,15 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const OptionStyled = styled(MenuItem)`
-    background-color: ${props => props.selected ? selectedTheme.colors.primaryPurple : "white"} !important;
-    color: ${props => props.selected ? "white" : selectedTheme.colors.selectOptionTextColor};
-    margin:2px 9px;
-    border-radius: 4px;
-    &:hover {
-        background-color: ${selectedTheme.colors.primaryPurple} !important;
-        color: white;
-    }
-`
-export const OptionIcon = styled(Box)`
-`
+  background-color: ${(props) =>
+    props.selected ? selectedTheme.colors.primaryPurple : "white"} !important;
+  color: ${(props) =>
+    props.selected ? "white" : selectedTheme.colors.selectOptionTextColor};
+  margin: 2px 9px;
+  border-radius: 4px;
+  &:hover {
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
+    color: white;
+  }
+`;
+export const OptionIcon = styled(Box)``;