diff --git a/src/components/HomeLayout/HomeLayout.styles.js b/src/components/HomeLayout/HomeLayout.styles.js
index 79625daf..be3239ef 100644
--- a/src/components/HomeLayout/HomeLayout.styles.js
+++ b/src/components/HomeLayout/HomeLayout.styles.js
@@ -5,5 +5,7 @@ export const LayoutContainer = styled.div`
flex-direction: row;
height: 100%;
width: 100%;
+ justify-content: center;
+ align-items: center;
background: ${props => props.theme.background.default};
`;
diff --git a/src/screen/Home/components/InstrumentCard.styles.js b/src/screen/Home/components/InstrumentCard.styles.js
index 281dc1e2..aaecedf1 100644
--- a/src/screen/Home/components/InstrumentCard.styles.js
+++ b/src/screen/Home/components/InstrumentCard.styles.js
@@ -5,7 +5,8 @@ export const CustomCard = styled.div`
display: flex;
width: 48em;
height: 26em;
- margin-right:1em;
+ margin-right: 1em;
+ margin-bottom: 1em;
transition-timing-function: ease-in-out;
transition-duration: 200ms;
border-radius: 8px;
diff --git a/src/screen/Home/components/Tabs.js b/src/screen/Home/components/Tabs.js
index fc38f286..4051158d 100644
--- a/src/screen/Home/components/Tabs.js
+++ b/src/screen/Home/components/Tabs.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import InstrumentCard from './InstrumentCard';
-import { TabsContainer, TabsWrapper, TabsRow } from './Tabs.styles';
+import { TabsContainer, TabsContainerInner } from './Tabs.styles';
import {
OscilloscopeIcon,
LogicAnalyzerIcon,
@@ -13,72 +13,54 @@ import {
const Tabs = () => {
return (
-
-
-
-
- }
- title={'Oscilloscope'}
- description={'Allows observation of varying signal voltages'}
- redirectPath={'/oscilloscope'}
- />
- }
- title={'Logic Analyzer'}
- description={'Captures and displays signals from digital systems'}
- redirectPath={'/logicanalyzer'}
- />
-
-
-
-
- }
- title={'Wave Generator'}
- description={'Generates arbitrary analog and digital waveforms'}
- redirectPath={'/wavegenerator'}
- />
- }
- title={'Power Source'}
- description={'Generates programmable voltage and currents'}
- redirectPath={'/powersource'}
- />
-
-
-
-
- }
- title={'Multimeter'}
- description={
- 'Measure voltage, current, resistance and capacitance.'
- }
- redirectPath={'/multimeter'}
- />
- }
- title={'Sensors'}
- description={
- 'Allows logging of data returned by sensor connected.'
- }
- redirectPath={'/sensors'}
- />
-
-
-
-
- }
- title={'Robotic Arm'}
- description={'To control servo motors using a timeline.'}
- redirectPath={'/robotarm'}
- />
-
-
-
-
+
+
+
+ }
+ title={'Oscilloscope'}
+ description={'Allows observation of varying signal voltages'}
+ redirectPath={'/oscilloscope'}
+ />
+ }
+ title={'Logic Analyzer'}
+ description={'Captures and displays signals from digital systems'}
+ redirectPath={'/logicanalyzer'}
+ />
+ }
+ title={'Wave Generator'}
+ description={'Generates arbitrary analog and digital waveforms'}
+ redirectPath={'/wavegenerator'}
+ />
+ }
+ title={'Power Source'}
+ description={'Generates programmable voltage and currents'}
+ redirectPath={'/powersource'}
+ />
+ }
+ title={'Multimeter'}
+ description={'Measure voltage, current, resistance and capacitance.'}
+ redirectPath={'/multimeter'}
+ />
+ }
+ title={'Sensors'}
+ description={'Allows logging of data returned by sensor connected.'}
+ redirectPath={'/sensors'}
+ />
+ }
+ title={'Robotic Arm'}
+ description={'To control servo motors using a timeline.'}
+ redirectPath={'/robotarm'}
+ />
+
+
+
);
};
diff --git a/src/screen/Home/components/Tabs.styles.js b/src/screen/Home/components/Tabs.styles.js
index c263823e..37000828 100644
--- a/src/screen/Home/components/Tabs.styles.js
+++ b/src/screen/Home/components/Tabs.styles.js
@@ -3,11 +3,18 @@ import styled from 'styled-components';
export const TabsContainer = styled.div`
height: calc(100% - 16px);
width: 100%;
+`;
+export const TabsContainerInner = styled.div`
+ width: 100%;
display: flex;
- flex-direction: column;
- margin: 0px 0px 16px 0px;
+ flex-wrap: wrap;
+ margin: 1em auto;
+ justify-content: center;
+ padding-left: 1em;
+ @media only screen and (min-width: 1176px) {
+ justify-content: start;
+ }
`;
-
export const TabsWrapper = styled.div`
margin: 16px 16px 0px 0px;
width: 98em;