Change Island to use styled-components

1 files changed, 8 insertions, 15 deletions

diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index de90b664f..b88d5fc1b 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,28 +1,21 @@
 import * as React from 'react';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 
 export interface IslandProps {
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
 }
 
-const defaultStyle: React.CSSProperties = {
-    backgroundColor: colors.white,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderTopLeftRadius: 10,
-    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-    overflow: 'hidden',
-};
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, ...rest }) => <Component {...rest} />;
 
-export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
-    <props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
-        {props.children}
-    </props.Component>
-);
+export const Island = styled(PlainIsland)`
+    background-color: ${colors.white};
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
+    overflow: hidden;
+`;
 
 Island.defaultProps = {
     Component: 'div',