WIP: Scrollbars not working yet.

src/components/ExportToCodesandbox/ExportToCodesandbox.js

@@ -177,8 +177,8 @@ class ExportToCodesandbox extends PureComponent {
 }
 
 const Wrapper = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  //display: grid;
+  //grid-template-columns: 1fr 1fr;
 `;
 
 const Action = styled.div``;

src/components/Modal/Modal.js

@@ -94,7 +94,6 @@ class Modal extends PureComponent<Props, State> {
                 {({ interpolatedTranslateY, opacity }) => (
                   <Wrapper opacity={opacity} clickable={!inTransit}>
                     <Backdrop onClick={onDismiss} />
-
                     <PaneWrapper
                       width={width}
                       height={height}

src/components/ProjectConfigurationModal/ProjectConfigurationModal.js

@@ -2,6 +2,7 @@
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
+import { Scrollbars } from 'react-custom-scrollbars';
 
 import * as actions from '../../actions';
 
@@ -19,6 +20,7 @@ import ProjectIconSelection from '../ProjectIconSelection';
 import TextInput from '../TextInput';
 import ExportToCodesandbox from '../ExportToCodesandbox';
 import DisabledText from '../DisabledText';
+
 import type { Project } from '../../types';
 
 type Props = {
@@ -134,16 +136,15 @@ class ProjectConfigurationModal extends PureComponent<Props, State> {
               />
             </FormField>
 
-            {project &&
+            {/* {project &&
               project.type === 'create-react-app' && (
-                <Fragment>
-                  {/* Codesandbox export only supported for create-react-apps at the moment. */}
-                  <SectionTitle>Export</SectionTitle>
-                  <ExportToCodesandbox />
-                </Fragment>
-              )}
+              )} */}
 
-            <Spacer size={10} />
+            <FormField label="Export" focusOnClick={false} />
+            <ExportToCodesandbox />
+            {/* <Fragment>
+            {/* Codesandbox export only supported for create-react-apps at the moment. */}
+            {/* </Fragment> */}
 
             <Actions>
               <FillButton
@@ -167,19 +168,25 @@ class ProjectConfigurationModal extends PureComponent<Props, State> {
   }
 }
 
-const MainContent = styled.section`
+const MainContent = styled(Scrollbars).attrs({
+  autoHeight: true,
+  autoHeightMax: '500px', //'80vh',
+})`
   padding: 25px;
+  // > div:first-child {
+  //   overflow: auto !important;
+  // }
 `;
 
 const Actions = styled.div`
   text-align: center;
   padding-bottom: 16px;
 `;
 
-const SectionTitle = styled(Heading).attrs({
+const SectionTitle = styled.h1.attrs({
   size: 'small',
 })`
-  padding-bottom: 10px;
+  //padding-bottom: 10px;
 `;
 
 const mapStateToProps = state => {

src/components/TokenInput/TokenInput.js

@@ -1,24 +1,27 @@
-import React, { Component } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import styled from 'styled-components';
 import IconBase from 'react-icons-kit';
 import { checkCircle } from 'react-icons-kit/feather/checkCircle';
 import { xCircle } from 'react-icons-kit/feather/xCircle';
-import { Transition, Spring } from 'react-spring';
+import { config, Spring } from 'react-spring';
+
+import TextInput from '../TextInput';
 
 // Note: Async validation not working.
 //       Would be great to allow an async tokenValidator function.
 
-class TokenInputField extends Component {
+class TokenInputField extends PureComponent {
   static defaultProps = {
     oneTimeDisplay: true, // if true only displayed on next enter will clear the field
+    hideDuringTyping: true, // todo need to save both in token weakmap
     value: '',
     onChange: token => {},
     onBlur: () => {},
-    tokenValidator: token => token, // we're checking only if it's not '' but with this we could modify validation
+    tokenValidator: token => token, // we're checking only if it's not '' but with a backend we could check if it's a valid token
   };
 
   state = {
-    focused: false,
+    focused: true,
     untouched: true,
   };
 
@@ -45,8 +48,8 @@ class TokenInputField extends Component {
   valid = false;
   REPLACEMENT_CHAR = '\u2022';
 
-  updateToken = () => {
-    const tokenVal = this.tokenInput.value;
+  updateToken = evt => {
+    const tokenVal = evt.target.value;
     this.setToken(tokenVal);
     this.props.onChange(tokenVal);
   };
@@ -55,7 +58,7 @@ class TokenInputField extends Component {
     const { focused } = this.state;
     const token = this.getToken();
 
-    return focused
+    return focused // && !hideDuringTyping
       ? token
       : token
           .split('')
@@ -108,34 +111,22 @@ class TokenInputField extends Component {
     const valid = this.props.tokenValidator(token);
     return (
       <Wrapper>
-        {/* <pre>
-          Debug of input:
-          {JSON.stringify(this.state, null, 2)}
-          {'\n'}
-          Token: {this.getToken()}
-        </pre> */}
-        <Transition
-          items={showInput}
-          from={{ width: 0 }}
-          enter={{ width: 1.0 }}
-          leave={{ width: 0 }}
-        >
-          {toggle => props =>
-            toggle && (
-              <Input
-                width={props.width}
-                onFocus={this.focus}
-                onBlur={this.blur}
-                ref={ref => (this.tokenInput = ref)}
-                value={this.displayedValue()}
-                onChange={this.updateToken}
-                autoFocus
-              />
-            )}
-        </Transition>
-
+        {showInput && (
+          <TextInput
+            isFocused={focused}
+            onFocus={this.focus}
+            onBlur={this.blur}
+            value={this.displayedValue()}
+            onChange={this.updateToken}
+            autoFocus
+          />
+        )}
         {showValidation && (
-          <Spring from={{ opacity: 0 }} to={{ opacity: 1 }} delay={700}>
+          <Spring
+            from={{ opacity: 0 }}
+            to={{ opacity: 1 }}
+            config={config.slow}
+          >
             {({ opacity }) => this.renderIcon(token, valid, opacity)}
           </Spring>
         )}
@@ -144,35 +135,16 @@ class TokenInputField extends Component {
   }
 }
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 160px;
-`;
-
-const Input = styled.input.attrs({
-  style: ({ width }) => ({
-    width: `${width * 100}%`,
-  }),
-})`
-  border: 0;
-  outline: none;
-  padding: 6px 0;
-  border-bottom: 3px solid #aaa;
-  :focus {
-    border-color: blue;
-  }
-`;
+const Wrapper = styled.div``;
 
 const ValidationIcon = styled(IconBase).attrs({
   style: ({ valid, opacity }) => ({
     color: valid ? 'green' : 'red',
     opacity,
   }),
 })`
-  flex-direction: row;
   cursor: pointer;
-  width: 32px;
+  height: 47px;
 `;
 
 export default TokenInputField;