redux start

src/components/Cards/ChatCard/ChatCard.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
   CheckButton,
   MessageIcon,
-  OfferImage,
+  // OfferImage,
   OfferTitle,
   OfferCard,
   ChatOffer,
@@ -12,33 +12,67 @@ import {
   OfferText,
   ChatCardContainer,
   Col,
-  UserImage,
+  // UserImage,
+  OfferCardContainer,
+  UserImgWrapper,
+  OfferImgWrapper,
   UserName,
   LastMessage,
   Line,
   LocationContainer,
-  XSText,LocationIcon
+  XSText,
+  LocationIcon,
+  OfferCardContainerMobile,
+  OfferTextMobile,
+  OfferTitleMobile
+
 
 } from "./ChatCard.styled";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
 import selectedTheme from "../../../themes";
-import { OfferCardContainer } from "../OfferCard/OfferCard.styled";
-//import { useHistory } from "react-router-dom";
+import {ReactComponent as DummyImage1} from "../../../assets/images/svg/dummyImages/offer-1.svg";
+import { useHistory } from "react-router-dom";
+import useScreenDimensions from "../../../hooks/useScreenDimensions";
+//import { useSelector } from "react-redux";
 
 const ChatCard = (props) => {
-//   const history = useHistory();
+  const history = useHistory();
+  const dimensions = useScreenDimensions();
+  const [isMobile,setIsMobile] = useState(dimensions.width < 600);
+
+ // const userId = useSelector(selectUserId);
+ useEffect(() => {
+  console.log(isMobile);
+  const resize = (e) => {
+      if(e.target.outerWidth < 600 && isMobile)
+        setIsMobile(false)
+      else if ( e.target.outerWidth > 600 && !isMobile)
+        setIsMobile(true)
+  };
+  window.addEventListener('resize', resize);
+
+  return () => window.removeEventListener('resize', resize);
+ },[]);
 
-//   const routeToItem = (userId) => {
-//     history.push(`/messages/${userId}`);
-//   };
+  const routeToItem = (userId) => {
+    history.push(`/messages/${userId}`);
+     };
   return (
-      <ChatCardContainer>
+      <ChatCardContainer  onClick={isMobile ? () => routeToItem('12') : () => {} }>
 
         <Col>
-            <UserImage />
+            {/* <UserImage src={DummyImage1} /> */}
+            <UserImgWrapper><DummyImage1></DummyImage1></UserImgWrapper>
+        
         <ChatInfo>
             <UserName>Name</UserName>
+            {/* Only shows on Mobile */}
+               <OfferCardContainerMobile>
+                        <OfferTextMobile>Proizvod:</OfferTextMobile>
+                        <OfferTitleMobile>Prazne Flase</OfferTitleMobile>
+                  </OfferCardContainerMobile>
+            {/* ^^^^^ */}
             <LastMessage>Last chat details</LastMessage>
             <LocationContainer>
                 <LocationIcon>
@@ -52,7 +86,8 @@ const ChatCard = (props) => {
 
         <Col>
         <ChatOffer>
-                    <OfferImage/>
+                    <OfferImgWrapper><DummyImage1></DummyImage1></OfferImgWrapper>
+                    {/* <OfferImage/> */}
                     <OfferCardContainer>
                         <OfferText>Proizvod:</OfferText>
                         <OfferTitle>Prazne Flase</OfferTitle>
@@ -60,7 +95,6 @@ const ChatCard = (props) => {
         </ChatOffer>
           
         </Col>
-        <Col>
         <Commands>
             <MessageIcon vertical={props.vertical}>
                 <Message />
@@ -69,11 +103,11 @@ const ChatCard = (props) => {
                     buttoncolor={selectedTheme.primaryPurple}
                     textcolor={"white"}
                     style={{ fontWeight: "600" }}
+                    onClick={() => routeToItem('12')}
                 >
                     Pogledaj caskanje
                 </CheckButton>
           </Commands>
-        </Col>
          
       </ChatCardContainer>
 

src/components/Cards/ChatCard/ChatCard.styled.js

@@ -27,9 +27,7 @@ export const ChatCardContainer = styled(Container)`
   position: relative;
   justify-content: space-between;
   @media (max-width: 550px) {
-    height: 184px;
-    padding: 18px;
-    padding-top: 12px;
+    height: auto;
     ${(props) =>
       props.vertical &&
       `
@@ -49,6 +47,25 @@ export const UserImage = styled.img`
   }
 `;
 
+export const UserImgWrapper = styled(Box)`
+  overflow: hidden;
+  border-radius: 50%;
+  width: 144px;
+  height: 144px;
+  @media (max-width: 600px) {
+    width: 90px;
+    height: 90px;
+  }
+`;
+export const OfferImgWrapper = styled(Box)`
+  overflow: hidden;
+  border-radius: 4px;
+  width: 72px;
+  height: 72px;
+
+`;
+
+
 export const OfferFlexContainer = styled(Container)`
   display: flex;
   flex-direction: row;
@@ -64,6 +81,29 @@ export const OfferFlexContainer = styled(Container)`
   }
 `;
 
+export const OfferCardContainer = styled(Container)`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 16px;
+  max-width: 2000px;
+  position: relative;
+  @media (max-width: 550px) {
+    
+  }
+`;
+
+export const OfferCardContainerMobile = styled(Box)`
+ display: none;
+
+  @media (max-width: 550px) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+`;
+
 export const OfferInfo = styled(Box)`
   display: flex;
   flex: 2;
@@ -82,10 +122,10 @@ export const OfferTitle = styled(Typography)`
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
-  font-size: 24px;
+  font-size: 18px;
   cursor: pointer;
   @media (max-width: 550px) {
-    font-size: 18px;
+    font-size: 14px;
     display: none;
     ${(props) =>
       props.vertical &&
@@ -100,6 +140,30 @@ export const OfferTitle = styled(Typography)`
     `}
   }
 `;
+export const OfferTitleMobile = styled(Typography)`
+  font-family: "Open Sans";
+  display: none;
+  flex: 1;
+  color: ${selectedTheme.primaryPurple};
+  font-weight: 700;
+  font-size: 18px;
+  cursor: pointer;
+  @media (max-width: 550px) {
+    display: block;
+    ${(props) =>
+      props.vertical &&
+      `
+      display: flex;
+      flex: none;
+      position: relative;
+      line-height: 22px; 
+      margin-top: 5px;
+      font-size: 18px;
+
+    `}
+  }
+`;
+
 export const OfferAuthor = styled(Box)`
   display: flex;
   flex: 1;
@@ -231,6 +295,9 @@ export const CheckButton = styled(PrimaryButton)`
     background-color: ${selectedTheme.primaryPurple} !important;
     color: white !important;
   }
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 export const MessageIcon = styled(IconButton)`
   width: 40px;
@@ -302,20 +369,37 @@ export const ChatOffer = styled(Box)`
   display: flex;
   flex-direction: row;
   align-items: center;
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+
+export const OfferText = styled(Box)`
+  font-family: "Open Sans";
+  font-size: "12px";
+  color: ${selectedTheme.primaryText};
 `;
 
-export const OfferText = styled(Box)``;
+export const OfferTextMobile = styled(Box)`
+  font-family: "Open Sans";
+  font-size: "12px";
+  color: ${selectedTheme.primaryText};
+`;
 
 export const Commands = styled(Box)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  @media (max-width: 600px) {
+    align-items: flex-start;
+  }
 `;
 
 export const OfferCard = styled(Box)``;
 
 export const ChatInfo = styled(Box)`
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -323,6 +407,7 @@ export const ChatInfo = styled(Box)`
 
 export const Col = styled(Box)`
   display: flex;
+  align-items: center;
   flex-direction: row;
   gap: 18px;
 `;
@@ -346,7 +431,7 @@ export const LastMessage = styled(Typography)`
   font-size: 16px;
   position: relative;
   @media (max-width: 600px) {
-    font-size: 14px;
+    display: none;
   }
 `;
 
@@ -354,6 +439,9 @@ export const LocationContainer = styled(Box)`
   display: flex;
   flex-direction: row;
   gap: 2px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const LocationIcon = styled(Box)`
@@ -370,11 +458,6 @@ export const XSText = styled(Typography)`
   position: relative;
 `;
 
-export const OfferCardContainer = styled(Box)`
-  display: flex;
-  flex-direction: column;
-`;
-
 export const OfferImage = styled.img`
   max-width: 72px;
   max-height: 72px;
@@ -388,4 +471,7 @@ export const Line = styled(Box)`
   height: 100px;
   width: 0;
   margin: auto 0;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;

src/components/ChatColumn/ChatColumn.styled.js

@@ -22,6 +22,7 @@ export const ListHeader = styled(Box)`
 `;
 
 export const TitleSortContainer = styled(Box)`
+    margin-top: 26px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;