Merge branch 'main' of https://github.com/mavka-org/mavka-ui

src/components/content/ContentBlock.js

@@ -8,16 +8,20 @@ import get from 'get-value';
 const useStyles = props => makeStyles(theme => ({
   root: {
     width: "100%",
-    padding: theme.spacing(2),
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
     backgroundColor: get(theme.palette, props.color),
   },
+  title: {
+    paddingBottom: theme.spacing(2)
+  }
 }));
 
 export function ContentBlock({ children, ...props }) {
   const classes = useStyles(props)();
   return (
     <Grid className={classes.root} direction='column' container>
-      <Grid item container><Typography variant="body1"><strong>{props.title}</strong></Typography></Grid>
+      <Grid item container className={classes.title}><Typography variant="body1"><strong>{props.title}</strong></Typography></Grid>
       <Grid item container><Typography variant="body1">{children}</Typography></Grid>
     </Grid>
   );

src/components/content/ModeCard.js

@@ -9,7 +9,7 @@ const useStyles = props => makeStyles(theme => ({
   root: {
     backgroundColor: get(theme.palette, props.color),
     borderRadius: theme.shape.borderRadius,
-    padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
+    padding: theme.spacing(2),
     flexFlow:'nowrap'
   },
 }));

src/components/layout/NavigationContainer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+
+const useStyles = props => makeStyles( theme => ({
+  root: {
+    padding: theme.spacing(2)
+  }
+}));
+
+export function PageContainer({ children, ...props }){
+  const classes = useStyles(props)();
+  const classNames = `${classes.root} ${props.className}`;
+  return (
+    <Container maxWidth="sm" className={classNames}>
+      {children}
+    </Container>
+  );
+}
+
+export default PageContainer;

src/stories/layout/NavigationContainer.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import NavigationContainer from '../../components/layout/NavigationContainer';
+import { makeStyles } from '@material-ui/core/styles';
+
+export default {
+  title: 'Layout/NavigationContainer',
+  component: NavigationContainer
+};
+
+const useStyles = makeStyles( theme => ({
+  root: {
+    background: '#000',
+    color: '#fff'
+  }
+}));
+
+export const Default = () => <NavigationContainer className={useStyles().root}>This is a Default NavigationContainer used to pad all the navigation.</NavigationContainer>

src/stories/navigation/BottomNavBar.stories.js

@@ -19,9 +19,9 @@ export const WithControls = () => <BottomNavBar
     <ControlsButtonGroup
       collapsedButton={<Button onClick={() => {alert('Collapsed clicked')}} color='secondary' fullWidth>Завершити тест</Button>}
       expendedButtons={[
-      <NavigateButton onClick={() => {alert('Going back!')}} before/>,
-      <Button onClick={() => {alert('Clicked')}} fullWidth>Перевірити</Button>,
-      <NavigateButton onClick={() => {alert('Going forward!')}}/>
+      <NavigateButton size='large' onClick={() => {alert('Going back!')}} before/>,
+      <Button size='large' onClick={() => {alert('Clicked')}} fullWidth>Перевірити</Button>,
+      <NavigateButton size='large' onClick={() => {alert('Going forward!')}}/>
       ]}
     />
   }

src/stories/navigation/TestTopNavBar.stories.js

@@ -14,7 +14,6 @@ export default {
 export const Default = () => { 
   const [collapsed, setCollapsed] = useState(false);
   const theme = useTheme();
-  console.log("🚀 ~ file: TestTopNavBar.stories.js ~ line 17 ~ Default ~ theme", theme)
 
   useEffect(() => {
     if (collapsed) {