column page

src/components/Cards/ChatCard/ChatCard.js

@@ -34,6 +34,7 @@ const ChatCard = (props) => {
 //   };
   return (
       <ChatCardContainer>
+
         <Col>
             <UserImage />
         <ChatInfo>
@@ -48,6 +49,7 @@ const ChatCard = (props) => {
           </ChatInfo>
         </Col>
         <Line />
+
         <Col>
         <ChatOffer>
                     <OfferImage/>
@@ -55,8 +57,11 @@ const ChatCard = (props) => {
                         <OfferText>Proizvod:</OfferText>
                         <OfferTitle>Prazne Flase</OfferTitle>
                     </OfferCardContainer>
-            </ChatOffer>
-            <Commands>
+        </ChatOffer>
+          
+        </Col>
+        <Col>
+        <Commands>
             <MessageIcon vertical={props.vertical}>
                 <Message />
             </MessageIcon>

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

@@ -25,6 +25,7 @@ export const ChatCardContainer = styled(Container)`
   max-width: 2000px;
   height: 180px;
   position: relative;
+  justify-content: space-between;
   @media (max-width: 550px) {
     height: 184px;
     padding: 18px;
@@ -205,15 +206,7 @@ export const OfferDescription = styled(Box)`
     display: none;
   }
 `;
-export const Line = styled(Box)`
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
-  height: 100px;
-  width: 0;
-  margin: auto 0;
-  @media (max-width: 1500px) {
-    display: none;
-  }
-`;
+
 export const DetailIcon = styled(Icon)`
   & svg {
     width: 14px;
@@ -233,23 +226,15 @@ export const DetailText = styled(Typography)`
 export const CheckButton = styled(PrimaryButton)`
   width: 180px;
   height: 48px;
-  position: absolute;
-  bottom: 9px;
-  right: 9px;
+  background-color: ${selectedTheme.primaryPurple};
   &:hover button {
     background-color: ${selectedTheme.primaryPurple} !important;
     color: white !important;
   }
-  @media (max-width: 650px) {
-    display: none;
-  }
 `;
 export const MessageIcon = styled(IconButton)`
   width: 40px;
   height: 40px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
   background-color: ${selectedTheme.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
@@ -316,11 +301,17 @@ export const EyeIcon = styled(Eye)`
 export const ChatOffer = styled(Box)`
   display: flex;
   flex-direction: row;
+  align-items: center;
 `;
 
 export const OfferText = styled(Box)``;
 
-export const Commands = styled(Box)``;
+export const Commands = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+`;
 
 export const OfferCard = styled(Box)``;
 
@@ -333,6 +324,7 @@ export const ChatInfo = styled(Box)`
 export const Col = styled(Box)`
   display: flex;
   flex-direction: row;
+  gap: 18px;
 `;
 
 export const UserName = styled(Typography)`
@@ -359,15 +351,15 @@ export const LastMessage = styled(Typography)`
 `;
 
 export const LocationContainer = styled(Box)`
-    display: flex;
-    flex-direction: row;
-    gap:2px;
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
 `;
 
 export const LocationIcon = styled(Box)`
-    height: 12px;
-    width: auto;
-    position: relative;
+  height: 12px;
+  width: auto;
+  position: relative;
 `;
 
 export const XSText = styled(Typography)`
@@ -384,18 +376,16 @@ export const OfferCardContainer = styled(Box)`
 `;
 
 export const OfferImage = styled.img`
-  max-width: 144px;
-  max-height: 144px;
-  width: 144px;
-  height: 144px;
-  @media (max-width: 600px) {
-    ${(props) =>
-      !props.vertical &&
-      `
-      max-width: 108px;
-    max-height: 108px;
-    width: 108px;
-    height: 108px;
-    `}
-  }
+  max-width: 72px;
+  max-height: 72px;
+  width: 72px;
+  height: 72px;
+  border-radius: 4px;
+`;
+
+export const Line = styled(Box)`
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  height: 100px;
+  width: 0;
+  margin: auto 0;
 `;