fix(my-joy-beta): have two footers

packages/my-joy-beta/src/components/instances/footer.js

@@ -4,7 +4,7 @@ import { withTheme } from 'styled-components';
 
 import {
   Button,
-  Footer,
+  StickyFooter,
   QueryBreakpoints,
   StartIcon,
   StopIcon,
@@ -25,7 +25,7 @@ export default withTheme(
     onRemove,
     theme = {}
   }) => (
-    <Footer fixed bottom>
+    <StickyFooter fixed bottom>
       <Row between="xs" middle="xs">
         <Col xs={7}>
           {onStart && [
@@ -162,6 +162,6 @@ export default withTheme(
           </Col>
         )}
       </Row>
-    </Footer>
+    </StickyFooter>
   )
 );

packages/ui-toolkit/src/footer/StickyFooter.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import is from 'styled-is';
+import remcalc from 'remcalc';
+
+import Baseline from '../baseline';
+import { ViewContainer } from '../layout';
+
+const Container = ViewContainer.extend`
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: stretch;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  background-color: rgba(241, 241, 241, 1);
+  border-top: ${remcalc(1)} solid ${props => props.theme.grey};
+  max-height: ${remcalc(53)};
+  min-height: ${remcalc(53)};
+  line-height: ${remcalc(25)};
+  height: ${remcalc(70)};
+  max-height: ${remcalc(70)};
+  z-index: 1;
+  ${is('fixed')`
+    position: fixed;
+    left: 0;
+    right: 0;
+  `};
+  ${is('bottom', 'fixed')`
+    bottom: 0;
+  `};
+`;
+
+export default Baseline(({ children, fluid, ...rest }) => (
+  <Footer {...rest}>
+    <Container fluid={fluid}>{children}</Container>
+  </Footer>
+));

packages/ui-toolkit/src/footer/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import StickyFooter from './StickyFooter';
 
 const List = styled.ul`
   display: flex;
@@ -56,3 +57,5 @@ export default () => (
     </ListItem>
   </List>
 );
+
+export { default as StickyFooter } from './StickyFooter';

packages/ui-toolkit/src/index.js

@@ -11,7 +11,7 @@ export { default as Strong } from './text/strong';
 export { default as Sup } from './text/sup';
 export { default as theme } from './theme';
 export { default as Divider } from './divider';
-export { default as Footer } from './footer';
+export { default as Footer, StickyFooter } from './footer';
 export { default as KeyValue } from './key-value';
 export { default as StatusLoader } from './status-loader';