From 3c2c10fae310fcf6bd4ed94440ae62a2c9c4df62 Mon Sep 17 00:00:00 2001
From: Alex Pishcheiko <oleksandra.pishcheiko@distilled.ie>
Date: Sun, 16 Aug 2020 20:00:13 +0100
Subject: [PATCH] fixiing small issue with delta view

---
 components/templates/DeltaViewForLaunches.tsx | 31 ++++++++++---------
 components/templates/ListOfSuites.tsx         |  2 +-
 components/templates/Test.tsx                 |  8 ++---
 components/templates/TestExpandablePanels.tsx |  6 ++--
 .../templates/showAndChangeLaunchStatus.tsx   |  6 ++--
 pages/launches/[launchesByProjectId].tsx      |  2 +-
 6 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/components/templates/DeltaViewForLaunches.tsx b/components/templates/DeltaViewForLaunches.tsx
index 3866322..693a99f 100644
--- a/components/templates/DeltaViewForLaunches.tsx
+++ b/components/templates/DeltaViewForLaunches.tsx
@@ -1,25 +1,24 @@
-import { Button, makeStyles } from "@material-ui/core"
+import { Button } from "@material-ui/core"
 import { showStatusIcon } from "."
 import ReactEcharts from "echarts-for-react"
 import Router from "next/router"
 
-
-const useStyles = makeStyles(() => ({
-  rootLight: {
-  },
-  rootDark:{
-    backgroundColor: "#2a2a2a",
-    color: "#8c8d8d", 
-    border: "1px grey solid",
-  }, 
-}))
-
-
 let pyramidData = []
 let roseData = []
 
+function setButtonsBackgroundColor(darkMode) {
+  if(darkMode) //light mode - highlighted
+   return "#2a2a2a"
+  else return "#e0e0e0"
+}
+
+function setButtonsTextColor(darkMode) {
+  if(darkMode) //light mode - highlighted
+   return "#8c8d8d"
+  else return "black"
+}
+
 export function testRunButtonsDefaultView(testRunStats: any, darkMode: boolean) {
-  const classes = useStyles(testRunStats)
 
   return testRunStats.map(testRun => (
     <Button
@@ -33,8 +32,10 @@ export function testRunButtonsDefaultView(testRunStats: any, darkMode: boolean)
         paddingBottom: "0px",
         paddingTop: "0px",
         marginLeft: "5px",
+        backgroundColor: setButtonsBackgroundColor(darkMode),
+        border: "1px grey solid",
+        color: setButtonsTextColor(darkMode)
       }}
-      className={darkMode ? classes.rootDark : classes.rootLight}
     >
       {testRun.test_type}{" "}
       {testRun.tests_total === testRun.tests_passed + testRun.tests_skipped ? (
diff --git a/components/templates/ListOfSuites.tsx b/components/templates/ListOfSuites.tsx
index 15b54ea..11f12c4 100644
--- a/components/templates/ListOfSuites.tsx
+++ b/components/templates/ListOfSuites.tsx
@@ -106,7 +106,7 @@ export const ListOfSuites = function(props: Props) {
   }
   let statsArray = setStats()
   
-  const [expandedSuite, setExpandedSuite] = React.useState<string | false>(
+  const [expandedSuite, setExpandedSuite] = useState<string | false>(
     false
   )
   const expandCollapseSuite = (suitePanel: string) => (
diff --git a/components/templates/Test.tsx b/components/templates/Test.tsx
index 2cc9b37..a0ede1e 100644
--- a/components/templates/Test.tsx
+++ b/components/templates/Test.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { makeStyles } from "@material-ui/core/styles"
 import { Paper, Typography, Button } from "@material-ui/core"
 import {
@@ -64,8 +64,8 @@ export const TestExpanded = function(props: TestProps) {
   const { children, darkMode } = props
   const classes = useStyles(props)
 
-  const [openResolutionDialog, setOpenResolutionDialog] = React.useState(false)
-  const [resolutionResponse, setResolutionResponse] = React.useState(
+  const [openResolutionDialog, setOpenResolutionDialog] = useState(false)
+  const [resolutionResponse, setResolutionResponse] = useState(
     testResolutions[0]
   )
   const handleResolutionDialogOpen = () => {
@@ -101,7 +101,7 @@ export const TestExpanded = function(props: TestProps) {
             className={darkMode ? classes.textColorDarkMode : classes.textColorLightMode}
           >
             {showStatusText(children.status, darkMode)}
-            {children.name}
+           <span style={{paddingLeft:"8px"}}> {children.name}</span>
           </Typography>
           <Tabs style={{ marginTop: "20px" }} className={darkMode ? classes.textColorDarkMode : classes.textColorLightMode}>
             <TabList>
diff --git a/components/templates/TestExpandablePanels.tsx b/components/templates/TestExpandablePanels.tsx
index 830afed..0e03e0d 100644
--- a/components/templates/TestExpandablePanels.tsx
+++ b/components/templates/TestExpandablePanels.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import MuiAccordion from "@material-ui/core/Accordion"
 import MuiAccordionSummary from "@material-ui/core/AccordionSummary"
@@ -62,7 +62,7 @@ interface TestProps {
 export const TestErrorMessageAccordion = function(props: TestProps) {
   const { children } = props
 
-  const [expandedErrorPanel, setExpandedErrorPanel] = React.useState<
+  const [expandedErrorPanel, setExpandedErrorPanel] = useState<
     string | false
   >(false)
   const expandCollapsePanel = (errorPanel: string) => (
@@ -116,7 +116,7 @@ export const TestErrorMessageAccordion = function(props: TestProps) {
 export const TestMediaAccordion = function(props: TestProps) {
   const { children } = props
 
-  const [mediaExpandedPanel, setMediaExpandedPanel] = React.useState<
+  const [mediaExpandedPanel, setMediaExpandedPanel] = useState<
     string | false
   >(false)
   const expandCollapsePanel = (mediaPanel: string) => (
diff --git a/components/templates/showAndChangeLaunchStatus.tsx b/components/templates/showAndChangeLaunchStatus.tsx
index ab6fb27..d3c0955 100644
--- a/components/templates/showAndChangeLaunchStatus.tsx
+++ b/components/templates/showAndChangeLaunchStatus.tsx
@@ -1,11 +1,11 @@
-import React from "react"
+import React, { useState } from "react"
 import { Tooltip, IconButton, Snackbar } from "@material-ui/core"
 import { showStatusIcon } from "."
 import StopIcon from "@material-ui/icons/Stop"
 import CloseIcon from "@material-ui/icons/Close"
 
 export function showStatusAndEnableToStopRunningLaunch(status, launchId) {
-  const [openPopUp, setOpenPopUp] = React.useState(false)
+  const [openPopUp, setOpenPopUp] = useState(false)
 
   const handleStopButtonClick = async (launchId: string | number) => {
     // PUT request using fetch with async/await
@@ -34,7 +34,7 @@ export function showStatusAndEnableToStopRunningLaunch(status, launchId) {
     setOpenPopUp(false)
   }
 
-  const [isHovered, setIsHovered] = React.useState(false)
+  const [isHovered, setIsHovered] = useState(false)
 
   const hoverOn = () => {
     setIsHovered(true)
diff --git a/pages/launches/[launchesByProjectId].tsx b/pages/launches/[launchesByProjectId].tsx
index bb9a1ed..2c2e65b 100644
--- a/pages/launches/[launchesByProjectId].tsx
+++ b/pages/launches/[launchesByProjectId].tsx
@@ -109,7 +109,7 @@ function Launches(props: Props) {
   }
 
   // delta view switch
-  const [switchViews, setSwitchViews] = React.useState({
+  const [switchViews, setSwitchViews] = useState({
     deltaView: getInitialDeltaViewState(),
   })