Responsive Tiles #533

src/App.js

@@ -305,7 +305,4 @@ const mapDispatchToProps = dispatch => ({
   ),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/Appshell/Appshell.js

@@ -506,11 +506,6 @@ const mapDispatchToProps = dispatch => ({
 
 export default withRouter(
   withTheme()(
-    withStyles(styles)(
-      connect(
-        mapStateToProps,
-        mapDispatchToProps,
-      )(Appshell),
-    ),
+    withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Appshell)),
   ),
 );

src/components/CustomCircularInput/CustomCircularInput.js

@@ -94,8 +94,5 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default withTheme(
-  connect(
-    null,
-    mapDispatchToProps,
-  )(CustomCircularInput),
+  connect(null, mapDispatchToProps)(CustomCircularInput),
 );

src/components/CustomSliderInput/CustomSliderInput.js

@@ -96,8 +96,5 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default withStyles(styles)(
-  connect(
-    null,
-    mapDispatchToProps,
-  )(CustomSliderInput),
+  connect(null, mapDispatchToProps)(CustomSliderInput),
 );

src/components/GraphPanelLayout/GraphPanelLayout.js

@@ -5,7 +5,7 @@ import {
   SettingsContainer,
   SettingsWrapper,
   GraphContainer,
-  InformationContainer
+  InformationContainer,
 } from './GraphPanelLayout.styles';
 
 const GraphPanelLayout = ({ actionButtons, settings, graph, information }) => {

src/components/SimplePanelLayout/SimplePanelLayout.js

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  LayoutWrapper,
-  LayoutContainer,
-} from './SimplePanelLayout.styles';
+import { LayoutWrapper, LayoutContainer } from './SimplePanelLayout.styles';
 
 const SimplePanelLayout = props => {
   const { panel } = props;

src/screen/AboutUs/AboutUs.js

@@ -132,10 +132,10 @@ const AboutUs = () => {
           }}
         >
           <ListItemIcon>
-            <img 
+            <img
               src={FacebookIcon}
-              style={{ height: '3em', width: '3em' }} 
-              alt="" 
+              style={{ height: '3em', width: '3em' }}
+              alt=""
             />
           </ListItemIcon>
           <ListItemText primary="Like us on Facebook" />
@@ -156,10 +156,10 @@ const AboutUs = () => {
           }}
         >
           <ListItemIcon>
-            <img 
+            <img
               src={TwitterIcon}
-              style={{ height: '3em', width: '3em' }} 
-              alt=""  
+              style={{ height: '3em', width: '3em' }}
+              alt=""
             />
           </ListItemIcon>
           <ListItemText primary="Follow us on Twitter" />
@@ -183,7 +183,7 @@ const AboutUs = () => {
             <img
               src={YoutubeIcon}
               style={{ height: '3em', width: '3em' }}
-              alt="" 
+              alt=""
             />
           </ListItemIcon>
           <ListItemText primary="Watch us on Youtube" />

src/screen/DeviceScreen/DeviceScreen.js

@@ -125,7 +125,4 @@ const mapStateToProps = state => ({
   deviceInformation: state.app.device.deviceInformation,
 });
 
-export default connect(
-  mapStateToProps,
-  null,
-)(DeviceScreen);
+export default connect(mapStateToProps, null)(DeviceScreen);

src/screen/DeviceScreen/index.js

@@ -1,3 +1,3 @@
 import DeviceScreen from './DeviceScreen';
 
-export default DeviceScreen;
+export default DeviceScreen;

src/screen/FAQ/FAQ.js

@@ -436,7 +436,10 @@ const FAQ = () => {
               collected. Future versions of the device will come with a SD card
               to store the data locally as well. At the moment there are still
               limits to using this feature, but we are continuously working on
-              it <span role="img" aria-label="smiley">🙂</span>
+              it{' '}
+              <span role="img" aria-label="smiley">
+                🙂
+              </span>
             </Typography>
           </ExpansionPanelDetails>
         </ExpansionPanel>

src/screen/Home/components/InstrumentCard.styles.js

@@ -5,7 +5,7 @@ export const CustomCard = styled.div`
   display: flex;
   width: 48em;
   height: 26em;
-  margin-right:1em;
+  margin-right: 1em;
   transition-timing-function: ease-in-out;
   transition-duration: 200ms;
   border-radius: 8px;
@@ -18,6 +18,10 @@ export const CustomCard = styled.div`
     box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
       0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   }
+
+  @media only screen and (max-width: 1800px) {
+    margin-top: 10px;
+  }
 `;
 
 export const ImageWrapper = styled.div`

src/screen/Home/components/Tabs.styles.js

@@ -1,22 +1,34 @@
 import styled from 'styled-components';
 
 export const TabsContainer = styled.div`
-  height: calc(100% - 16px);
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin: 0px 0px 16px 0px;
+  margin: 0;
 `;
 
-export const TabsWrapper = styled.div`
-  margin: 16px 16px 0px 0px;
-  width: 98em;
+export const TabsRow = styled.div`
   display: flex;
-  justify-content: flex-start;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
 `;
-export const TabsRow = styled.div`
+
+export const TabsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+export const InstrumentCard = styled.div`
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  @media only screen and (max-width: 1800px) {
+    display: flex;
+    flex-direction: wrap;
+    justify-content: center;
+    align-items: center;
+  }
 `;

src/screen/LoggedData/LoggedData.js

@@ -232,9 +232,4 @@ const mapDispatchToProps = dispatch => ({
   ),
 });
 
-export default withRouter(
-  connect(
-    null,
-    mapDispatchToProps,
-  )(LoggedData),
-);
+export default withRouter(connect(null, mapDispatchToProps)(LoggedData));

src/screen/LogicAnalyzer/LogicAnalyzer.js

@@ -224,7 +224,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default connect(
-  mapStateToProps,
-  null,
-)(LogicAnalyzer);
+export default connect(mapStateToProps, null)(LogicAnalyzer);

src/screen/Multimeter/Multimeter.js

@@ -153,7 +153,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default connect(
-  mapStateToProps,
-  null,
-)(Multimeter);
+export default connect(mapStateToProps, null)(Multimeter);

src/screen/Oscilloscope/Oscilloscope.js

@@ -370,7 +370,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default connect(
-  mapStateToProps,
-  null,
-)(Oscilloscope);
+export default connect(mapStateToProps, null)(Oscilloscope);

src/screen/PowerSource/PowerSource.js

@@ -116,9 +116,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    null,
-  )(PowerSouce),
-);
+export default withRouter(connect(mapStateToProps, null)(PowerSouce));

src/screen/PowerSource/components/InstrumentCluster.js

@@ -319,9 +319,4 @@ const mapDispatchToProps = dispatch => ({
   ),
 });
 
-export default withStyles(styles)(
-  connect(
-    null,
-    mapDispatchToProps,
-  )(Settings),
-);
+export default withStyles(styles)(connect(null, mapDispatchToProps)(Settings));

src/screen/RobotArm/RobotArm.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import {
-  Container,
-  KnobWrapper,
-  PaintWrapper
-} from './RobotArm.styles';
+import { Container, KnobWrapper, PaintWrapper } from './RobotArm.styles';
 import PaintArea from './Components/PaintArea';
 import KnobControl from './Components/KnobControl';
 import range from 'lodash/range';
@@ -181,7 +177,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default connect(
-  mapStateToProps,
-  null,
-)(RobotArm);
+export default connect(mapStateToProps, null)(RobotArm);

src/screen/WaveGenerator/WaveGenerator.js

@@ -200,9 +200,4 @@ const mapStateToProps = state => ({
   isConnected: state.app.device.isConnected,
 });
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    null,
-  )(WaveGenerator),
-);
+export default withRouter(connect(mapStateToProps, null)(WaveGenerator));