Merge pull request #6 from oslabs-beta/new-series-button

enter series name textbox fixes

Author: DaneCorpion

src/app/components/BarGraph.tsx

@@ -62,7 +62,7 @@ const tooltipStyles = {
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data, comparison } = props;
-  const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length}`);
+  const [seriesNameInput, setSeriesNameInput] = useState(`Series ${comparison.length}`);
   const {
     tooltipOpen,
     tooltipLeft,
@@ -123,11 +123,11 @@ const BarGraph = props => {
       }
     }
   });
-  
+
   const saveSeriesClickHandler = () => {
     if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
       const actionNames = document.getElementsByClassName('actionname');
-      for (let i = 0; i < actionNames.length; i++ ) {
+      for (let i = 0; i < actionNames.length; i++) {
         toStorage.data.barStack[i].name = actionNames[i].value;
       }
       dispatch(save(toStorage, seriesNameInput));
@@ -137,18 +137,21 @@ const BarGraph = props => {
     dispatch(save(toStorage))
   }
 
-  const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" value={seriesNameInput} onChange={e => setSeriesNameInput(e.target.value)} /> : null;
+  const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" placeholder="Enter Series Name" onChange={e => setSeriesNameInput(e.target.value)} /> : null;
   return (
     <div className="bargraph-position">
+
       {/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
-      {textbox}
-      <button
-        type="button"
-        className="save-series-button"
-        onClick={saveSeriesClickHandler}
-      >
-        Save Series
-      </button>
+      <div>
+        {textbox}
+        <button
+          type="button"
+          className="save-series-button"
+          onClick={saveSeriesClickHandler}
+        >
+          Save Series
+        </button>
+      </div>
       <svg ref={containerRef} width={width} height={height}>
         <rect
           x={0}
@@ -191,8 +194,8 @@ const BarGraph = props => {
                   height={bar.height === 0 ? null : bar.height}
                   width={bar.width}
                   fill={bar.color}
-                      /* TIP TOOL EVENT HANDLERS */
-                      // Hides tool tip once cursor moves off the current rect.
+                  /* TIP TOOL EVENT HANDLERS */
+                  // Hides tool tip once cursor moves off the current rect.
                   onMouseLeave={() => {
                     dispatch(
                       onHoverExit(data.componentData[bar.key].rtid),
@@ -201,7 +204,7 @@ const BarGraph = props => {
                       }, 300)),
                     );
                   }}
-                      // Cursor position in window updates position of the tool tip.
+                  // Cursor position in window updates position of the tool tip.
                   onMouseMove={event => {
                     dispatch(onHover(data.componentData[bar.key].rtid));
                     if (tooltipTimeout) clearTimeout(tooltipTimeout);

src/app/styles/components/_performanceVisx.scss

@@ -3,12 +3,12 @@
 	justify-content: center;
 }
 
-.MuiSwitch-colorPrimary.Mui-checked  {
+.MuiSwitch-colorPrimary.Mui-checked {
 	color: #62d6fb !important;
 }
 
 .MuiSwitch-switchBase {
-	color: #ff6569 !important; 
+	color: #ff6569 !important;
 }
 
 .MuiSwitch-track {
@@ -17,8 +17,11 @@
 
 .MuiTypography-body1 {
 	font-size: 1em !important;
-	}
+}
 
 #seriesname {
 	background-color: white;
+	float: right;
+	width: 117px;
+	margin-right: 38px;
 }