feat: refactor button styles and add href to Text

5 files changed, 24 insertions, 20 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 877ab275c..c10e07b83 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -43,7 +43,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
                 onClick={this._handleClick}
                 isDisabled={shouldDisableButton}
                 fontColor={ColorOption.white}
-                fontSize="20px"
+                fontSize="16px"
             >
                 Buy
             </Button>
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index fca5383ea..95a79bd55 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -29,7 +29,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
     action,
 }) => (
     <Container height="100%">
-        <Flex direction="column" height="calc(100% - 55px)">
+        <Flex direction="column" height="calc(100% - 58px)">
             <Container marginBottom={spacingBetweenPx}>{image}</Container>
             <Container marginBottom={spacingBetweenPx}>
                 <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
@@ -43,16 +43,15 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
             </Container>
             <Container marginBottom={spacingBetweenPx}>
                 {moreInfoSettings && (
-                    <a href={moreInfoSettings.href} target="_blank">
-                        <Text
-                            center={true}
-                            fontSize="13px"
-                            textDecorationLine="underline"
-                            fontColor={ColorOption.lightGrey}
-                        >
-                            {moreInfoSettings.text}
-                        </Text>
-                    </a>
+                    <Text
+                        center={true}
+                        fontSize="13px"
+                        textDecorationLine="underline"
+                        fontColor={ColorOption.lightGrey}
+                        href={moreInfoSettings.href}
+                    >
+                        {moreInfoSettings.text}
+                    </Text>
                 )}
             </Container>
         </Flex>
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 479ef6c77..fbc5bcad4 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -2,6 +2,7 @@ import { darken, saturate } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
 
 export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
@@ -19,10 +20,6 @@ export interface ButtonProps {
     className?: string;
 }
 
-const createHrefOnClick = (href: string) => () => {
-    window.open(href, '_blank');
-};
-
 const PlainButton: React.StatelessComponent<ButtonProps> = ({
     children,
     isDisabled,
@@ -31,7 +28,7 @@ const PlainButton: React.StatelessComponent<ButtonProps> = ({
     type,
     className,
 }) => {
-    const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick;
+    const computedOnClick = isDisabled ? undefined : href ? util.createHrefOnClick(href) : onClick;
     return (
         <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
             {children}
@@ -48,7 +45,7 @@ export const Button = styled(PlainButton)`
         box-sizing: border-box;
         font-size: ${props => props.fontSize};
         font-family: 'Inter UI', sans-serif;
-        font-weight: 600;
+        font-weight: 500;
         color: ${props => props.fontColor && props.theme[props.fontColor]};
         cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
         transition: background-color, opacity 0.5s ease;
@@ -83,7 +80,7 @@ Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
-    padding: '.6em 1.2em',
+    padding: '.82em 1.2em',
     fontSize: '15px',
 };
 
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 4fe429d25..3dba11c74 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -2,6 +2,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
 
 export interface TextProps {
     fontColor?: ColorOption;
@@ -20,10 +21,16 @@ export interface TextProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     noWrap?: boolean;
     display?: string;
+    href?: string;
 }
 
+export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
+    const computedOnClick = href ? util.createHrefOnClick(href) : onClick;
+    return <StyledText {...rest} onClick={computedOnClick} />;
+};
+
 const darkenOnHoverAmount = 0.3;
-export const Text =
+export const StyledText =
     styled.div <
     TextProps >
     `
diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts
index 232a86850..aeb68956b 100644
--- a/packages/instant/src/util/util.ts
+++ b/packages/instant/src/util/util.ts
@@ -2,4 +2,5 @@ import * as _ from 'lodash';
 
 export const util = {
     boundNoop: _.noop.bind(_),
+    createHrefOnClick: (href: string) => () => window.open(href, '_blank'),
 };