added UX improvements (#1405)

Author: aednikanov

src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx

@@ -25,7 +25,7 @@ export const CollapseBox = ({ children, isInitCollapsed = false }: CollapseBoxPr
         {collapsed ? "Show child attributes" : "Hide child attributes"}
         <div className={clsx(styles.collapseIcon, !collapsed && styles.collapsedIconView)}></div>
       </button>
-      <Collapsible lazy collapsed={collapsed}>{children}</Collapsible>
+      <Collapsible animation={{ duration: 100, easing: "ease-in" }} lazy={false} collapsed={collapsed}>{children}</Collapsible>
     </div>
   );
 };

src/components/ParserOpenRPC/CollapseBox/styles.module.css

@@ -22,9 +22,9 @@
   padding: 12px 22px;
   margin-bottom: 1px;
   cursor: pointer;
-  transition-property: 'border-color', 'background-color';
-  transition-duration: .2s;
-  transition-timing-function: ease;
+  /*transition-property: 'border-color', 'background-color';*/
+  /*transition-duration: .2s;*/
+  /*transition-timing-function: ease;*/
 }
 
 .collapseIcon {
@@ -34,7 +34,7 @@
   border-top: 2px solid #0376C9;
   border-right: 2px solid #0376C9;
   transform: rotate(45deg);
-  transition: transform .2s ease;
+  /*transition: transform .2s ease;*/
 }
 
 .collapseBtn:hover {
@@ -61,6 +61,7 @@
   border-color: transparent;
   width: 100%;
   border-radius: 0;
+  border-bottom: 1px solid #848C96;
 }
 
 .collapsedBtnView:hover {

src/components/ParserOpenRPC/DetailsBox/styles.module.css

@@ -19,10 +19,13 @@
 }
 
 .paramItemWrapper {
-  border-top: 1px solid #848C96;
   padding: 0 1rem;
 }
 
+.paramItemWrapper:not(:first-child) {
+  border-top: 1px solid #848C96;
+}
+
 .borderTopLine {
   border-top: 1px solid #848C96;
 }

src/components/ParserOpenRPC/InteractiveBox/styles.module.css

@@ -69,9 +69,10 @@
   cursor: pointer;
 }
 .tableLabelIconError {
-  width: 11px;
+  position: absolute;
+  left: 4px;
+  width: 13px;
   height: 11px;
-  margin-left: 8px;
   background: url("/img/icons/error-icon.svg") no-repeat 50% 50%;
 }
 .tableColumnIcon {
@@ -112,9 +113,6 @@
 .deleteIconCentered {
   top: 50%;
 }
-.deleteIconComplex {
-  top: 27px;
-}
 .dropdown {
   display: flex;
   align-items: center;

src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useCollapsible, Collapsible } from "@docusaurus/theme-common";
 import { ArrayFieldTemplateProps } from "@rjsf/utils";
 import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate";
@@ -13,7 +13,9 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
   const itemsType = schema?.items?.type;
   const isSimpleArray = itemsType === "string" || itemsType === "boolean" || itemsType === "number" || itemsType === "integer";
   const addComplexArray = () => {
-    onAddClick();
+    if(formData?.length === 0) {
+      onAddClick();
+    }
     setDrawerLabel(title);
     setIsDrawerContentFixed(true);
     setIsComplexArrayEditView(true);
@@ -26,6 +28,12 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
     }
   }
 
+  useEffect(() => {
+    if (!isComplexTypeView) {
+      setIsComplexArrayEditView(false);
+    }
+  }, [isComplexTypeView])
+
   return (
     <div>
       <div className={styles.tableRow}>
@@ -60,14 +68,14 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
         <div className={styles.tableComplexType}>
           {items.map(({ children, index, onDropIndexClick, hasRemove }) => (
             <div className={styles.tableComplexTypeItem} key={index}>
+              {hasRemove ?
+                <button className={clsx(styles.tableButton, styles.tableButtonAddNewArray)} onClick={onDropIndexClick(index)}>
+                  <img src="/img/icons/minus-icon.svg" alt={`Add ${title}`} width="16px" height="16px" />
+                  <span className={styles.tableButtonAddArrayItemName}>Remove {title}</span>
+                </button> :
+                null
+              }
               {children}
-              {hasRemove && (
-                <span
-                  onClick={onDropIndexClick(index)}
-                  className={clsx(styles.deleteIcon, styles.deleteIconComplex)}
-                >
-                </span>
-              )}
             </div>
           ))}
           {canAdd ?

src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx

@@ -27,7 +27,7 @@ export const BaseInputTemplate = ({
   const [inputValue, setInputValue] = useState(isNumber ? 0 : "");
 
   const { isFormReseted } = formContext;
-  const hasErrors = rawErrors?.length > 0 && !hideError;
+  const hasErrors = rawErrors?.length > 0 && !hideError && value !== "";
   const debouncedOnChange = useCallback(debounce((e, isInputNumber = false) => {
     onChange(isInputNumber ? e : e?.target?.value);
   }, 300), []);
@@ -54,13 +54,13 @@ export const BaseInputTemplate = ({
         <div className={styles.tableColumn}>
           <label className={clsx(styles.tableColumnParam, isFocused && styles.tableColumnParamFocused, hasErrors && styles.tableColumnParamError)}>
             <span>{name}{required && "*"}</span>
-            {hasErrors && !isNumber ? <span className={styles.tableLabelIconError} /> : null}
           </label>
         </div>
       )}
       <div className={!isArray ? styles.tableColumn : ""}>
-        <Tooltip message={hasErrors ? rawErrors[0] : ""} disabled={!rawErrors}>
+        <Tooltip message={hasErrors ? rawErrors[0] : ""} disabled={!hasErrors}>
           <div className={styles.tableValueRow}>
+            {hasErrors && !isNumber ? <span className={styles.tableLabelIconError} /> : null}
             <input
               id={id}
               value={inputValue}

src/css/custom.css

@@ -320,6 +320,10 @@ button:hover {
   border-top-color:  rgba(20, 22, 24, 1);
 }
 
+[data-theme="light"] .tippy-popper[x-placement^=bottom] [x-arrow] {
+    border-bottom-color:  rgba(20, 22, 24, 1);
+  }
+
 [data-theme="dark"] .tippy-tooltip {
   background-color: rgba(255, 255, 255, 1);
   color: rgba(20, 22, 24, 1);
@@ -329,8 +333,12 @@ button:hover {
   border-top-color: rgba(255, 255, 255, 1);
 }
 
+[data-theme="dark"] .tippy-popper[x-placement^=bottom] [x-arrow] {
+  border-bottom-color: rgba(255, 255, 255, 1);
+}
+
 @media (max-width: 1200px) {
-  .navbar__item {
+  .navbar__item, .navbar__link {
     font-size: 14px;
   }
 }