Merge pull request #24 from kevinfey/styling

Styling update for 5.0

Author: haejinjo

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%'}
@@ -41,12 +41,12 @@ function AtomsRelationship(props) {
                 '#5fdaed',
               ],
 
-              label: { color: '#fff', fontSize: '14' },
+              label: { color: '#fff', fontSize: '13', fontName: 'Monaco', },
               nodePadding: 50,
               width: 15,
             },
           },
-          tooltip: { textStyle: { color: 'gray', fontSize: 12 }},
+          tooltip: { textStyle: { color: 'white', fontSize: 0.1, }},
         }}
         loader={<div>Loading Chart</div>}
         data={[['Atom', 'Selector', ''], ...atomsRel]}

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);
 
@@ -135,7 +135,7 @@ const ComponentMap = (props: componentMapProps) => {
           .attr('y', '-5')
           .attr('text-anchor', 'end')
           .text((d: any) => d.data.name.slice(0, 14)) // Limits Characters in Display
-          .style('font-size', `.6rem`)
+          .style('font-size', `.7rem`)
           .style('fill', 'white')
           .clone(true)
           .lower()
@@ -250,7 +250,7 @@ const ComponentMap = (props: componentMapProps) => {
   );
 
   return (
-    <div id="map-canvas-container" 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
@@ -68,7 +68,7 @@ function History(props) {
     const g = svgContainer
       .append('g')
       // this is changing where the graph is located physically
-      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`);
+      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`)
 
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
@@ -83,6 +83,7 @@ function History(props) {
 
     const d3root = tree(hierarchy);
 
+    
     g.selectAll('.link')
       // root.links() gets an array of all the links,
       // where each element is an object containing a
@@ -112,7 +113,7 @@ function History(props) {
 
         if (loadTime !== undefined) {
           if (loadTime > 16) {
-            return '#ff0000';
+            return '#d62b2b';
           }
         }
 
@@ -249,9 +250,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

@@ -1,13 +1,13 @@
 /// fontFamily: 'monaco, Consolas, Lucida Console, monospace'
 /// @type List
-$text-font-stack: monaco, Consolas, 'Lucida Console', monospace, Arial,
+$text-font-stack: Monaco, Consolas, 'Lucida Console', monospace, Arial,
   sans-serif !default;
 
 /// @type Color
 $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,4 +1,6 @@
 html {
+  margin: 0;
+  padding: 0;
   height: 100%;
 }
 

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;
   }