diff --git a/src/components/Appshell/Appshell.js b/src/components/Appshell/Appshell.js index ab667537..e2bbfbe6 100644 --- a/src/components/Appshell/Appshell.js +++ b/src/components/Appshell/Appshell.js @@ -487,7 +487,11 @@ const mapDispatchToProps = dispatch => ({ }); export default withRouter( + + withTheme()( + withTheme( + withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Appshell)), ), ); diff --git a/src/screen/Home/components/InstrumentCard.styles.js b/src/screen/Home/components/InstrumentCard.styles.js index aaecedf1..6bc00e58 100644 --- a/src/screen/Home/components/InstrumentCard.styles.js +++ b/src/screen/Home/components/InstrumentCard.styles.js @@ -19,6 +19,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` diff --git a/src/screen/Home/components/Tabs.styles.js b/src/screen/Home/components/Tabs.styles.js index 37000828..16adfefb 100644 --- a/src/screen/Home/components/Tabs.styles.js +++ b/src/screen/Home/components/Tabs.styles.js @@ -1,12 +1,16 @@ 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: 0; +`; + +export const TabsRow = styled.div` flex-wrap: wrap; margin: 1em auto; justify-content: center; @@ -19,11 +23,26 @@ export const TabsWrapper = styled.div` margin: 16px 16px 0px 0px; width: 98em; 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; + } `;