improve message styles, short labels (#1865)

DISSINET · Oct 25, 2023 · c42c30e · c42c30e
1 parent aad5306
commit c42c30e
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/packages/client/src/components/basic/Message/Message.tsx b/packages/client/src/components/basic/Message/Message.tsx
@@ -3,6 +3,7 @@ import { IEntity, IWarning } from "@shared/types";
 import React, { useEffect, useState } from "react";
 import { TiWarningOutline } from "react-icons/ti";
 import { StyledMessage } from "./MessateStyles";
+import { getShortLabelByLetterCount } from "utils";
 
 interface Message {
   warning: IWarning;
@@ -59,15 +60,23 @@ export const Message: React.FC<Message> = ({ warning, entities }) => {
           <span>
             <b>{`Actant's entity type does not match the Action`}</b>
             {position?.section && ` - ${positionObject[position?.section]}`}
-            {entity && ` - [${entity.class}: ${entity.label}]`}
+            {entity &&
+              ` - [${entity.class}: ${getShortLabelByLetterCount(
+                entity.label,
+                200
+              )}]`}
           </span>
         );
       case WarningTypeEnums.ANA:
         return (
           <span>
             <b>{`This actant position allows no actant`}</b>
             {position?.section && ` - ${positionObject[position?.section]}`}
-            {entity && ` - [${entity.class}: ${entity.label}]`}
+            {entity &&
+              ` - [${entity.class}: ${getShortLabelByLetterCount(
+                entity.label,
+                200
+              )}]`}
           </span>
         );
       case WarningTypeEnums.WAC:
@@ -82,7 +91,11 @@ export const Message: React.FC<Message> = ({ warning, entities }) => {
           <span>
             <b>{`Action valency not defined`}</b>
             {position?.section && ` - ${positionObject[position?.section]}`}
-            {entity && ` - [${entity.class}: ${entity.label}]`}
+            {entity &&
+              ` - [${entity.class}: ${getShortLabelByLetterCount(
+                entity.label,
+                200
+              )}]`}
           </span>
         );
 
@@ -108,7 +121,9 @@ export const Message: React.FC<Message> = ({ warning, entities }) => {
 
   return (
     <StyledMessage>
-      <TiWarningOutline size={20} style={{ marginRight: "0.5rem" }} />
+      <div style={{ width: "3rem" }}>
+        <TiWarningOutline size={20} style={{ marginRight: "0.5rem" }} />
+      </div>
       {getWarningMessage(warning)}
     </StyledMessage>
   );