#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style

applications/dknet/frontend/.eslintrc.yml

@@ -44,10 +44,7 @@ rules:
   object-curly-spacing:
     - 2
     - always
-  indent:
-    - 2
-    - 2
-    - SwitchCase: 1
+  indent: off
   "@typescript-eslint/no-explicit-any": 0
 
 globals:

applications/dknet/frontend/src/components/ExpandableText.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Box, Typography, Button, Fade } from '@mui/material';
+import { vars } from '../theme/variables';
+
+
+const styles = {
+  button: {
+    zIndex: 1,
+    transition: 'transform 0.2s ease-out',
+    '&:hover': {
+      transform: 'translateY(-1px)',
+    },
+    '&:active': {
+      transform: 'translateY(0)',
+    },
+  },
+  gradient: {
+    position: 'absolute',
+    bottom: -16,
+    left: 0,
+    right: 0,
+    height: '3.8125rem',
+    background: `linear-gradient(180deg, rgba(242, 244, 247, 0.00) 0%, rgba(241, 243, 246, 0.92) 48.71%, #F1F3F6 95.81%)`,
+    pointerEvents: 'none',
+  },
+};
+
+interface ExpandableTextProps {
+  text: string;
+}
+
+const ExpandableText: React.FC<ExpandableTextProps> = ({
+  text,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const displayText = isExpanded ? text : text.slice(0, 250);
+  const shouldShowMoreButton = text.length > 250; // Approximate 3 lines
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <Box>
+      <Box sx={{ textAlign: 'left', position: 'relative', }}>
+        <Typography sx={{
+          wordBreak: 'break-word',
+          backgroundColor: isExpanded ? vars.grey25 : 'transparent',
+          px: isExpanded ? 2 : 0,
+          maxHeight: '6.25rem',
+          overflow: 'auto',
+          borderRadius: '0.5rem',
+          transition: 'all 0.5s ease',
+          color: vars.grey600,
+        }}>
+          {displayText}
+          {!isExpanded && text.length > 250 && '...'}
+
+        </Typography>
+        {shouldShowMoreButton && (
+          <Fade in={!isExpanded} timeout={300}>
+            <Box
+              sx={{
+                ...styles.gradient,
+                display: !isExpanded ? 'block' : 'none',
+              }}
+            />
+          </Fade>
+        )}
+      </Box>
+
+      {shouldShowMoreButton && (
+        <Button
+          onClick={toggleExpanded}
+          variant='text'
+          sx={styles.button}
+        >
+          {isExpanded ? 'Read Less' : 'Read More'}
+        </Button>
+      )}
+
+    </Box>
+  );
+};
+
+export default ExpandableText;

applications/dknet/frontend/src/components/FilterAssistantDialog/DialogStepFooter.tsx

@@ -2,27 +2,22 @@ import React from "react"
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Button from "@mui/material/Button";
+import { vars } from '../../theme/variables';
 
 export default function DialogStepFooter({ handlePrev, value, closeDialog, questionsTabs, handleNext }) {
   return (
-    <Box display='flex' alignItems='center'>
+    <Box display='flex' alignItems='center' px={2}>
       {value !== 0 && <Button sx={{ mr: 1 }} variant='outlined' onClick={() => handlePrev()}>Previous</Button>}
       {questionsTabs?.length === value + 1 ? (
         <Button variant='contained' onClick={closeDialog}>Go to results</Button>
       ) : (
         <>
-          <Box display='flex' alignItems='center' flexGrow={1}>
+          <Box display='flex' alignItems='center' flexGrow={1} gap={1}>
             <Button variant='contained' onClick={() => handleNext()}>
               Next
             </Button>
 
-            <Typography sx={{
-              ml: 1,
-              fontWeight: 400,
-              fontSize: '0.875rem',
-              lineHeight: '143%',
-              color: '#98A2B3',
-            }}>
+            <Typography variant="body2" sx={{ color: vars.grey400 }}>
               or press Enter
             </Typography>
           </Box>