flow: ui

packages/entity-persea/src/controllers/entity/traits/index.scss

@@ -30,8 +30,10 @@
 .traits__add-trait {
   background-color: #171717;
   border: none;
+  font-size: 0.75em;
   margin: 0;
   margin-right: 1em;
-  min-width: 2.5em;
-  height: 2.5em;
+  padding: 1em;
+  min-width: none;
+  height: auto;
 }

packages/react/src/components/tree/index.scss

@@ -11,7 +11,7 @@
   }
   .label {
     color: #bbb;
-    font-family: var(--message-font-family);
+    font-family: var(--system-font-family);
     font-size: 1em;
     justify-content: start;
     padding: 0.3em 0;
@@ -19,7 +19,7 @@
   }
   .node {
     &.active > .item {
-      background-color: rgba(0, 120, 255, 0.5);
+      background-color: rgba(255, 255, 255, 0.05);
       .label {
         color: #fff;
       }
@@ -30,9 +30,13 @@
       }
     }
     > .item {
+      &:focus-within {
+        background-color: rgba(0, 120, 255, 0.5);
+      }
       .label {
         white-space: nowrap;
       }
     }
   }
 }
+

packages/react/src/components/tree/node.jsx

@@ -9,6 +9,7 @@ const Node = (props) => {
     activate,
     classNames,
     indent,
+    isActive,
     nodes,
     renderLabel,
     value,
@@ -28,6 +29,7 @@ const Node = (props) => {
           // eslint-disable-next-line react/no-children-prop
           nodes={nodes}
           indent={indent + 1}
+          isActive={isActive}
           label={label}
           renderLabel={renderLabel}
           value={value}
@@ -43,6 +45,7 @@ const Node = (props) => {
     <div
       className={classnames(
         'node',
+        {active: isActive(value)},
         {parent: !!nodes},
         classNames,
       )}
@@ -70,6 +73,7 @@ Node.defaultProps = {
   activate: () => {},
   classNames: '',
   indent: 0,
+  isActive: () => false,
   // eslint-disable-next-line react/prop-types
   renderLabel: ({label}) => <div className="label">{label}</div>,
   nodes: null,
@@ -80,6 +84,7 @@ Node.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   classNames: PropTypes.any,
   indent: PropTypes.number,
+  isActive: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
   nodes: PropTypes.arrayOf(PropTypes.any),
   renderLabel: PropTypes.func,

packages/resource-persea/src/components/json-tabs/index.scss

@@ -7,8 +7,8 @@
 .json-tabs__add {
   background-color: #171717;
   border: none;
+  font-size: 0.75em;
   margin: 0;
   margin-right: 1em;
-  min-width: 2.5em;
-  height: 2.5em;
+  padding: 1em;
 }

packages/resource-persea/src/components/resource/index.jsx

@@ -1,5 +1,3 @@
-import {basename} from 'path';
-
 import {
   PropTypes,
   React,
@@ -11,16 +9,11 @@ import styles from './index.module.scss';
 
 const Resource = ({resource, uri}) => {
   const {Component} = useResourceController(uri);
-  let displayedUri = basename(uri);
-  if (0 === displayedUri.indexOf('index')) {
-    displayedUri = [uri.split('/').slice(-2, -1), displayedUri].join('/');
-  }
   return (
     <div className={styles.resource}>
       <div className={styles.grow}>
         <Component resource={resource} uri={uri} />
       </div>
-      <div className={styles.uri}>{displayedUri}</div>
     </div>
   );
 };