filter cards were made as per designs and done with responsiveness upto 300px width

src/components/dashBoard/answerCards/index.js

@@ -29,7 +29,7 @@ const AnswerCards = ({ index, name, body, date }) => {
         <p className={classes.date1}>{date}</p>
 
         <CardContent>
-            {body}
+            {window.innerWidth>600?body.slice(0,80):body.slice(0,49)}
         </CardContent>
 
         <div className={classes.cardFooter}>

src/components/dashBoard/answerCards/style.js

@@ -80,7 +80,7 @@ const useStyles = makeStyles({
       },
       '@media(min-width: 200px)': {
         date: {
-          margin: '20px 15px 0 -40px',
+          margin: '0px 15px 0 -20px',
           fontSize: '12px',
         },
         icon: {
@@ -92,7 +92,7 @@ const useStyles = makeStyles({
       },
       '@media(min-width: 720px)': {
         date: {
-          margin: '30px 15px 0 0',
+          margin: '0px 15px 0 0',
           fontSize: '16px',
         },
         icon: {

src/components/dashBoard/filterCards/index.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
-import { Card, CardActions, Collapse, IconButton } from '@material-ui/core';
+import { Card, CardActions, Collapse, IconButton, CardContent } from '@material-ui/core';
 import useStyles from './style';
 import Grid from '@material-ui/core/Grid';
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-const MessageFilterCard = ({ index,body,date }) => {
+const MessageFilterCard = ({ index, body, date, question, name }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [showPrimaryText, setShowPrimaryText] = useState(false);
@@ -14,18 +16,34 @@ const MessageFilterCard = ({ index,body,date }) => {
     <Card className={classes.msgCard} raised={true} >
       <div> 
         <Grid container>
-        <Grid item xs={1} sm={1} md={1} lg={1}> 
-        <div>
-            <b className={classes.cardLeftavatar}>Q</b>
+        <Grid item xs={2} sm={2} md={1} lg={1}> 
+        <div className={classes.cardwrap}>
+            <div className={classes.cardLeftavatar}>
+              <div className={classes.cardLefty}>
+
+                  <ArrowUpwardIcon/>
+
+                </div>
+                <div className={classes.cardLeftyflex}>
+                69
+
+              </div>
+              </div>
         </div>  
-        </Grid>   
-        <Grid item xs={11} sm={11} md={11} lg={11} className={classes.cardRight}>
+        </Grid>  
+
+        <Grid item xs={10} sm={10} md={11} lg={11} className={classes.cardRight}>
         <div className={classes.cardContent}>
-          <div style={{ whiteSpace: 'pre-line' }}>
+              {question}?
+        </div>
+
+        <CardContent>
+        <div style={{ whiteSpace: 'pre-line' }}>
             <span className={classes.index}></span>
             {!showPrimaryText
               ? body.length > 80
-                ? `${body.substr(0, 80)}...`
+                ? window.innerWidth<600?`${body.substr(0, 21)}...`
+                :`${body.substr(0, 80)}...`
                 : `${body}`
               : ''}
             <Collapse
@@ -43,14 +61,46 @@ const MessageFilterCard = ({ index,body,date }) => {
               setShowPrimaryText(!showPrimaryText);
             }}
           >
-            {body.length > 80 ? (!expanded ? 'View More' : 'View Less') : ''}
+            {body.length > 80 ? (!expanded ? 'Read More' : 'Read Less') : ''}
           </span>
-        </div>
+        </CardContent>
+        </Grid>
+        </Grid> 
+
+        <Grid container>
+        <Grid item xs={2} sm={2} md={1} lg={1}> 
+        <div className={classes.cardwrap}>
+            <div className={classes.cardLeftavatar}>
+                <div className={classes.cardLefty1}>
+
+                  <ArrowDownwardIcon/>
+
+                </div>
+                <div className={classes.cardLeftyflex1}>
+                69
+
+              </div>
+              </div>
+        </div>  
+        </Grid>  
+
+        <Grid item xs={10} sm={10} md={11} lg={11} className={classes.cardRight}>
+
+
         <div className={classes.cardFooter}>
-          <p className={classes.date}>{date}</p>
           <CardActions disableSpacing>
-            <IconButton classes={{ root: classes.iconButton }}>
-            </IconButton>
+
+
+            <div className={classes.photodabba}>
+
+            </div>
+            <div className={classes.manfont}>
+              {name}
+              <br/>
+              <i className={classes.manfont}>asked 1d ago</i>
+            </div>
+
+
           </CardActions>
         </div>
         </Grid>

src/components/dashBoard/filterCards/style.js

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) =>({
     msgCard: {
         padding: '15px',
         marginTop: '20px',
@@ -12,8 +12,59 @@ const useStyles = makeStyles({
           transform: 'translateY(-2px)',
         },
       },
+      photodabba:{
+        //marginLeft: '100px',        
+        height:'45px',
+        width:'45px',
+        backgroundColor:'red',   
+        marginRight:'3px',
+        '@media(max-width: 600px)': {
+          height:'35px',
+          width:'35px',
+        },
+        '@media(max-width: 400px)': {
+          height:'28px',
+          width:'28px',
+        },
+      },
+      cardFooter: {
+        width:'100%',
+        display:'flex',
+        justifyContent:'flex-end',
+        //border: '1px solid #2d2d2d'
+      },
+      manfont:{
+        fontSize:'14px',
+        '@media(max-width: 600px)': {
+          fontSize:'12px',
+        },
+      },
       cardLeftavatar:{
-        fontSize:'20px',
+        display:'flex',
+        flexDirection:'column',
+        alignItems:'center',
+        '@media(max-width: 420px)': {
+          marginLeft:'-10px',
+        },
+        '@media(max-width: 600px)': {
+          marginLeft:'-10px',
+        },
+        //minHeight:'10vh',
+      },
+      cardwrap:{
+        //minHeight:'80px'
+      },
+      cardLefty:{
+       // marginBottom:'100px',
+      },
+      cardLeftyflex:{
+        fontSize:'15px',
+        marginBottom:'20px',
+       // marginBottom:'100px',
+      },
+      cardLefty1:{
+        //marginTop:'10vh',
+        //marginBottom:'100%x',
       },
       cardContent: {
         margin: 0,
@@ -37,32 +88,10 @@ const useStyles = makeStyles({
         fontWeight: 700,
         padding: 0,
       },
-      cardFooter: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: 0,
-      },
-      date: {
-        margin: '30px 15px 0 0',
-        fontStyle: 'italic',
-        fontFamily: 'Roboto, sans-serif',
-        fontWeight: 700,
-      },
-      '@media(min-width: 320px)': {
-        date: {
-          margin: '20px 15px 0 0',
-        },
-      },
-      '@media(min-width: 720px)': {
-        date: {
-          margin: '30px 15px 0 0',
-          fontSize: '16px',
-        },
-      },
       iconButton: {
         padding: 0,
         margin: '5px 10px',
       },
-  });
+  }));
 
 export default useStyles;

src/pages/filterPage/index.js

@@ -25,14 +25,19 @@ const FilterPage = () => {
     const [DashData, setDashData] = useState(
       Array(50)
         .fill({
-          body:
-            'Lorem Ipsum is simply dummy Lorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummy.',
+          question:
+            'Lorem Ipsum is simply dummy Lorem Ipsum is ',
+            body:
+            'Lorem Ipsum is simply dummy Lorem Ipsum is Lorem Ipsum is simply dummy Lorem Ipsum is Lorem Ipsum is simply dummy Lorem Ipsum is ',            
           date: ' 28th Dec 2020, 2:31 a.m.',
+          name:'hemlo rendi'
         })
         .map((obj) => {
           return {
             body: obj.body,
-            date: obj.data + 'aaj ka din',
+            question: obj.question,
+            date: obj.date,
+            name: obj.name
           };
         })
     );
@@ -115,6 +120,8 @@ return(
                         ).map((message, index) => (
                           <MessageFilterCard
                             body={message.body}
+                            name={message.name}
+                            question={message.question}
                             date={message.date}
                             key={DashData.indexOf(message)}
                             index={DashData.indexOf(message)}

src/pages/filterPage/styles.js

@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
       overflowX: 'hidden',
     },
     messages: {
-      width: '90%',
+      width: '100%',
       display: 'flex',
       justifyContent: 'center',
       padding: '10px',