color change border issue in progress

Author: kevinfey

src/app/components/AtomsRelationship.jsx

@@ -14,7 +14,7 @@ function AtomsRelationship(props) {
 
 
   return (
-    <div className="history-d3-container">
+    <div className="history-d3-container" id="atomsContainer">
      {atomsRel && (
        <Chart
         width={'100%'}

src/app/components/ComponentMap.tsx

@@ -24,8 +24,8 @@ const ComponentMap = (props: componentMapProps) => {
   else lastSnap = viewIndex;
 
   //external constants
-  const width: number = 900;
-  const height: number = 600;
+  const width: any = '100vw';
+  const height: any = '100vh';
   let data: Object = snapshots[lastSnap];
 
   useEffect(() => {
@@ -123,7 +123,7 @@ const ComponentMap = (props: componentMapProps) => {
         nodeEnter
           .append('circle')
           .attr('r', 10)
-          .attr('fill', (d) => (d._children ? '#46edf2' : '#95B6B7'))
+          .attr('fill', (d) => (d._children ? '#4e9dcc' : '#95B6B7'))
           .attr('stroke-width', 10)
           .attr('stroke-opacity', 1);
 
@@ -250,7 +250,7 @@ const ComponentMap = (props: componentMapProps) => {
   );
 
   return (
-    <div data-testid="canvas">
+    <div data-testid="canvas" id="componentMapContainer">
       <svg id="canvas"></svg>
     </div>
   );

src/app/components/History.tsx

@@ -57,8 +57,8 @@ function History(props) {
    */
   let maked3Tree = function () {
     removed3Tree();
-    const width: number = 800;
-    const height: number = 600;
+    const width: any = 800;
+    const height: any = 600;
     const svgContainer = d3
       .select(HistoryRef.current)
       .append('svg') // svgContainer is now pointing to svg
@@ -249,9 +249,9 @@ function History(props) {
   };
 
   return (
-    <div className="history-d3-container">
-      <div ref={HistoryRef} className="history-d3-div" />
-    </div>
+    <>
+      <div ref={HistoryRef} className="history-d3-div" id="historyContainer"/>
+    </>
   );
 }
 

src/app/components/StateRoute.tsx

@@ -49,7 +49,7 @@ const StateRoute = (props: StateRouteProps) => {
   const [{ x, y, k }, setZoomState]: any = useState({
     x: 150,
     y: 250,
-    k: 0.75,
+    k: 1,
   });
 
   //Map
@@ -135,7 +135,7 @@ const StateRoute = (props: StateRouteProps) => {
         </NavLink>
 
         {isRecoil && <NavLink className="router-link" activeClassName="is-active" to="/relationship">
-          Atoms Relationship
+        Relationships
         </NavLink>}
 
         <NavLink

src/app/components/Tree.tsx

@@ -6,6 +6,43 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+const colors =  {
+  scheme: 'paraiso',
+  author: 'jan t. sott',
+  base00: '#2f1e2e',
+  base01: '#41323f',
+  base02: '#4f424c',
+  base03: '#776e71',
+  base04: '#8d8687',
+  base05: '#a39e9b',
+  base06: '#b9b6b0',
+  base07: '#e7e9db',
+  base08: '#ef6155',
+  base09: '#f99b15',
+  base0A: '#fec418',
+  base0B: '#48b685',
+  base0C: '#5bc4bf',
+  base0D: '#06b6ef',
+  base0E: '#815ba4',
+  base0F: '#e96ba8'
+};
+
 const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
   if (data && data.name) {
     return <span>{data.name}</span>;
@@ -25,7 +62,7 @@ const Tree = (props:TreeProps) => {
       {snapshot && (
         <JSONTree
           data={snapshot}
-          theme={{ tree: () => ({ className: 'json-tree' }) }}
+          theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
           labelRenderer={(raw:any[]) => {

src/app/styles/abstracts/_variables.scss

@@ -7,7 +7,7 @@ $text-font-stack: monaco, Consolas, 'Lucida Console', monospace, Arial,
 $text-color: rgb(231, 231, 231);
 
 /// @type Color
-$brand-color: #2a2f3a !default;
+$brand-color: #242529 !default;
 
 /// Light grey
 /// @type Color
@@ -22,7 +22,7 @@ $light-grey-three: rgb(101, 104, 110) !default;
 $navbar-color: rgb(68, 72, 78) !default;
 
 /// @type Color
-$head-color: #353b46 !default;
+$head-color: #242529 !default;
 
 /// @type Color
 $border-color: rgba(190, 190, 190, 0.5) !default;

src/app/styles/base/_base.scss

@@ -1,14 +1,16 @@
 html {
-  height: 100%;
+  margin: 0;
+  height: 99%;
 }
 
 body {
   margin: 0;
-  height: 100%;
+  height:99%;
 }
 
 #root {
-  height: 100%;
+  margin: 0;
+  height: 99%;
 }
 
 .travel-container {

src/app/styles/components/_jsonTree.scss

@@ -1,4 +1,5 @@
 .json-tree {
+  overflow: auto;
   margin: 10px;
   padding: 0;
   width: 900px;

src/app/styles/components/_rc-slider.scss

@@ -16,7 +16,7 @@
 .rc-slider-rail {
   position: absolute;
   width: 100%;
-  background-color: #e9e9e9;
+  background-color: #ebf2fa;
   height: 4px;
   border-radius: 6px;
 }
@@ -25,7 +25,7 @@
   left: 0;
   height: 4px;
   border-radius: 6px;
-  background-color: #78909C;
+  background-color: #427aa1;
 }
 .rc-slider-handle {
   position: absolute;
@@ -38,7 +38,7 @@
   cursor: grab;
   border-radius: 50%;
   // border: solid 2px #96dbfa;
-  background-color: #78909B;
+  background-color: #427aa1;
   -ms-touch-action: pan-x;
       touch-action: pan-x;
 }

src/app/styles/layout/_headContainer.scss

@@ -24,7 +24,7 @@
   .tab-select__menu {
     border-style: none;
     width: 300px;
-    background-color: $light-grey-one;
+    background-color: $brand-color;
     z-index: 2;
     @extend %disable-highlight;
   }