Merge branch 'master' into change-message

Author: MichaelDeBoey

.circleci/config.yml

@@ -389,6 +389,7 @@ workflows:
             - typecheck
             - test-integrations
             - test-jest
+            - test-visual-regressions
           filters:
             branches:
               only:

packages/app/package.json

@@ -222,6 +222,7 @@
     "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
+    "textextensions": "^3.3.0",
     "use-interval": "^1.2.1",
     "util": "0.11.1",
     "vue": "^2.5.2",

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Create/PersonalTemplates/FilteredTemplates.tsx

@@ -25,8 +25,8 @@ export const FilteredTemplates = ({
           threshold: 0.3,
           distance: 10,
           keys: [
-            { name: 'sandbox.title', weight: 0.5 },
-            { name: 'sandbox.description', weight: 0.5 },
+            { name: 'sandbox.title', weight: 0.3 },
+            { name: 'sandbox.description', weight: 0.25 },
             { name: 'sandbox.alias', weight: 0.2 },
             { name: 'sandbox.source.template', weight: 0.2 },
             { name: 'sandbox.id', weight: 0.05 },

packages/app/src/app/components/Integration/DetailInfo/DetailInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import CrossIcon from 'react-icons/lib/md/clear';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { Button } from '@codesandbox/components';
 import { Details, Heading, Info, Action } from './elements';
 
 interface IDetailInfoProps {
@@ -31,7 +31,7 @@ export const DetailInfo: React.FC<IDetailInfoProps> = ({
         </Action>
       </Tooltip>
     ) : (
-      <Button small onClick={onSignIn}>
+      <Button style={{ width: 'auto' }} onClick={onSignIn}>
         Sign in
       </Button>
     )}

packages/app/src/app/components/Integration/elements.ts

@@ -8,6 +8,7 @@ export const Container = styled.div<{
     display: inline-flex;
     width: 100%;
     border-radius: 4px;
+    border: 1px solid ${theme.colors.avatar.border};
     color: ${theme.light ? css`#636363` : css`rgba(255, 255, 255, 0.8)`};
     overflow: hidden;
 

packages/app/src/app/components/Modal/index.js

@@ -74,6 +74,7 @@ class ModalComponent extends React.Component {
       left: 0,
       right: 0,
       margin: `0 auto ${top}vh`,
+      fontFamily: "'Inter', sans-serif",
       outline: 'none',
     },
   });

packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts

@@ -1,12 +1,8 @@
 import styled from 'styled-components';
-import Input from '@codesandbox/common/lib/components/Input';
+import { Input } from '@codesandbox/components';
 
 export const CardContainer = styled.div`
-  padding: 0.5rem;
   margin-top: 0.25rem;
-  margin-bottom: 0.5rem;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.3);
 `;
 
 export const StripeInput = styled(Input)`
@@ -23,8 +19,3 @@ export const ErrorText = styled.div`
   color: ${props => props.theme.red};
   font-size: 0.875rem;
 `;
-
-export const Label = styled.label`
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-`;

packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx

@@ -4,10 +4,12 @@ import {
   CardElement,
   ReactStripeElements,
 } from 'react-stripe-elements';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { withTheme } from 'styled-components';
+import css from '@styled-system/css';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
+import { Button, Label, Element } from '@codesandbox/components';
 
-import { CardContainer, StripeInput, ErrorText, Label } from './elements';
+import { CardContainer, StripeInput, ErrorText } from './elements';
 
 interface Props {
   name: string;
@@ -18,6 +20,7 @@ interface Props {
   stripe?: ReactStripeElements.StripeProps;
   error?: Error | string;
   hasCoupon?: boolean;
+  theme?: any;
 }
 
 interface State {
@@ -106,6 +109,7 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
       isLoading,
       error,
       hasCoupon = false,
+      theme,
     } = this.props;
     const { errors, loading: stateLoading } = this.state;
 
@@ -115,34 +119,61 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <Label>Cardholder Name</Label>
+        <Label variant="muted" size={3} paddingBottom={1}>
+          Cardholder Name
+        </Label>
         {errors.name != null && <ErrorText>{errors.name}</ErrorText>}
-        <div>
+        <Element>
           <StripeInput
             value={this.state.name}
             onChange={this.setName}
             placeholder="Please enter your name"
           />
-        </div>
+        </Element>
 
-        <Label>Card</Label>
+        <Label variant="muted" size={3} paddingBottom={1}>
+          Card
+        </Label>
         {stripeError != null && <ErrorText>{stripeError}</ErrorText>}
         <CardContainer>
-          <CardElement
-            style={{ base: { color: 'white', fontWeight: '500' } }}
-          />
+          <Element
+            css={css({
+              height: '32px',
+              paddingTop: '6px',
+              width: '100%',
+              paddingX: 2,
+              fontSize: 3,
+              lineHeight: 1, // trust the height
+              fontFamily: 'Inter, sans-serif',
+              borderRadius: 'small',
+              backgroundColor: 'input.background',
+              border: '1px solid',
+              borderColor: 'input.border',
+              color: 'input.foreground',
+            })}
+          >
+            <CardElement
+              style={{
+                base: {
+                  color: theme.colors.input.foreground,
+                },
+              }}
+            />
+          </Element>
         </CardContainer>
 
         {hasCoupon && (
           <>
-            <Label>Coupon</Label>
-            <div>
+            <Label variant="muted" size={3} paddingBottom={1}>
+              Coupon
+            </Label>
+            <Element>
               <StripeInput
                 value={this.state.coupon}
                 onChange={this.setCoupon}
                 placeholder="Coupon or Discount Code"
               />
-            </div>
+            </Element>
           </>
         )}
 
@@ -157,5 +188,5 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
     );
   }
 }
-
-export const CheckoutForm = injectStripe(CheckoutFormComponent);
+// @ts-ignore
+export const CheckoutForm = injectStripe(withTheme(CheckoutFormComponent));