refactor: long-text-display-explicit

Author: tractorss

web/src/components/ItemCard/ItemField/LongTextField.tsx

@@ -9,7 +9,6 @@ import Modal from "components/Modal";
 
 const Container = styled.p`
   margin: 0px;
-  cursor: pointer;
 `;
 
 const StyledModal = styled(Modal)`
@@ -21,6 +20,11 @@ const TextDisplay = styled(Textarea)`
   height: 80vh;
 `;
 
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryBlue};
+  cursor: pointer;
+`;
+
 const LongTextFullDisplay: React.FC<{ text: string; toggleModal: () => void }> = ({ text, toggleModal }) => (
   <>
     <Overlay />
@@ -40,13 +44,14 @@ const LongTextField: React.FC<ILongTextField> = ({ value, detailed, label }) =>
   const [isModalOpen, toggleModal] = useToggle(false);
   return (
     <>
-      <Container onClick={toggleModal}>
+      <Container>
         {detailed ? (
           <WithHelpTooltip tooltipMsg={label ?? ""}>
-            <TruncatedText text={value} maxLength={50} />
+            <TruncatedText text={value} maxLength={40} />
+            &nbsp; <StyledLabel onClick={toggleModal}>[Read More]</StyledLabel>
           </WithHelpTooltip>
         ) : (
-          <TruncatedText text={value} maxLength={50} />
+          <TruncatedText text={value} maxLength={30} />
         )}
       </Container>
       {isModalOpen && <LongTextFullDisplay text={value} toggleModal={toggleModal} />}

web/src/utils/submitListUtils.ts

@@ -177,6 +177,8 @@ const getMockValueForType = (type: string) => {
   switch (type) {
     case "text":
       return "Ethereum";
+    case "longText":
+      return "Lorem ipsum dolor sit amet, consectetur amet";
     case "address":
       return "0x922911F4f80a569a4425fa083456239838F7F003";
     case "link":