cleans up files and modifies legend to match corresponding D3 component design

Author: guizzettic

src/app/components/History.tsx

@@ -34,7 +34,7 @@ const filterHooks = (data: any[]) => {
  * @method maked3Tree :Creates a new D3 Tree
  */
 
-function History(props) {
+export default function History(props) {
   let { hierarchy } = props;
   console.log('hierarchy is', hierarchy);
   let root = JSON.parse(JSON.stringify(hierarchy));
@@ -257,5 +257,3 @@ function History(props) {
     </>
   );
 }
-
-export { History, Legendary };

src/app/components/StateRoute.tsx

@@ -18,10 +18,10 @@ import AtomsRelationship from './AtomsRelationship.jsx';
 import Example from './AtomsRelationship.jsx';
 import { ParentSize } from '@visx/responsive';
 import { Console } from 'console';
-import { History } from './History';
+// import { History } from './History';
 import Legendary from './legend';
 
-// const History = require('./History');
+const History = require('./History').default;
 
 const ErrorHandler = require('./ErrorHandler').default;
 

src/app/components/legend.tsx

@@ -48,7 +48,7 @@ export default function Legendary({ events = false }: { events?: boolean }) {
           .legends {
             font-family: arial;
             font-weight: 900;
-            background-color: black;
+            background-color: ${242529};
             border-radius: 14px;
             padding: 24px 24px 24px 32px;
             overflow-y: auto;