Merge pull request #2469 from Emurgo/refactor-multiple-layouts

Refactor layout components to mui styles

packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.js

@@ -1,21 +1,25 @@
 // @flow
-import { Component } from 'react';
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
-import styles from './BackgroundColoredLayout.scss';
+import { Box } from '@mui/system';
 
 type Props = {|
-  +children: Node
+  +children: Node,
 |};
 
-@observer
-export default class BackgroundColoredLayout extends Component<Props> {
-  render(): Node {
-    const { children } = this.props;
-    return (
-      <div className={styles.component}>
-        {children}
-      </div>
-    );
-  }
+function BackgroundColoredLayout({ children }: Props): Node {
+  return (
+    <Box
+      sx={{
+        overflow: 'overlay',
+        height: '100%',
+        padding: '30px',
+        background: 'var(--yoroi-palette-gray-50)',
+      }}
+    >
+      {children}
+    </Box>
+  );
 }
+
+export default (observer(BackgroundColoredLayout): ComponentType<Props>);

packages/yoroi-extension/app/components/layout/CenteredLayout.js

@@ -1,26 +1,25 @@
 // @flow
-import { Component } from 'react';
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
-import styles from './CenteredLayout.scss';
+import { Box } from '@mui/material';
 
 type Props = {|
-  +children?: Node,
+  +children: Node,
 |};
 
-@observer
-export default class CenteredLayout extends Component<Props> {
-
-  static defaultProps: {|children: void|} = {
-    children: undefined
-  };
-
-  render(): Node {
-    const { children } = this.props;
-    return (
-      <div className={styles.component}>
-        {children}
-      </div>
-    );
-  }
+function CenteredLayout({ children }: Props): Node {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: 'var(--yoroi-loading-background-color)',
+        height: '100%',
+      }}
+    >
+      {children}
+    </Box>
+  );
 }
+export default (observer(CenteredLayout): ComponentType<Props>);

packages/yoroi-extension/app/components/layout/HorizontalFlexContainer.js

@@ -1,21 +1,28 @@
 // @flow
-import { Component } from 'react';
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
-import styles from './HorizontalFlexContainer.scss';
+import { Box } from '@mui/system';
 
 type Props = {|
   +children: ?Node,
 |};
 
-@observer
-export default class HorizontalFlexContainer extends Component<Props> {
-  render(): Node {
-    const { children } = this.props;
-    return (
-      <div className={styles.component}>
-        {children}
-      </div>
-    );
-  }
+function HorizontalFlexContainer({ children }: Props): Node {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        position: 'relative',
+        '&::-webkit-scrollbar-button': {
+          width: '7px',
+          display: 'block',
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
 }
+export default (observer(HorizontalFlexContainer): ComponentType<Props>);