From e704fdbb3f177aca61a8494aca7f0caa6fd10107 Mon Sep 17 00:00:00 2001
From: Violet <imacoderimacoderimacoder@gmail.com>
Date: Sat, 26 Nov 2022 18:28:15 -0500
Subject: [PATCH] grid commit

---
 .../deviceInteraction/DeviceInteraction.jsx   | 34 ++++++++++++++++---
 .../WriteTemperatureContainer.jsx             |  2 +-
 .../WriteTemperature/styledComponents.jsx     |  4 +--
 .../shared/OutletRenderer/VolcanoLoader.jsx   |  4 +--
 .../workflowEditor/WorkflowButtons.jsx        |  4 +--
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/features/deviceInteraction/DeviceInteraction.jsx b/src/features/deviceInteraction/DeviceInteraction.jsx
index fb5822f..9f10f75 100644
--- a/src/features/deviceInteraction/DeviceInteraction.jsx
+++ b/src/features/deviceInteraction/DeviceInteraction.jsx
@@ -6,7 +6,6 @@ import CurrentTargetTemperature from "./CurrentTargetTemperature/CurrentTargetTe
 import TargetTemperatureRange from "./TargetTemperatureRange/TargetTemperatureRange";
 
 import WorkFlow from "../workflowEditor/WorkflowButtons";
-import Container from "react-bootstrap/Container";
 import { useSelector } from "react-redux";
 
 function Volcano() {
@@ -22,19 +21,44 @@ function Volcano() {
   /* eslint-enable no-unused-vars */
 
   return (
-    <Container>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "calc(100% - 66px)",
+        justifyContent: "space-between",
+      }}
+    >
       <div>
         <CurrentTemperature />
         <CurrentTargetTemperature />
-        <WriteTemperature />
-        <WorkFlow />
+        <div
+          style={{
+            justifyContent: "center",
+            display: "flex",
+          }}
+        >
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(150px, auto))",
+              gridGap: "10px",
+              alignItems: "center",
+            }}
+          >
+            <WriteTemperature />
+            <WorkFlow />
+          </div>
+        </div>
+      </div>
+      <div>
         <TargetTemperatureRange />
         <div className="heat-air-div">
           <HeatOn />
           <FanOn />
         </div>
       </div>
-    </Container>
+    </div>
   );
 }
 
diff --git a/src/features/deviceInteraction/WriteTemperature/WriteTemperatureContainer.jsx b/src/features/deviceInteraction/WriteTemperature/WriteTemperatureContainer.jsx
index ec949e0..0243bb1 100644
--- a/src/features/deviceInteraction/WriteTemperature/WriteTemperatureContainer.jsx
+++ b/src/features/deviceInteraction/WriteTemperature/WriteTemperatureContainer.jsx
@@ -216,5 +216,5 @@ export default function WriteTemperatureContainer() {
 
   temperatureButtons.push();
 
-  return <div className="temperature-write-div">{temperatureButtons}</div>;
+  return <>{temperatureButtons}</>;
 }
diff --git a/src/features/deviceInteraction/WriteTemperature/styledComponents.jsx b/src/features/deviceInteraction/WriteTemperature/styledComponents.jsx
index 372d62d..e1824e9 100644
--- a/src/features/deviceInteraction/WriteTemperature/styledComponents.jsx
+++ b/src/features/deviceInteraction/WriteTemperature/styledComponents.jsx
@@ -9,6 +9,7 @@ export const InactiveButton = styled.button`
   color: ${(props) => props.theme.primaryFontColor};
   border-radius: 2rem;
   border-color: ${(props) => props.theme.borderColor};
+  white-space: nowrap;
   border-style: ${(props) => props.theme.borderStyle};
   &:active {
     background-color: ${(props) => props.theme.buttonActive.backgroundColor};
@@ -31,9 +32,6 @@ export const PlusMinusButton = styled(InactiveButton)`
 
 export const Div = styled.div`
   display: flex;
-  width: 48%;
-  flex-grow: 1;
-  margin: 0px 2.5px 5px;
 
   svg {
     height: 2rem;
diff --git a/src/features/shared/OutletRenderer/VolcanoLoader.jsx b/src/features/shared/OutletRenderer/VolcanoLoader.jsx
index ef4b9a8..aaddb0a 100644
--- a/src/features/shared/OutletRenderer/VolcanoLoader.jsx
+++ b/src/features/shared/OutletRenderer/VolcanoLoader.jsx
@@ -211,7 +211,7 @@ export default function VolcanoLoader(props) {
   }, [dispatch]);
 
   return (
-    <div className="main-div">
+    <Container>
       {
         <StyledNavBar
           expand="lg"
@@ -281,6 +281,6 @@ export default function VolcanoLoader(props) {
       }
       <CurrentWorkflowExecutionDisplay />
       <Outlet {...props} />
-    </div>
+    </Container>
   );
 }
diff --git a/src/features/workflowEditor/WorkflowButtons.jsx b/src/features/workflowEditor/WorkflowButtons.jsx
index 98edd5c..12ae172 100644
--- a/src/features/workflowEditor/WorkflowButtons.jsx
+++ b/src/features/workflowEditor/WorkflowButtons.jsx
@@ -237,7 +237,7 @@ export default function WorkFlow() {
   };
 
   return (
-    <div className="temperature-write-div">
+    <>
       {workflows.map((item, index) => {
         const isActive = currentWorkflow?.id === item.id;
         const buttonText = isActive ? "Tap to Cancel" : item.name;
@@ -250,6 +250,6 @@ export default function WorkFlow() {
           />
         );
       })}
-    </div>
+    </>
   );
 }