New style for tabs

smart-hut/src/components/dashboard/devices/styleComponents.js

@@ -18,10 +18,17 @@ export const editButtonStyle = {
 };
 
 export const panelStyle = {
-  position: "relative",
   backgroundColor: "#fafafa",
-  height: "100vh",
+  height: "85vh",
-  width: "auto",
+  padding: "0rem 3rem",
+  color: "#000000",
+  overflow: "auto",
+  maxHeight: "75vh",
+};
+
+export const mobilePanelStyle = {
+  backgroundColor: "#fafafa",
+  minHeight: "100vh",
   padding: "0rem 3rem",
   color: "#000000",
 };

smart-hut/src/views/Dashboard.js

@@ -5,7 +5,10 @@ import AutomationsPanel from "../components/dashboard/AutomationsPanel";
 import Navbar from "./Navbar";
 import MyHeader from "../components/HeaderController";
 import { Grid, Responsive, Button } from "semantic-ui-react";
-import { panelStyle } from "../components/dashboard/devices/styleComponents";
+import {
+  panelStyle,
+  mobilePanelStyle,
+} from "../components/dashboard/devices/styleComponents";
 
 import { RemoteService } from "../remote";
 import { connect } from "react-redux";
@@ -45,7 +48,7 @@ class Dashboard extends Component {
 
   render() {
     return (
-      <div style={{ height: "110vh", background: "#1b1c1d" }}>
+      <div style={{ background: "#1b1c1d" }}>
         <Responsive minWidth={768}>
           <Grid>
             <Grid.Row color="black">
@@ -53,27 +56,31 @@ class Dashboard extends Component {
                 <MyHeader />
               </Grid.Column>
             </Grid.Row>
-            <Grid.Row color="black" centered>
+            <Grid.Row color="black">
-              <Grid.Column>
+              <Grid.Column width={3}></Grid.Column>
+              <Grid.Column textAlign="center" width={13}>
                 <Button
+                  basic
                   name="Devices"
                   content="Devices"
                   active={this.activeTab === "Devices"}
-                  color={this.activeTab === "Devices" ? "green" : "olive"}
+                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
                   onClick={this.selectTab}
                 />
                 <Button
+                  basic
                   name="Scenes"
                   content="Scenes"
                   active={this.activeTab === "Scenes"}
-                  color={this.activeTab === "Scenes" ? "green" : "olive"}
+                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
                   onClick={this.selectTab}
                 />
                 <Button
+                  basic
                   name="Automations"
                   content="Automations"
                   active={this.activeTab === "Automations"}
-                  color={this.activeTab === "Automations" ? "green" : "olive"}
+                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
                   onClick={this.selectTab}
                 />
               </Grid.Column>
@@ -96,6 +103,34 @@ class Dashboard extends Component {
                 <MyHeader />
               </Grid.Column>
             </Grid.Row>
+            <Grid.Row color="black">
+              <Grid.Column textAlign="center">
+                <Button
+                  basic
+                  name="Devices"
+                  content="Devices"
+                  active={this.activeTab === "Devices"}
+                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
+                  onClick={this.selectTab}
+                />
+                <Button
+                  basic
+                  name="Scenes"
+                  content="Scenes"
+                  active={this.activeTab === "Scenes"}
+                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
+                  onClick={this.selectTab}
+                />
+                <Button
+                  basic
+                  name="Automations"
+                  content="Automations"
+                  active={this.activeTab === "Automations"}
+                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
+                  onClick={this.selectTab}
+                />
+              </Grid.Column>
+            </Grid.Row>
             <Grid.Row color="black">
               <Grid.Column color="black">
                 <Navbar />
@@ -103,7 +138,9 @@ class Dashboard extends Component {
             </Grid.Row>
             <Grid.Row>
               <Grid.Column>
-                <DevicePanel />
+                <div style={mobilePanelStyle}>
+                  {this.renderTab(this.activeTab)}
+                </div>
               </Grid.Column>
             </Grid.Row>
           </Grid>