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;