cleaned up styling code

Author: garrettlchow

src/app/styles/base/_base.scss

@@ -7,6 +7,10 @@
   background-color: #f9fafb;
 }
 
+#root {
+  height: 100%;
+}
+
 /* Node Styling */
 .compMapParent,
 .compMapChild {

src/app/styles/components/_componentMap.scss

@@ -5,7 +5,6 @@
   align-items: center;
   padding: 12px 16px;
   background-color: white;
-  border-bottom: 1px solid #e5e7eb;
   max-width: 1200px;
   justify-content: space-around;
 }
@@ -66,3 +65,7 @@
   padding: 0.5rem;
   color: #1e293b;
 }
+
+.perf-rect {
+  fill: $perf-background;
+}

src/app/styles/components/_jsonTree.scss

@@ -49,16 +49,4 @@
   padding: 4px 16px;
 }
 
-.react-select__control {
-  background-color: #f3f4f6 !important;
-  border: none !important;
-  border-radius: 0.375rem !important;
-  min-height: 30px !important;
-  box-shadow: none !important;
-}
 
-.react-select__single-value {
-  color: #374151 !important;
-  font-size: 0.875rem !important;
-  font-weight: 500 !important;
-}

src/app/styles/components/_performanceVisx.scss

@@ -179,17 +179,10 @@
   background: #94a3b8;
 }
 
-/* JSON Tree overrides */
+/* JSON Tree styling */
 .json-tree {
-  background-color: transparent !important;
-  margin: 0 !important;
-  padding: 4px 0 !important;
-}
-
-.json-tree ul {
-  background-color: transparent !important;
-  margin: 0 !important;
-  padding-left: 16px !important;
+  overflow: auto;
+  list-style: none;
 }
 
 /* Animation for Tooltip Appearance */

src/app/styles/layout/_actionContainer.scss

@@ -6,12 +6,22 @@
   border-top: 1px solid #e5e7eb;
 }
 
-.visx-group {
-  margin-top: 10px;
-}
-
 .react-select-container {
   font-size: 16px;
   min-width: 90px;
   margin: 8px;
 }
+
+.react-select__control {
+  background-color: #f3f4f6 !important;
+  border: none !important;
+  border-radius: 0.375rem !important;
+  min-height: 30px !important;
+  box-shadow: none !important;
+}
+
+.react-select__single-value {
+  color: #374151 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}

src/app/styles/layout/_stateContainer.scss

@@ -6,6 +6,18 @@
   font-size: 14px;
 }
 
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -31,22 +43,22 @@
 @import 'abstracts/variablesLM';
 
 // 3. Base stuff
-@import 'base/base', 'base/helpers';
+@import 'base/helpers';
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
   'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
   'layout/buttonsContainer';
 
 // 5. Components
-@import 'components/buttons', 'components/actionComponent', 'components/jsonTree',
-  'components/performanceVisx', 'components/componentMap', 'components/ax';
+@import 'components/buttons', 'components/actionComponent', 'components/performanceVisx',
+  'components/componentMap', 'components/ax';
 
 // slider component
 @import './components/rc-slider';
 
 // d3 chart component
-@import './components/d3graph.css';
+@import './components/d3graph';
 
 // diff component
 @import './components/diff';