Convert Layout and Container to styled components

2 files changed, 15 insertions, 26 deletions

diff --git a/gui/src/renderer/components/Layout.tsx b/gui/src/renderer/components/Layout.tsx
index 01f4aa701d..825cbf9190 100644
--- a/gui/src/renderer/components/Layout.tsx
+++ b/gui/src/renderer/components/Layout.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Component, View } from 'reactxp';
+import styled from 'styled-components';
+import { colors } from '../../config.json';
 import HeaderBar from './HeaderBar';
 import styles from './LayoutStyles';
 
@@ -15,20 +17,17 @@ export class Header extends Component<HeaderBar['props']> {
   }
 }
 
-interface IContainerProps {
-  children: React.ReactNode;
-}
-export class Container extends Component<IContainerProps> {
-  public render() {
-    return <View style={styles.container}>{this.props.children}</View>;
-  }
-}
+export const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  backgroundColor: colors.blue,
+  overflow: 'hidden',
+});
 
-interface ILayoutProps {
-  children: React.ReactNode;
-}
-export class Layout extends Component<ILayoutProps> {
-  public render() {
-    return <View style={styles.layout}>{this.props.children}</View>;
-  }
-}
+export const Layout = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  height: '100vh',
+});
diff --git a/gui/src/renderer/components/LayoutStyles.tsx b/gui/src/renderer/components/LayoutStyles.tsx
index cebe3f2588..aa27549f39 100644
--- a/gui/src/renderer/components/LayoutStyles.tsx
+++ b/gui/src/renderer/components/LayoutStyles.tsx
@@ -1,17 +1,7 @@
 import { Styles } from 'reactxp';
-import { colors } from '../../config.json';
 
 export default {
-  layout: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
   header: Styles.createViewStyle({
     flex: 0,
   }),
-  container: Styles.createViewStyle({
-    flex: 1,
-    backgroundColor: colors.blue,
-    overflow: 'hidden',
-  }),
 };