better style

src/components/Node/DataViewer/index.jsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import {
+  Badge,
   Box,
   Button,
+  ButtonGroup,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -9,13 +11,15 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
   Tooltip,
   useDisclosure,
 } from '@chakra-ui/react';
 import { CgDatabase } from 'react-icons/cg';
+import { IoMdArrowDropdownCircle, IoMdArrowDropupCircle } from 'react-icons/io';
 import DataViewerTable from './DataViewerTable';
 
-function DataViewer({ node, side }) {
+function DataViewer({ node, side, onChange, hide }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const finalRef = React.useRef();
   const scrollBehavior = 'inside';
@@ -23,22 +27,36 @@ function DataViewer({ node, side }) {
 
   return (
     <Box>
-      <Tooltip hasArrow label="View data in node" bg="blue.600" placement="right">
+      <ButtonGroup isAttached>
         <Button
           mt={1}
           px={2}
           py={3}
-          onClick={onOpen}
-          leftIcon={<CgDatabase />}
+          onClick={() => onChange(!hide)}
           colorScheme="teal"
-          variant="solid"
+          variant="outline"
           size="sm"
-          fontSize="14px"
-          fontWeight="semibold"
         >
-          {sideSubTitle} - {node.nodeSet ? node.nodeSet.length : node.trainingSet2.length} elements.
+          {hide ? <IoMdArrowDropupCircle /> : <IoMdArrowDropdownCircle />}
         </Button>
-      </Tooltip>
+        <Tooltip hasArrow label="View data in node" bg="blue.600" placement="right">
+          <Button
+            mt={1}
+            px={2}
+            py={3}
+            h={26}
+            onClick={onOpen}
+            leftIcon={<CgDatabase />}
+            colorScheme="teal"
+            variant="solid"
+            size="sm"
+            fontSize="14px"
+            fontWeight="semibold"
+          >
+            {sideSubTitle} - ({node.nodeSet ? node.nodeSet.length : node.trainingSet2.length})
+          </Button>
+        </Tooltip>
+      </ButtonGroup>
       <Modal
         finalFocusRef={finalRef}
         isOpen={isOpen}
@@ -49,7 +67,19 @@ function DataViewer({ node, side }) {
       >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Data Viewer [ {sideSubTitle} ]</ModalHeader>
+          <ModalHeader>
+            <Box ml="3">
+              <Box fontWeight="bold" d="flex" alignItems="center">
+                Data Viewer
+                <Badge ml="1" variant="subtle" colorScheme="green" fontSize={14}>
+                  {sideSubTitle}
+                </Badge>
+              </Box>
+              <Text fontSize="sm">
+                {node.nodeSet ? node.nodeSet.length : node.trainingSet2.length} elements
+              </Text>
+            </Box>
+          </ModalHeader>
           <ModalCloseButton mr={3} />
           <ModalBody>
             <DataViewerTable data={node.nodeSet ? node.nodeSet : node.trainingSet2} />

src/components/Node/Joint.jsx

@@ -41,7 +41,19 @@ function Joint({ children, attr2, predicateName, pivot, weight, requestFoldToLea
           </Button>
         </Tooltip>
         <Tooltip hasArrow label="Fold a leaf" bg="orange.600" placement="right">
-          <Button size="xs" borderRadius="0.375rem" rightIcon={<CloseIcon />} onClick={foldToLeaf}>
+          <Button
+            size="xs"
+            borderRadius="0.375rem"
+            rightIcon={<CloseIcon />}
+            onClick={foldToLeaf}
+            variant="solid"
+            //colorScheme="telegram"
+            bg="#D8DBE2"
+            _hover={{
+              background: '#A9BCD0',
+              color: '#373F51',
+            }}
+          >
             Fold
           </Button>
         </Tooltip>

src/components/Node/index.jsx

@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useBuilderConfigContext } from '../../contexts/BuilderConfigContext';
 import { executeAlgorithm, mostFrequentValue } from '../../utils/algorithm-executor';
 import DataViewer from './DataViewer';
-import Hider from './Hide';
 
 import Joint from './Joint';
 import Leaf from './Leaf';
@@ -128,10 +127,7 @@ const Node = props => {
     <div className={`node ${highlighted ? 'highlight' : ''}`} onClick={onNodeClicked}>
       <Box d="flex" flexDirection="column" p="1" paddingLeft={3}>
         <Box d="flex" flexDirection="row">
-          <ButtonGroup size="sm" isAttached variant="outline">
-            <Hider hide={hide} onChange={handleHide} />
-            <DataViewer node={node} side={side} />
-          </ButtonGroup>
+          <DataViewer node={node} side={side} hide={hide} onChange={handleHide} />
         </Box>
         <div style={{ display: hide ? 'none' : 'block' }}>
           {category ? (

src/theme.js

@@ -10,6 +10,13 @@ const breakpoints = createBreakpoints({
 });
 
 const theme = extendTheme({
+  colors: {
+    brand: {
+      100: '#58a4b0ff',
+      // ...
+      900: '#1a202c',
+    },
+  },
   breakpoints: breakpoints,
   components: {
     Button: {