feat: implement basic StandardModalContent with accompanying InstallWalletPanelContent

5 files changed, 87 insertions, 4 deletions

diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
new file mode 100644
index 000000000..41b8ec74b
--- /dev/null
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { MetaMaskLogo } from './meta_mask_logo';
+import { StandardPanelContent } from './standard_panel_content';
+import { Button } from './ui/button';
+
+export interface InstallWalletPanelContentProps {}
+
+export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPanelContentProps> = () => (
+    <StandardPanelContent
+        image={<MetaMaskLogo width={85} height={80} />}
+        title="Install MetaMask"
+        description="Please install the MetaMask wallet extension from the Chrome Store."
+        action={
+            <Button width="100%" fontSize="16px" fontColor={ColorOption.white} backgroundColor={ColorOption.darkOrange}>
+                Get Chrome Extension
+            </Button>
+        }
+    />
+);
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 1d8661921..9bd1f8104 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -93,7 +93,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
         }
     };
     private readonly _openInstallWalletPanel = () => {
-        this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallMetaMask);
+        this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet);
     };
 }
 
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
new file mode 100644
index 000000000..da851b232
--- /dev/null
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface MoreInfoSettings {
+    text: string;
+    href: string;
+}
+
+export interface StandardPanelContentProps {
+    image: React.ReactNode;
+    title: string;
+    description: string;
+    moreInfoSettings?: MoreInfoSettings;
+    action: React.ReactNode;
+}
+
+const spacingBetweenPx = '20px';
+
+export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
+    image,
+    title,
+    description,
+    moreInfoSettings,
+    action,
+}) => (
+    <Container height="100%">
+        <Flex direction="column" height="calc(100% - 55px)">
+            <Container marginBottom={spacingBetweenPx}>{image}</Container>
+            <Container marginBottom={spacingBetweenPx}>
+                <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
+                    {title}
+                </Text>
+            </Container>
+            <Container marginBottom={spacingBetweenPx}>
+                <Text fontSize="14px" fontColor={ColorOption.grey} center={true}>
+                    {description}
+                </Text>
+            </Container>
+            <Container marginBottom={spacingBetweenPx}>
+                {moreInfoSettings && (
+                    <a href={moreInfoSettings.href}>
+                        <Text
+                            center={true}
+                            fontSize="13px"
+                            textDecorationLine="underline"
+                            fontColor={ColorOption.lightGrey}
+                        >
+                            {moreInfoSettings.text}>
+                        </Text>
+                    </a>
+                )}
+            </Container>
+        </Flex>
+        <Container>{action}</Container>
+    </Container>
+);
diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx
index 6d31f3e3a..9409d9664 100644
--- a/packages/instant/src/components/standard_sliding_panel.tsx
+++ b/packages/instant/src/components/standard_sliding_panel.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types';
 
+import { InstallWalletPanelContent } from './install_wallet_panel_content';
 import { SlidingPanel } from './sliding_panel';
 
 export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings {
@@ -19,8 +20,8 @@ export class StandardSlidingPanel extends React.Component<StandardSlidingPanelPr
     }
     private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => {
         switch (content) {
-            case StandardSlidingPanelContent.InstallMetaMask:
-                return 'Install MetaMask';
+            case StandardSlidingPanelContent.InstallWallet:
+                return <InstallWalletPanelContent />;
             default:
                 return null;
         }
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index b90221bf4..d0b1bb508 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -64,7 +64,6 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
-    borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
     padding: '.6em 1.2em',