make carroussel go arround; fix placeholders (codesandbox#1607)

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.js

@@ -73,6 +73,9 @@ class CollectionInfo extends React.Component {
 
   render() {
     const { sandbox, isLoggedIn, signals } = this.props;
+    const { nameValue, updatingName } = this.state;
+
+    const value = nameValue !== 'Untitled' && updatingName ? nameValue : '';
 
     const folderName = sandbox.collection
       ? basename(sandbox.collection.path) ||
@@ -85,7 +88,7 @@ class CollectionInfo extends React.Component {
           opacity: 1,
         }}
         to={
-          this.state.updatingName
+          updatingName
             ? {
                 opacity: 0,
                 pointerEvents: 'none',
@@ -125,7 +128,7 @@ class CollectionInfo extends React.Component {
                     </div>
                   )}
                 />
-                {this.state.updatingName ? (
+                {updatingName ? (
                   <form
                     css={{
                       position: 'absolute',
@@ -147,7 +150,8 @@ class CollectionInfo extends React.Component {
                       onKeyUp={this.handleKeyUp}
                       onBlur={this.handleBlur}
                       onChange={this.handleInputUpdate}
-                      value={this.state.nameValue}
+                      placeholder={nameValue}
+                      value={value}
                     />
                   </form>
                 ) : (

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.js

@@ -127,13 +127,12 @@ function EditorSettings({ store, signals }) {
                 {'"'} as your color theme.
               </SubDescription>
 
-              <PreferenceText
-                isTextArea
-                style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
-                block
-                rows={7}
-                defaultValue={`You can use your own theme from VSCode directly:
-
+            <PreferenceText
+              isTextArea
+              style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
+              block
+              rows={7}
+              placeholder={`You can use your own theme from VSCode directly:
 1. Open VSCode
 2. Press (CMD or CTRL) + SHIFT + P
 3. Enter: '> Developer: Generate Color Scheme From Current Settings'
@@ -165,7 +164,7 @@ function EditorSettings({ store, signals }) {
                 style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
                 block
                 rows={7}
-                defaultValue={`You can use your own theme from VSCode directly:
+                placeholder={`You can use your own theme from VSCode directly:
 1. Open VSCode
 2. Press (CMD or CTRL) + SHIFT + P
 3. Enter: '> Developer: Generate Color Scheme From Current Settings'

packages/homepage/src/pages/explore.js

@@ -107,26 +107,29 @@ export default class Explore extends React.PureComponent {
   };
 
   navigateToNextSandbox = () => {
-    this.setState(state => ({
-      featuredSandboxIndex: state.featuredSandboxIndex + 1,
-    }));
+    const next = this.state.featuredSandboxIndex + 1;
+    // if last go to first
+    this.setState({
+      featuredSandboxIndex: next === featuredSandboxes.length ? 0 : next,
+    });
   };
 
   navigateToPreviousSandbox = () => {
-    this.setState(state => ({
-      featuredSandboxIndex: state.featuredSandboxIndex - 1,
-    }));
+    const index = this.state.featuredSandboxIndex;
+
+    // if first go to last
+    this.setState({
+      featuredSandboxIndex:
+        index === 0 ? featuredSandboxes.length - 1 : index - 1,
+    });
   };
 
   handleKeyPress = ({ keyCode }) => {
-    const { featuredSandboxIndex } = this.state;
     switch (keyCode) {
       case ARROW_LEFT:
-        if (featuredSandboxIndex === 0) return;
         this.navigateToPreviousSandbox();
         break;
       case ARROW_RIGHT:
-        if (featuredSandboxIndex === featuredSandboxes.length - 1) return;
         this.navigateToNextSandbox();
         break;
       default: